@hyperframes/studio 0.5.5 → 0.6.0-alpha.1

package/src/components/editor/studioMotion.test.ts

@@ -0,0 +1,355 @@
+import { describe, expect, it } from "vitest";
+import { Window } from "happy-dom";
+import type { DomEditSelection } from "./domEditing";
+import {
+  STUDIO_MOTION_TIMELINE_ID,
+  applyStudioMotionManifest,
+  buildStudioGsapPresetMotion,
+  clampStudioCustomEasePoints,
+  controlPointsForGsapEase,
+  emptyStudioMotionManifest,
+  getStudioMotionForSelection,
+  isStudioMotionManifestPath,
+  parseStudioCustomEaseData,
+  parseStudioMotionManifest,
+  removeStudioMotionForSelection,
+  serializeStudioCustomEaseData,
+  serializeStudioMotionManifest,
+  upsertStudioGsapMotion,
+} from "./studioMotion";
+
+function createSelection(): DomEditSelection {
+  return {
+    element: {} as HTMLElement,
+    id: "card",
+    selector: "#card",
+    selectorIndex: undefined,
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    compositionSrc: undefined,
+    isCompositionHost: false,
+    label: "Card",
+    tagName: "div",
+    boundingBox: { x: 0, y: 0, width: 100, height: 100 },
+    textContent: null,
+    dataAttributes: {},
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canMove: false,
+      canResize: false,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+  };
+}
+
+function createDocument(markup: string): Document {
+  const window = new Window();
+  window.document.body.innerHTML = markup;
+  return window.document;
+}
+
+function installFakeGsap(window: Window): {
+  fromToCalls: Array<{
+    target: HTMLElement;
+    from: Record<string, unknown>;
+    to: Record<string, unknown>;
+    at: number;
+  }>;
+  timeCalls: number[];
+  customEaseCalls: Array<{ id: string; data: string }>;
+  killCalls: number;
+} {
+  const state = {
+    fromToCalls: [] as Array<{
+      target: HTMLElement;
+      from: Record<string, unknown>;
+      to: Record<string, unknown>;
+      at: number;
+    }>,
+    timeCalls: [] as number[],
+    customEaseCalls: [] as Array<{ id: string; data: string }>,
+    killCalls: 0,
+  };
+  const timeline = {
+    fromTo(
+      target: HTMLElement,
+      from: Record<string, unknown>,
+      to: Record<string, unknown>,
+      at: number,
+    ) {
+      state.fromToCalls.push({ target, from, to, at });
+      return timeline;
+    },
+    time(value: number) {
+      state.timeCalls.push(value);
+      return timeline;
+    },
+    pause() {
+      return timeline;
+    },
+    kill() {
+      state.killCalls += 1;
+    },
+    duration() {
+      return 3;
+    },
+  };
+  (
+    window as unknown as {
+      gsap: {
+        timeline: () => typeof timeline;
+        set: (target: HTMLElement, vars: Record<string, unknown>) => void;
+      };
+      CustomEase: { create: (id: string, data: string) => void };
+      __timelines?: Record<string, unknown>;
+    }
+  ).gsap = {
+    timeline: () => timeline,
+    set(target, vars) {
+      if (vars.clearProps === "transform,opacity,visibility") {
+        target.style.removeProperty("transform");
+        target.style.removeProperty("opacity");
+        target.style.removeProperty("visibility");
+      }
+    },
+  };
+  (
+    window as unknown as {
+      CustomEase: { create: (id: string, data: string) => void };
+    }
+  ).CustomEase = {
+    create(id, data) {
+      state.customEaseCalls.push({ id, data });
+    },
+  };
+  return state;
+}
+
+describe("studio motion manifest", () => {
+  it("round-trips draggable GSAP CustomEase control points", () => {
+    const points = parseStudioCustomEaseData("M0,0 C0.18,0.9 0.32,1.2 1,1");
+
+    expect(points).toEqual({ x1: 0.18, y1: 0.9, x2: 0.32, y2: 1.2 });
+    expect(serializeStudioCustomEaseData(points!)).toBe("M0,0 C0.18,0.9 0.32,1.2 1,1");
+    expect(parseStudioCustomEaseData("cubic-bezier(0.1, 0.2, 0.3, 1)")).toBeNull();
+  });
+
+  it("clamps custom ease handles to a safe GSAP range and exposes preset previews", () => {
+    expect(
+      clampStudioCustomEasePoints({
+        x1: -2,
+        y1: -2,
+        x2: 2,
+        y2: 3,
+      }),
+    ).toEqual({ x1: 0, y1: -0.6, x2: 1, y2: 1.6 });
+    expect(controlPointsForGsapEase("power3.out")).toEqual({
+      x1: 0.165,
+      y1: 0.84,
+      x2: 0.44,
+      y2: 1,
+    });
+  });
+
+  it("creates preset GSAP motions with deterministic from/to lanes", () => {
+    expect(
+      buildStudioGsapPresetMotion("fade-up", {
+        start: 0.2,
+        duration: 0.9,
+        distance: 44,
+        ease: "power3.out",
+      }),
+    ).toMatchObject({
+      start: 0.2,
+      duration: 0.9,
+      ease: "power3.out",
+      from: { y: 44, autoAlpha: 0 },
+      to: { y: 0, autoAlpha: 1 },
+    });
+    expect(
+      buildStudioGsapPresetMotion("slide", {
+        start: 0,
+        duration: 0.7,
+        distance: 60,
+        direction: "right",
+        ease: "back.out(1.4)",
+      }),
+    ).toMatchObject({
+      from: { x: -60, autoAlpha: 0 },
+      to: { x: 0, autoAlpha: 1 },
+    });
+    expect(
+      buildStudioGsapPresetMotion("pop", {
+        start: 0,
+        duration: 0.5,
+        distance: 30,
+        ease: "elastic.out(1, 0.45)",
+      }),
+    ).toMatchObject({
+      from: { scale: 0.88, autoAlpha: 0 },
+      to: { scale: 1, autoAlpha: 1 },
+    });
+  });
+
+  it("upserts and serializes GSAP motion by stable target", () => {
+    const selection = createSelection();
+    const manifest = upsertStudioGsapMotion(emptyStudioMotionManifest(), selection, {
+      start: 0.25,
+      duration: 0.8,
+      ease: "power3.out",
+      from: { x: 0, y: 44, scale: 1, autoAlpha: 0 },
+      to: { x: 0, y: 0, scale: 1, autoAlpha: 1 },
+    });
+    const updated = upsertStudioGsapMotion(manifest, selection, {
+      start: 0.5,
+      duration: 1.2,
+      ease: "back.out(1.7)",
+      from: { x: -20, y: 0, scale: 0.92, autoAlpha: 0 },
+      to: { x: 0, y: 0, scale: 1, autoAlpha: 1 },
+    });
+
+    expect(updated.motions).toHaveLength(1);
+    expect(updated.motions[0]).toMatchObject({
+      kind: "gsap-motion",
+      target: { sourceFile: "index.html", selector: "#card", id: "card" },
+      start: 0.5,
+      duration: 1.2,
+      ease: "back.out(1.7)",
+      from: { x: -20, y: 0, scale: 0.92, autoAlpha: 0 },
+      to: { x: 0, y: 0, scale: 1, autoAlpha: 1 },
+    });
+    expect(parseStudioMotionManifest(serializeStudioMotionManifest(updated))).toEqual(updated);
+    expect(getStudioMotionForSelection(updated, selection)?.duration).toBe(1.2);
+  });
+
+  it("rejects malformed motions without throwing and removes selected motion", () => {
+    const parsed = parseStudioMotionManifest(`{
+      "motions": [
+        { "kind": "gsap-motion", "target": { "sourceFile": "index.html", "id": "card" }, "start": 0, "duration": 0 },
+        { "kind": "gsap-motion", "target": { "sourceFile": "index.html", "id": "card" }, "start": 0, "duration": 1, "ease": "power2.out", "from": { "x": 0 }, "to": { "x": 20 } }
+      ]
+    }`);
+
+    expect(parsed.motions).toHaveLength(1);
+    expect(removeStudioMotionForSelection(parsed, createSelection()).motions).toEqual([]);
+    expect(isStudioMotionManifestPath(".hyperframes/studio-motion.json")).toBe(true);
+    expect(isStudioMotionManifestPath("index.html")).toBe(false);
+  });
+
+  it("builds a paused GSAP timeline, registers it, and restores Studio-owned props on rebuild", () => {
+    const document = createDocument(
+      '<div id="card" style="transform: rotate(5deg); opacity: 0.8"></div>',
+    );
+    const win = document.defaultView;
+    if (!win) throw new Error("window fixture missing");
+    const gsapState = installFakeGsap(win as Window);
+    const card = document.getElementById("card");
+    if (!(card instanceof win.HTMLElement)) throw new Error("card fixture missing");
+    const manifest = upsertStudioGsapMotion(emptyStudioMotionManifest(), createSelection(), {
+      start: 0.25,
+      duration: 0.8,
+      ease: "power3.out",
+      from: { x: 0, y: 44, scale: 1, autoAlpha: 0 },
+      to: { x: 0, y: 0, scale: 1, autoAlpha: 1 },
+    });
+
+    expect(applyStudioMotionManifest(document, manifest, "index.html", 0.4)).toBe(1);
+    expect(gsapState.fromToCalls[0]).toMatchObject({
+      target: card,
+      from: { x: 0, y: 44, scale: 1, autoAlpha: 0 },
+      to: { x: 0, y: 0, scale: 1, autoAlpha: 1, duration: 0.8, ease: "power3.out" },
+      at: 0.25,
+    });
+    expect(gsapState.timeCalls).toContain(0.4);
+    expect(
+      (win as unknown as { __timelines?: Record<string, unknown> }).__timelines?.[
+        STUDIO_MOTION_TIMELINE_ID
+      ],
+    ).toBeTruthy();
+
+    card.style.setProperty("transform", "matrix(1, 0, 0, 1, 10, 20)");
+    card.style.setProperty("opacity", "0.1");
+    expect(applyStudioMotionManifest(document, emptyStudioMotionManifest(), "index.html", 0)).toBe(
+      0,
+    );
+    expect(gsapState.killCalls).toBe(1);
+    expect(card.style.getPropertyValue("transform")).toBe("rotate(5deg)");
+    expect(card.style.getPropertyValue("opacity")).toBe("0.8");
+    expect(
+      (win as unknown as { __timelines?: Record<string, unknown> }).__timelines?.[
+        STUDIO_MOTION_TIMELINE_ID
+      ],
+    ).toBeUndefined();
+  });
+
+  it("rebuilds from the latest in-memory manifest when a second layer is added", () => {
+    const document = createDocument('<div id="card"></div><div id="badge"></div>');
+    const win = document.defaultView;
+    if (!win) throw new Error("window fixture missing");
+    const gsapState = installFakeGsap(win as Window);
+    const badgeSelection = {
+      ...createSelection(),
+      id: "badge",
+      selector: "#badge",
+      label: "Badge",
+    };
+    const firstManifest = upsertStudioGsapMotion(emptyStudioMotionManifest(), createSelection(), {
+      start: 0,
+      duration: 0.6,
+      ease: "power3.out",
+      from: { y: 32, autoAlpha: 0 },
+      to: { y: 0, autoAlpha: 1 },
+    });
+    const nextManifest = upsertStudioGsapMotion(firstManifest, badgeSelection, {
+      start: 0,
+      duration: 0.6,
+      ease: "power3.out",
+      customEase: {
+        id: "studio-badge-ease",
+        data: "M0,0 C0.2,0.9 0.28,1 1,1",
+      },
+      from: { x: -32, autoAlpha: 0 },
+      to: { x: 0, autoAlpha: 1 },
+    });
+
+    expect(applyStudioMotionManifest(document, firstManifest, "index.html", 0.3)).toBe(1);
+    expect(applyStudioMotionManifest(document, nextManifest, "index.html", 0.3)).toBe(2);
+    expect(gsapState.fromToCalls.at(-2)?.target.id).toBe("card");
+    expect(gsapState.fromToCalls.at(-1)).toMatchObject({
+      target: document.getElementById("badge"),
+      from: { x: -32, autoAlpha: 0 },
+      to: { x: 0, autoAlpha: 1, duration: 0.6, ease: "studio-badge-ease" },
+      at: 0,
+    });
+  });
+
+  it("registers CustomEase data when the selected GSAP plugin is available", () => {
+    const document = createDocument('<div id="card"></div>');
+    const win = document.defaultView;
+    if (!win) throw new Error("window fixture missing");
+    const gsapState = installFakeGsap(win as Window);
+    const manifest = upsertStudioGsapMotion(emptyStudioMotionManifest(), createSelection(), {
+      start: 0,
+      duration: 1,
+      ease: "studio-card-bounce",
+      customEase: {
+        id: "studio-card-bounce",
+        data: "M0,0 C0.18,0.9 0.32,1 1,1",
+      },
+      from: { y: 44 },
+      to: { y: 0 },
+    });
+
+    expect(applyStudioMotionManifest(document, manifest, "index.html", 0)).toBe(1);
+    expect(gsapState.customEaseCalls).toEqual([
+      { id: "studio-card-bounce", data: "M0,0 C0.18,0.9 0.32,1 1,1" },
+    ]);
+    expect(gsapState.fromToCalls[0]?.to.ease).toBe("studio-card-bounce");
+  });
+});