mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 04:18:01 +00:00
feat(studio): timeline inline expansion + __clipTree runtime primitive
When a child element inside a sub-composition is selected, the timeline replaces the parent scene clip with the deepest-level siblings. Deselect or selecting outside collapses back. Expanded clips are fully editable — move, resize, delete, and split — addressed by their real DOM id with timeline time rebased onto the sub-comp they live in. Runtime: - New window.__clipTree API: a read-only hierarchical ClipNode tree (id/parentId/children + backing element) so Studio can derive parent/child relationships for inline expansion. Studio: - useExpandedTimelineElements derives the expanded view from selectedElementId + clipParentMap (pure useMemo, no useEffect). Each child rebases onto its immediate sub-comp host (start + sourceFile), so multi-level nesting targets the right file. - NLELayout routes expanded-clip edits through the same handlers top-level clips use, in local coordinates — edits save to the sub-comp source and reflect via reloadPreview (no separate DOM-patch path). This is the canonical update; there is no reactive observer. - findMatchingTimelineElementId resolves sub-comp children with no top-level element to `sourceFile#id`. - Razor tool enabled by default; studio_razor_split analytics event fired on single and split-all. - O(n²) isElementGsapTargeted extracted to gsapTargetCache.ts with a cached Set+WeakSet O(1) lookup.
This commit is contained in:
@@ -37,6 +37,13 @@ function isRecord(value: unknown): value is Record<string, unknown> {
|
||||
return typeof value === "object" && value !== null;
|
||||
}
|
||||
|
||||
export function formatFieldsSuffix(rawFields: unknown): string {
|
||||
const fields = Array.isArray(rawFields)
|
||||
? rawFields.filter((f): f is string => typeof f === "string")
|
||||
: [];
|
||||
return fields.length > 0 ? ` (${fields.join(", ")})` : "";
|
||||
}
|
||||
|
||||
export async function readJsonResponseBody(res: Response): Promise<unknown> {
|
||||
const contentType = res.headers.get("content-type") ?? "";
|
||||
if (!contentType.includes("application/json")) {
|
||||
@@ -55,14 +62,10 @@ function formatGsapMutationHttpErrorMessage(statusCode: number, body: unknown):
|
||||
export function formatGsapMutationRejectionToast(error: GsapMutationHttpError): string {
|
||||
const body = error.responseBody;
|
||||
if (isRecord(body)) {
|
||||
const fields = Array.isArray(body.fields)
|
||||
? body.fields.filter((field): field is string => typeof field === "string")
|
||||
: [];
|
||||
const suffix = fields.length > 0 ? ` (${fields.join(", ")})` : "";
|
||||
return `Couldn't save animation: ${formatGsapMutationHttpErrorMessage(
|
||||
error.statusCode,
|
||||
body,
|
||||
)}${suffix}`;
|
||||
)}${formatFieldsSuffix(body.fields)}`;
|
||||
}
|
||||
return `Couldn't save animation: ${error.message}`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user