@hyperframes/studio 0.7.39 → 0.7.41

package/src/hooks/gsapRuntimeKeyframes.test.ts

@@ -176,6 +176,40 @@ describe("hasNonHoldTweenForElement — strict live-tween existence (drag stale-
   });
 });
 
+describe("hasNonHoldTweenForElement — channel-scoped (position vs sibling rotation)", () => {
+  const el = { id: "puck-c" };
+  const rotationTween = {
+    targets: () => [el],
+    vars: { keyframes: { "0%": { rotation: 0 }, "100%": { rotation: 90 } }, duration: 1 },
+    duration: () => 1,
+    startTime: () => 0,
+  };
+  const positionTween = {
+    targets: () => [el],
+    vars: { keyframes: { "0%": { x: 0, y: 0 }, "100%": { x: 100, y: 40 } }, duration: 1 },
+    duration: () => 1,
+    startTime: () => 0,
+  };
+
+  it("unfiltered: a rotation-only keyframed tween counts as non-hold", () => {
+    expect(hasNonHoldTweenForElement(fakeIframe(el, [rotationTween]), "#puck-c")).toBe(true);
+  });
+
+  it("position-scoped: a sibling rotation-only tween is NOT a live position tween", () => {
+    // The primary fix: a keyframed rotation must not route a static position hold
+    // into the keyframe branch. Scoping to position channels returns false here.
+    expect(
+      hasNonHoldTweenForElement(fakeIframe(el, [rotationTween]), "#puck-c", undefined, ["x", "y"]),
+    ).toBe(false);
+  });
+
+  it("position-scoped: a real keyframed position tween still counts", () => {
+    expect(
+      hasNonHoldTweenForElement(fakeIframe(el, [positionTween]), "#puck-c", undefined, ["x", "y"]),
+    ).toBe(true);
+  });
+});
+
 describe("arcPathFromMotionPathValue", () => {
   it("builds arc config from object form { path, curviness }", () => {
     const arc = arcPathFromMotionPathValue({

package/src/hooks/gsapRuntimeKeyframes.ts

@@ -237,6 +237,7 @@ export function resolveRuntimeTween(
   kind: "keyframe" | "set",
   compositionId?: string,
   channels?: string[],
+  // fallow-ignore-next-line code-duplication
 ): ResolvedRuntimeTween | null {
   const timelines = timelinesOf(iframe);
   if (!timelines) return null;
@@ -261,6 +262,7 @@ export function resolveRuntimeTween(
   const wantChannels = channels && channels.length > 0 ? channels : null;
 
   let first: ResolvedRuntimeTween | null = null;
+  // fallow-ignore-next-line code-duplication
   let channelMatch: ResolvedRuntimeTween | null = null;
   for (const tlId of tlIds) {
     const timeline = timelines[tlId];
@@ -316,6 +318,7 @@ export function readRuntimeKeyframes(
   selector: string,
   compositionId?: string,
   requireChannels?: string[],
+  // fallow-ignore-next-line code-duplication
 ): ReadTween | null {
   const timelines = timelinesOf(iframe);
   if (!timelines) return null;
@@ -344,11 +347,13 @@ export function readRuntimeKeyframes(
   // (e.g. two non-overlapping gesture recordings → two separate `to()`s). The
   // overlay must draw the segment under the PLAYHEAD, not blindly the first one
   // — otherwise recording a second gesture leaves the path stuck on the first.
+  // fallow-ignore-next-line code-duplication
   let firstRead: ReadTween | null = null;
   for (const tlId of tlIds) {
     const timeline = timelines[tlId];
     if (!timeline?.getChildren) continue;
     const now = typeof timeline.time === "function" ? timeline.time() : null;
+    // fallow-ignore-next-line code-duplication
     for (const tween of timeline.getChildren(true)) {
       if (!tween.vars || !matchesElement(tween, targetEl)) continue;
       const dur = typeof tween.duration === "function" ? tween.duration() : 0;
@@ -377,12 +382,17 @@ export function readRuntimeKeyframes(
  * The drag's stale-parse guard needs this exact distinction — after a delete-all
  * only a hold may remain, and resurrecting the deleted tween from the stale parse
  * must be avoided.
+ * When `channels` is provided, only tweens carrying one of those keyframe
+ * properties count as non-hold motion (e.g. position channels), so a sibling
+ * rotation/scale tween doesn't make a static position hold enter the keyframe
+ * branch.
  */
 // fallow-ignore-next-line complexity
 export function hasNonHoldTweenForElement(
   iframe: HTMLIFrameElement | null,
   selector: string,
   compositionId?: string,
+  channels?: string[],
 ): boolean {
   const timelines = timelinesOf(iframe);
   if (!timelines) return false;
@@ -401,11 +411,13 @@ export function hasNonHoldTweenForElement(
   }
   if (!targetEl) return false;
 
+  // fallow-ignore-next-line code-duplication
   for (const tween of timeline.getChildren(true)) {
     if (!tween.vars || !matchesElement(tween, targetEl)) continue;
     const dur = typeof tween.duration === "function" ? tween.duration() : 0;
     if (isZeroDurationSet(dur)) continue; // skip hold/set tweens (see isZeroDurationSet)
-    if (readTween(tween.vars)) return true;
+    const read = readTween(tween.vars);
+    if (read && (!channels || readCarriesChannel(read, channels))) return true;
   }
   return false;
 }

package/src/hooks/gsapWholePropertyOffsetCommit.ts

@@ -29,6 +29,7 @@ export async function commitWholePropertyOffset(
   callbacks: GsapDragCommitCallbacks,
   label: string,
 ): Promise<void> {
+  // fallow-ignore-next-line code-duplication
   let effectiveAnim = anim;
   if (anim.keyframes) {
     const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);

package/src/hooks/timelineEditingHelpers.ts

@@ -41,19 +41,30 @@ export type PatchTarget = NonNullable<ReturnType<typeof buildPatchTarget>>;
 // The runtime re-reads data-start/data-duration from the DOM on each sync tick
 // (packages/core/src/runtime/init.ts:1324-1368), so attribute mutations here are
 // picked up automatically on the next frame without a rebind call.
-export function patchIframeDomTiming(
+export function findTimelineElementInIframe(
   iframe: HTMLIFrameElement | null,
   element: TimelineElement,
-  attrs: Array<[string, string]>,
-): void {
+): Element | null {
   try {
     const doc = iframe?.contentDocument;
-    if (!doc) return;
-    const el = element.domId
+    if (!doc) return null;
+    return element.domId
       ? doc.getElementById(element.domId)
       : element.selector
         ? (doc.querySelectorAll(element.selector)[element.selectorIndex ?? 0] ?? null)
         : null;
+  } catch {
+    return null;
+  }
+}
+
+export function patchIframeDomTiming(
+  iframe: HTMLIFrameElement | null,
+  element: TimelineElement,
+  attrs: Array<[string, string]>,
+): void {
+  try {
+    const el = findTimelineElementInIframe(iframe, element);
     if (!el) return;
     for (const [name, value] of attrs) el.setAttribute(name, value);
   } catch {
@@ -61,6 +72,7 @@ export function patchIframeDomTiming(
   }
 }
 
+// fallow-ignore-next-line complexity
 export function resolveResizePlaybackStart(
   original: string,
   target: PatchTarget,

package/src/hooks/timelineTrackVisibility.test.ts

@@ -0,0 +1,202 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePlayerStore, type TimelineElement } from "../player";
+import { toggleTimelineElementHidden, toggleTimelineTrackHidden } from "./timelineTrackVisibility";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.unstubAllGlobals();
+  usePlayerStore.getState().reset();
+});
+
+function element(overrides: Partial<TimelineElement>): TimelineElement {
+  return {
+    id: "clip",
+    tag: "div",
+    start: 0,
+    duration: 2,
+    track: 0,
+    ...overrides,
+  };
+}
+
+function stubProjectFiles(files: Map<string, string>) {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      const encodedPath = url.slice(url.lastIndexOf("/") + 1);
+      const path = decodeURIComponent(encodedPath);
+      const content = files.get(path);
+      return new Response(JSON.stringify({ content }), {
+        status: content === undefined ? 404 : 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    }),
+  );
+}
+
+describe("toggleTimelineTrackHidden", () => {
+  it("patches iframe DOM and persists all track elements as one edit-history entry", async () => {
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    if (iframe.contentDocument) {
+      iframe.contentDocument.body.innerHTML = `
+        <div id="hero"></div>
+        <div id="subtitle"></div>
+      `;
+    }
+
+    const files = new Map([
+      [
+        "index.html",
+        `<div id="hero" data-start="0" data-duration="2"></div>
+<div id="skip" data-start="0" data-duration="2"></div>`,
+      ],
+      ["scene.html", `<div id="subtitle" data-start="1" data-duration="2"></div>`],
+    ]);
+    stubProjectFiles(files);
+
+    const writes = new Map<string, string>();
+    const recordEdit = vi.fn();
+    const timestampRef = { current: 0 };
+    const pendingRef = { current: new Set<string>() };
+
+    await toggleTimelineTrackHidden({
+      projectId: "project-1",
+      activeCompPath: "index.html",
+      timelineElements: [
+        element({ id: "hero", domId: "hero", track: 0 }),
+        element({ id: "skip", domId: "skip", track: 1 }),
+        element({ id: "subtitle", domId: "subtitle", track: 0, sourceFile: "scene.html" }),
+      ],
+      track: 0,
+      hidden: true,
+      previewIframe: iframe,
+      writeProjectFile: async (path, content) => {
+        writes.set(path, content);
+      },
+      recordEdit,
+      domEditSaveTimestampRef: timestampRef,
+      pendingTimelineEditPathRef: pendingRef,
+    });
+
+    expect(iframe.contentDocument?.getElementById("hero")?.hasAttribute("data-hidden")).toBe(true);
+    expect(iframe.contentDocument?.getElementById("subtitle")?.hasAttribute("data-hidden")).toBe(
+      true,
+    );
+    expect(writes.get("index.html")).toContain('id="hero" data-start="0" data-duration="2"');
+    expect(writes.get("index.html")).toContain('data-hidden=""');
+    expect(writes.get("index.html")).toContain('id="skip" data-start="0" data-duration="2"');
+    expect(writes.get("scene.html")).toContain('data-hidden=""');
+    expect(pendingRef.current).toEqual(new Set(["index.html", "scene.html"]));
+    expect(timestampRef.current).toBeGreaterThan(0);
+    expect(recordEdit).toHaveBeenCalledTimes(1);
+    expect(recordEdit.mock.calls[0]?.[0]?.label).toBe("Hide track 0");
+    expect(Object.keys(recordEdit.mock.calls[0]?.[0]?.files ?? {}).sort()).toEqual([
+      "index.html",
+      "scene.html",
+    ]);
+  });
+
+  it("removes data-hidden from every element on the track", async () => {
+    const files = new Map([
+      [
+        "index.html",
+        `<div id="hero" data-start="0" data-duration="2" data-hidden=""></div>
+<div id="caption" data-start="2" data-duration="2" data-hidden=""></div>`,
+      ],
+    ]);
+    stubProjectFiles(files);
+
+    const writes = new Map<string, string>();
+
+    await toggleTimelineTrackHidden({
+      projectId: "project-1",
+      activeCompPath: "index.html",
+      timelineElements: [
+        element({ id: "hero", domId: "hero", track: 0, hidden: true }),
+        element({ id: "caption", domId: "caption", track: 0, hidden: true }),
+      ],
+      track: 0,
+      hidden: false,
+      previewIframe: null,
+      writeProjectFile: async (path, content) => {
+        writes.set(path, content);
+      },
+      recordEdit: vi.fn(),
+      domEditSaveTimestampRef: { current: 0 },
+      pendingTimelineEditPathRef: { current: new Set() },
+    });
+
+    expect(writes.get("index.html")).not.toContain("data-hidden");
+  });
+});
+
+describe("toggleTimelineElementHidden", () => {
+  it("persists data-hidden for only the selected element and updates the player store", async () => {
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    const seek = vi.fn();
+    const win = iframe.contentWindow;
+    if (!win) throw new Error("Expected iframe contentWindow");
+    const playerWindow: Window & { __player?: { seek?: (time: number) => void } } = win;
+    playerWindow.__player = { seek };
+
+    const files = new Map([
+      [
+        "index.html",
+        `<div id="hero" data-start="0" data-duration="2"></div>
+<div id="track-mate" data-start="1" data-duration="2"></div>`,
+      ],
+    ]);
+    stubProjectFiles(files);
+
+    const hero = element({ id: "hero", key: "index.html:#hero", domId: "hero", track: 0 });
+    const trackMate = element({
+      id: "track-mate",
+      key: "index.html:#track-mate",
+      domId: "track-mate",
+      track: 0,
+    });
+    usePlayerStore.getState().setElements([hero, trackMate]);
+    usePlayerStore.getState().setCurrentTime(1.25);
+
+    const writes = new Map<string, string>();
+    const recordEdit = vi.fn();
+
+    const changedPaths = await toggleTimelineElementHidden({
+      projectId: "project-1",
+      activeCompPath: "index.html",
+      timelineElements: [hero, trackMate],
+      elementKey: "index.html:#hero",
+      hidden: true,
+      previewIframe: iframe,
+      writeProjectFile: async (path, content) => {
+        writes.set(path, content);
+      },
+      recordEdit,
+      domEditSaveTimestampRef: { current: 0 },
+      pendingTimelineEditPathRef: { current: new Set() },
+    });
+
+    expect(changedPaths).toEqual(["index.html"]);
+    expect(writes.get("index.html")).toContain('id="hero" data-start="0" data-duration="2"');
+    expect(writes.get("index.html")).toContain(
+      'id="hero" data-start="0" data-duration="2" data-hidden=""',
+    );
+    expect(writes.get("index.html")).toContain(
+      'id="track-mate" data-start="1" data-duration="2"></div>',
+    );
+    expect(recordEdit).toHaveBeenCalledTimes(1);
+    expect(recordEdit.mock.calls[0]?.[0]?.label).toBe("Hide element");
+    expect(seek).toHaveBeenCalledWith(1.25);
+    expect(
+      usePlayerStore.getState().elements.find((el) => el.key === "index.html:#hero")?.hidden,
+    ).toBe(true);
+    expect(
+      usePlayerStore.getState().elements.find((el) => el.key === "index.html:#track-mate")?.hidden,
+    ).toBeUndefined();
+  });
+});