mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 22:20:14 +00:00
feat: Persist Studio manual edits via manifest (#593)
## Summary Studio manual geometry edits now persist as a project-local manifest instead of being baked into composition source on each gesture. The manifest lives at: ```text .hyperframes/studio-manual-edits.json ``` It is the source of truth for manual drag, resize, rotation, inspector geometry edits, group moves, and selected-layer reset. ## Architecture - **Manifest-backed edits**: each edit stores a kind (`path-offset`, `box-size`, `rotation`), a source-scoped target, and the edit values. - **Source-scoped resolution**: targets include `sourceFile`, `id`, `selector`, and `selectorIndex`, so duplicate selectors in nested compositions resolve against the owning source file. - **Additive CSS layer**: move uses CSS `translate`, resize writes stable dimensions/flex sizing, and rotation uses CSS `rotate` over the authored base. - **Shared replay runtime**: Studio preview, thumbnails, frame capture, producer renders, and CLI Studio renders/thumbnails all use the same core manual-edit render script. - **Animation-safe replay**: Studio reapplies the manual layer after load, refresh, timeline seeks, player operations, playback frames, thumbnail seeks, and render seeks instead of rewriting GSAP timelines. - **History and handoff**: the manifest is a normal project file, so undo/redo and agent edits can preserve, modify, or remove manual visual edits explicitly. ## User Impact Users can move, resize, rotate, group-move, and reset supported layers from the canvas or inspector, then refresh, capture thumbnails/screenshots, play animated compositions, and render videos without manual edits drifting away from the edited state. ## Main Files - `packages/studio/src/components/editor/manualEdits.ts` - `packages/studio/src/components/editor/DomEditOverlay.tsx` - `packages/studio/src/components/editor/PropertyPanel.tsx` - `packages/studio/src/App.tsx` - `packages/core/src/studio-api/helpers/manualEditsRenderScript.ts` - `packages/studio/vite.config.ts` - `packages/cli/src/server/studioServer.ts` - `packages/core/src/compiler/htmlBundler.ts` - `packages/producer/src/services/htmlCompiler.ts` - `packages/core/src/studio-api/routes/thumbnail.ts` - `packages/producer/src/services/fileServer.ts` - `packages/producer/src/services/renderOrchestrator.ts` ## Test Plan ```bash volta run --node 22.20.0 bun run build volta run --node 22.20.0 bun run --filter @hyperframes/core test -- src/studio-api/helpers/manualEditsRenderScript.test.ts volta run --node 22.20.0 bun run --filter @hyperframes/core typecheck volta run --node 22.20.0 bun run --filter @hyperframes/studio typecheck volta run --node 22.20.0 bun run --filter @hyperframes/cli typecheck volta run --node 22.20.0 bunx oxlint <changed files> volta run --node 22.20.0 bunx oxfmt --check <changed files> git diff --check ```
This commit is contained in:
Vance Ingalls
@@ -0,0 +1,256 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { createEmptyEditHistory } from "../utils/editHistory";
|
||||
import type { EditHistoryStorageAdapter } from "../utils/editHistoryStorage";
|
||||
import { createMemoryEditHistoryStorage } from "../utils/editHistoryStorage";
|
||||
import {
|
||||
createPersistentEditHistoryController,
|
||||
createPersistentEditHistoryStore,
|
||||
} from "./usePersistentEditHistory";
|
||||
|
||||
describe("createPersistentEditHistoryController", () => {
|
||||
it("records history and reloads it for the same project", async () => {
|
||||
const storage = createMemoryEditHistoryStorage();
|
||||
const first = await createPersistentEditHistoryController({
|
||||
projectId: "project-1",
|
||||
storage,
|
||||
now: () => 100,
|
||||
onChange: () => {},
|
||||
});
|
||||
|
||||
await first.recordEdit({
|
||||
label: "Move layer",
|
||||
kind: "manual",
|
||||
files: { "index.html": { before: "a", after: "b" } },
|
||||
});
|
||||
|
||||
const second = await createPersistentEditHistoryController({
|
||||
projectId: "project-1",
|
||||
storage,
|
||||
now: () => 200,
|
||||
onChange: () => {},
|
||||
});
|
||||
|
||||
expect(second.snapshot().canUndo).toBe(true);
|
||||
expect(second.snapshot().undoLabel).toBe("Move layer");
|
||||
expect(second.snapshot().undoPaths).toEqual(["index.html"]);
|
||||
});
|
||||
|
||||
it("undo applies files through the provided callback and persists redo state", async () => {
|
||||
const storage = createMemoryEditHistoryStorage();
|
||||
const controller = await createPersistentEditHistoryController({
|
||||
projectId: "project-1",
|
||||
storage,
|
||||
now: () => 100,
|
||||
onChange: () => {},
|
||||
});
|
||||
await controller.recordEdit({
|
||||
label: "Move layer",
|
||||
kind: "manual",
|
||||
files: { "index.html": { before: "a", after: "b" } },
|
||||
});
|
||||
|
||||
const result = await controller.undo({
|
||||
readFile: async (path) => {
|
||||
expect(path).toBe("index.html");
|
||||
return "b";
|
||||
},
|
||||
writeFile: async (path, content) => {
|
||||
expect(path).toBe("index.html");
|
||||
expect(content).toBe("a");
|
||||
},
|
||||
});
|
||||
expect(result.ok).toBe(true);
|
||||
expect(result.paths).toEqual(["index.html"]);
|
||||
|
||||
expect(controller.snapshot().canUndo).toBe(false);
|
||||
expect(controller.snapshot().canRedo).toBe(true);
|
||||
expect(controller.snapshot().redoPaths).toEqual(["index.html"]);
|
||||
});
|
||||
|
||||
it("keeps in-memory history when storage saves fail", async () => {
|
||||
const storage: EditHistoryStorageAdapter = {
|
||||
async get() {
|
||||
return null;
|
||||
},
|
||||
async set() {
|
||||
throw new Error("IndexedDB unavailable");
|
||||
},
|
||||
async delete() {},
|
||||
};
|
||||
const controller = await createPersistentEditHistoryController({
|
||||
projectId: "project-1",
|
||||
storage,
|
||||
now: () => 100,
|
||||
onChange: () => {},
|
||||
});
|
||||
|
||||
await expect(
|
||||
controller.recordEdit({
|
||||
label: "Move layer",
|
||||
kind: "manual",
|
||||
files: { "index.html": { before: "a", after: "b" } },
|
||||
}),
|
||||
).resolves.toBeUndefined();
|
||||
|
||||
expect(controller.snapshot().canUndo).toBe(true);
|
||||
});
|
||||
|
||||
it("serializes concurrent record edits against the latest state", async () => {
|
||||
const storage = createMemoryEditHistoryStorage();
|
||||
let timestamp = 100;
|
||||
const store = createPersistentEditHistoryStore({
|
||||
projectId: "project-1",
|
||||
storage,
|
||||
initialState: createEmptyEditHistory(),
|
||||
now: () => timestamp++,
|
||||
onChange: () => {},
|
||||
});
|
||||
|
||||
await Promise.all([
|
||||
store.recordEdit({
|
||||
label: "Move layer",
|
||||
kind: "manual",
|
||||
files: { "index.html": { before: "a", after: "b" } },
|
||||
}),
|
||||
store.recordEdit({
|
||||
label: "Resize layer",
|
||||
kind: "manual",
|
||||
files: { "index.html": { before: "b", after: "c" } },
|
||||
}),
|
||||
]);
|
||||
|
||||
expect(store.snapshot().state.undo.map((entry) => entry.label)).toEqual([
|
||||
"Move layer",
|
||||
"Resize layer",
|
||||
]);
|
||||
});
|
||||
|
||||
it("still coalesces concurrent source edits that share a coalesce key", async () => {
|
||||
const storage = createMemoryEditHistoryStorage();
|
||||
let timestamp = 100;
|
||||
const store = createPersistentEditHistoryStore({
|
||||
projectId: "project-1",
|
||||
storage,
|
||||
initialState: createEmptyEditHistory(),
|
||||
now: () => timestamp++,
|
||||
onChange: () => {},
|
||||
});
|
||||
|
||||
await Promise.all([
|
||||
store.recordEdit({
|
||||
label: "Edit source",
|
||||
kind: "source",
|
||||
coalesceKey: "source:index.html",
|
||||
files: { "index.html": { before: "a", after: "b" } },
|
||||
}),
|
||||
store.recordEdit({
|
||||
label: "Edit source",
|
||||
kind: "source",
|
||||
coalesceKey: "source:index.html",
|
||||
files: { "index.html": { before: "b", after: "c" } },
|
||||
}),
|
||||
]);
|
||||
|
||||
expect(store.snapshot().state.undo).toHaveLength(1);
|
||||
expect(store.snapshot().state.undo[0].files["index.html"].before).toBe("a");
|
||||
expect(store.snapshot().state.undo[0].files["index.html"].after).toBe("c");
|
||||
});
|
||||
|
||||
it("reads undo hashes from the live top entry during queued undo calls", async () => {
|
||||
const storage = createMemoryEditHistoryStorage();
|
||||
let timestamp = 100;
|
||||
const store = createPersistentEditHistoryStore({
|
||||
projectId: "project-1",
|
||||
storage,
|
||||
initialState: createEmptyEditHistory(),
|
||||
now: () => timestamp++,
|
||||
onChange: () => {},
|
||||
});
|
||||
await store.recordEdit({
|
||||
label: "Edit first file",
|
||||
kind: "manual",
|
||||
files: { "first.html": { before: "first-before", after: "first-after" } },
|
||||
});
|
||||
await store.recordEdit({
|
||||
label: "Edit second file",
|
||||
kind: "manual",
|
||||
files: { "second.html": { before: "second-before", after: "second-after" } },
|
||||
});
|
||||
|
||||
const files: Record<string, string> = {
|
||||
"first.html": "first-after",
|
||||
"second.html": "second-after",
|
||||
};
|
||||
const readPaths: string[] = [];
|
||||
|
||||
await Promise.all([
|
||||
store.undo({
|
||||
readFile: async (path) => {
|
||||
readPaths.push(path);
|
||||
return files[path];
|
||||
},
|
||||
writeFile: async (path, content) => {
|
||||
files[path] = content;
|
||||
},
|
||||
}),
|
||||
store.undo({
|
||||
readFile: async (path) => {
|
||||
readPaths.push(path);
|
||||
return files[path];
|
||||
},
|
||||
writeFile: async (path, content) => {
|
||||
files[path] = content;
|
||||
},
|
||||
}),
|
||||
]);
|
||||
|
||||
expect(readPaths).toEqual(["second.html", "first.html"]);
|
||||
expect(files).toEqual({
|
||||
"first.html": "first-before",
|
||||
"second.html": "second-before",
|
||||
});
|
||||
expect(store.snapshot().canUndo).toBe(false);
|
||||
expect(store.snapshot().canRedo).toBe(true);
|
||||
});
|
||||
|
||||
it("rolls back files when an undo write fails partway through", async () => {
|
||||
const storage = createMemoryEditHistoryStorage();
|
||||
const store = createPersistentEditHistoryStore({
|
||||
projectId: "project-1",
|
||||
storage,
|
||||
initialState: createEmptyEditHistory(),
|
||||
now: () => 100,
|
||||
onChange: () => {},
|
||||
});
|
||||
await store.recordEdit({
|
||||
label: "Edit files",
|
||||
kind: "manual",
|
||||
files: {
|
||||
"first.html": { before: "first-before", after: "first-after" },
|
||||
"second.html": { before: "second-before", after: "second-after" },
|
||||
},
|
||||
});
|
||||
|
||||
const files: Record<string, string> = {
|
||||
"first.html": "first-after",
|
||||
"second.html": "second-after",
|
||||
};
|
||||
const result = store.undo({
|
||||
readFile: async (path) => files[path],
|
||||
writeFile: async (path, content) => {
|
||||
if (path === "second.html" && content === "second-before") {
|
||||
throw new Error("write failed");
|
||||
}
|
||||
files[path] = content;
|
||||
},
|
||||
});
|
||||
|
||||
await expect(result).rejects.toThrow("write failed");
|
||||
expect(files).toEqual({
|
||||
"first.html": "first-after",
|
||||
"second.html": "second-after",
|
||||
});
|
||||
expect(store.snapshot().undoLabel).toBe("Edit files");
|
||||
expect(store.snapshot().canRedo).toBe(false);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user