mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 00:56:23 +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:
@@ -7,6 +7,7 @@ interface CompositionThumbnailProps {
|
||||
labelColor: string;
|
||||
accentColor?: string;
|
||||
selector?: string;
|
||||
selectorIndex?: number;
|
||||
seekTime?: number;
|
||||
duration?: number;
|
||||
width?: number;
|
||||
@@ -14,7 +15,38 @@ interface CompositionThumbnailProps {
|
||||
}
|
||||
|
||||
const CLIP_HEIGHT = 66;
|
||||
const THUMBNAIL_URL_VERSION = "v2";
|
||||
const THUMBNAIL_URL_VERSION = "v3";
|
||||
|
||||
export function buildCompositionThumbnailUrl({
|
||||
previewUrl,
|
||||
seekTime = 2,
|
||||
duration = 5,
|
||||
selector,
|
||||
selectorIndex,
|
||||
origin,
|
||||
}: {
|
||||
previewUrl: string;
|
||||
seekTime?: number;
|
||||
duration?: number;
|
||||
selector?: string;
|
||||
selectorIndex?: number;
|
||||
origin: string;
|
||||
}): string {
|
||||
const thumbnailBase = previewUrl
|
||||
.replace("/preview/comp/", "/thumbnail/")
|
||||
.replace(/\/preview$/, "/thumbnail/index.html");
|
||||
const midTime = seekTime + duration / 2;
|
||||
const thumbnailUrl = new URL(thumbnailBase, origin);
|
||||
thumbnailUrl.searchParams.set("t", midTime.toFixed(2));
|
||||
thumbnailUrl.searchParams.set("v", THUMBNAIL_URL_VERSION);
|
||||
if (selector) {
|
||||
thumbnailUrl.searchParams.set("selector", selector);
|
||||
if (selectorIndex != null && selectorIndex > 0) {
|
||||
thumbnailUrl.searchParams.set("selectorIndex", String(selectorIndex));
|
||||
}
|
||||
}
|
||||
return thumbnailUrl.toString();
|
||||
}
|
||||
|
||||
export const CompositionThumbnail = memo(function CompositionThumbnail({
|
||||
previewUrl,
|
||||
@@ -22,6 +54,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
|
||||
labelColor,
|
||||
accentColor = "#6B7280",
|
||||
selector,
|
||||
selectorIndex,
|
||||
seekTime = 2,
|
||||
duration = 5,
|
||||
}: CompositionThumbnailProps) {
|
||||
@@ -48,15 +81,14 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
|
||||
roRef.current?.disconnect();
|
||||
});
|
||||
|
||||
const thumbnailBase = previewUrl
|
||||
.replace("/preview/comp/", "/thumbnail/")
|
||||
.replace(/\/preview$/, "/thumbnail/index.html");
|
||||
const midTime = seekTime + duration / 2;
|
||||
const thumbnailUrl = new URL(thumbnailBase, window.location.origin);
|
||||
thumbnailUrl.searchParams.set("t", midTime.toFixed(2));
|
||||
thumbnailUrl.searchParams.set("v", THUMBNAIL_URL_VERSION);
|
||||
if (selector) thumbnailUrl.searchParams.set("selector", selector);
|
||||
const url = thumbnailUrl.toString();
|
||||
const url = buildCompositionThumbnailUrl({
|
||||
previewUrl,
|
||||
seekTime,
|
||||
duration,
|
||||
selector,
|
||||
selectorIndex,
|
||||
origin: window.location.origin,
|
||||
});
|
||||
const frameW = Math.max(48, Math.round(CLIP_HEIGHT * aspect));
|
||||
const frameCount = containerWidth > 0 ? Math.max(1, Math.ceil(containerWidth / frameW)) : 1;
|
||||
|
||||
@@ -66,7 +98,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
|
||||
src={url}
|
||||
alt=""
|
||||
draggable={false}
|
||||
loading="lazy"
|
||||
loading="eager"
|
||||
onLoad={(e) => {
|
||||
const img = e.currentTarget;
|
||||
if (img.naturalWidth > 0 && img.naturalHeight > 0) {
|
||||
|
||||
Reference in New Issue
Block a user