mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 23:00:03 +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,244 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import {
|
||||
buildEditHistoryEntry,
|
||||
canApplyEditHistoryEntry,
|
||||
createEmptyEditHistory,
|
||||
hashEditHistoryContent,
|
||||
pushEditHistoryEntry,
|
||||
redoEditHistory,
|
||||
undoEditHistory,
|
||||
} from "./editHistory";
|
||||
|
||||
describe("edit history", () => {
|
||||
it("pushes changed file snapshots onto undo and clears redo", () => {
|
||||
const state = createEmptyEditHistory();
|
||||
const entry = buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: "Move layer",
|
||||
files: {
|
||||
"index.html": {
|
||||
before: '<div style="left: 0px"></div>',
|
||||
after: '<div style="left: 20px"></div>',
|
||||
},
|
||||
},
|
||||
now: 100,
|
||||
id: "entry-1",
|
||||
});
|
||||
|
||||
const withUndo = pushEditHistoryEntry(state, entry);
|
||||
const redoEntry = buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: "Redoable edit",
|
||||
files: {
|
||||
"index.html": {
|
||||
before: '<div style="left: 20px"></div>',
|
||||
after: '<div style="left: 40px"></div>',
|
||||
},
|
||||
},
|
||||
now: 200,
|
||||
id: "redo-entry",
|
||||
});
|
||||
|
||||
const next = pushEditHistoryEntry(
|
||||
{
|
||||
...withUndo,
|
||||
redo: [redoEntry],
|
||||
},
|
||||
{
|
||||
...entry,
|
||||
id: "entry-2",
|
||||
label: "Resize layer",
|
||||
createdAt: 300,
|
||||
},
|
||||
);
|
||||
|
||||
expect(withUndo.undo).toHaveLength(1);
|
||||
expect(withUndo.redo).toHaveLength(0);
|
||||
expect(next.undo.map((item) => item.label)).toEqual(["Move layer", "Resize layer"]);
|
||||
expect(next.redo).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("undo returns before contents and moves entry to redo", () => {
|
||||
const entry = buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: "Move layer",
|
||||
files: {
|
||||
"index.html": { before: "before", after: "after" },
|
||||
},
|
||||
now: 100,
|
||||
id: "entry-1",
|
||||
});
|
||||
const state = pushEditHistoryEntry(createEmptyEditHistory(), entry);
|
||||
|
||||
const result = undoEditHistory(state, { "index.html": hashEditHistoryContent("after") }, 200);
|
||||
|
||||
expect(result.ok).toBe(true);
|
||||
expect(result.filesToWrite).toEqual({ "index.html": "before" });
|
||||
expect(result.state.undo).toHaveLength(0);
|
||||
expect(result.state.redo.map((item) => item.id)).toEqual(["entry-1"]);
|
||||
});
|
||||
|
||||
it("redo returns after contents and moves entry to undo", () => {
|
||||
const entry = buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: "Move layer",
|
||||
files: {
|
||||
"index.html": { before: "before", after: "after" },
|
||||
},
|
||||
now: 100,
|
||||
id: "entry-1",
|
||||
});
|
||||
const undone = undoEditHistory(
|
||||
pushEditHistoryEntry(createEmptyEditHistory(), entry),
|
||||
{ "index.html": hashEditHistoryContent("after") },
|
||||
200,
|
||||
).state;
|
||||
|
||||
const result = redoEditHistory(undone, { "index.html": hashEditHistoryContent("before") }, 300);
|
||||
|
||||
expect(result.ok).toBe(true);
|
||||
expect(result.filesToWrite).toEqual({ "index.html": "after" });
|
||||
expect(result.state.undo.map((item) => item.id)).toEqual(["entry-1"]);
|
||||
expect(result.state.redo).toHaveLength(0);
|
||||
});
|
||||
|
||||
it("blocks undo when current content hash does not match the recorded after hash", () => {
|
||||
const entry = buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: "Move layer",
|
||||
files: {
|
||||
"index.html": { before: "before", after: "after" },
|
||||
},
|
||||
now: 100,
|
||||
id: "entry-1",
|
||||
});
|
||||
const state = pushEditHistoryEntry(createEmptyEditHistory(), entry);
|
||||
|
||||
const result = undoEditHistory(
|
||||
state,
|
||||
{ "index.html": hashEditHistoryContent("external") },
|
||||
200,
|
||||
);
|
||||
|
||||
expect(result.ok).toBe(false);
|
||||
expect(result.reason).toBe("content-mismatch");
|
||||
expect(result.state).toBe(state);
|
||||
expect(result.filesToWrite).toEqual({});
|
||||
});
|
||||
|
||||
it("can validate all files in a multi-file entry before applying", () => {
|
||||
const entry = buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: "Update files",
|
||||
files: {
|
||||
"index.html": { before: "a", after: "b" },
|
||||
"compositions/title.html": { before: "c", after: "d" },
|
||||
},
|
||||
now: 100,
|
||||
id: "entry-1",
|
||||
});
|
||||
|
||||
expect(
|
||||
canApplyEditHistoryEntry(entry, "undo", {
|
||||
"index.html": hashEditHistoryContent("b"),
|
||||
"compositions/title.html": hashEditHistoryContent("d"),
|
||||
}),
|
||||
).toEqual({ ok: true });
|
||||
expect(
|
||||
canApplyEditHistoryEntry(entry, "undo", {
|
||||
"index.html": hashEditHistoryContent("b"),
|
||||
"compositions/title.html": hashEditHistoryContent("external"),
|
||||
}),
|
||||
).toEqual({ ok: false, reason: "content-mismatch", path: "compositions/title.html" });
|
||||
});
|
||||
|
||||
it("prunes oldest undo entries when the limit is exceeded", () => {
|
||||
let state = createEmptyEditHistory({ maxEntries: 2 });
|
||||
for (let index = 1; index <= 3; index += 1) {
|
||||
state = pushEditHistoryEntry(
|
||||
state,
|
||||
buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: `Edit ${index}`,
|
||||
files: {
|
||||
"index.html": { before: `${index - 1}`, after: `${index}` },
|
||||
},
|
||||
now: index,
|
||||
id: `entry-${index}`,
|
||||
}),
|
||||
{ maxEntries: 2 },
|
||||
);
|
||||
}
|
||||
|
||||
expect(state.undo.map((entry) => entry.id)).toEqual(["entry-2", "entry-3"]);
|
||||
});
|
||||
|
||||
it("coalesces source editor edits for the same file inside the coalesce window", () => {
|
||||
const first = buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: "Edit source",
|
||||
kind: "source",
|
||||
coalesceKey: "source:index.html",
|
||||
files: {
|
||||
"index.html": { before: "a", after: "b" },
|
||||
},
|
||||
now: 100,
|
||||
id: "entry-1",
|
||||
});
|
||||
const second = buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: "Edit source",
|
||||
kind: "source",
|
||||
coalesceKey: "source:index.html",
|
||||
files: {
|
||||
"index.html": { before: "b", after: "c" },
|
||||
},
|
||||
now: 300,
|
||||
id: "entry-2",
|
||||
});
|
||||
|
||||
const state = pushEditHistoryEntry(
|
||||
pushEditHistoryEntry(createEmptyEditHistory(), first),
|
||||
second,
|
||||
{ coalesceMs: 1000 },
|
||||
);
|
||||
|
||||
expect(state.undo).toHaveLength(1);
|
||||
expect(state.undo[0].id).toBe("entry-2");
|
||||
expect(state.undo[0].files["index.html"].before).toBe("a");
|
||||
expect(state.undo[0].files["index.html"].after).toBe("c");
|
||||
});
|
||||
|
||||
it("does not coalesce source editor edits outside the coalesce window", () => {
|
||||
const first = buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: "Edit source",
|
||||
kind: "source",
|
||||
coalesceKey: "source:index.html",
|
||||
files: {
|
||||
"index.html": { before: "a", after: "b" },
|
||||
},
|
||||
now: 100,
|
||||
id: "entry-1",
|
||||
});
|
||||
const second = buildEditHistoryEntry({
|
||||
projectId: "project-1",
|
||||
label: "Edit source",
|
||||
kind: "source",
|
||||
coalesceKey: "source:index.html",
|
||||
files: {
|
||||
"index.html": { before: "b", after: "c" },
|
||||
},
|
||||
now: 5000,
|
||||
id: "entry-2",
|
||||
});
|
||||
|
||||
const state = pushEditHistoryEntry(
|
||||
pushEditHistoryEntry(createEmptyEditHistory(), first),
|
||||
second,
|
||||
{ coalesceMs: 1000 },
|
||||
);
|
||||
|
||||
expect(state.undo.map((entry) => entry.id)).toEqual(["entry-1", "entry-2"]);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user