@hyperframes/studio 0.8.114 → 0.8.116

package/src/hooks/useGsapAwareEditing.groupPlan.test.tsx

@@ -0,0 +1,160 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import type { DomEditGroupPathOffsetCommit } from "../components/editor/domEditOverlayGestures";
+import { usePlayerStore } from "../player/store/playerStore";
+import { trackStudioEditBlocked } from "../utils/studioSaveDiagnostics";
+import { GSAP_EDIT_BLOCK_COPY } from "./gsapEditOutcome";
+import { mountGsapAwareEditing } from "./useGsapAwareEditing.testHelpers";
+
+vi.mock("../utils/studioSaveDiagnostics", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../utils/studioSaveDiagnostics")>()),
+  trackStudioEditBlocked: vi.fn(),
+  trackStudioSaveFailure: vi.fn(),
+}));
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+beforeEach(() => {
+  usePlayerStore.setState({ autoKeyframeEnabled: true, currentTime: 1, activeKeyframePct: null });
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+  document.body.innerHTML = "";
+  Reflect.deleteProperty(window, "__timelines");
+});
+
+const positionTween = (id: string, extra: Partial<GsapAnimation> = {}) =>
+  ({
+    id: `#${id}-to-0-position`,
+    targetSelector: `#${id}`,
+    propertyGroup: "position",
+    method: "to",
+    properties: { x: 100 },
+    position: 0,
+    resolvedStart: 0,
+    duration: 2,
+    ease: "none",
+    ...extra,
+  }) as unknown as GsapAnimation;
+
+/** Three members GSAP is visibly moving, one `to` tween each in the file. */
+function mountGroup(animations: GsapAnimation[]) {
+  const elements = ["a", "b", "c"].map((id) => {
+    const el = Object.assign(document.createElement("div"), { id });
+    document.body.append(el);
+    return el;
+  });
+  const live = elements.map((el) => ({
+    targets: () => [el],
+    vars: { x: 100, duration: 2 },
+    duration: () => 2,
+    startTime: () => 0,
+  }));
+  const timelines = { root: { getChildren: () => live, duration: () => 2 } };
+  Reflect.set(window, "__timelines", timelines);
+  const iframe = {
+    contentWindow: { gsap: { getProperty: () => 0, set: vi.fn() }, __timelines: timelines },
+    contentDocument: document,
+  } as unknown as HTMLIFrameElement;
+  const commitMutation = Object.assign(vi.fn().mockResolvedValue(undefined), {
+    batch: vi.fn().mockResolvedValue(undefined),
+  });
+  const showToast = vi.fn();
+  const stageElementPositionOffset = vi.fn(() => ({ save: vi.fn(), rollback: vi.fn() }));
+  const { editing, root } = mountGsapAwareEditing({
+    gsapCommitMutation: commitMutation,
+    activeCompPath: "index.html",
+    previewIframeRef: { current: iframe },
+    showToast,
+    makeFetchFallback: () => async () => animations,
+    stageElementPositionOffset,
+  });
+  const groupCommit = (updates: DomEditGroupPathOffsetCommit[]) =>
+    editing().handleGsapAwareGroupPathOffsetCommit(updates);
+  const updates = elements.map((element) => ({
+    selection: {
+      element,
+      id: element.id,
+      selector: `#${element.id}`,
+    } as unknown as DomEditSelection,
+    next: { x: 30, y: 0 },
+  }));
+  const written = () => [
+    ...commitMutation.mock.calls.map((call) => call[1]),
+    ...commitMutation.batch.mock.calls.flatMap(([calls]) =>
+      calls.map((c: { mutation: unknown }) => c.mutation),
+    ),
+  ];
+  return { elements, iframe, updates, groupCommit, commitMutation, written, showToast, root };
+}
+
+describe("a group drag plans every member before its first write", () => {
+  it("refuses the whole group when one member's tween cannot take a keyframe", async () => {
+    const h = mountGroup([
+      positionTween("a"),
+      positionTween("b", { ease: undefined }),
+      positionTween("c"),
+    ]);
+    const styles = h.elements.map((el) => el.getAttribute("style"));
+
+    await expect(h.groupCommit(h.updates)).rejects.toMatchObject({
+      name: "GsapEditBlockedError",
+      reason: "keyframes-uneditable",
+      detail: "unknown-ease",
+    });
+
+    expect(h.written()).toEqual([]);
+    expect(h.commitMutation.batch).not.toHaveBeenCalled();
+    const gsap = (h.iframe.contentWindow as unknown as { gsap: { set: unknown } }).gsap;
+    expect(gsap.set).not.toHaveBeenCalled();
+    expect(h.elements.map((el) => el.getAttribute("style"))).toEqual(styles);
+    expect(h.showToast).toHaveBeenCalledTimes(1);
+    expect(h.showToast).toHaveBeenCalledWith(GSAP_EDIT_BLOCK_COPY["keyframes-uneditable"], "error");
+    expect(trackStudioEditBlocked).toHaveBeenCalledTimes(1);
+    expect(trackStudioEditBlocked).toHaveBeenCalledWith(expect.objectContaining({ targetId: "b" }));
+    act(() => h.root.unmount());
+  });
+
+  it("refuses members animated in two files, since the batch writes one file", async () => {
+    const h = mountGroup(["a", "b", "c"].map((id) => positionTween(id)));
+    const updates = h.updates.map((u, i) => ({
+      ...u,
+      selection: { ...u.selection, sourceFile: i === 2 ? "scenes/intro.html" : "index.html" },
+    }));
+
+    await expect(h.groupCommit(updates)).rejects.toMatchObject({ reason: "mixed-files" });
+
+    expect(h.written()).toEqual([]);
+    expect(trackStudioEditBlocked).toHaveBeenCalledWith(expect.objectContaining({ targetId: "c" }));
+    act(() => h.root.unmount());
+  });
+
+  it("writes a group whose members name the open file or leave it implied", async () => {
+    const h = mountGroup(["a", "b", "c"].map((id) => positionTween(id)));
+    const updates = h.updates.map((u, i) => ({
+      ...u,
+      selection: { ...u.selection, sourceFile: i === 0 ? "" : "index.html" },
+    }));
+
+    await h.groupCommit(updates);
+
+    expect(h.written()).toHaveLength(3);
+    act(() => h.root.unmount());
+  });
+
+  it("writes every member when each plan holds", async () => {
+    const h = mountGroup(["a", "b", "c"].map((id) => positionTween(id)));
+
+    await h.groupCommit(h.updates);
+
+    const ids = h.written().map((m) => (m as { animationId?: string }).animationId);
+    expect(ids).toEqual(["#a-to-0-position", "#b-to-0-position", "#c-to-0-position"]);
+    expect(h.showToast).not.toHaveBeenCalled();
+    act(() => h.root.unmount());
+  });
+});

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -74,7 +74,7 @@ function mountResizeHandler(
         size: { width: number; height: number },
         offset?: { x: number; y: number },
         restore?: () => void,
-      ) => Promise<void>)
+      ) => Promise<void | import("../utils/previewFeatureUsage").GeometryCommitResult>)
     | null = null;
   let property: ReturnType<typeof useGsapAwareEditing>["commitAnimatedProperty"] | null = null;
   function Harness() {
@@ -119,25 +119,33 @@ function mountResizeHandler(
 type AwareEditingParams = Parameters<typeof useGsapAwareEditing>[0];
 
 function mountGroupHandler({
-  gsapCommitMutation,
-  makeFetchFallback,
+  gsapCommitMutation = vi.fn().mockResolvedValue(undefined),
+  makeFetchFallback = () => vi.fn().mockResolvedValue([]),
   trackGsapInteractionFailure = vi.fn(),
   stageElementPositionOffset = vi.fn(),
   handleDomRotationCommit = vi.fn(),
-}: Pick<AwareEditingParams, "gsapCommitMutation" | "makeFetchFallback"> &
-  Partial<
-    Pick<
-      AwareEditingParams,
-      "trackGsapInteractionFailure" | "stageElementPositionOffset" | "handleDomRotationCommit"
-    >
-  >) {
-  let groupCommit!: (updates: DomEditGroupPathOffsetCommit[]) => Promise<void>;
+}: Partial<
+  Pick<
+    AwareEditingParams,
+    | "gsapCommitMutation"
+    | "makeFetchFallback"
+    | "trackGsapInteractionFailure"
+    | "stageElementPositionOffset"
+    | "handleDomRotationCommit"
+  >
+> = {}) {
+  let groupCommit!: (
+    updates: DomEditGroupPathOffsetCommit[],
+  ) => Promise<void | import("../utils/previewFeatureUsage").GeometryCommitResult>;
   let pathOffsetCommit!: (
     selection: DomEditSelection,
     next: { x: number; y: number },
     route?: { plainTranslate?: boolean },
-  ) => Promise<void>;
-  let rotationCommit!: (selection: DomEditSelection, next: RotationCommit) => Promise<void>;
+  ) => Promise<void | import("../utils/previewFeatureUsage").GeometryCommitResult>;
+  let rotationCommit!: (
+    selection: DomEditSelection,
+    next: RotationCommit,
+  ) => Promise<void | import("../utils/previewFeatureUsage").GeometryCommitResult>;
   function Harness() {
     const editing = useGsapAwareEditing({
       domEditSelection: null,
@@ -211,8 +219,6 @@ describe("useGsapAwareEditing keeps the route a gesture chose at press", () => {
     const save = vi.fn().mockResolvedValue(undefined);
     const stageElementPositionOffset = vi.fn(() => ({ save, rollback: vi.fn() }));
     const { pathOffsetCommit, groupCommit, root } = mountGroupHandler({
-      gsapCommitMutation: vi.fn().mockResolvedValue(undefined),
-      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
       stageElementPositionOffset,
     });
     const box = {
@@ -231,11 +237,7 @@ describe("useGsapAwareEditing keeps the route a gesture chose at press", () => {
 describe("useGsapAwareEditing refuses a group GSAP took over before writing any member", () => {
   it("writes no member when one CSS-route member has been folded since the press", async () => {
     const stageElementPositionOffset = vi.fn(() => ({ save: vi.fn(), rollback: vi.fn() }));
-    const { groupCommit, root } = mountGroupHandler({
-      gsapCommitMutation: vi.fn().mockResolvedValue(undefined),
-      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
-      stageElementPositionOffset,
-    });
+    const { groupCommit, root } = mountGroupHandler({ stageElementPositionOffset });
     const card = {
       element: document.createElement("div"),
       id: "card",
@@ -263,7 +265,6 @@ describe("useGsapAwareEditing rotation routing", () => {
     const gsapCommitMutation = vi.fn();
     const h = mountGroupHandler({
       gsapCommitMutation,
-      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
       handleDomRotationCommit,
     });
     const box = { element, id: "box", selector: "#box" } as unknown as DomEditSelection;
@@ -327,7 +328,6 @@ describe("useGsapAwareEditing shared-tween moves", () => {
     const commitMutation = vi.fn();
     const { pathOffsetCommit, root } = mountGroupHandler({
       gsapCommitMutation: commitMutation,
-      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
       stageElementPositionOffset,
     });
     const word = { element: gsapPositioned("span"), hfId: "w0", selector: ".w" };
@@ -346,11 +346,7 @@ describe("useGsapAwareEditing shared-tween moves", () => {
     });
     const save = vi.fn().mockResolvedValue(undefined);
     const stageElementPositionOffset = vi.fn(() => ({ save, rollback: vi.fn() }));
-    const { groupCommit, root } = mountGroupHandler({
-      gsapCommitMutation: vi.fn().mockResolvedValue(undefined),
-      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
-      stageElementPositionOffset,
-    });
+    const { groupCommit, root } = mountGroupHandler({ stageElementPositionOffset });
     const word = { element: gsapPositioned("span"), hfId: "w0", selector: ".w" };
     const box = { element: gsapPositioned("div"), id: "box", selector: "#box" };
     const plain = { element: document.createElement("div"), id: "plain", selector: "#plain" };
@@ -401,6 +397,7 @@ describe("useGsapAwareEditing anchored resize", () => {
       null,
       expect.any(Function),
       expect.any(Function),
+      undefined,
     );
     act(() => h.root.unmount());
   });
@@ -589,7 +586,7 @@ describe("useGsapAwareEditing anchored resize", () => {
     h.selection.element.setAttribute("data-hf-drag-initial-offset-x", "0");
     h.selection.element.setAttribute("data-hf-drag-initial-offset-y", "0");
 
-    let commit!: Promise<void>;
+    let commit!: Promise<void | import("../utils/previewFeatureUsage").GeometryCommitResult>;
     act(() => {
       commit = h.resize(h.selection, { width: 300, height: 200 }, { x: -50.2, y: -25.6 });
     });
@@ -636,7 +633,7 @@ describe("useGsapAwareEditing anchored resize", () => {
           s: DomEditSelection,
           m: unknown,
           o: { coalesceKey?: string; label?: string; softReload?: boolean },
-        ) => Promise<void>,
+        ) => Promise<void | import("../utils/previewFeatureUsage").GeometryCommitResult>,
         _fetch: unknown,
         options?: { preflightOnly?: boolean },
       ) => {
@@ -653,7 +650,6 @@ describe("useGsapAwareEditing anchored resize", () => {
     );
     const { groupCommit, root } = mountGroupHandler({
       gsapCommitMutation: commitMutation,
-      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
     });
     const updates = [
       {
@@ -754,11 +750,7 @@ describe("useGsapAwareEditing anchored resize", () => {
     mocks.drag.mockImplementation(async (selection) => {
       throw selection.id === "a" ? failures[0] : failures[1];
     });
-    const { groupCommit, root } = mountGroupHandler({
-      gsapCommitMutation: vi.fn().mockResolvedValue(undefined),
-      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
-      trackGsapInteractionFailure,
-    });
+    const { groupCommit, root } = mountGroupHandler({ trackGsapInteractionFailure });
     const updates = [
       {
         selection: { element: gsapPositioned("div"), id: "a", selector: "#a" },
@@ -777,6 +769,7 @@ describe("useGsapAwareEditing anchored resize", () => {
       updates[0]?.selection,
       "drag",
       "Move animated layer (group)",
+      true,
     );
     mocks.drag.mockReset();
     if (priorDragImplementation) mocks.drag.mockImplementation(priorDragImplementation);

package/src/hooks/useGsapAwareEditing.testHelpers.tsx

@@ -0,0 +1,42 @@
+import { vi } from "vitest";
+import { mountReactHarness } from "./domSelectionTestHarness";
+import { useGsapAwareEditing } from "./useGsapAwareEditing";
+import { useGsapInteractionFailureTelemetry } from "./useGsapInteractionFailureTelemetry";
+
+type Params = Parameters<typeof useGsapAwareEditing>[0];
+
+/**
+ * Mounts useGsapAwareEditing with no-op callbacks for every param not given, and the real
+ * failure telemetry toasting through `showToast`. `editing()` reads the latest render.
+ */
+export function mountGsapAwareEditing(
+  params: Partial<Omit<Params, "trackGsapInteractionFailure">> & Pick<Params, "showToast">,
+) {
+  let editing!: ReturnType<typeof useGsapAwareEditing>;
+  function Harness() {
+    editing = useGsapAwareEditing({
+      domEditSelection: null,
+      selectedGsapAnimations: [],
+      gsapCommitMutation: vi.fn().mockResolvedValue(undefined),
+      previewIframeRef: { current: null },
+      bumpGsapCache: vi.fn(),
+      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
+      stageElementPositionOffset: vi.fn(),
+      handleDomBoxSizeCommit: vi.fn(),
+      handleDomRotationCommit: vi.fn(),
+      commitPositionPatchToHtml: vi.fn(),
+      addGsapAnimation: vi.fn(),
+      convertToKeyframes: vi.fn(),
+      setArcPath: vi.fn(),
+      updateArcSegment: vi.fn(),
+      ...params,
+      trackGsapInteractionFailure: useGsapInteractionFailureTelemetry(
+        "index.html",
+        params.showToast,
+      ),
+    });
+    return null;
+  }
+  const root = mountReactHarness(<Harness />);
+  return { editing: () => editing, root };
+}