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:
@@ -1,4 +1,4 @@
|
||||
import { memo, useEffect, useRef, useState } from "react";
|
||||
import { memo, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Eye, Layers, Move, X } from "../../icons/SystemIcons";
|
||||
import { useStudioShellContext } from "../../contexts/StudioContext";
|
||||
import { readStudioBoxSize, readStudioPathOffset, readStudioRotation } from "./manualEdits";
|
||||
@@ -111,6 +111,29 @@ export const PropertyPanel = memo(function PropertyPanel({
|
||||
const cacheElementKey = element?.id ?? element?.selector ?? "";
|
||||
const cacheEntry = usePlayerStore((s) => s.keyframeCache.get(cacheElementKey));
|
||||
|
||||
const iframeRef = previewIframeRef ?? { current: null };
|
||||
const gsapAnimIdForMemo = element
|
||||
? (gsapAnimations?.find((a: { keyframes?: unknown }) => a.keyframes)?.id ??
|
||||
gsapAnimations?.[0]?.id ??
|
||||
null)
|
||||
: null;
|
||||
const gsapRuntimeValues = useMemo(
|
||||
() =>
|
||||
element
|
||||
? readGsapRuntimeValuesForPanel(gsapAnimIdForMemo, gsapAnimations, element, iframeRef)
|
||||
: null,
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- iframeRef is stable; currentTime drives re-reads during playback
|
||||
[gsapAnimIdForMemo, gsapAnimations, element, currentTime],
|
||||
);
|
||||
const gsapBorderRadius = useMemo(
|
||||
() =>
|
||||
element
|
||||
? readGsapBorderRadiusForPanel(gsapRuntimeValues, gsapAnimations, element, iframeRef)
|
||||
: null,
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[gsapRuntimeValues, gsapAnimations, element, currentTime],
|
||||
);
|
||||
|
||||
if (!element) {
|
||||
return (
|
||||
<div className="flex h-full flex-col bg-neutral-900">
|
||||
@@ -194,21 +217,6 @@ export const PropertyPanel = memo(function PropertyPanel({
|
||||
return gsapAnimId ?? "";
|
||||
};
|
||||
|
||||
// Read ALL GSAP-interpolated values at the current seek time.
|
||||
const gsapRuntimeValues = readGsapRuntimeValuesForPanel(
|
||||
gsapAnimId,
|
||||
gsapAnimations,
|
||||
element,
|
||||
previewIframeRef ?? { current: null },
|
||||
);
|
||||
|
||||
const gsapBorderRadius = readGsapBorderRadiusForPanel(
|
||||
gsapRuntimeValues,
|
||||
gsapAnimations,
|
||||
element,
|
||||
previewIframeRef ?? { current: null },
|
||||
);
|
||||
|
||||
const displayX = gsapRuntimeValues?.x ?? manualOffset.x;
|
||||
const displayY = gsapRuntimeValues?.y ?? manualOffset.y;
|
||||
const displayW = gsapRuntimeValues?.width ?? resolvedWidth;
|
||||
|
||||
@@ -73,7 +73,7 @@ export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
|
||||
export const STUDIO_RAZOR_TOOL_ENABLED = resolveStudioBooleanEnvFlag(
|
||||
env,
|
||||
["VITE_STUDIO_ENABLE_RAZOR_TOOL", "VITE_STUDIO_RAZOR_TOOL_ENABLED"],
|
||||
false,
|
||||
true,
|
||||
);
|
||||
|
||||
// When disabled (the default), drag/resize/rotate commits always take the CSS
|
||||
|
||||
Reference in New Issue
Block a user