mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 23:00:03 +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:
@@ -0,0 +1,30 @@
|
||||
import { useMemo } from "react";
|
||||
import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
|
||||
import type { TimelineEditCallbacks } from "./timelineCallbacks";
|
||||
|
||||
// Props a parent (e.g. NLELayout) may pass to <Timeline> to intercept edits —
|
||||
// the rest of the callback bag still comes from TimelineEditContext.
|
||||
export type TimelineEditOverrides = Pick<
|
||||
TimelineEditCallbacks,
|
||||
"onMoveElement" | "onResizeElement" | "onBlockedEditAttempt" | "onSplitElement"
|
||||
>;
|
||||
|
||||
// Merge any prop overrides over the context callbacks. Used so NLELayout can
|
||||
// wrap move/resize/split (to rebase expanded sub-comp clips) while every other
|
||||
// callback falls through to the context unchanged.
|
||||
export function useResolvedTimelineEditCallbacks(
|
||||
overrides: TimelineEditOverrides,
|
||||
): TimelineEditCallbacks {
|
||||
const ctx = useTimelineEditContext();
|
||||
const { onMoveElement, onResizeElement, onBlockedEditAttempt, onSplitElement } = overrides;
|
||||
return useMemo(
|
||||
() => ({
|
||||
...ctx,
|
||||
onMoveElement: onMoveElement ?? ctx.onMoveElement,
|
||||
onResizeElement: onResizeElement ?? ctx.onResizeElement,
|
||||
onBlockedEditAttempt: onBlockedEditAttempt ?? ctx.onBlockedEditAttempt,
|
||||
onSplitElement: onSplitElement ?? ctx.onSplitElement,
|
||||
}),
|
||||
[ctx, onMoveElement, onResizeElement, onBlockedEditAttempt, onSplitElement],
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user