mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 22:20:14 +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:
@@ -66,6 +66,8 @@ export function useTimelineSyncCallbacks({
|
||||
return;
|
||||
}
|
||||
|
||||
usePlayerStore.getState().setClipManifest(data.clips);
|
||||
|
||||
// Show root-level clips: no parentCompositionId, OR parent is a "phantom wrapper"
|
||||
const clipCompositionIds = new Set(data.clips.map((c) => c.compositionId).filter(Boolean));
|
||||
const filtered = data.clips.filter(
|
||||
@@ -77,6 +79,26 @@ export function useTimelineSyncCallbacks({
|
||||
} catch {
|
||||
iframeDoc = null;
|
||||
}
|
||||
|
||||
try {
|
||||
const iframeWin = iframeRef.current?.contentWindow as
|
||||
| (Window & { __clipTree?: import("@hyperframes/core/runtime/clipTree").ClipTree })
|
||||
| null;
|
||||
const clipTree = iframeWin?.__clipTree;
|
||||
if (clipTree) {
|
||||
const parentMap = new Map<string, string>();
|
||||
const walk = (nodes: typeof clipTree.roots) => {
|
||||
for (const node of nodes) {
|
||||
if (node.id && node.parentId) parentMap.set(node.id, node.parentId);
|
||||
if (node.children.length > 0) walk(node.children);
|
||||
}
|
||||
};
|
||||
walk(clipTree.roots);
|
||||
usePlayerStore.getState().setClipParentMap(parentMap);
|
||||
}
|
||||
} catch {
|
||||
// cross-origin or __clipTree not available — parentMap stays empty
|
||||
}
|
||||
const usedHostEls = new Set<Element>();
|
||||
const els: TimelineElement[] = filtered.map((clip, index) => {
|
||||
const hostEl = iframeDoc
|
||||
|
||||
Reference in New Issue
Block a user