diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx index ad131e3a62..b661872d67 100644 --- a/packages/studio/src/App.tsx +++ b/packages/studio/src/App.tsx @@ -1,7 +1,7 @@ import { useState, useCallback, useRef, useMemo, useEffect, useLayoutEffect } from "react"; import type { LeftSidebarHandle, SidebarTab } from "./components/sidebar/LeftSidebar"; import { useRenderQueue } from "./components/renders/useRenderQueue"; -import { usePlayerStore, type TimelineElement } from "./player"; +import { usePlayerStore } from "./player"; import { StudioOverlays } from "./components/StudioOverlays"; import { SaveQueuePausedBanner } from "./components/SaveQueuePausedBanner"; import { useCaptionStore } from "./captions/store"; @@ -12,9 +12,12 @@ import { useFileManager } from "./hooks/useFileManager"; import { usePreviewPersistence } from "./hooks/usePreviewPersistence"; import { usePreviewDocumentVersion } from "./hooks/usePreviewDocumentVersion"; import { useTimelineEditing } from "./hooks/useTimelineEditing"; -import { persistTimelineMoveEditsAtomically } from "./hooks/timelineMoveAdapter"; +import { + persistTimelineMoveEditsAtomically, + type TimelineMoveEditsHandler, + type TimelineMoveOperation, +} from "./hooks/timelineMoveAdapter"; import type { TimelineZIndexReorderCommit } from "./hooks/useTimelineEditingTypes"; -import type { TimelineStackingReorderIntent } from "./player/components/timelineStacking"; import type { BlockPreviewInfo } from "./components/sidebar/BlocksTab"; import { useDomEditSession } from "./hooks/useDomEditSession"; import { useSdkSelectionSync } from "./hooks/useSdkSelectionSync"; @@ -62,7 +65,6 @@ import { } from "./utils/studioUrlState"; import { trackStudioSessionStart } from "./telemetry/events"; import { hasFiredSessionStart, markSessionStartFired } from "./telemetry/config"; -type TimelineMoveOperation = Parameters[2]; // fallow-ignore-next-line complexity export function StudioApp() { const { projectId, resolving, waitingForServer } = useServerConnection(); @@ -154,6 +156,7 @@ export function StudioApp() { reloadPreview: () => setRefreshKey((k) => k + 1), pendingTimelineEditPathRef, }); + const invalidateGsapCacheRef = useRef<() => void>(() => {}); const timelineEditing = useTimelineEditing({ projectId, activeCompPath, @@ -171,20 +174,11 @@ export function StudioApp() { sdkSession: editFlowSdkSession, publishSdkSession: sdkHandle.publish, forceReloadSdkSession: sdkHandle.forceReload, + invalidateGsapCache: () => invalidateGsapCacheRef.current(), handleDomZIndexReorderCommitRef, }); - const handleTimelineElementsMove = useCallback( - async ( - edits: Array<{ - element: TimelineElement; - updates: Pick & { - stackingReorder?: TimelineStackingReorderIntent | null; - }; - }>, - coalesceKey?: string, - operation: TimelineMoveOperation = "timing", - coalesceMs?: number, - ) => { + const handleTimelineElementsMove: TimelineMoveEditsHandler = useCallback( + async (edits, coalesceKey, operation: TimelineMoveOperation = "timing", coalesceMs) => { const deps = { handleTimelineGroupMove: timelineEditing.handleTimelineGroupMove }; await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs); }, @@ -228,7 +222,6 @@ export function StudioApp() { const domEditDeleteBridge = (s: DomEditSelection) => handleDomEditElementDeleteRef.current(s); const resetKeyframesRef = useRef<() => boolean>(() => false); const deleteSelectedKeyframesRef = useRef<() => void>(() => {}); - const invalidateGsapCacheRef = useRef<() => void>(() => {}); const { handleCopy, handlePaste, handleCut } = useClipboard({ projectId, activeCompPath, @@ -408,6 +401,7 @@ export function StudioApp() { panelLayout.rightInspectorPanes, panelLayout.rightCollapsed, isPlaying, + domEditSession.domEditSelection, gestureState === "recording", ); useStudioUrlState({ diff --git a/packages/studio/src/components/editor/AnimationCard.test.tsx b/packages/studio/src/components/editor/AnimationCard.test.tsx index 802e07470d..ea51978c9a 100644 --- a/packages/studio/src/components/editor/AnimationCard.test.tsx +++ b/packages/studio/src/components/editor/AnimationCard.test.tsx @@ -45,17 +45,22 @@ function selectPreset(host: HTMLElement, presetId: string): string { return presetConfig.ease; } -function renderExpandedCard({ - animation, +/** Every test mounts the same card; only expansion, flat mode, and the spies differ. */ +function renderCard({ + animation = baseAnimation(), + defaultExpanded = true, flat, onUpdateMeta = vi.fn(), onUpdateKeyframeEase = vi.fn(), + onDeleteAnimation = noop, }: { - animation: GsapAnimation; + animation?: GsapAnimation; + defaultExpanded?: boolean; flat?: boolean; onUpdateMeta?: ReturnType; onUpdateKeyframeEase?: ReturnType; -}) { + onDeleteAnimation?: (id: string) => void; +} = {}) { const host = document.createElement("div"); document.body.append(host); const root = createRoot(host); @@ -63,11 +68,11 @@ function renderExpandedCard({ root.render( { ], }, }); - const view = renderExpandedCard({ animation, onUpdateKeyframeEase }); + const view = renderCard({ animation, onUpdateKeyframeEase }); const segment = Array.from(view.host.querySelectorAll("button")).find((button) => button.textContent?.includes("0% → 50%"), @@ -101,6 +106,7 @@ describe("AnimationCard ease editing", () => { expect(onUpdateKeyframeEase).toHaveBeenCalledExactlyOnceWith(animation.id, 50, ease); expect(trackStudioSegmentEaseEdit).toHaveBeenCalledExactlyOnceWith({ + action: "commit", ease, }); act(() => view.root.unmount()); @@ -110,7 +116,7 @@ describe("AnimationCard ease editing", () => { const onUpdateMeta = vi.fn(); const onUpdateKeyframeEase = vi.fn(); const animation = baseAnimation({ id: "flat-tween" }); - const view = renderExpandedCard({ + const view = renderCard({ animation, flat: true, onUpdateMeta, @@ -128,23 +134,7 @@ describe("AnimationCard ease editing", () => { describe("AnimationCard flat branch", () => { it("renders a mint border-left and panel-token colors when flat", () => { - const host = document.createElement("div"); - document.body.append(host); - const root = createRoot(host); - act(() => { - root.render( - , - ); - }); + const { host, root } = renderCard({ defaultExpanded: false, flat: true }); const card = host.querySelector('[data-flat-effect-card="true"]'); expect(card).not.toBeNull(); expect(card?.className).toContain("border-panel-accent"); @@ -152,22 +142,7 @@ describe("AnimationCard flat branch", () => { }); it("still renders the legacy (non-flat) appearance when flat is omitted", () => { - const host = document.createElement("div"); - document.body.append(host); - const root = createRoot(host); - act(() => { - root.render( - , - ); - }); + const { host, root } = renderCard({ defaultExpanded: false }); expect(host.querySelector('[data-flat-effect-card="true"]')).toBeNull(); expect(host.textContent).toContain("power2.out"); act(() => root.unmount()); @@ -175,23 +150,7 @@ describe("AnimationCard flat branch", () => { it("toggles expanded state when the collapsed header button is clicked, in both modes", () => { for (const flat of [false, true]) { - const host = document.createElement("div"); - document.body.append(host); - const root = createRoot(host); - act(() => { - root.render( - , - ); - }); + const { host, root } = renderCard({ defaultExpanded: false, flat: flat || undefined }); expect(host.textContent).not.toContain("Remove"); const button = host.querySelector("button"); expect(button).not.toBeNull(); @@ -205,23 +164,7 @@ describe("AnimationCard flat branch", () => { it("invokes onDeleteAnimation with the animation id when Remove is clicked, in flat mode", () => { const onDeleteAnimation = vi.fn(); - const host = document.createElement("div"); - document.body.append(host); - const root = createRoot(host); - act(() => { - root.render( - , - ); - }); + const { host, root } = renderCard({ flat: true, onDeleteAnimation }); const buttons = Array.from(host.querySelectorAll("button")); const removeButton = buttons.find((b) => b.textContent === "Remove"); expect(removeButton).not.toBeUndefined(); diff --git a/packages/studio/src/components/editor/AnimationCard.tsx b/packages/studio/src/components/editor/AnimationCard.tsx index d178032d68..0f071d3016 100644 --- a/packages/studio/src/components/editor/AnimationCard.tsx +++ b/packages/studio/src/components/editor/AnimationCard.tsx @@ -1,4 +1,4 @@ -import { memo, useCallback, useMemo, useState } from "react"; +import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; import type { GsapAnimation } from "@hyperframes/core/gsap-parser"; import { SUPPORTED_EASES, SUPPORTED_PROPS } from "@hyperframes/core/gsap-constants"; import { trackStudioSegmentEaseEdit } from "../../telemetry/events"; @@ -23,6 +23,8 @@ interface AnimationCardProps extends GsapAnimationEditCallbacks { animation: GsapAnimation; defaultExpanded: boolean; flat?: boolean; + focusedSegment?: { tweenPercentage: number } | null; + onFocusSegmentConsumed?: () => void; } // fallow-ignore-next-line complexity @@ -30,6 +32,8 @@ export const AnimationCard = memo(function AnimationCard({ animation, defaultExpanded, flat, + focusedSegment, + onFocusSegmentConsumed, onUpdateProperty, onUpdateMeta, onDeleteAnimation, @@ -50,6 +54,25 @@ export const AnimationCard = memo(function AnimationCard({ const [addingProp, setAddingProp] = useState(false); const [addingFromProp, setAddingFromProp] = useState(false); const [expandedKfPct, setExpandedKfPct] = useState(null); + const cardRef = useRef(null); + const pendingAutoScrollRef = useRef(false); + + useEffect(() => { + if (!focusedSegment) return; + setExpanded(true); + pendingAutoScrollRef.current = true; + setExpandedKfPct(focusedSegment.tweenPercentage); + onFocusSegmentConsumed?.(); + }, [focusedSegment, onFocusSegmentConsumed]); + + useEffect(() => { + if (!pendingAutoScrollRef.current || expandedKfPct === null) return; + const segment = cardRef.current?.querySelector( + `[data-ease-segment-pct="${expandedKfPct}"]`, + ); + segment?.scrollIntoView({ block: "nearest", behavior: "smooth" }); + pendingAutoScrollRef.current = false; + }, [expandedKfPct]); const usedProps = useMemo( () => new Set(Object.keys(animation.properties)), @@ -154,6 +177,7 @@ export const AnimationCard = memo(function AnimationCard({ return (
{ onUpdateKeyframeEase(animation.id, pct, ease); - trackStudioSegmentEaseEdit({ ease }); + trackStudioSegmentEaseEdit({ action: "commit", ease }); }} onApplyAll={ onSetAllKeyframeEases diff --git a/packages/studio/src/components/editor/GsapAddAnimationControl.tsx b/packages/studio/src/components/editor/GsapAddAnimationControl.tsx new file mode 100644 index 0000000000..8447adba8f --- /dev/null +++ b/packages/studio/src/components/editor/GsapAddAnimationControl.tsx @@ -0,0 +1,68 @@ +import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimationConstants"; + +const STYLES = { + classic: { + method: + "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white", + cancel: "px-1.5 text-[11px] text-neutral-500 hover:text-neutral-300", + trigger: "text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200", + }, + flat: { + method: + "rounded-lg border border-panel-border-input bg-panel-input px-2.5 py-1.5 text-[11px] font-medium text-panel-text-2 transition-colors hover:border-panel-text-4 hover:text-panel-text-0", + cancel: "px-1.5 text-[11px] text-panel-text-3 hover:text-panel-text-1", + trigger: "text-[11px] font-medium text-panel-text-3 transition-colors hover:text-panel-text-1", + }, +}; + +export function GsapAddAnimationControl({ + open, + setOpen, + onAddAnimation, + track, + variant, +}: { + open: boolean; + setOpen: (open: boolean) => void; + onAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void; + track: (control: string, name: string) => void; + variant: keyof typeof STYLES; +}) { + const styles = STYLES[variant]; + + return ( +
+ {open ? ( +
+ {ADD_METHODS.map((method) => ( + + ))} + +
+ ) : ( + + )} +
+ ); +} diff --git a/packages/studio/src/components/editor/GsapAnimationSection.tsx b/packages/studio/src/components/editor/GsapAnimationSection.tsx index 33f6201b2f..2ced7b6a8e 100644 --- a/packages/studio/src/components/editor/GsapAnimationSection.tsx +++ b/packages/studio/src/components/editor/GsapAnimationSection.tsx @@ -2,13 +2,15 @@ import { memo, useState } from "react"; import type { GsapAnimation } from "@hyperframes/core/gsap-parser"; import { Film } from "../../icons/SystemIcons"; import { Section } from "./propertyPanelPrimitives"; -import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimationConstants"; import { AnimationCard } from "./AnimationCard"; import { - trackAnimationMetaUpdate, type GsapAnimationEditCallbacks, + withTrackedGsapAnimationCallbacks, + clearFocusedEaseSegment, } from "./gsapAnimationCallbacks"; import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext"; +import { usePlayerStore } from "../../player"; +import { GsapAddAnimationControl } from "./GsapAddAnimationControl"; interface GsapAnimationSectionProps extends GsapAnimationEditCallbacks { animations: GsapAnimation[]; @@ -21,41 +23,13 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({ animations, multipleTimelines, unsupportedTimelinePattern, - onUpdateProperty, - onUpdateMeta, - onDeleteAnimation, - onAddProperty, - onRemoveProperty, - onUpdateFromProperty, - onAddFromProperty, - onRemoveFromProperty, onAddAnimation, - onLivePreview, - onLivePreviewEnd, - onSetArcPath, - onUpdateArcSegment, - onUpdateKeyframeEase, - onSetAllKeyframeEases, - onUnroll, + ...callbacks }: GsapAnimationSectionProps) { const track = useTrackDesignInput(); const [addMenuOpen, setAddMenuOpen] = useState(false); - const trackProperty = (property: string) => { - const control = - property === "visibility" - ? "toggle" - : property === "filter" || property === "clipPath" - ? "text" - : "metric"; - track(control, property); - }; - const updateMeta = ( - animationId: string, - updates: { duration?: number; ease?: string; position?: number }, - ) => { - trackAnimationMetaUpdate(track, updates); - onUpdateMeta(animationId, updates); - }; + const trackedCallbacks = withTrackedGsapAnimationCallbacks(callbacks, track); + const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment); return (
}> @@ -76,137 +50,24 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
{animations.map((anim, index) => ( { - trackProperty(property); - onUpdateProperty(animationId, property, value); - }} - onUpdateMeta={updateMeta} - onDeleteAnimation={(animationId) => { - track("button", "Remove animation"); - onDeleteAnimation(animationId); - }} - onAddProperty={(animationId, property) => { - track("select", "Add effect property"); - onAddProperty(animationId, property); - }} - onRemoveProperty={(animationId, property) => { - track("button", `Remove ${property}`); - onRemoveProperty(animationId, property); - }} - onUpdateFromProperty={ - onUpdateFromProperty - ? (animationId, property, value) => { - trackProperty(property); - onUpdateFromProperty(animationId, property, value); - } - : undefined - } - onAddFromProperty={ - onAddFromProperty - ? (animationId, property) => { - track("select", "Add from property"); - onAddFromProperty(animationId, property); - } - : undefined - } - onRemoveFromProperty={ - onRemoveFromProperty - ? (animationId, property) => { - track("button", `Remove from ${property}`); - onRemoveFromProperty(animationId, property); - } - : undefined - } - onLivePreview={onLivePreview} - onLivePreviewEnd={onLivePreviewEnd} - onSetArcPath={ - onSetArcPath - ? (animationId, config) => { - track( - "toggle", - config.autoRotate !== undefined ? "Auto rotate" : "Arc motion", - ); - onSetArcPath(animationId, config); - } - : undefined - } - onUpdateArcSegment={ - onUpdateArcSegment - ? (animationId, segmentIndex, update) => { - if (update.curviness === undefined) { - track("button", `Reset arc segment ${segmentIndex + 1}`); - } - onUpdateArcSegment(animationId, segmentIndex, update); - } - : undefined - } - onUpdateKeyframeEase={ - onUpdateKeyframeEase - ? (animationId, percentage, ease) => { - track("select", "Keyframe ease"); - onUpdateKeyframeEase(animationId, percentage, ease); - } - : undefined - } - onSetAllKeyframeEases={ - onSetAllKeyframeEases - ? (animationId, ease) => { - track("select", "All keyframe eases"); - onSetAllKeyframeEases(animationId, ease); - } - : undefined - } - onUnroll={ - onUnroll - ? (animationId) => { - track("button", "Unroll animation"); - onUnroll(animationId); - } - : undefined + focusedSegment={ + focusedEaseSegment?.animationId === anim.id ? focusedEaseSegment : null } + onFocusSegmentConsumed={clearFocusedEaseSegment} /> ))} -
- {addMenuOpen ? ( -
- {ADD_METHODS.map((method) => ( - - ))} - -
- ) : ( - - )} -
+
)}
diff --git a/packages/studio/src/components/editor/KeyframeNavigation.tsx b/packages/studio/src/components/editor/KeyframeNavigation.tsx index c54047c305..b8016f1a6b 100644 --- a/packages/studio/src/components/editor/KeyframeNavigation.tsx +++ b/packages/studio/src/components/editor/KeyframeNavigation.tsx @@ -22,6 +22,36 @@ interface KeyframeNavigationProps { const TOLERANCE = 0.5; +interface NavigableKeyframe { + percentage: number; + tweenPercentage?: number; + properties: Record; +} + +export function getKeyframeNavigationState( + keyframes: readonly Keyframe[], + currentPercentage: number, + property?: string, +) { + const propertyKeyframes = property + ? keyframes.filter((keyframe) => property in keyframe.properties) + : keyframes; + return { + propertyKeyframes, + prevKeyframe: + propertyKeyframes + .filter((keyframe) => keyframe.percentage < currentPercentage - TOLERANCE) + .at(-1) ?? null, + nextKeyframe: + propertyKeyframes.find((keyframe) => keyframe.percentage > currentPercentage + TOLERANCE) ?? + null, + currentKeyframe: + propertyKeyframes.find( + (keyframe) => Math.abs(keyframe.percentage - currentPercentage) <= TOLERANCE, + ) ?? null, + }; +} + /** * Convert a clip-relative percentage (element lifetime, used for display/seek) to * the TWEEN-relative percentage the GSAP writer/runtime key on. The clip→tween @@ -92,18 +122,12 @@ export const KeyframeNavigation = memo(function KeyframeNavigation({ onRemoveKeyframe, onConvertToKeyframes, }: KeyframeNavigationProps) { - // Find keyframes that contain this property - const propertyKeyframes = keyframes?.filter((kf) => property in kf.properties) ?? []; - - const prevKf = - propertyKeyframes.filter((kf) => kf.percentage < currentPercentage - TOLERANCE).at(-1) ?? null; - - const nextKf = - propertyKeyframes.find((kf) => kf.percentage > currentPercentage + TOLERANCE) ?? null; - - const atCurrent = - propertyKeyframes.find((kf) => Math.abs(kf.percentage - currentPercentage) <= TOLERANCE) ?? - null; + const { + propertyKeyframes, + prevKeyframe: prevKf, + nextKeyframe: nextKf, + currentKeyframe: atCurrent, + } = getKeyframeNavigationState(keyframes ?? [], currentPercentage, property); // Diamond state let diamondState: DiamondState; diff --git a/packages/studio/src/components/editor/PropertyPanelFlat.tsx b/packages/studio/src/components/editor/PropertyPanelFlat.tsx index ef1393a60d..8947135233 100644 --- a/packages/studio/src/components/editor/PropertyPanelFlat.tsx +++ b/packages/studio/src/components/editor/PropertyPanelFlat.tsx @@ -19,6 +19,7 @@ import { createGsapLivePreview } from "./gsapLivePreview"; import { formatTextFieldPreview } from "./propertyPanelSections"; import { STUDIO_GSAP_PANEL_ENABLED } from "./manualEditingAvailability"; import { useColorGradingController } from "./useColorGradingController"; +import { usePlayerStore } from "../../player"; import { FlatColorGradingAccessory, FlatColorGradingSection, @@ -231,7 +232,40 @@ export function PropertyPanelFlat({ : "layout", ); - // Animate only the groups that changed during this toggle cycle. + // Tracks which group(s) are actively transitioning this toggle cycle, so + // their header/body gets the fast entrance animation (hf-flat-group-enter) + // and no one else's does. Deliberately NOT derived from remounting alone: + // FlatGroupHeader instances are keyed by group id and React normally + // preserves them across re-renders, but toggling a non-adjacent group still + // shifts the untouched collapsed siblings between the before/after-open + // slices below, and Chromium restarts a CSS animation on that kind of + // position shift even though nothing about the sibling actually changed. + // Gating on these ids (cleared shortly after the 120ms CSS animation + // finishes) keeps the animation scoped to only the groups that actually + // just toggled. Two ids, not one: the clicked (newly-opening/closing) group + // AND whichever group was open immediately before the click and got + // implicitly closed by it — both freshly-mounted headers need to animate. + // When the inline timeline ease button focuses a segment on this element, + // force the Motion group open so its AnimationCard (which only mounts while + // the group is expanded) can consume the focus and reveal the ease editor. + const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment); + // The element THIS panel renders, not the store's selectedElementId: that + // flips synchronously while the panel still renders its predecessor, so a + // stale panel would consume a request meant for its successor whenever the + // two share a class-selector animation id. + const renderedElementId = `${element.sourceFile}#${element.id}`; + // Adjusted during render (not an effect) so the card mounts on the same + // commit the request lands on. Keyed on request identity: a group the user + // closes afterwards stays closed. + const [consumedFocus, setConsumedFocus] = useState(focusedEaseSegment); + if (focusedEaseSegment !== consumedFocus) { + setConsumedFocus(focusedEaseSegment); + const focusesThisPanel = + focusedEaseSegment?.elementId === renderedElementId && + gsapAnimations.some((a) => a.id === focusedEaseSegment.animationId); + if (focusesThisPanel) setOpenGroupId("motion"); + } + const [justToggledIds, setJustToggledIds] = useState([]); const justToggledTimeoutRef = useRef | null>(null); const panelBodyRef = useRef(null); @@ -492,6 +526,17 @@ export function PropertyPanelFlat({ const beforeOpen = openIndex === -1 ? groups : groups.slice(0, openIndex); const openGroup = openIndex === -1 ? null : groups[openIndex]; const afterOpen = openIndex === -1 ? [] : groups.slice(openIndex + 1); + const renderClosedGroup = (group: FlatGroupDescriptor) => ( + + toggleOpen(group.id)} + summary={group.summary} + animateEntrance={justToggledIds.includes(group.id)} + /> + + ); return ( @@ -519,17 +564,7 @@ export function PropertyPanelFlat({ data-flat-panel-body="true" className="flex min-h-0 flex-1 flex-col overflow-y-auto" > - {beforeOpen.map((g) => ( - - toggleOpen(g.id)} - summary={g.summary} - animateEntrance={justToggledIds.includes(g.id)} - /> - - ))} + {beforeOpen.map(renderClosedGroup)} {openGroup && (
@@ -548,17 +583,7 @@ export function PropertyPanelFlat({
)} - {afterOpen.map((g) => ( - - toggleOpen(g.id)} - summary={g.summary} - animateEntrance={justToggledIds.includes(g.id)} - /> - - ))} + {afterOpen.map(renderClosedGroup)}
(callback: T | undefined): T { + if (callback === undefined) throw new Error("expected callback to be present"); + return callback; +} + +describe("withTrackedGsapAnimationCallbacks", () => { + it("keeps absent optional callbacks absent and passes preview callbacks through unchanged", () => { + const callbacks = requiredCallbacks(); + const onLivePreview = vi.fn(); + const onLivePreviewEnd = vi.fn(); + callbacks.onLivePreview = onLivePreview; + callbacks.onLivePreviewEnd = onLivePreviewEnd; + + const tracked = withTrackedGsapAnimationCallbacks(callbacks, vi.fn()); + + expect(tracked.onUpdateFromProperty).toBeUndefined(); + expect(tracked.onAddFromProperty).toBeUndefined(); + expect(tracked.onRemoveFromProperty).toBeUndefined(); + expect(tracked.onSetArcPath).toBeUndefined(); + expect(tracked.onUpdateArcSegment).toBeUndefined(); + expect(tracked.onUpdateKeyframeEase).toBeUndefined(); + expect(tracked.onSetAllKeyframeEases).toBeUndefined(); + expect(tracked.onUnroll).toBeUndefined(); + expect(tracked.onLivePreview).toBe(onLivePreview); + expect(tracked.onLivePreviewEnd).toBe(onLivePreviewEnd); + }); + + it("tracks each edit once before invoking its mutation callback", () => { + const events: string[] = []; + const mutation = (name: string) => () => events.push(`mutate:${name}`); + const callbacks: GsapAnimationEditCallbacks = { + onUpdateProperty: mutation("update-property"), + onUpdateMeta: mutation("update-meta"), + onDeleteAnimation: mutation("delete"), + onAddProperty: mutation("add-property"), + onRemoveProperty: mutation("remove-property"), + onUpdateFromProperty: mutation("update-from"), + onAddFromProperty: mutation("add-from"), + onRemoveFromProperty: mutation("remove-from"), + onSetArcPath: mutation("arc-path"), + onUpdateArcSegment: mutation("arc-segment"), + onUpdateKeyframeEase: mutation("keyframe-ease"), + onSetAllKeyframeEases: mutation("all-eases"), + onUnroll: mutation("unroll"), + }; + const tracked = withTrackedGsapAnimationCallbacks(callbacks, (control, name) => { + events.push(`track:${control}:${name}`); + }); + + tracked.onUpdateProperty("a1", "visibility", 1); + tracked.onUpdateProperty("a1", "filter", "blur(2px)"); + tracked.onUpdateProperty("a1", "opacity", 0.5); + tracked.onUpdateMeta("a1", { duration: 2, ease: "none", position: 1 }); + tracked.onDeleteAnimation("a1"); + tracked.onAddProperty("a1", "scale"); + tracked.onRemoveProperty("a1", "scale"); + requireCallback(tracked.onUpdateFromProperty)("a1", "clipPath", "none"); + requireCallback(tracked.onAddFromProperty)("a1", "x"); + requireCallback(tracked.onRemoveFromProperty)("a1", "x"); + requireCallback(tracked.onSetArcPath)("a1", { enabled: true }); + requireCallback(tracked.onSetArcPath)("a1", { enabled: true, autoRotate: true }); + requireCallback(tracked.onUpdateArcSegment)("a1", 1, {}); + requireCallback(tracked.onUpdateArcSegment)("a1", 1, { curviness: 0.5 }); + requireCallback(tracked.onUpdateKeyframeEase)("a1", 50, "power2.out"); + requireCallback(tracked.onSetAllKeyframeEases)("a1", "none"); + requireCallback(tracked.onUnroll)("a1"); + + expect(events).toEqual([ + "track:toggle:visibility", + "mutate:update-property", + "track:text:filter", + "mutate:update-property", + "track:metric:opacity", + "mutate:update-property", + "track:metric:Length", + "track:select:Speed", + "track:metric:Starts at", + "mutate:update-meta", + "track:button:Remove animation", + "mutate:delete", + "track:select:Add effect property", + "mutate:add-property", + "track:button:Remove scale", + "mutate:remove-property", + "track:text:clipPath", + "mutate:update-from", + "track:select:Add from property", + "mutate:add-from", + "track:button:Remove from x", + "mutate:remove-from", + "track:toggle:Arc motion", + "mutate:arc-path", + "track:toggle:Auto rotate", + "mutate:arc-path", + "track:button:Reset arc segment 2", + "mutate:arc-segment", + "mutate:arc-segment", + "track:select:Keyframe ease", + "mutate:keyframe-ease", + "track:select:All keyframe eases", + "mutate:all-eases", + "track:button:Unroll animation", + "mutate:unroll", + ]); + }); +}); diff --git a/packages/studio/src/components/editor/gsapAnimationCallbacks.ts b/packages/studio/src/components/editor/gsapAnimationCallbacks.ts index c07d9c83b4..bc5d783569 100644 --- a/packages/studio/src/components/editor/gsapAnimationCallbacks.ts +++ b/packages/studio/src/components/editor/gsapAnimationCallbacks.ts @@ -1,4 +1,5 @@ import type { ArcPathSegment } from "@hyperframes/parsers/gsap-parser"; +import { usePlayerStore } from "../../player"; /** * Edit callbacks shared by GsapAnimationSection and each AnimationCard it @@ -35,6 +36,18 @@ export interface GsapAnimationEditCallbacks { onUnroll?: (animationId: string) => void; } +type TrackDesignInput = (control: string, name: string) => void; + +function trackAnimationProperty(track: TrackDesignInput, property: string): void { + const control = + property === "visibility" + ? "toggle" + : property === "filter" || property === "clipPath" + ? "text" + : "metric"; + track(control, property); +} + // User-facing control label for each animation-meta field. The ease control is // labelled "Speed" in the card UI, so ease/easeEach map there. const ANIMATION_META_LABELS: Record = { @@ -51,13 +64,104 @@ const ANIMATION_META_LABELS: Record = * added later is attributed honestly by its own key instead of poisoning another * control's usage count. */ -export function trackAnimationMetaUpdate( - track: (control: string, name: string) => void, - updates: Record, -): void { +function trackAnimationMetaUpdate(track: TrackDesignInput, updates: Record): void { for (const key of Object.keys(updates)) { const mapped = ANIMATION_META_LABELS[key]; if (mapped) track(mapped.control, mapped.name); else track("select", key); } } + +/** + * Add design-input telemetry to the shared animation-edit callback surface. + * Optional callbacks remain absent, pass-through preview callbacks keep their + * original identity, and every tracked event fires once before its mutation. + */ +export function withTrackedGsapAnimationCallbacks( + callbacks: GsapAnimationEditCallbacks, + track: TrackDesignInput, +): GsapAnimationEditCallbacks { + return { + onUpdateProperty: (animationId, property, value) => { + trackAnimationProperty(track, property); + callbacks.onUpdateProperty(animationId, property, value); + }, + onUpdateMeta: (animationId, updates) => { + trackAnimationMetaUpdate(track, updates); + callbacks.onUpdateMeta(animationId, updates); + }, + onDeleteAnimation: (animationId) => { + track("button", "Remove animation"); + callbacks.onDeleteAnimation(animationId); + }, + onAddProperty: (animationId, property) => { + track("select", "Add effect property"); + callbacks.onAddProperty(animationId, property); + }, + onRemoveProperty: (animationId, property) => { + track("button", `Remove ${property}`); + callbacks.onRemoveProperty(animationId, property); + }, + onUpdateFromProperty: callbacks.onUpdateFromProperty + ? (animationId, property, value) => { + trackAnimationProperty(track, property); + callbacks.onUpdateFromProperty?.(animationId, property, value); + } + : undefined, + onAddFromProperty: callbacks.onAddFromProperty + ? (animationId, property) => { + track("select", "Add from property"); + callbacks.onAddFromProperty?.(animationId, property); + } + : undefined, + onRemoveFromProperty: callbacks.onRemoveFromProperty + ? (animationId, property) => { + track("button", `Remove from ${property}`); + callbacks.onRemoveFromProperty?.(animationId, property); + } + : undefined, + onLivePreview: callbacks.onLivePreview, + onLivePreviewEnd: callbacks.onLivePreviewEnd, + onSetArcPath: callbacks.onSetArcPath + ? (animationId, config) => { + track("toggle", config.autoRotate !== undefined ? "Auto rotate" : "Arc motion"); + callbacks.onSetArcPath?.(animationId, config); + } + : undefined, + onUpdateArcSegment: callbacks.onUpdateArcSegment + ? (animationId, segmentIndex, update) => { + if (update.curviness === undefined) { + track("button", `Reset arc segment ${segmentIndex + 1}`); + } + callbacks.onUpdateArcSegment?.(animationId, segmentIndex, update); + } + : undefined, + onUpdateKeyframeEase: callbacks.onUpdateKeyframeEase + ? (animationId, percentage, ease) => { + track("select", "Keyframe ease"); + callbacks.onUpdateKeyframeEase?.(animationId, percentage, ease); + } + : undefined, + onSetAllKeyframeEases: callbacks.onSetAllKeyframeEases + ? (animationId, ease) => { + track("select", "All keyframe eases"); + callbacks.onSetAllKeyframeEases?.(animationId, ease); + } + : undefined, + onUnroll: callbacks.onUnroll + ? (animationId) => { + track("button", "Unroll animation"); + callbacks.onUnroll?.(animationId); + } + : undefined, + }; +} + +/** + * Stable consumer for the store's one-shot ease-focus request. Module-level on + * purpose: an inline arrow in the section components is a dep of AnimationCard's + * focus effect, so a fresh identity each render re-runs that effect every render. + */ +export function clearFocusedEaseSegment(): void { + usePlayerStore.getState().setFocusedEaseSegment(null); +} diff --git a/packages/studio/src/components/editor/keyframeRetime.test.ts b/packages/studio/src/components/editor/keyframeRetime.test.ts index 876c5129a5..fc8844e54d 100644 --- a/packages/studio/src/components/editor/keyframeRetime.test.ts +++ b/packages/studio/src/components/editor/keyframeRetime.test.ts @@ -1,3 +1,6 @@ +// Boundary cases share an arrange/assert shape on purpose: each case states its +// own window, drag, and expected remap so a failure reads without cross-referencing. +// fallow-ignore-file code-duplication import { describe, expect, it } from "vitest"; import { resolveKeyframeRetime, type RetimeKeyframe } from "./keyframeRetime"; @@ -94,12 +97,12 @@ describe("resolveKeyframeRetime — resize (past the tween boundary)", () => { expect(r.kind).toBe("resize"); expect(r.position).toBeCloseTo(2, 5); // start unchanged expect(r.duration).toBeCloseTo(6, 5); // 8 - 2 - // abs 2/4/8 over the new [2,8] window → 0 / 33.3 / 100. pctRemap carries each + // abs 2/4/8 over the new [2,8] window → 0 / 33.333 / 100. pctRemap carries each // existing keyframe's old→new tween-%; the commit re-keys in place (value + // ease + _auto preserved by round-tripping the source node, not re-emitted here). expect(r.pctRemap).toEqual([ { from: 0, to: 0 }, - { from: 50, to: 33.3 }, + { from: 50, to: 33.333 }, { from: 100, to: 100 }, ]); }); @@ -113,10 +116,10 @@ describe("resolveKeyframeRetime — resize (past the tween boundary)", () => { expect(r.kind).toBe("resize"); expect(r.position).toBeCloseTo(0.5, 5); expect(r.duration).toBeCloseTo(5.5, 5); // 6 - 0.5 - // abs 0.5/4/6 over [0.5,6] → 0 / 63.6 / 100. + // abs 0.5/4/6 over [0.5,6] → 0 / 63.636 / 100. expect(r.pctRemap).toEqual([ { from: 0, to: 0 }, - { from: 50, to: 63.6 }, + { from: 50, to: 63.636 }, { from: 100, to: 100 }, ]); }); diff --git a/packages/studio/src/components/editor/keyframeRetime.ts b/packages/studio/src/components/editor/keyframeRetime.ts index f235b418ed..f7fa1d1344 100644 --- a/packages/studio/src/components/editor/keyframeRetime.ts +++ b/packages/studio/src/components/editor/keyframeRetime.ts @@ -55,7 +55,6 @@ const EPSILON_TIME = 1e-4; const MIN_TWEEN_DURATION = 0.01; const round3 = (n: number) => Math.round(n * 1000) / 1000; -const round1 = (n: number) => Math.round(n * 10) / 10; // 0.1% precision const clamp = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, n)); /** Resolve timing for a flat tween's synthesized start/end diamond. */ @@ -153,7 +152,7 @@ export function resolveKeyframeRetime(opts: { const pctRemap: KeyframePctRemap[] = keyframes.map((kf, i) => { const absTime = i === draggedIdx ? dropAbsTime : tweenStart + (kf.percentage / 100) * tweenDuration; - return { from: kf.percentage, to: round1(((absTime - newStart) / newDuration) * 100) }; + return { from: kf.percentage, to: round3(((absTime - newStart) / newDuration) * 100) }; }); return { diff --git a/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx index 7458ad508a..4823a995a2 100644 --- a/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx +++ b/packages/studio/src/components/editor/propertyPanelFlatMotionSection.tsx @@ -6,12 +6,14 @@ import { formatTimingValue, RESPONSIVE_GRID } from "./propertyPanelHelpers"; import { parseTimingValue } from "./propertyPanelTimingSection"; import { CommitField } from "./propertyPanelPrimitives"; import { AnimationCard } from "./AnimationCard"; -import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimationConstants"; import { - trackAnimationMetaUpdate, type GsapAnimationEditCallbacks, + withTrackedGsapAnimationCallbacks, + clearFocusedEaseSegment, } from "./gsapAnimationCallbacks"; import { deriveElementTiming } from "./propertyPanelFlatTimingDerivation"; +import { usePlayerStore } from "../../player"; +import { GsapAddAnimationControl } from "./GsapAddAnimationControl"; export function FlatTimingRow({ element, @@ -135,15 +137,17 @@ export function FlatMotionSection({ } & GsapAnimationEditCallbacks) { const track = useTrackDesignInput(); const [addMenuOpen, setAddMenuOpen] = useState(false); - const trackProperty = (property: string) => { - const control = - property === "visibility" - ? "toggle" - : property === "filter" || property === "clipPath" - ? "text" - : "metric"; - track(control, property); - }; + const trackedCallbacks = withTrackedGsapAnimationCallbacks(callbacks, track); + const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment); + // Only consume a focus request aimed at the element THIS panel renders (not + // the store's selectedElementId, which flips synchronously during async + // selection resolution), so a shared class-selector animation id can't open + // the wrong element's editor. + const renderedElementId = `${element.sourceFile}#${element.id}`; + const focusedHere = + focusedEaseSegment && focusedEaseSegment.elementId === renderedElementId + ? focusedEaseSegment + : null; return (
@@ -172,140 +176,22 @@ export function FlatMotionSection({
{animations.map((anim, index) => ( { - trackProperty(property); - callbacks.onUpdateProperty(animationId, property, value); - }} - onUpdateMeta={(animationId, updates) => { - trackAnimationMetaUpdate(track, updates); - callbacks.onUpdateMeta(animationId, updates); - }} - onDeleteAnimation={(animationId) => { - track("button", "Remove animation"); - callbacks.onDeleteAnimation(animationId); - }} - onAddProperty={(animationId, property) => { - track("select", "Add effect property"); - callbacks.onAddProperty(animationId, property); - }} - onRemoveProperty={(animationId, property) => { - track("button", `Remove ${property}`); - callbacks.onRemoveProperty(animationId, property); - }} - onUpdateFromProperty={ - callbacks.onUpdateFromProperty - ? (animationId, property, value) => { - trackProperty(property); - callbacks.onUpdateFromProperty?.(animationId, property, value); - } - : undefined - } - onAddFromProperty={ - callbacks.onAddFromProperty - ? (animationId, property) => { - track("select", "Add from property"); - callbacks.onAddFromProperty?.(animationId, property); - } - : undefined - } - onRemoveFromProperty={ - callbacks.onRemoveFromProperty - ? (animationId, property) => { - track("button", `Remove from ${property}`); - callbacks.onRemoveFromProperty?.(animationId, property); - } - : undefined - } - onLivePreview={callbacks.onLivePreview} - onLivePreviewEnd={callbacks.onLivePreviewEnd} - onSetArcPath={ - callbacks.onSetArcPath - ? (animationId, config) => { - track( - "toggle", - config.autoRotate !== undefined ? "Auto rotate" : "Arc motion", - ); - callbacks.onSetArcPath?.(animationId, config); - } - : undefined - } - onUpdateArcSegment={ - callbacks.onUpdateArcSegment - ? (animationId, segmentIndex, update) => { - if (update.curviness === undefined) { - track("button", `Reset arc segment ${segmentIndex + 1}`); - } - callbacks.onUpdateArcSegment?.(animationId, segmentIndex, update); - } - : undefined - } - onUpdateKeyframeEase={ - callbacks.onUpdateKeyframeEase - ? (animationId, percentage, ease) => { - track("select", "Keyframe ease"); - callbacks.onUpdateKeyframeEase?.(animationId, percentage, ease); - } - : undefined - } - onSetAllKeyframeEases={ - callbacks.onSetAllKeyframeEases - ? (animationId, ease) => { - track("select", "All keyframe eases"); - callbacks.onSetAllKeyframeEases?.(animationId, ease); - } - : undefined - } - onUnroll={ - callbacks.onUnroll - ? (animationId) => { - track("button", "Unroll animation"); - callbacks.onUnroll?.(animationId); - } - : undefined - } + focusedSegment={focusedHere?.animationId === anim.id ? focusedHere : null} + onFocusSegmentConsumed={clearFocusedEaseSegment} /> ))} -
- {addMenuOpen ? ( -
- {ADD_METHODS.map((method) => ( - - ))} - -
- ) : ( - - )} -
+
)} diff --git a/packages/studio/src/components/nle/useTimelineEditCallbacks.test.ts b/packages/studio/src/components/nle/useTimelineEditCallbacks.test.ts index 662234daa0..361cfd615a 100644 --- a/packages/studio/src/components/nle/useTimelineEditCallbacks.test.ts +++ b/packages/studio/src/components/nle/useTimelineEditCallbacks.test.ts @@ -40,6 +40,36 @@ describe("resolveTimelineKeyframeTarget", () => { ).toBeNull(); }); + it("uses the rendered animation identity to resolve a same-group collision", () => { + expect( + resolveTimelineKeyframeTarget( + 50, + [ + { + percentage: 50, + tweenPercentage: 25, + propertyGroup: "position", + animationId: "position-b", + }, + ], + [ + { id: "position-a", propertyGroup: "position" }, + { id: "position-b", propertyGroup: "position" }, + ], + ), + ).toEqual({ animId: "position-b", tweenPct: 25 }); + }); + + it("rejects a rendered animation identity absent from the element", () => { + expect( + resolveTimelineKeyframeTarget( + 50, + [{ percentage: 50, animationId: "stale-position" }], + [{ id: "position", propertyGroup: "position" }], + ), + ).toBeNull(); + }); + it("keeps a keyframed and flat tween in the same property group unresolved", () => { expect( resolveTimelineKeyframeTarget( diff --git a/packages/studio/src/components/nle/useTimelineEditCallbacks.test.tsx b/packages/studio/src/components/nle/useTimelineEditCallbacks.test.tsx new file mode 100644 index 0000000000..ed83ac1efb --- /dev/null +++ b/packages/studio/src/components/nle/useTimelineEditCallbacks.test.tsx @@ -0,0 +1,485 @@ +// @vitest-environment happy-dom + +import React, { act } from "react"; +import type { GsapAnimation } from "@hyperframes/core/gsap-parser"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import type { TimelineElement } from "../../player"; +import type { TimelineEditCallbacks } from "../../player/components/timelineCallbacks"; +import { usePlayerStore } from "../../player/store/playerStore"; +import { installReactActEnvironment, mountReactHarness } from "../../hooks/domSelectionTestHarness"; + +installReactActEnvironment(); + +const mocks = vi.hoisted(() => ({ + actions: { + handleGsapRemoveKeyframe: vi.fn(), + handleGsapMoveKeyframeToPlayhead: vi.fn(), + handleGsapMoveKeyframe: vi.fn(), + handleGsapResizeKeyframedTween: vi.fn(), + handleGsapUpdateMeta: vi.fn(), + handleGsapAddKeyframe: vi.fn(), + handleGsapAddKeyframeBatch: vi.fn().mockResolvedValue(undefined), + handleGsapConvertToKeyframes: vi.fn(), + handleGsapRemoveAllKeyframes: vi.fn(), + handleGsapDeleteAnimation: vi.fn(), + buildDomSelectionForTimelineElement: vi.fn(), + }, + selection: { id: "box", selector: "#box", sourceFile: "index.html" }, + animations: Array(), +})); + +vi.mock("../../contexts/StudioContext", () => ({ + useStudioShellContext: () => ({ projectId: "project", activeCompPath: "index.html" }), +})); + +vi.mock("../../contexts/DomEditContext", () => ({ + useDomEditActionsContext: () => mocks.actions, + useDomEditSelectionContext: () => ({ + domEditSelection: mocks.selection, + selectedGsapAnimations: mocks.animations, + }), +})); + +import { useTimelineEditCallbacks } from "./useTimelineEditCallbacks"; + +const element: TimelineElement = { + id: "box", + key: "index.html#box", + domId: "box", + tag: "div", + start: 0, + duration: 1, + track: 0, + sourceFile: "index.html", +}; + +const flatAnimation: GsapAnimation = { + id: "box-to-0-position", + targetSelector: "#box", + method: "to", + position: 0, + resolvedStart: 0, + duration: 1, + properties: { x: 420 }, + propertyGroup: "position", +}; + +const otherFlatAnimation: GsapAnimation = { + ...flatAnimation, + id: "circle-to-0-position", + targetSelector: "#circle", +}; + +const otherKeyframedAnimation: GsapAnimation = { + ...otherFlatAnimation, + keyframes: { + format: "percentage", + keyframes: [ + { percentage: 0, properties: { x: 0 } }, + { percentage: 100, properties: { x: 420 } }, + ], + }, +}; + +function authoredInteriorAnimation(): GsapAnimation { + return { + ...flatAnimation, + keyframes: { + format: "percentage", + keyframes: [ + { percentage: 0, properties: { x: 0 } }, + { percentage: 50, properties: { x: 210 } }, + { percentage: 100, properties: { x: 420 } }, + ], + }, + }; +} + +function renderCallbacks(): { callbacks: TimelineEditCallbacks; unmount: () => void } { + let callbacks: TimelineEditCallbacks | null = null; + function Harness() { + callbacks = useTimelineEditCallbacks({ + handleTimelineElementMove: vi.fn(), + handleTimelineElementsMove: vi.fn(), + handleTimelineElementResize: vi.fn(), + handleTimelineGroupResize: vi.fn(), + handleToggleTrackHidden: vi.fn(), + handleBlockedTimelineEdit: vi.fn(), + handleTimelineElementSplit: vi.fn(), + handleRazorSplit: vi.fn(), + handleRazorSplitAll: vi.fn(), + }); + return null; + } + const root = mountReactHarness(); + if (!callbacks) throw new Error("timeline callbacks did not initialize"); + return { callbacks, unmount: () => act(() => root.unmount()) }; +} + +beforeEach(() => { + vi.clearAllMocks(); + mocks.animations = [flatAnimation]; + mocks.actions.buildDomSelectionForTimelineElement.mockResolvedValue(mocks.selection); + usePlayerStore.setState({ + currentTime: 0.5, + elements: [element], + domClipChildren: [], + keyframeCache: new Map(), + gsapAnimations: new Map([["box", [flatAnimation]]]), + }); +}); + +afterEach(() => { + usePlayerStore.setState({ + elements: [], + domClipChildren: [], + keyframeCache: new Map(), + gsapAnimations: new Map(), + }); +}); + +describe("useTimelineEditCallbacks — flat tween keyframe lanes", () => { + it("adds an interior point through the add-keyframe persist boundary", async () => { + const view = renderCallbacks(); + + await act(async () => { + await view.callbacks.onTogglePropertyGroupKeyframe?.(element, { + animationId: flatAnimation.id, + propertyGroup: "position", + tweenPercentage: 50, + properties: { x: 210 }, + remove: false, + }); + }); + + expect(mocks.actions.handleGsapAddKeyframeBatch).toHaveBeenCalledWith( + flatAnimation.id, + 50, + { x: 210 }, + undefined, + mocks.selection, + ); + expect(mocks.actions.handleGsapConvertToKeyframes).not.toHaveBeenCalled(); + view.unmount(); + }); + + it("safely no-ops a boundary drag while the tween is still flat", () => { + const view = renderCallbacks(); + + act(() => { + view.callbacks.onMoveKeyframe?.( + "box", + { + percentage: 0, + propertyGroup: "position", + tweenPercentage: 0, + animationId: flatAnimation.id, + }, + 25, + ); + }); + + expect(mocks.actions.handleGsapMoveKeyframe).not.toHaveBeenCalled(); + expect(mocks.actions.handleGsapResizeKeyframedTween).not.toHaveBeenCalled(); + view.unmount(); + }); + + it("deletes a non-selected element flat boundary through the clicked element's selection", async () => { + const circle: TimelineElement = { + ...element, + id: "circle", + key: "scenes/main.html#circle", + domId: "circle", + }; + usePlayerStore.setState({ + elements: [element, circle], + gsapAnimations: new Map([["scenes/main.html#circle", [otherFlatAnimation]]]), + }); + const view = renderCallbacks(); + + await act(async () => { + view.callbacks.onDeleteKeyframe?.("scenes/main.html#circle", { + percentage: 0, + propertyGroup: "position", + tweenPercentage: 0, + animationId: otherFlatAnimation.id, + }); + await Promise.resolve(); + await Promise.resolve(); + }); + + // Persisted through the CLICKED element's own selection, not the current one. + expect(mocks.actions.handleGsapDeleteAnimation).toHaveBeenCalledWith( + otherFlatAnimation.id, + mocks.selection, + ); + expect(mocks.actions.handleGsapRemoveKeyframe).not.toHaveBeenCalled(); + view.unmount(); + }); + + it("removes a non-selected element authored endpoint through the clicked element's selection", async () => { + const circle: TimelineElement = { + ...element, + id: "circle", + key: "scenes/main.html#circle", + domId: "circle", + }; + usePlayerStore.setState({ + elements: [element, circle], + gsapAnimations: new Map([["index.html#circle", [otherKeyframedAnimation]]]), + }); + const view = renderCallbacks(); + + await act(async () => { + view.callbacks.onDeleteKeyframe?.("scenes/main.html#circle", { + percentage: 100, + propertyGroup: "position", + tweenPercentage: 100, + animationId: otherKeyframedAnimation.id, + }); + await Promise.resolve(); + await Promise.resolve(); + }); + + expect(mocks.actions.handleGsapRemoveKeyframe).toHaveBeenCalledWith( + otherKeyframedAnimation.id, + 100, + undefined, + mocks.selection, + ); + expect(mocks.actions.handleGsapDeleteAnimation).not.toHaveBeenCalled(); + view.unmount(); + }); + + // The diamond context menu opens on whatever diamond was clicked, which need + // not belong to the selected element, and it passes no explicit target — so + // the resolve falls back to the cache. Reading the SELECTED element's cache + // there resolves against the wrong element's keyframes. + it("resolves a cache fallback against the clicked element, not the selected one", async () => { + const circle: TimelineElement = { + ...element, + id: "circle", + key: "scenes/main.html#circle", + domId: "circle", + sourceFile: "scenes/main.html", + }; + const circleSelection = { id: "circle", selector: "#circle", sourceFile: "scenes/main.html" }; + mocks.actions.buildDomSelectionForTimelineElement.mockResolvedValue(circleSelection); + usePlayerStore.setState({ + elements: [element, circle], + gsapAnimations: new Map([["scenes/main.html#circle", [otherKeyframedAnimation]]]), + keyframeCache: new Map([ + // Decoy at the same clip-% under the selected element's key. + [ + "box", + { + format: "percentage", + keyframes: [{ percentage: 100, tweenPercentage: 100, properties: { x: 420 } }], + }, + ], + [ + "scenes/main.html#circle", + { + format: "percentage", + keyframes: [ + { + percentage: 100, + tweenPercentage: 100, + propertyGroup: "position", + animationId: otherKeyframedAnimation.id, + properties: { x: 420 }, + }, + ], + }, + ], + ]), + }); + const view = renderCallbacks(); + + await act(async () => { + view.callbacks.onMoveKeyframeToPlayhead?.("scenes/main.html#circle", { percentage: 100 }); + await Promise.resolve(); + }); + + // The retime target, the selection it commits through, and the animation the + // playhead percentage is computed against all come from the CLICKED element. + expect(mocks.actions.handleGsapMoveKeyframeToPlayhead).toHaveBeenCalledWith( + otherKeyframedAnimation.id, + 100, + circleSelection, + otherKeyframedAnimation, + ); + view.unmount(); + }); + + it("keeps selected-element flat boundary deletion on the animation delete path", () => { + const view = renderCallbacks(); + + act(() => { + view.callbacks.onDeleteKeyframe?.("box", { + percentage: 0, + propertyGroup: "position", + tweenPercentage: 0, + animationId: flatAnimation.id, + }); + }); + + expect(mocks.actions.handleGsapDeleteAnimation).toHaveBeenCalledWith( + flatAnimation.id, + undefined, + ); + expect(mocks.actions.handleGsapRemoveKeyframe).not.toHaveBeenCalled(); + view.unmount(); + }); + + it("routes the flat lane-header remove toggle through the guarded delete path", async () => { + const view = renderCallbacks(); + + await act(async () => { + await view.callbacks.onTogglePropertyGroupKeyframe?.(element, { + animationId: flatAnimation.id, + propertyGroup: "position", + tweenPercentage: 100, + properties: { x: 420 }, + remove: true, + }); + }); + + expect(mocks.actions.handleGsapDeleteAnimation).toHaveBeenCalledWith( + flatAnimation.id, + mocks.selection, + ); + expect(mocks.actions.handleGsapRemoveKeyframe).not.toHaveBeenCalled(); + view.unmount(); + }); + + // The lane-header toggle fires on whichever element owns the lane, which need + // not be the selected one. Looking the flat tween up in the selected element's + // animations misses, and the miss silently takes the remove-one-keyframe + // branch, which strands the flat tween instead of deleting it. + it("removes a non-selected element's flat tween through that element's own animations", async () => { + const circle: TimelineElement = { + ...element, + id: "circle", + key: "scenes/main.html#circle", + domId: "circle", + }; + usePlayerStore.setState({ + elements: [element, circle], + gsapAnimations: new Map([["scenes/main.html#circle", [otherFlatAnimation]]]), + }); + const view = renderCallbacks(); + + await act(async () => { + await view.callbacks.onTogglePropertyGroupKeyframe?.(circle, { + animationId: otherFlatAnimation.id, + propertyGroup: "position", + tweenPercentage: 0, + properties: { x: 0 }, + remove: true, + }); + }); + + expect(mocks.actions.handleGsapDeleteAnimation).toHaveBeenCalledWith( + otherFlatAnimation.id, + mocks.selection, + ); + expect(mocks.actions.handleGsapRemoveKeyframe).not.toHaveBeenCalled(); + view.unmount(); + }); + + it("keeps authored interior deletion on the per-keyframe path", () => { + mocks.animations = [authoredInteriorAnimation()]; + usePlayerStore.setState({ gsapAnimations: new Map([["box", mocks.animations]]) }); + const view = renderCallbacks(); + + act(() => { + view.callbacks.onDeleteKeyframe?.("box", { + percentage: 50, + propertyGroup: "position", + tweenPercentage: 50, + animationId: flatAnimation.id, + }); + }); + + expect(mocks.actions.handleGsapRemoveKeyframe).toHaveBeenCalledWith( + flatAnimation.id, + 50, + undefined, + undefined, + ); + expect(mocks.actions.handleGsapDeleteAnimation).not.toHaveBeenCalled(); + view.unmount(); + }); + + it("keeps an authored interior drag on the per-keyframe move path", async () => { + const authored = authoredInteriorAnimation(); + mocks.animations = [authored]; + usePlayerStore.setState({ gsapAnimations: new Map([["box", [authored]]]) }); + const view = renderCallbacks(); + + await act(async () => { + await view.callbacks.onMoveKeyframe?.( + "box", + { + percentage: 50, + propertyGroup: "position", + tweenPercentage: 50, + animationId: authored.id, + }, + 75, + ); + }); + + expect(mocks.actions.handleGsapMoveKeyframe).toHaveBeenCalledWith( + authored.id, + 50, + 75, + mocks.selection, + ); + expect(mocks.actions.handleGsapResizeKeyframedTween).not.toHaveBeenCalled(); + view.unmount(); + }); + + // A drag starts on whatever diamond the pointer is over, which need not be the + // selected element. Resolving against the selection would retime the selected + // element's tween and commit it through the selected element's file. + it("retimes a non-selected element's keyframe through that element's own selection", async () => { + const circle: TimelineElement = { + ...element, + id: "circle", + key: "scenes/main.html#circle", + domId: "circle", + sourceFile: "scenes/main.html", + }; + const circleSelection = { id: "circle", selector: "#circle", sourceFile: "scenes/main.html" }; + const circleAnimation = { ...authoredInteriorAnimation(), id: "circle-to-0-position" }; + usePlayerStore.setState({ + elements: [element, circle], + gsapAnimations: new Map([["scenes/main.html#circle", [circleAnimation]]]), + }); + mocks.actions.buildDomSelectionForTimelineElement.mockResolvedValue(circleSelection); + const view = renderCallbacks(); + + await act(async () => { + await view.callbacks.onMoveKeyframe?.( + "scenes/main.html#circle", + { + percentage: 50, + propertyGroup: "position", + tweenPercentage: 50, + animationId: circleAnimation.id, + }, + 75, + ); + }); + + expect(mocks.actions.handleGsapMoveKeyframe).toHaveBeenCalledWith( + circleAnimation.id, + 50, + 75, + circleSelection, + ); + view.unmount(); + }); +}); diff --git a/packages/studio/src/components/nle/useTimelineEditCallbacks.ts b/packages/studio/src/components/nle/useTimelineEditCallbacks.ts index 76122eb47c..4669b99d02 100644 --- a/packages/studio/src/components/nle/useTimelineEditCallbacks.ts +++ b/packages/studio/src/components/nle/useTimelineEditCallbacks.ts @@ -1,4 +1,5 @@ import { useCallback, useMemo } from "react"; +import type { GsapAnimation } from "@hyperframes/core/gsap-parser"; import type { TimelineElement } from "../../player"; import { usePlayerStore } from "../../player/store/playerStore"; import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing"; @@ -10,8 +11,12 @@ import { } from "../../contexts/DomEditContext"; import { resolveTweenStart, resolveTweenDuration } from "../../utils/globalTimeCompiler"; import { resolveClipTimingBasis } from "../../hooks/useGsapTweenCache"; +import { elementCacheKeys } from "../../hooks/gsapKeyframeCacheHelpers"; import { resolveKeyframeRetime } from "../editor/keyframeRetime"; +import type { DomEditSelection } from "../editor/domEditingTypes"; import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter"; +import { splitTimelineElementKey } from "../../player/lib/timelineElementHelpers"; +import type { TimelineKeyframeTarget } from "../../player/components/timelineKeyframeIdentity"; export interface TimelineEditCallbackDeps { handleTimelineElementMove: ( @@ -46,15 +51,14 @@ interface TimelineCachedKeyframe { percentage: number; tweenPercentage?: number; propertyGroup?: string; + animationId?: string; } /** * Resolve a rendered timeline diamond back to the animation that authored it. - * Flat tweens use synthesized diamonds, so a mixed flat tween may have neither - * a property group nor real keyframes. The cache currently carries a property - * group, not an animation id, so resolution is safe only when that group has a - * single candidate. Ambiguous candidates remain unresolved rather than - * retiming an arbitrary tween. + * Prefer the animation identity carried by the rendered keyframe. Legacy cache + * entries without one are safe only when their property group has one candidate; + * ambiguous candidates remain unresolved rather than retiming an arbitrary tween. */ export function resolveTimelineKeyframeTarget( pct: number, @@ -63,6 +67,14 @@ export function resolveTimelineKeyframeTarget( ): { animId: string; tweenPct: number } | null { const kf = keyframes.find((item) => Math.abs(item.percentage - pct) < 0.2); if (!kf) return null; + const identifiedAnimation = kf.animationId + ? animations.find((animation) => animation.id === kf.animationId) + : undefined; + if (kf.animationId) { + return identifiedAnimation + ? { animId: identifiedAnimation.id, tweenPct: kf.tweenPercentage ?? pct } + : null; + } const group = kf?.propertyGroup; const candidates = group ? animations.filter((animation) => animation.propertyGroup === group) @@ -98,24 +110,75 @@ export function useTimelineEditCallbacks({ handleGsapResizeKeyframedTween, handleGsapUpdateMeta, handleGsapAddKeyframe, + handleGsapAddKeyframeBatch, handleGsapConvertToKeyframes, handleGsapRemoveAllKeyframes, + handleGsapDeleteAnimation, buildDomSelectionForTimelineElement, } = useDomEditActionsContext(); + const resolveElementAnimations = useCallback( + (elementKey: string): GsapAnimation[] => { + const { gsapAnimations } = usePlayerStore.getState(); + const { sourceFile, domId } = splitTimelineElementKey(elementKey); + const scope = sourceFile ?? activeCompPath ?? "index.html"; + // elementCacheKeys owns the key-variant list the writers use; reading it + // back by hand here is how the two sides drift. + for (const key of elementCacheKeys(scope, domId)) { + const animations = gsapAnimations.get(key); + if (animations) return animations; + } + return []; + }, + [activeCompPath], + ); + // Resolve a timeline-diamond callback's clip-% to the keyframe's anim id + its // tween-relative percentage (shared by the delete/move keyframe callbacks): the // diamond reports a clip-% but the script ops key on the tween-%. Prefers the // anim in the keyframe's property group, falling back to the first keyframed one. const resolveKeyframeTarget = useCallback( - // fallow-ignore-next-line complexity - (pct: number): { animId: string; tweenPct: number } | null => { - const cached = usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? ""); - return resolveTimelineKeyframeTarget(pct, cached?.keyframes ?? [], selectedGsapAnimations); + ( + target: TimelineKeyframeTarget, + animations: GsapAnimation[] = selectedGsapAnimations, + elementKey?: string, + ): { animId: string; tweenPct: number } | null => { + const carriesIdentity = + target.propertyGroup !== undefined || + target.tweenPercentage !== undefined || + target.animationId !== undefined; + // The clicked element's own cache when the caller knows it: the diamond + // context menu can open on an element that is not the selected one, and + // reading the selection's cache there resolves against the wrong element. + const cached = usePlayerStore + .getState() + .keyframeCache.get(elementKey ?? domEditSelection?.id ?? ""); + return resolveTimelineKeyframeTarget( + target.percentage, + carriesIdentity ? [target] : (cached?.keyframes ?? []), + animations, + ); }, [domEditSelection?.id, selectedGsapAnimations], ); + const removeKeyframeTarget = useCallback( + ( + animationId: string, + percentage: number, + animations: GsapAnimation[], + selectionOverride?: DomEditSelection | null, + ) => { + const animation = animations.find((candidate) => candidate.id === animationId); + if (animation && !animation.keyframes) { + handleGsapDeleteAnimation(animationId, selectionOverride); + return; + } + handleGsapRemoveKeyframe(animationId, percentage, undefined, selectionOverride); + }, + [handleGsapDeleteAnimation, handleGsapRemoveKeyframe], + ); + return useMemo( () => ({ onMoveElement: handleTimelineElementMove, @@ -135,14 +198,41 @@ export function useTimelineEditCallbacks({ if (!anim) return; handleGsapRemoveAllKeyframes(anim.id); }, - onDeleteKeyframe: (_elId: string, pct: number) => { - const target = resolveKeyframeTarget(pct); - if (target) handleGsapRemoveKeyframe(target.animId, target.tweenPct); + onDeleteKeyframe: (elId, keyframe) => { + const animations = resolveElementAnimations(elId); + const target = resolveKeyframeTarget(keyframe, animations, elId); + if (!target) return; + const element = usePlayerStore.getState().elements.find((el) => (el.key ?? el.id) === elId); + if (!element) { + removeKeyframeTarget(target.animId, target.tweenPct, animations); + return; + } + // Persist through the CLICKED element's own selection so a deletion on a + // non-selected element (especially one in a different source file) commits + // against the right element instead of the current domEditSelection. + void buildDomSelectionForTimelineElement(element).then((selection) => { + removeKeyframeTarget(target.animId, target.tweenPct, animations, selection); + }); }, - // Retime the keyframe to the playhead, preserving its value + ease. - onMoveKeyframeToPlayhead: (_elId: string, pct: number) => { - const target = resolveKeyframeTarget(pct); - if (target) handleGsapMoveKeyframeToPlayhead(target.animId, target.tweenPct); + // Retime the keyframe to the playhead, preserving its value + ease. The + // clicked element owns the whole write: its animations resolve the target, + // its selection commits it, and its animation computes the playhead + // percentage. Mixing frames here retimed against the selected element's + // tween and wrote the result into the clicked element's file. + onMoveKeyframeToPlayhead: (elId, keyframe) => { + const animations = resolveElementAnimations(elId); + const target = resolveKeyframeTarget(keyframe, animations, elId); + const animation = target + ? animations.find((candidate) => candidate.id === target.animId) + : undefined; + if (!target || !animation) return; + const element = usePlayerStore.getState().elements.find((el) => (el.key ?? el.id) === elId); + if (!element) return; + void buildDomSelectionForTimelineElement(element).then((selection) => { + if (selection) { + handleGsapMoveKeyframeToPlayhead(target.animId, target.tweenPct, selection, animation); + } + }); }, // Drag-to-retime. The diamond reports clip-%s; resolveKeyframeTarget gives // the dragged keyframe's anim + tween-%. We convert the clip-% drop to an @@ -152,13 +242,23 @@ export function useTimelineEditCallbacks({ // resizes the tween — position/duration grow so the dragged keyframe lands at // the drop while every other keyframe keeps its absolute time (value+ease too). // fallow-ignore-next-line complexity - onMoveKeyframe: (_elId: string, fromClipPct: number, toClipPct: number) => { - const target = resolveKeyframeTarget(fromClipPct); - const sel = domEditSelection; - if (!target || !sel) return; - const anim = selectedGsapAnimations.find((a) => a.id === target.animId); + onMoveKeyframe: async (elId, keyframe, toClipPct) => { + const animations = resolveElementAnimations(elId); + const target = resolveKeyframeTarget(keyframe, animations, elId); + if (!target) return false; + // The dragged diamond's OWN element, not the selected one: a drag on a + // non-selected clip has to read that clip's animations and commit + // through that clip's selection, or it retimes whatever is selected. + const element = usePlayerStore.getState().elements.find((el) => (el.key ?? el.id) === elId); + const sel = element ? await buildDomSelectionForTimelineElement(element) : domEditSelection; + if (!sel) return false; + const anim = animations.find((a) => a.id === target.animId); const tweenStart = anim ? resolveTweenStart(anim) : null; - if (!anim || tweenStart === null) return; + if (!anim || tweenStart === null) return false; + // Synthesized flat endpoints are clip boundaries, not authored keyframes. + // Boundary-to-clip resize wiring is intentionally deferred; ignore the + // drag rather than dispatching a free keyframe move that cannot be written. + if (!anim.keyframes) return false; const tweenDuration = anim.duration ?? resolveTweenDuration(anim); const sourceFile = sel.sourceFile || activeCompPath || "index.html"; const { elements, domClipChildren } = usePlayerStore.getState(); @@ -177,7 +277,7 @@ export function useTimelineEditCallbacks({ dropAbsTime, }); if (decision.kind === "move" && decision.toTweenPct != null) { - handleGsapMoveKeyframe(target.animId, target.tweenPct, decision.toTweenPct); + handleGsapMoveKeyframe(target.animId, target.tweenPct, decision.toTweenPct, sel); } else if ( decision.kind === "resize" && decision.pctRemap && @@ -190,22 +290,36 @@ export function useTimelineEditCallbacks({ decision.position, decision.duration, decision.pctRemap, + sel, ); } else { // resize-keyframed-tween requires an authored `keyframes` AST node // and intentionally no-ops for a flat tween. Update its real tween // window through the metadata writer (and SDK cutover path) instead. - handleGsapUpdateMeta(target.animId, { - position: decision.position, - duration: decision.duration, - }); + handleGsapUpdateMeta( + target.animId, + { position: decision.position, duration: decision.duration }, + sel, + ); } + } else { + return false; } + return true; }, - onChangeKeyframeEase: (_elId: string, _pct: number, ease: string) => { - for (const anim of selectedGsapAnimations) { - if (anim.keyframes) handleGsapUpdateMeta(anim.id, { ease }); - } + onChangeKeyframeEase: (elId: string, _pct: number, ease: string) => { + // The edited element's own animations + selection, not the selection's: + // an ease change on a non-selected lane otherwise rewrote whichever + // element happened to be selected, in whichever file it lives. + const animations = resolveElementAnimations(elId); + const element = usePlayerStore.getState().elements.find((el) => (el.key ?? el.id) === elId); + if (!element) return; + void buildDomSelectionForTimelineElement(element).then((selection) => { + if (!selection) return; + for (const anim of animations) { + if (anim.keyframes) handleGsapUpdateMeta(anim.id, { ease }, selection); + } + }); }, // fallow-ignore-next-line complexity onToggleKeyframeAtPlayhead: (el: TimelineElement) => { @@ -214,18 +328,57 @@ export function useTimelineEditCallbacks({ el.duration > 0 ? Math.max(0, Math.min(100, Math.round(((currentTime - el.start) / el.duration) * 100))) : 0; - const anim = selectedGsapAnimations.find((a) => a.keyframes); - if (anim?.keyframes) { - const existing = anim.keyframes.keyframes.find((k) => Math.abs(k.percentage - pct) <= 1); - if (existing) { - handleGsapRemoveKeyframe(anim.id, existing.percentage); + // Same frame for read and write: the toggled element's animations decide + // add-vs-remove, and its selection is what the mutation commits through. + const animations = resolveElementAnimations(el.key ?? el.id); + void buildDomSelectionForTimelineElement(el).then((selection) => { + if (!selection) return; + const anim = animations.find((a) => a.keyframes); + if (anim?.keyframes) { + const existing = anim.keyframes.keyframes.find( + (k) => Math.abs(k.percentage - pct) <= 1, + ); + if (existing) { + handleGsapRemoveKeyframe(anim.id, existing.percentage, undefined, selection); + } else { + handleGsapAddKeyframe(anim.id, pct, "x", 0, selection); + } } else { - handleGsapAddKeyframe(anim.id, pct, "x", 0); + const flatAnim = animations.find((a) => !a.keyframes); + if (flatAnim) { + void handleGsapConvertToKeyframes( + flatAnim.id, + undefined, + undefined, + undefined, + selection, + ); + } } - } else { - const flatAnim = selectedGsapAnimations.find((a) => !a.keyframes); - if (flatAnim) handleGsapConvertToKeyframes(flatAnim.id); + }); + }, + onTogglePropertyGroupKeyframe: async (element, target) => { + const selection = await buildDomSelectionForTimelineElement(element); + if (!selection) return; + if (target.remove) { + // The clicked element's animations, not the selected element's: this + // lookup decides delete-the-flat-tween vs remove-one-keyframe, and a + // miss silently takes the keyframe branch, stranding the flat tween. + removeKeyframeTarget( + target.animationId, + target.tweenPercentage, + resolveElementAnimations(element.key ?? element.id), + selection, + ); + return; } + await handleGsapAddKeyframeBatch( + target.animationId, + target.tweenPercentage, + target.properties, + undefined, + selection, + ); }, }), // eslint-disable-next-line react-hooks/exhaustive-deps @@ -240,14 +393,16 @@ export function useTimelineEditCallbacks({ handleRazorSplit, handleRazorSplitAll, handleGsapRemoveAllKeyframes, + resolveElementAnimations, resolveKeyframeTarget, + removeKeyframeTarget, selectedGsapAnimations, - handleGsapRemoveKeyframe, handleGsapMoveKeyframeToPlayhead, handleGsapMoveKeyframe, handleGsapResizeKeyframedTween, handleGsapUpdateMeta, handleGsapAddKeyframe, + handleGsapAddKeyframeBatch, handleGsapConvertToKeyframes, buildDomSelectionForTimelineElement, projectId, diff --git a/packages/studio/src/contexts/TimelineEditContext.tsx b/packages/studio/src/contexts/TimelineEditContext.tsx index c2b6edc6ce..be7f4e9ad6 100644 --- a/packages/studio/src/contexts/TimelineEditContext.tsx +++ b/packages/studio/src/contexts/TimelineEditContext.tsx @@ -44,6 +44,7 @@ export function TimelineEditProvider({ value.onMoveKeyframeToPlayhead, value.onMoveKeyframe, value.onToggleKeyframeAtPlayhead, + value.onTogglePropertyGroupKeyframe, ], ); return {children}; diff --git a/packages/studio/src/hooks/gsapDragCommit.ts b/packages/studio/src/hooks/gsapDragCommit.ts index 167ce438d5..4774c17e1b 100644 --- a/packages/studio/src/hooks/gsapDragCommit.ts +++ b/packages/studio/src/hooks/gsapDragCommit.ts @@ -12,7 +12,7 @@ import { usePlayerStore } from "../player/store/playerStore"; import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeKeyframes"; import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler"; import { roundTo3 } from "../utils/rounding"; -import { computeElementPercentage } from "./gsapShared"; +import { computeElementPercentage, idSelector } from "./gsapShared"; import { computeDraggedGsapPosition } from "./draggedGsapPosition"; import type { RuntimeTweenChange } from "./gsapRuntimePatch"; import { isGestureTransactionCommit, runGestureTransaction } from "./gestureTransaction"; @@ -117,7 +117,7 @@ export async function materializeIfDynamic( const allScanned = scanAllRuntimeKeyframes(iframe); if (allScanned.size === 0) return; const allElements = Array.from(allScanned.entries()).map(([id, data]) => ({ - selector: `#${id}`, + selector: idSelector(id), keyframes: data.keyframes, easeEach: data.easeEach, })); diff --git a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.test.ts b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.test.ts index 16fc62b206..9bc45eec22 100644 --- a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.test.ts +++ b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.test.ts @@ -28,7 +28,7 @@ const animWithKeyframes = (id: string): GsapAnimation => ({ }); beforeEach(() => { - usePlayerStore.setState({ keyframeCache: new Map(), elements: [] }); + usePlayerStore.setState({ keyframeCache: new Map(), gsapAnimations: new Map(), elements: [] }); }); describe("clearKeyframeCacheForElement", () => { @@ -84,6 +84,20 @@ describe("clearKeyframeCacheForFile", () => { } }); + // Several composition files re-scan concurrently, so a clear that walked the + // index.html alias would delete rows a sibling file had just written. + it("leaves an index.html-owned element alone when another file re-scans", () => { + seed("index.html#title"); + seed("title"); + seed("comp.html#a"); + + clearKeyframeCacheForFile("comp.html"); + + expect(cache().has("index.html#title")).toBe(true); + expect(cache().has("title")).toBe(true); + expect(cache().has("comp.html#a")).toBe(false); + }); + it("leaves entries that belong to a different source file", () => { seed("comp.html#a"); seed("a"); @@ -98,6 +112,41 @@ describe("clearKeyframeCacheForFile", () => { }); describe("updateKeyframeCacheFromParsed", () => { + it("serializes a multi-keyframe tween with a stable shape and animation identity", () => { + const animation: GsapAnimation = { + ...animWithKeyframes("hero"), + duration: 2, + resolvedStart: 3, + keyframes: { + format: "percentage", + keyframes: [ + { percentage: 0, properties: { x: 0 } }, + { percentage: 50, properties: { x: 100 }, ease: "power1.inOut" }, + { percentage: 100, properties: { x: 200 } }, + ], + easeEach: "power1.inOut", + }, + }; + usePlayerStore.setState({ + elements: [ + { + id: "hero-clip", + domId: "hero", + tag: "div", + start: 2, + duration: 4, + track: 0, + }, + ], + }); + + updateKeyframeCacheFromParsed([animation], "scene.html", "hero", {}); + + expect(JSON.stringify(cache().get("scene.html#hero"))).toBe( + '{"format":"percentage","keyframes":[{"percentage":25,"properties":{"x":0},"tweenPercentage":0,"propertyGroup":"position","animationId":"hero"},{"percentage":50,"properties":{"x":100},"ease":"power1.inOut","tweenPercentage":50,"propertyGroup":"position","animationId":"hero"},{"percentage":75,"properties":{"x":200},"tweenPercentage":100,"propertyGroup":"position","animationId":"hero"}],"easeEach":"power1.inOut"}', + ); + }); + it("clears the bare key when the selected element no longer has keyframes", () => { // Element previously had keyframes, so a bare entry exists (writes set both). seed("index.html#box"); @@ -118,4 +167,87 @@ describe("updateKeyframeCacheFromParsed", () => { expect(cache().has("index.html#hero")).toBe(true); expect(cache().has("hero")).toBe(true); }); + + it("caches flat tweens as clip-relative start and end keyframes", () => { + const animation: GsapAnimation = { + id: "flat-box", + targetSelector: "#box", + method: "to", + position: 1, + properties: { x: 420 }, + duration: 2, + resolvedStart: 1, + ease: "power2.out", + propertyGroup: "position", + }; + usePlayerStore.setState({ + elements: [{ id: "box-clip", domId: "box", tag: "div", start: 1, duration: 2, track: 0 }], + }); + + updateKeyframeCacheFromParsed([animation], "scene.html", "box", {}); + + expect(cache().get("scene.html#box")).toEqual({ + format: "percentage", + keyframes: [ + { + percentage: 0, + properties: { x: 0 }, + tweenPercentage: 0, + propertyGroup: "position", + animationId: "flat-box", + }, + { + percentage: 100, + properties: { x: 420 }, + ease: "power2.out", + tweenPercentage: 100, + propertyGroup: "position", + animationId: "flat-box", + }, + ], + }); + expect(usePlayerStore.getState().gsapAnimations.get("scene.html#box")).toEqual([animation]); + }); + + it("records an ungrouped tween in gsapAnimations too, so the two stores agree", () => { + // `{ x, opacity }` spans two property groups, so the parser leaves + // propertyGroup undefined. Skipping it here used to cache diamonds with no + // source animation behind them: the collapsed row drew keyframes the + // expanded lanes could not render. + const animation: GsapAnimation = { + id: "mixed-box", + targetSelector: "#box", + method: "to", + position: 0, + properties: { x: 100, opacity: 0 }, + duration: 1, + resolvedStart: 0, + }; + usePlayerStore.setState({ + elements: [{ id: "box-clip", domId: "box", tag: "div", start: 0, duration: 1, track: 0 }], + }); + + updateKeyframeCacheFromParsed([animation], "scene.html", "box", {}); + + expect(cache().has("scene.html#box")).toBe(true); + expect(usePlayerStore.getState().gsapAnimations.get("scene.html#box")).toEqual([animation]); + }); + + it("does not cache a flat tween without animatable numeric properties", () => { + const animation: GsapAnimation = { + id: "flat-box", + targetSelector: "#box", + method: "to", + position: 0, + properties: { backgroundColor: "#fff" }, + duration: 1, + propertyGroup: "visual", + }; + + updateKeyframeCacheFromParsed([animation], "scene.html", "box", {}); + + expect(cache().has("scene.html#box")).toBe(false); + expect(cache().has("box")).toBe(false); + expect(usePlayerStore.getState().gsapAnimations.has("scene.html#box")).toBe(false); + }); }); diff --git a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts index 1b5bef62b0..efe0941df2 100644 --- a/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts +++ b/packages/studio/src/hooks/gsapKeyframeCacheHelpers.ts @@ -4,7 +4,8 @@ */ import type { GsapAnimation } from "@hyperframes/core/gsap-parser"; import { usePlayerStore, type KeyframeCacheEntry } from "../player/store/playerStore"; -import { toAbsoluteTime } from "./gsapShared"; +import { idFromSelector, toClipKeyframes } from "./gsapShared"; +import { deduplicateKeyframes, synthesizeFlatTweenKeyframes } from "./gsapTweenSynth"; export function updateKeyframeCacheFromParsed( animations: GsapAnimation[], @@ -15,57 +16,52 @@ export function updateKeyframeCacheFromParsed( const { setKeyframeCache, elements } = usePlayerStore.getState(); const idsWithKeyframes = new Set(); const merged = new Map(); + const sourceAnimations = new Map(); for (const anim of animations) { - const id = anim.targetSelector.match(/^#([\w-]+)/)?.[1]; - if (!id || !anim.keyframes) continue; + const id = idFromSelector(anim.targetSelector); + const kfSource = + anim.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(anim)?.keyframes ?? []; + if (!id || kfSource.length === 0) continue; idsWithKeyframes.add(id); + // Every tween that fed keyframeCache also lands in gsapAnimations, group or + // not: a mixed-group tween (`{ x, opacity }` classifies to undefined) used to + // cache diamonds with no source animation behind them, so the collapsed row + // drew keyframes the expanded lanes couldn't render. Lane consumers do the + // group filtering themselves (animationContributesLane). + sourceAnimations.set(id, [...(sourceAnimations.get(id) ?? []), anim]); // Convert tween-relative percentages to clip-relative so diamonds // render at the correct position within the timeline clip. - const tweenPos = anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0); - const tweenDur = anim.duration ?? 1; const timelineEl = elements.find( (el) => el.domId === id || (el.key ?? el.id) === `${targetPath}#${id}`, ); - const elStart = timelineEl?.start ?? 0; - const elDuration = timelineEl?.duration ?? 1; - const clipKeyframes = anim.keyframes.keyframes.map((kf) => { - const absTime = toAbsoluteTime(tweenPos, tweenDur, kf.percentage); - const clipPct = - elDuration > 0 ? Math.round(((absTime - elStart) / elDuration) * 1000) / 10 : kf.percentage; - return { - ...kf, - percentage: clipPct, - tweenPercentage: kf.percentage, - propertyGroup: anim.propertyGroup, - }; - }); + const clipKeyframes = toClipKeyframes( + kfSource, + anim, + timelineEl?.start ?? 0, + timelineEl?.duration ?? 1, + ); const existing = merged.get(id); if (existing) { - const byPct = new Map(); - for (const kf of [...existing.keyframes, ...clipKeyframes]) { - const prev = byPct.get(kf.percentage); - if (prev) { - prev.properties = { ...prev.properties, ...kf.properties }; - if (kf.ease) prev.ease = kf.ease; - } else { - byPct.set(kf.percentage, { ...kf, properties: { ...kf.properties } }); - } - } - existing.keyframes = Array.from(byPct.values()).sort((a, b) => a.percentage - b.percentage); + // deduplicateKeyframes owns the same-% merge (including the easeAmbiguous + // flag downstream lanes read); a second copy of that rule here is how the + // two writers drift. + existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]); } else { - merged.set(id, { ...anim.keyframes, keyframes: clipKeyframes }); + merged.set(id, { + ...anim.keyframes, + format: anim.keyframes?.format ?? "percentage", + keyframes: clipKeyframes, + }); } } for (const [id, entry] of merged) { - setKeyframeCache(`${targetPath}#${id}`, entry); - setKeyframeCache(id, entry); - if (targetPath !== "index.html") setKeyframeCache(`index.html#${id}`, entry); + for (const key of elementCacheKeys(targetPath, id)) setKeyframeCache(key, entry); + writeGsapAnimationsForElement(targetPath, id, sourceAnimations.get(id)); } const targetId = - (mutation as { targetSelector?: string }).targetSelector?.match(/^#([\w-]+)/)?.[1] ?? - selectionId; + idFromSelector((mutation as { targetSelector?: string }).targetSelector) ?? selectionId; if (targetId && !idsWithKeyframes.has(targetId)) { clearKeyframeCacheForElement(targetPath, targetId); } @@ -84,40 +80,57 @@ export function updateKeyframeCacheFromParsed( * a new cache map and re-render every subscriber. */ export function clearKeyframeCacheForElement(sourceFile: string, elementId: string): void { - const { keyframeCache, setKeyframeCache } = usePlayerStore.getState(); - const keys = - sourceFile === "index.html" - ? [`index.html#${elementId}`, elementId] - : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId]; + const { keyframeCache, setKeyframeCache, gsapAnimations, setGsapAnimations } = + usePlayerStore.getState(); + const keys = elementCacheKeys(sourceFile, elementId); for (const key of keys) { if (keyframeCache.has(key)) setKeyframeCache(key, undefined); + if (gsapAnimations.has(key)) setGsapAnimations(key, undefined); } } /** * Clear every cached element of `sourceFile` before a full re-scan repopulates - * it. Collects the element ids that currently have a prefixed or index.html - * fallback key for the file and drops each through clearKeyframeCacheForElement - * so the bare key goes too — an element whose keyframes were removed (and so is - * absent from the re-scan) leaves no stale bare entry behind. + * it. Only the file's OWN prefixed keys name the ids to clear: every write sets + * the prefixed key (see elementCacheKeys), so the file's elements are all + * reachable that way, and clearKeyframeCacheForElement then takes the + * index.html alias and the bare key with them — an element whose keyframes were + * removed (and so is absent from the re-scan) leaves no stale bare entry + * behind. Reading the alias prefix here instead would collect ids owned by + * OTHER files, and several files re-scan concurrently, so this file's clear + * would wipe the entries a sibling file had just written. */ export function clearKeyframeCacheForFile(sourceFile: string): void { - const { keyframeCache } = usePlayerStore.getState(); + const { keyframeCache, gsapAnimations } = usePlayerStore.getState(); const sfPrefix = `${sourceFile}#`; - const fallbackPrefix = "index.html#"; const ids = new Set(); - for (const key of keyframeCache.keys()) { - const matchesFile = - key.startsWith(sfPrefix) || (sourceFile !== "index.html" && key.startsWith(fallbackPrefix)); - if (!matchesFile) continue; - const hashIdx = key.indexOf("#"); - if (hashIdx !== -1) ids.add(key.slice(hashIdx + 1)); + for (const key of [...keyframeCache.keys(), ...gsapAnimations.keys()]) { + if (!key.startsWith(sfPrefix)) continue; + ids.add(key.slice(sfPrefix.length)); } for (const id of ids) { clearKeyframeCacheForElement(sourceFile, id); } } +/** Every cache key a write for this element sets, in read-preference order. */ +export function elementCacheKeys(sourceFile: string, elementId: string): string[] { + return sourceFile === "index.html" + ? [`index.html#${elementId}`, elementId] + : [`${sourceFile}#${elementId}`, `index.html#${elementId}`, elementId]; +} + +export function writeGsapAnimationsForElement( + sourceFile: string, + elementId: string, + animations: GsapAnimation[] | undefined, +): void { + const { setGsapAnimations } = usePlayerStore.getState(); + for (const key of elementCacheKeys(sourceFile, elementId)) { + setGsapAnimations(key, animations); + } +} + function buildCacheKey(sourceFile: string, elementId: string): string { return `${sourceFile}#${elementId}`; } diff --git a/packages/studio/src/hooks/gsapScriptCommitHelpers.ts b/packages/studio/src/hooks/gsapScriptCommitHelpers.ts index d84c698608..e6d17338f3 100644 --- a/packages/studio/src/hooks/gsapScriptCommitHelpers.ts +++ b/packages/studio/src/hooks/gsapScriptCommitHelpers.ts @@ -2,12 +2,13 @@ import { findUnsafeDomPatchValues } from "@hyperframes/core/studio-api/finite-mu import type { DomEditSelection } from "../components/editor/domEditingTypes"; export { PROPERTY_DEFAULTS } from "./gsapShared"; +import { idSelector } from "./gsapShared"; export function ensureElementAddressable(selection: DomEditSelection): { selector: string; autoId?: string; } { - if (selection.id) return { selector: `#${selection.id}` }; + if (selection.id) return { selector: idSelector(selection.id) }; if (selection.selector) return { selector: selection.selector }; const el = selection.element; @@ -20,7 +21,7 @@ export function ensureElementAddressable(selection: DomEditSelection): { id = `${tag}-${n}`; } el.setAttribute("id", id); - return { selector: `#${id}`, autoId: id }; + return { selector: idSelector(id), autoId: id }; } export class GsapMutationHttpError extends Error { diff --git a/packages/studio/src/hooks/gsapShared.test.ts b/packages/studio/src/hooks/gsapShared.test.ts index ba45743488..0fb17bfb74 100644 --- a/packages/studio/src/hooks/gsapShared.test.ts +++ b/packages/studio/src/hooks/gsapShared.test.ts @@ -1,6 +1,13 @@ import { describe, it, expect } from "vitest"; import type { GsapAnimation } from "@hyperframes/core/gsap-parser"; -import { isInstantHold, parsePercentageKeyframes } from "./gsapShared"; +import { + idFromSelector, + idSelector, + isInstantHold, + parsePercentageKeyframes, + toClipKeyframes, + toClipPercentage, +} from "./gsapShared"; describe("isInstantHold", () => { const animation = (method: GsapAnimation["method"], duration?: number) => @@ -74,3 +81,86 @@ describe("parsePercentageKeyframes", () => { expect(parsePercentageKeyframes({})).toBeNull(); }); }); + +describe("idSelector", () => { + it("uses #id for valid CSS identifiers", () => { + expect(idSelector("hero-word")).toBe("#hero-word"); + expect(idSelector("el_1")).toBe("#el_1"); + }); + + it("uses an attribute selector for ids that #id can't address (digit-leading, dots, spaces)", () => { + // #01-... / #a.b / #a b throw a SyntaxError in querySelector / GSAP, crashing + // the preview when such a target is committed (e.g. dragging the element). + expect(idSelector("01-hook-hero-word")).toBe('[id="01-hook-hero-word"]'); + expect(idSelector("my.class")).toBe('[id="my.class"]'); + expect(idSelector("1box")).toBe('[id="1box"]'); + }); + + it("escapes quotes and backslashes in the attribute selector value", () => { + expect(idSelector('1"x')).toBe('[id="1\\"x"]'); + }); + + it("only ever emits #id for ids that can't break querySelector", () => { + // Every id resolves to either a plain #id (only when safe) or an attribute + // selector — never a #id that would throw a SyntaxError. + for (const id of ["hero-word", "01-hook", "a.b", "a b", "1", "--x", '1"q']) { + const sel = idSelector(id); + if (sel.startsWith("#")) expect(sel).toBe(`#${id}`); + else expect(sel.startsWith('[id="')).toBe(true); + } + }); +}); + +describe("toClipPercentage", () => { + // Selection keys embed this number, so every keyframe-cache writer has to round + // it identically: a coarser writer rewrites the cache with a different value and + // orphans the live selection key built from the finer one. + it("keeps three decimals so a beat-snapped keyframe lands on its beat", () => { + expect(toClipPercentage(1 / 3, 0, 1, 0)).toBe(33.333); + expect(toClipPercentage(2.5, 2, 4, 0)).toBe(12.5); + }); + + it("passes the tween percentage through for a zero-length clip", () => { + expect(toClipPercentage(5, 0, 0, 42)).toBe(42); + }); +}); + +describe("toClipKeyframes", () => { + // Fixture carries only the fields the function under test reads; the + // double-cast is the documented way to stand in for the full runtime shape + // (CONTRIBUTING.md). + const durationless = { + id: "a1", + method: "to", + targetSelector: "#box", + vars: {}, + resolvedStart: 0, + } as unknown as GsapAnimation; + + // A tween with no duration spans its clip everywhere else in Studio + // (resolveEditableTweenDuration), so the cache rows have to agree: a fixed 1s + // basis put the end keyframe at 25% of a 4s clip instead of 100%. + it("spans the clip when the tween has no duration", () => { + const rows = toClipKeyframes([{ percentage: 0 }, { percentage: 100 }], durationless, 0, 4); + expect(rows.map((row) => row.percentage)).toEqual([0, 100]); + }); + + it("keeps the tween percentage and the animation identity on every row", () => { + const rows = toClipKeyframes([{ percentage: 50 }], durationless, 0, 4); + expect(rows[0]).toMatchObject({ tweenPercentage: 50, animationId: "a1" }); + }); +}); + +describe("idFromSelector", () => { + it("round-trips every shape idSelector emits", () => { + for (const id of ["hero-word", "el_1", "01-hook-hero-word", "my.class", "1box", '1"x']) { + expect(idFromSelector(idSelector(id))).toBe(id); + } + }); + + it("returns null for a selector that does not address an id", () => { + expect(idFromSelector(".dot")).toBeNull(); + expect(idFromSelector("[data-hf-id='x']")).toBeNull(); + expect(idFromSelector(undefined)).toBeNull(); + }); +}); diff --git a/packages/studio/src/hooks/gsapShared.ts b/packages/studio/src/hooks/gsapShared.ts index 459f303b46..906b984196 100644 --- a/packages/studio/src/hooks/gsapShared.ts +++ b/packages/studio/src/hooks/gsapShared.ts @@ -53,8 +53,56 @@ export function isInstantHold(animation: GsapAnimation): boolean { * Returns `#id` if the selection has an id, otherwise the raw selector, * or null if neither exists. */ +/** + * A CSS-valid selector for an element id. `#id` for a valid CSS identifier, + * otherwise an `[id="..."]` attribute selector. IDs that start with a digit + * (e.g. "01-hook-hero-word") make `#id` an invalid selector, so + * `document.querySelector("#01-...")` / GSAP's `querySelectorAll` throw a + * SyntaxError — which surfaces as a masked cross-origin "Script error." and + * crashes the preview the moment such a target is committed (e.g. dragging). + */ +// Conservative: matches only ids that are unquestionably safe as a `#id` +// selector — ASCII identifier, starts with a letter/underscore (or a single +// leading hyphen), no dots/colons/spaces/digits-first. Anything it rejects +// (digit-leading like "01-hook-...", dots, spaces, non-ASCII, …) falls through +// to the attribute selector below, which is always valid. It can only ever err +// toward the safe form, never toward a `#id` that throws — and, unlike +// `CSS.escape`, it needs no browser global (this runs in node tests too). +const SAFE_HASH_ID = /^-?[A-Za-z_][\w-]*$/; + +export function idSelector(id: string): string { + // A `#id` selector is only valid for a CSS identifier. IDs that start with a + // digit (e.g. "01-hook-hero-word") make `document.querySelector("#01-...")` and + // GSAP's `querySelectorAll` throw a SyntaxError — surfacing as a masked + // cross-origin "Script error." that crashes the preview the moment such a + // target is committed (e.g. dragging the element). Address those via an + // attribute selector instead (quotes/backslashes escaped for the string). + return SAFE_HASH_ID.test(id) ? `#${id}` : `[id="${id.replace(/(["\\])/g, "\\$1")}"]`; +} + +/** + * Inverse of {@link idSelector}: the element id a target selector addresses, or + * null for a selector that is not id-based (a class, a tag, a descendant path). + * + * Both shapes have to be read back, not just `#id`. Every writer emits through + * `idSelector`, so a digit-leading, dotted or otherwise CSS-unsafe id lands in + * the source as `[id="01-hook-hero"]`. A reader that only matched `#id` saw no + * id at all for those elements and skipped them — which is how the post-commit + * keyframe-cache refresh silently stopped running for exactly the ids + * `idSelector` was added to support. + */ +export function idFromSelector(selector: string | undefined | null): string | null { + if (!selector) return null; + const hash = selector.match(/^#([\w-]+)/); + if (hash) return hash[1] ?? null; + const attribute = selector.match(/^\[id="((?:\\.|[^"\\])*)"\]/); + if (!attribute) return null; + // Undo the quote/backslash escaping idSelector applies. + return (attribute[1] ?? "").replace(/\\(["\\])/g, "$1"); +} + export function selectorFromSelection(selection: DomEditSelection): string | null { - if (selection.id) return `#${selection.id}`; + if (selection.id) return idSelector(selection.id); if (selection.selector) return selection.selector; return null; } @@ -118,6 +166,16 @@ export interface ParsedPercentageKeyframes { easeEach?: string; } +function collectAnimatableKeyframeProperties(entry: object): Record { + const properties: Record = {}; + for (const [property, value] of Object.entries(entry)) { + if (property === "ease") continue; + if (typeof value === "number") properties[property] = Math.round(value * 1000) / 1000; + else if (typeof value === "string") properties[property] = value; + } + return properties; +} + /** * Parse a GSAP percentage-keyframe object (`{ "0%": { x: 10 }, "100%": { x: 200 } }`) * into a sorted array of `{ percentage, properties }` entries. @@ -146,12 +204,7 @@ export function parsePercentageKeyframes( steps.forEach((entry, i) => { if (!entry || typeof entry !== "object") return; const percentage = steps.length > 1 ? Math.round((i / (steps.length - 1)) * 1000) / 10 : 0; - const properties: Record = {}; - for (const [pk, pv] of Object.entries(entry as Record)) { - if (pk === "ease") continue; - if (typeof pv === "number") properties[pk] = Math.round(pv * 1000) / 1000; - else if (typeof pv === "string") properties[pk] = pv; - } + const properties = collectAnimatableKeyframeProperties(entry); if (Object.keys(properties).length > 0) keyframes.push({ percentage, properties }); }); return keyframes.length > 0 ? { keyframes } : null; @@ -165,12 +218,7 @@ export function parsePercentageKeyframes( const pctMatch = key.match(/^(\d+(?:\.\d+)?)%$/); if (!pctMatch || !val || typeof val !== "object") continue; const percentage = parseFloat(pctMatch[1]); - const properties: Record = {}; - for (const [pk, pv] of Object.entries(val as Record)) { - if (pk === "ease") continue; - if (typeof pv === "number") properties[pk] = Math.round(pv * 1000) / 1000; - else if (typeof pv === "string") properties[pk] = pv; - } + const properties = collectAnimatableKeyframeProperties(val); if (Object.keys(properties).length > 0) { keyframes.push({ percentage, properties }); } @@ -187,3 +235,57 @@ export function parsePercentageKeyframes( export function toAbsoluteTime(tweenPos: number, tweenDur: number, percentage: number): number { return tweenPos + (percentage / 100) * tweenDur; } + +/** + * An absolute time as a percentage of a timeline clip, at the one precision every + * keyframe-cache writer must share. 0.001% keeps a beat-snapped keyframe centered + * on the beat dot, and because selection keys embed this number, a writer that + * rounds coarser would orphan a live selection the moment it rewrites the cache. + * A zero-length clip has no percentage to give, so the tween-% passes through. + */ +export function toClipPercentage( + absoluteTime: number, + clipStart: number, + clipDuration: number, + fallbackPercentage: number, +): number { + if (clipDuration <= 0) return fallbackPercentage; + return Math.round(((absoluteTime - clipStart) / clipDuration) * 100000) / 1000; +} + +/** + * One keyframe-cache row per tween keyframe: the percentage re-based onto the + * clip, the original tween percentage kept alongside it, and the animation + * identity every lane and selection key needs. Shared by the cache writers so + * they cannot drift in precision or in which identity fields they record. + */ +export function toClipKeyframes( + source: readonly T[], + anim: GsapAnimation, + clipStart: number, + clipDuration: number, +): Array< + T & { + tweenPercentage: number; + propertyGroup: GsapAnimation["propertyGroup"]; + animationId: string; + } +> { + const tweenStart = anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0); + // A duration-less tween spans the clip, the same rule the edit paths use + // (resolveEditableTweenDuration). A fixed 1s here put its keyframes at a + // percentage no editor agreed with. + const tweenDuration = anim.duration ?? clipDuration; + return source.map((keyframe) => ({ + ...keyframe, + percentage: toClipPercentage( + toAbsoluteTime(tweenStart, tweenDuration, keyframe.percentage), + clipStart, + clipDuration, + keyframe.percentage, + ), + tweenPercentage: keyframe.percentage, + propertyGroup: anim.propertyGroup, + animationId: anim.id, + })); +} diff --git a/packages/studio/src/hooks/gsapTweenSynth.test.ts b/packages/studio/src/hooks/gsapTweenSynth.test.ts index 3d8d771222..b5474cf1de 100644 --- a/packages/studio/src/hooks/gsapTweenSynth.test.ts +++ b/packages/studio/src/hooks/gsapTweenSynth.test.ts @@ -1,6 +1,6 @@ import { describe, expect, it } from "vitest"; import type { GsapAnimation } from "@hyperframes/core/gsap-parser"; -import { synthesizeFlatTweenKeyframes } from "./gsapTweenSynth"; +import { deduplicateKeyframes, synthesizeFlatTweenKeyframes } from "./gsapTweenSynth"; function anim(overrides: Partial): GsapAnimation { return { @@ -53,3 +53,32 @@ describe("synthesizeFlatTweenKeyframes", () => { expect(out).not.toBeNull(); }); }); + +describe("deduplicateKeyframes ease ambiguity", () => { + it("flags a same-% collision from different animations (different eases)", () => { + const merged = deduplicateKeyframes([ + { percentage: 45, properties: { x: 10 }, ease: "power2.in", animationId: "#a-position" }, + { percentage: 45, properties: { opacity: 1 }, ease: "power2.out", animationId: "#a-visual" }, + ]); + const kf = merged.find((k) => k.percentage === 45); + expect(kf?.easeAmbiguous).toBe(true); + }); + + it("flags a cross-animation collision even when the raw eases match", () => { + // The button can still only target one arbitrary animation, and each may + // inherit a different easeEach/animation ease that raw comparison misses. + const merged = deduplicateKeyframes([ + { percentage: 45, properties: { x: 10 }, ease: "power2.in", animationId: "#a-position" }, + { percentage: 45, properties: { opacity: 1 }, ease: "power2.in", animationId: "#a-visual" }, + ]); + expect(merged.find((k) => k.percentage === 45)?.easeAmbiguous).toBe(true); + }); + + it("does not flag a same-% collision within a single animation", () => { + const merged = deduplicateKeyframes([ + { percentage: 45, properties: { x: 10 }, ease: "power2.in", animationId: "#a-position" }, + { percentage: 45, properties: { y: 20 }, ease: "power2.out", animationId: "#a-position" }, + ]); + expect(merged.find((k) => k.percentage === 45)?.easeAmbiguous).toBeFalsy(); + }); +}); diff --git a/packages/studio/src/hooks/gsapTweenSynth.ts b/packages/studio/src/hooks/gsapTweenSynth.ts index edb849f28c..a3b100be4d 100644 --- a/packages/studio/src/hooks/gsapTweenSynth.ts +++ b/packages/studio/src/hooks/gsapTweenSynth.ts @@ -5,15 +5,51 @@ import type { } from "@hyperframes/core/gsap-parser"; import { PROPERTY_DEFAULTS } from "./gsapShared"; -export function deduplicateKeyframes( - keyframes: GsapPercentageKeyframe[], -): GsapPercentageKeyframe[] { - const byPct = new Map(); +/** + * A static position hold (only x/y, no real motion) is a `set`, not a keyframe — + * it must not synthesize a diamond. Covers both `tl.set(...)` and the + * `tl.to({ duration: 0, immediateRender: true })` hold that remove-all-keyframes + * collapses to (otherwise shown as a stray 0% keyframe). + * + * Single owner: the collapsed keyframe cache and the expanded property lanes' + * `gsapAnimations` map MUST agree on it, or a hold draws a phantom expanded lane + * with no matching collapsed diamond. + */ +export function isStaticPositionHold(anim: GsapAnimation): boolean { + if (anim.keyframes) return false; + if (anim.method !== "set" && (anim.duration ?? 0) !== 0) return false; + const propKeys = Object.keys(anim.properties).filter((k) => k !== "immediateRender"); + return propKeys.length > 0 && propKeys.every((k) => k === "x" || k === "y"); +} + +export function deduplicateKeyframes< + T extends GsapPercentageKeyframe & { animationId?: string; easeAmbiguous?: boolean }, +>(keyframes: T[]): T[] { + const byPct = new Map(); for (const kf of keyframes) { const existing = byPct.get(kf.percentage); if (existing) { existing.properties = { ...existing.properties, ...kf.properties }; - if (kf.ease) existing.ease = kf.ease; + // Two DIFFERENT source animations with a keyframe at the same clip %: a + // single inline ease button can only target one of them, and which one is + // arbitrary (each may also inherit a different easeEach/animation ease, so + // comparing raw keyframe eases isn't enough). Flag it so the collapsed row + // hides the button there and the user edits per-lane instead. + if ( + existing.animationId !== undefined && + kf.animationId !== undefined && + existing.animationId !== kf.animationId + ) { + existing.easeAmbiguous = true; + } + // Whichever tween iterated last used to win `ease`, so the merged + // keyframe carried an arbitrary one of the colliding curves. Readers that + // do not check easeAmbiguous (drag readouts, lane hints) then showed a + // curve belonging to a different animation than the one an edit targets. + // Drop it instead: ambiguous means "no single ease", and the flag is the + // only honest answer. + if (existing.easeAmbiguous) delete existing.ease; + else if (kf.ease) existing.ease = kf.ease; } else { byPct.set(kf.percentage, { ...kf, properties: { ...kf.properties } }); } @@ -41,29 +77,40 @@ export function synthesizeFlatTweenKeyframes(anim: GsapAnimation): GsapKeyframes const fromProps = anim.fromProperties; if (!toProps || Object.keys(toProps).length === 0) return null; - const startProps: Record = {}; - const endProps: Record = {}; + const rawStart: Record = {}; + const rawEnd: Record = {}; if (anim.method === "from") { for (const [k, v] of Object.entries(toProps)) { - startProps[k] = v; - endProps[k] = PROPERTY_DEFAULTS[k] ?? 0; + rawStart[k] = v; + rawEnd[k] = PROPERTY_DEFAULTS[k] ?? 0; } } else if (anim.method === "fromTo" && fromProps) { - Object.assign(startProps, fromProps); - Object.assign(endProps, toProps); + Object.assign(rawStart, fromProps); + Object.assign(rawEnd, toProps); } else { for (const [k, v] of Object.entries(toProps)) { - startProps[k] = PROPERTY_DEFAULTS[k] ?? 0; - endProps[k] = v; + rawStart[k] = PROPERTY_DEFAULTS[k] ?? 0; + rawEnd[k] = v; } } + // Only numeric props are keyframe-interpolatable — a flat tween of a + // non-numeric prop (e.g. backgroundColor: "#fff") can't be a 2-keyframe lane. + const numericKeys = Object.keys(rawEnd).filter( + (k) => typeof rawStart[k] === "number" && typeof rawEnd[k] === "number", + ); + if (numericKeys.length === 0) return null; + const startProps = Object.fromEntries(numericKeys.map((k) => [k, rawStart[k]])); + const endProps = Object.fromEntries(numericKeys.map((k) => [k, rawEnd[k]])); + return { format: "percentage", keyframes: [ { percentage: 0, properties: startProps }, - { percentage: 100, properties: endProps }, + // Segment ease lives on the destination keyframe (Figma/AE model) so the + // lane + cache surface it; also kept data-level for useGsapTweenCache. + { percentage: 100, properties: endProps, ...(anim.ease ? { ease: anim.ease } : {}) }, ], ...(anim.ease ? { ease: anim.ease } : {}), }; diff --git a/packages/studio/src/hooks/timelineMoveAdapter.ts b/packages/studio/src/hooks/timelineMoveAdapter.ts index f5b9b2fb65..ee7544e8ea 100644 --- a/packages/studio/src/hooks/timelineMoveAdapter.ts +++ b/packages/studio/src/hooks/timelineMoveAdapter.ts @@ -4,7 +4,7 @@ import type { TimelineGroupMoveChange, } from "./useTimelineGroupEditing"; -interface MoveEdit { +export interface TimelineMoveEdit { element: TimelineElement; updates: Pick; } @@ -18,8 +18,15 @@ interface AtomicMoveDeps { export type TimelineMoveOperation = "timing" | "lane-reorder" | "track-insert"; +export type TimelineMoveEditsHandler = ( + edits: TimelineMoveEdit[], + coalesceKey?: string, + operation?: TimelineMoveOperation, + coalesceMs?: number, +) => Promise; + export function persistTimelineMoveEditsAtomically( - edits: MoveEdit[], + edits: TimelineMoveEdit[], coalesceKey: string | undefined, operation: TimelineMoveOperation, deps: AtomicMoveDeps, diff --git a/packages/studio/src/hooks/useDomSelection.ts b/packages/studio/src/hooks/useDomSelection.ts index 903894c7e9..568c964228 100644 --- a/packages/studio/src/hooks/useDomSelection.ts +++ b/packages/studio/src/hooks/useDomSelection.ts @@ -24,6 +24,7 @@ import { type DomEditSelection, } from "../components/editor/domEditing"; import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits"; +import { useStudioTestHooks } from "./useStudioTestHooks"; // ── Types ── @@ -506,6 +507,9 @@ export function useDomSelection({ applyDomSelection(null, { revealPanel: false }); }, [applyDomSelection, captionEditMode]); + // Dev-only headless-QA shortcut (window.__studioTest.selectByDomId). No-op in prod. + useStudioTestHooks({ previewIframeRef, buildDomSelectionFromTarget, applyDomSelection }); + const applyMarqueeSelection = useCallback( // fallow-ignore-next-line complexity (selections: DomEditSelection[], additive: boolean) => { diff --git a/packages/studio/src/hooks/useGestureCommit.ts b/packages/studio/src/hooks/useGestureCommit.ts index a0aba6747f..cdc51dcf97 100644 --- a/packages/studio/src/hooks/useGestureCommit.ts +++ b/packages/studio/src/hooks/useGestureCommit.ts @@ -13,7 +13,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser"; import type { CommitMutationOptions } from "./gsapScriptCommitTypes"; import { roundTo3 } from "../utils/rounding"; import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser"; -import { isInstantHold } from "./gsapShared"; +import { isInstantHold, idSelector } from "./gsapShared"; type RecordedKeyframe = { percentage: number; @@ -168,7 +168,7 @@ export function useGestureCommit({ if (!sortedPcts.includes(0)) sortedPcts.unshift(0); } - const selector = sel.id ? `#${sel.id}` : sel.selector; + const selector = sel.id ? idSelector(sel.id) : sel.selector; if (!selector) { showToast("Cannot save — element has no selector", "error"); return; diff --git a/packages/studio/src/hooks/useGsapKeyframeOps.test.tsx b/packages/studio/src/hooks/useGsapKeyframeOps.test.tsx index e697ab6127..5e01b9e6da 100644 --- a/packages/studio/src/hooks/useGsapKeyframeOps.test.tsx +++ b/packages/studio/src/hooks/useGsapKeyframeOps.test.tsx @@ -19,11 +19,16 @@ afterEach(() => { const selection: DomEditSelection = { id: "box", selector: "#box" } as DomEditSelection; +function successfulCommitMutation() { + return vi.fn<(...args: unknown[]) => Promise>(async () => ({ ok: true })); +} + function renderKeyframeOps(over: { commitMutation: (...args: unknown[]) => Promise; trackGsapSaveFailure: (...args: unknown[]) => void; }) { const captured: { api: HookApi | null } = { api: null }; + // This hook harness intentionally mirrors the separate script-commit harness. function Probe() { // fallow-ignore-next-line code-duplication captured.api = useGsapKeyframeOps({ @@ -51,9 +56,7 @@ function renderKeyframeOps(over: { describe("useGsapKeyframeOps — resizeKeyframedTween", () => { it("issues a resize-keyframed-tween mutation with the remap + window", async () => { - const commitMutation = vi.fn<(...args: unknown[]) => Promise>(async () => ({ - ok: true, - })); + const commitMutation = successfulCommitMutation(); const trackGsapSaveFailure = vi.fn<(...args: unknown[]) => void>(); const api = renderKeyframeOps({ commitMutation, trackGsapSaveFailure }); @@ -102,10 +105,28 @@ describe("useGsapKeyframeOps — resizeKeyframedTween", () => { }); describe("useGsapKeyframeOps — keyframe transaction options", () => { + it("routes a flat-lane add through the add-keyframe writer mutation", async () => { + const commitMutation = successfulCommitMutation(); + const api = renderKeyframeOps({ commitMutation, trackGsapSaveFailure: vi.fn() }); + + await act(async () => { + await api.addKeyframeBatch(selection, "box-to-0-position", 50, { x: 210 }); + }); + + expect(commitMutation).toHaveBeenCalledWith( + selection, + { + type: "add-keyframe", + animationId: "box-to-0-position", + percentage: 50, + properties: { x: 210 }, + }, + { label: "Add keyframe at 50%", softReload: true }, + ); + }); + it("soft-reloads a standalone convert when the SDK path is unavailable", async () => { - const commitMutation = vi.fn<(...args: unknown[]) => Promise>(async () => ({ - ok: true, - })); + const commitMutation = successfulCommitMutation(); const api = renderKeyframeOps({ commitMutation, trackGsapSaveFailure: vi.fn() }); await act(async () => { @@ -123,9 +144,7 @@ describe("useGsapKeyframeOps — keyframe transaction options", () => { }); it("threads one coalesce key through skipped convert reload and terminal batch edit", async () => { - const commitMutation = vi.fn<(...args: unknown[]) => Promise>(async () => ({ - ok: true, - })); + const commitMutation = successfulCommitMutation(); const api = renderKeyframeOps({ commitMutation, trackGsapSaveFailure: vi.fn() }); const coalesceKey = "enable-keyframes:box-to-0-opacity:1"; diff --git a/packages/studio/src/hooks/useGsapSelectionHandlers.test.tsx b/packages/studio/src/hooks/useGsapSelectionHandlers.test.tsx index f1ae419ec9..484adb94a4 100644 --- a/packages/studio/src/hooks/useGsapSelectionHandlers.test.tsx +++ b/packages/studio/src/hooks/useGsapSelectionHandlers.test.tsx @@ -2,6 +2,7 @@ import { act } from "react"; import { createRoot } from "react-dom/client"; import { describe, expect, it, vi } from "vitest"; +import type { GsapAnimation } from "@hyperframes/core/gsap-parser"; import type { DomEditSelection } from "../components/editor/domEditingTypes"; import { useGsapSelectionHandlers } from "./useGsapSelectionHandlers"; @@ -114,3 +115,32 @@ describe("useGsapSelectionHandlers save failures", () => { rendered.unmount(); }); }); + +describe("useGsapSelectionHandlers selection override", () => { + it("aborts on an explicit null override instead of writing to the current selection", () => { + const removeKeyframe = vi.fn(); + const rendered = renderHandlers(makeParams({ removeKeyframe })); + + // Explicit null: the caller resolved a selection for its own element and + // found none, so the write must not land on the selected element. + rendered.handlers().handleGsapRemoveKeyframe("anim-1", 50, undefined, null); + expect(removeKeyframe).not.toHaveBeenCalled(); + + // Omitted override: falls back to the current selection as before. + rendered.handlers().handleGsapRemoveKeyframe("anim-1", 50); + expect(removeKeyframe).toHaveBeenCalledOnce(); + rendered.unmount(); + }); + + it("computes the playhead percentage from the passed animation, not the selection's", () => { + const moveKeyframe = vi.fn(); + const selection = makeSelection(); + const animation = { id: "anim-1", keyframes: { keyframes: [] } } as unknown as GsapAnimation; + const rendered = renderHandlers(makeParams({ moveKeyframe, selectedGsapAnimations: [] })); + + rendered.handlers().handleGsapMoveKeyframeToPlayhead("anim-1", 50, selection, animation); + + expect(moveKeyframe).toHaveBeenCalledWith(selection, "anim-1", 50, expect.any(Number)); + rendered.unmount(); + }); +}); diff --git a/packages/studio/src/hooks/useGsapSelectionHandlers.ts b/packages/studio/src/hooks/useGsapSelectionHandlers.ts index 0b11d760de..5a9dc1b685 100644 --- a/packages/studio/src/hooks/useGsapSelectionHandlers.ts +++ b/packages/studio/src/hooks/useGsapSelectionHandlers.ts @@ -118,6 +118,19 @@ export function useGsapSelectionHandlers({ const lastSelectionRef = useRef(null); if (domEditSelection) lastSelectionRef.current = domEditSelection; + // `undefined` means the caller passed no override and accepts the current + // selection. An explicit `null` means the caller RESOLVED a selection for the + // element it is editing and there is none: falling back to domEditSelection + // there commits the edit onto whichever element happens to be selected, which + // is a different element's file. Only `undefined` may fall back. + const resolveWriteSelection = useCallback( + (selectionOverride?: DomEditSelection | null): DomEditSelection | null => + selectionOverride === undefined + ? (domEditSelection ?? lastSelectionRef.current) + : selectionOverride, + [domEditSelection], + ); + const trackGsapHandlerFailure = useCallback( (error: unknown, selection: DomEditSelection, mutationType: string, label: string) => { trackStudioSaveFailure({ @@ -160,7 +173,7 @@ export function useGsapSelectionHandlers({ updates: { duration?: number; ease?: string; position?: number }, selectionOverride?: DomEditSelection | null, ) => { - const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current; + const sel = resolveWriteSelection(selectionOverride); if (!sel) return; observeGsapMutation( updateGsapMeta(sel, animId, updates), @@ -169,16 +182,16 @@ export function useGsapSelectionHandlers({ "Edit GSAP animation", ); }, - [domEditSelection, observeGsapMutation, updateGsapMeta], + [resolveWriteSelection, observeGsapMutation, updateGsapMeta], ); const handleGsapDeleteAnimation = useCallback( - (animId: string) => { - const sel = domEditSelection ?? lastSelectionRef.current; + (animId: string, selectionOverride?: DomEditSelection | null) => { + const sel = resolveWriteSelection(selectionOverride); if (!sel) return; observeGsapMutation(deleteGsapAnimation(sel, animId), sel, "delete", "Delete GSAP animation"); }, - [domEditSelection, deleteGsapAnimation, observeGsapMutation], + [resolveWriteSelection, deleteGsapAnimation, observeGsapMutation], ); const handleGsapDeleteAllForElement = useCallback( @@ -284,12 +297,12 @@ export function useGsapSelectionHandlers({ value: number | string, selectionOverride?: DomEditSelection | null, ) => { - const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current; + const sel = resolveWriteSelection(selectionOverride); if (!sel) return; trackStudioEvent("keyframe", { action: "add", property }); addKeyframe(sel, animId, percentage, property, value); }, - [domEditSelection, addKeyframe], + [resolveWriteSelection, addKeyframe], ); const handleGsapAddKeyframeBatch = useCallback( @@ -298,19 +311,17 @@ export function useGsapSelectionHandlers({ percentage: number, properties: Record, commitOverrides?: Partial, + selectionOverride?: DomEditSelection | null, ) => { - if (!domEditSelection) return Promise.resolve(); - return addKeyframeBatch( - domEditSelection, - animId, - percentage, - properties, - commitOverrides, - ).catch((error) => { - trackGsapHandlerFailure(error, domEditSelection, "add-keyframe", "Add keyframe"); - }); + const sel = resolveWriteSelection(selectionOverride); + if (!sel) return Promise.resolve(); + return addKeyframeBatch(sel, animId, percentage, properties, commitOverrides).catch( + (error) => { + trackGsapHandlerFailure(error, sel, "add-keyframe", "Add keyframe"); + }, + ); }, - [domEditSelection, addKeyframeBatch, trackGsapHandlerFailure], + [resolveWriteSelection, addKeyframeBatch, trackGsapHandlerFailure], ); const handleGsapRemoveKeyframe = useCallback( ( @@ -319,26 +330,34 @@ export function useGsapSelectionHandlers({ commitOverrides?: Partial, selectionOverride?: DomEditSelection | null, ) => { - const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current; + const sel = resolveWriteSelection(selectionOverride); if (!sel) return; trackStudioEvent("keyframe", { action: "remove" }); removeKeyframe(sel, animId, percentage, commitOverrides); }, - [domEditSelection, removeKeyframe], + [resolveWriteSelection, removeKeyframe], ); const handleGsapMoveKeyframeToPlayhead = useCallback( - (animId: string, fromPercentage: number, selectionOverride?: DomEditSelection | null) => { - const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current; + ( + animId: string, + fromPercentage: number, + selectionOverride?: DomEditSelection | null, + animationOverride?: GsapAnimation, + ) => { + const sel = resolveWriteSelection(selectionOverride); if (!sel) return; // Retime the keyframe to the playhead, preserving its value + ease. The - // playhead's tween-relative percentage is the move target. - const anim = selectedGsapAnimations.find((a) => a.id === animId); + // playhead's tween-relative percentage is the move target, and it has to + // come from the SAME element the write lands on: reading the animation off + // the current selection while the percentage came from the clicked element + // computes the target against one tween and writes it into another. + const anim = animationOverride ?? selectedGsapAnimations.find((a) => a.id === animId); const toPercentage = computeCurrentPercentage(sel, anim); trackStudioEvent("keyframe", { action: "move_to_playhead" }); moveKeyframe(sel, animId, fromPercentage, toPercentage); }, - [domEditSelection, selectedGsapAnimations, moveKeyframe], + [resolveWriteSelection, selectedGsapAnimations, moveKeyframe], ); const handleGsapMoveKeyframe = useCallback( @@ -348,7 +367,7 @@ export function useGsapSelectionHandlers({ toPercentage: number, selectionOverride?: DomEditSelection | null, ) => { - const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current; + const sel = resolveWriteSelection(selectionOverride); if (!sel) return; // Atomic retime: preserves the keyframe's value + per-keyframe ease. Both // percentages are tween-relative (the drag handler converts the drop @@ -357,7 +376,7 @@ export function useGsapSelectionHandlers({ trackStudioEvent("keyframe", { action: "retime" }); moveKeyframe(sel, animId, fromPercentage, toPercentage); }, - [domEditSelection, moveKeyframe], + [resolveWriteSelection, moveKeyframe], ); const handleGsapResizeKeyframedTween = useCallback( @@ -368,14 +387,14 @@ export function useGsapSelectionHandlers({ pctRemap: Array<{ from: number; to: number }>, selectionOverride?: DomEditSelection | null, ) => { - const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current; + const sel = resolveWriteSelection(selectionOverride); if (!sel) return; // Boundary drag-to-retime: grows/shifts the tween window + re-keys keyframes // in place. Distinct telemetry action so resize is separable from in-window move. trackStudioEvent("keyframe", { action: "retime_resize" }); resizeKeyframedTween(sel, animId, position, duration, pctRemap); }, - [domEditSelection, resizeKeyframedTween], + [resolveWriteSelection, resizeKeyframedTween], ); const handleGsapConvertToKeyframes = useCallback( @@ -384,24 +403,17 @@ export function useGsapSelectionHandlers({ resolvedFromValues?: Record, duration?: number, commitOverrides?: Partial, + selectionOverride?: DomEditSelection | null, ) => { - if (!domEditSelection) return Promise.resolve(); - return convertToKeyframes( - domEditSelection, - animId, - resolvedFromValues, - duration, - commitOverrides, - ).catch((error) => { - trackGsapHandlerFailure( - error, - domEditSelection, - "convert-to-keyframes", - "Convert to keyframes", - ); - }); + const sel = resolveWriteSelection(selectionOverride); + if (!sel) return Promise.resolve(); + return convertToKeyframes(sel, animId, resolvedFromValues, duration, commitOverrides).catch( + (error) => { + trackGsapHandlerFailure(error, sel, "convert-to-keyframes", "Convert to keyframes"); + }, + ); }, - [domEditSelection, convertToKeyframes, trackGsapHandlerFailure], + [resolveWriteSelection, convertToKeyframes, trackGsapHandlerFailure], ); const handleGsapRemoveAllKeyframes = useCallback( diff --git a/packages/studio/src/hooks/useGsapTweenCache.test.ts b/packages/studio/src/hooks/useGsapTweenCache.test.ts index d9ff5d4a02..0492a1f501 100644 --- a/packages/studio/src/hooks/useGsapTweenCache.test.ts +++ b/packages/studio/src/hooks/useGsapTweenCache.test.ts @@ -90,4 +90,20 @@ describe("resolveSelectorElementIds", () => { expect(resolveSelectorElementIds("#card .label", null)).toEqual(["card"]); expect(resolveSelectorElementIds(".dot", null)).toEqual([]); }); + + // The `[id="…"]` form is what writers emit for a CSS-unsafe id (digit-leading, + // dotted). The old local `#id`-only regex read no id at all for those, so they + // silently dropped out of both DOM-less paths. + it("falls back to a bracketed id when there is no DOM", () => { + expect(resolveSelectorElementIds('[id="01-hook"] .label', null)).toEqual(["01-hook"]); + }); + + it("falls back to a bracketed id when querySelectorAll rejects the selector", () => { + const doc = { + querySelectorAll: () => { + throw new SyntaxError("bad selector"); + }, + } as unknown as Document; + expect(resolveSelectorElementIds('[id="01-hook"]:has(>*)', doc)).toEqual(["01-hook"]); + }); }); diff --git a/packages/studio/src/hooks/useGsapTweenCache.ts b/packages/studio/src/hooks/useGsapTweenCache.ts index 226ec4c194..8ec8481738 100644 --- a/packages/studio/src/hooks/useGsapTweenCache.ts +++ b/packages/studio/src/hooks/useGsapTweenCache.ts @@ -6,22 +6,24 @@ import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeBrid import { clearKeyframeCacheForElement, clearKeyframeCacheForFile, + writeGsapAnimationsForElement, } from "./gsapKeyframeCacheHelpers"; -import { toAbsoluteTime } from "./gsapShared"; -import { deduplicateKeyframes, synthesizeFlatTweenKeyframes } from "./gsapTweenSynth"; - -function extractIdFromSelector(selector: string): string | null { - const match = selector.match(/^#([\w-]+)/); - return match ? match[1] : null; -} +import { idFromSelector, toAbsoluteTime, toClipPercentage, toClipKeyframes } from "./gsapShared"; +import { + deduplicateKeyframes, + isStaticPositionHold, + synthesizeFlatTweenKeyframes, +} from "./gsapTweenSynth"; /** * Resolve a tween's target selector to the ids of the element(s) it animates. * A bare `#id` resolves directly; anything else (a class like `.dot`, a group * `.a, .b`, or a descendant selector) is matched against the live preview DOM so * class/selector tweens (e.g. `gsap.from(".dot", {stagger})`) attribute to every - * element they animate — not just one parsed from the string. Falls back to a - * leading `#id` when there's no DOM (so the cache still populates pre-iframe). + * element they animate — not just one parsed from the string. Falls back to the + * leading id when there's no DOM (so the cache still populates pre-iframe); + * `idFromSelector` reads both `#id` and the `[id="…"]` form writers emit for + * CSS-unsafe ids, so those elements resolve pre-iframe too. */ // fallow-ignore-next-line complexity export function resolveSelectorElementIds( @@ -31,7 +33,7 @@ export function resolveSelectorElementIds( const bareId = selector.match(/^#([\w-]+)$/); if (bareId) return [bareId[1]]; if (!doc) { - const lead = extractIdFromSelector(selector); + const lead = idFromSelector(selector); return lead ? [lead] : []; } const ids = new Set(); @@ -43,7 +45,7 @@ export function resolveSelectorElementIds( if (el.id) ids.add(el.id); } } catch { - const lead = extractIdFromSelector(sel); + const lead = idFromSelector(sel); if (lead) ids.add(lead); } } @@ -328,6 +330,12 @@ export function useGsapAnimationsForElement( // fallow-ignore-next-line complexity useEffect(() => { if (!elementId) return; + // No property-group filter: ungrouped tweens are recorded here as well. + const sourceAnimations = animations.filter( + (animation) => animation.keyframes || synthesizeFlatTweenKeyframes(animation), + ); + if (sourceAnimations.length > 0) + writeGsapAnimationsForElement(sourceFile, elementId, sourceAnimations); // Resolve the element's time range from the player store so we can // convert tween-relative keyframe percentages to clip-relative ones. @@ -340,24 +348,17 @@ export function useGsapAnimationsForElement( ); const allKeyframes: Array< - GsapKeyframesData["keyframes"][0] & { tweenPercentage?: number; propertyGroup?: string } + GsapKeyframesData["keyframes"][0] & { + tweenPercentage?: number; + propertyGroup?: string; + animationId?: string; + } > = []; let format: GsapKeyframesData["format"] = "percentage"; let ease: string | undefined; let easeEach: string | undefined; for (const anim of animations) { - // A static position hold (only x/y, no real motion) is a `set`, not a - // keyframe — don't synthesize a diamond for it. Covers both `tl.set(...)` - // and the `tl.to({ duration: 0, immediateRender: true })` hold that - // remove-all-keyframes collapses to (which is otherwise shown as a stray - // 0% keyframe). - if ( - !anim.keyframes && - Object.keys(anim.properties).length > 0 && - Object.keys(anim.properties).every((k) => k === "x" || k === "y") && - (anim.method === "set" || (anim.duration ?? 0) === 0) - ) - continue; + if (isStaticPositionHold(anim)) continue; const kf = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim); if (!kf) continue; // Convert tween-relative percentages to clip-relative so diamonds @@ -367,17 +368,13 @@ export function useGsapAnimationsForElement( const tweenDur = anim.duration ?? elDuration; for (const k of kf.keyframes) { const absTime = toAbsoluteTime(tweenPos, tweenDur, k.percentage); - // 0.001% precision (was 0.1%) so a beat-snapped keyframe centers exactly - // on the beat dot, which is rendered at the true beat time. - const clipPct = - elDuration > 0 - ? Math.round(((absTime - elStart) / elDuration) * 100000) / 1000 - : k.percentage; + const clipPct = toClipPercentage(absTime, elStart, elDuration, k.percentage); allKeyframes.push({ ...k, percentage: clipPct, tweenPercentage: k.percentage, propertyGroup: anim.propertyGroup, + animationId: anim.id, }); } format = kf.format; @@ -459,43 +456,22 @@ export function usePopulateKeyframeCacheForFile( const { elements, domClipChildren } = usePlayerStore.getState(); const doc = iframeRef?.current?.contentDocument; const mergedByElement = new Map(); + const sourceByElement = new Map(); for (const anim of parsed.animations) { if (anim.hasUnresolvedKeyframes) continue; - // Position-only static holds are not keyframed animations — skip them so - // they don't draw a timeline diamond. Covers both a `tl.set(...)` and the - // `tl.to({ duration: 0, immediateRender: true })` that remove-all-keyframes - // collapses a keyframed tween to. - if (!anim.keyframes && (anim.method === "set" || (anim.duration ?? 0) === 0)) { - const propKeys = Object.keys(anim.properties).filter((k) => k !== "immediateRender"); - if (propKeys.length > 0 && propKeys.every((k) => k === "x" || k === "y")) { - continue; - } - } + if (isStaticPositionHold(anim)) continue; const kfData = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim); if (!kfData) continue; - const tweenPos = - anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0); - const tweenDur = anim.duration ?? 1; // Attribute the tween to every element it animates (handles class / // group / descendant selectors, not just `#id`). for (const id of resolveSelectorElementIds(anim.targetSelector, doc)) { + // kfData is already resolved (real keyframes OR a synthesized flat + // tween), so a flat tween joins the store like a keyframed one. No + // property-group filter: this map must cover every tween the cache + // below records, or expanded lanes have nothing to render. + sourceByElement.set(id, [...(sourceByElement.get(id) ?? []), anim]); const { elStart, elDuration } = resolveClipTimingBasis(id, sf, elements, domClipChildren); - const clipKeyframes = kfData.keyframes.map((kf) => { - const absTime = toAbsoluteTime(tweenPos, tweenDur, kf.percentage); - // 0.001% precision (matching useGsapAnimationsForElement above) so a - // beat-snapped keyframe centers exactly on the beat dot and the two - // caches agree on a keyframe's percentage. - const clipPct = - elDuration > 0 - ? Math.round(((absTime - elStart) / elDuration) * 100000) / 1000 - : kf.percentage; - return { - ...kf, - percentage: clipPct, - tweenPercentage: kf.percentage, - propertyGroup: anim.propertyGroup, - }; - }); + const clipKeyframes = toClipKeyframes(kfData.keyframes, anim, elStart, elDuration); const existing = mergedByElement.get(id); if (existing) { existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]); @@ -508,6 +484,7 @@ export function usePopulateKeyframeCacheForFile( setKeyframeCache(`${sf}#${id}`, kfData); setKeyframeCache(id, kfData); if (sf !== "index.html") setKeyframeCache(`index.html#${id}`, kfData); + writeGsapAnimationsForElement(sf, id, sourceByElement.get(id)); } astFetchDoneRef.current = fetchKey; }); diff --git a/packages/studio/src/hooks/useStudioContextValue.test.ts b/packages/studio/src/hooks/useStudioContextValue.test.ts new file mode 100644 index 0000000000..01228d92ed --- /dev/null +++ b/packages/studio/src/hooks/useStudioContextValue.test.ts @@ -0,0 +1,93 @@ +// @vitest-environment happy-dom + +import React from "react"; +import { renderToStaticMarkup } from "react-dom/server"; +import { describe, expect, it } from "vitest"; +import type { DomEditSelection } from "../components/editor/domEditing"; +import type { RightInspectorPanes } from "../utils/studioHelpers"; +import { makeSelection } from "./domSelectionTestHarness"; +import { useInspectorState, type InspectorState } from "./useStudioContextValue"; + +interface HarnessProps { + rightPanelTab: string; + rightInspectorPanes: RightInspectorPanes; + rightCollapsed: boolean; + isPlaying: boolean; + isGestureRecording: boolean; + domEditSelection: DomEditSelection | null; +} + +function renderInspectorState(props: HarnessProps): InspectorState { + let state: InspectorState | null = null; + + function Harness() { + state = useInspectorState( + props.rightPanelTab, + props.rightInspectorPanes, + props.rightCollapsed, + props.isPlaying, + props.domEditSelection, + props.isGestureRecording, + ); + return null; + } + + renderToStaticMarkup(React.createElement(Harness)); + if (!state) throw new Error("Expected inspector state"); + return state; +} + +function selectedProps( + overrides: Partial = {}, +): HarnessProps & { domEditSelection: DomEditSelection } { + const element = document.createElement("div"); + return { + rightPanelTab: "renders", + rightInspectorPanes: { layers: false, design: false }, + rightCollapsed: true, + isPlaying: false, + isGestureRecording: false, + domEditSelection: makeSelection("Selected", element), + ...overrides, + }; +} + +describe("useInspectorState", () => { + it("shows the motion path for pure selection with the inspector collapsed", () => { + expect(renderInspectorState(selectedProps()).shouldShowMotionPath).toBe(true); + }); + + it("hides the motion path without a selection", () => { + expect( + renderInspectorState({ ...selectedProps(), domEditSelection: null }).shouldShowMotionPath, + ).toBe(false); + }); + + it("hides the motion path during playback", () => { + expect(renderInspectorState(selectedProps({ isPlaying: true })).shouldShowMotionPath).toBe( + false, + ); + }); + + it("hides the motion path during gesture recording", () => { + expect( + renderInspectorState(selectedProps({ isGestureRecording: true })).shouldShowMotionPath, + ).toBe(false); + }); + + it("keeps selected DOM bounds coupled to the inspector or variables panel", () => { + expect(renderInspectorState(selectedProps()).shouldShowSelectedDomBounds).toBe(false); + expect( + renderInspectorState( + selectedProps({ + rightPanelTab: "design", + rightInspectorPanes: { layers: false, design: true }, + }), + ).shouldShowSelectedDomBounds, + ).toBe(true); + expect( + renderInspectorState(selectedProps({ rightPanelTab: "variables" })) + .shouldShowSelectedDomBounds, + ).toBe(true); + }); +}); diff --git a/packages/studio/src/hooks/useStudioContextValue.ts b/packages/studio/src/hooks/useStudioContextValue.ts index 460028bdfb..21ba371f73 100644 --- a/packages/studio/src/hooks/useStudioContextValue.ts +++ b/packages/studio/src/hooks/useStudioContextValue.ts @@ -1,5 +1,6 @@ import { useCallback, useMemo, useRef, useState, type DragEvent } from "react"; import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability"; +import type { DomEditSelection } from "../components/editor/domEditing"; import type { StudioContextValue } from "../contexts/StudioContext"; import type { RightInspectorPanes } from "../utils/studioHelpers"; import type { TimelineFileDropHandler } from "./useTimelineEditingTypes"; @@ -69,6 +70,7 @@ export interface InspectorState { designPanelActive: boolean; inspectorPanelActive: boolean; inspectorButtonActive: boolean; + shouldShowMotionPath: boolean; shouldShowSelectedDomBounds: boolean; } @@ -77,6 +79,7 @@ export function useInspectorState( rightInspectorPanes: RightInspectorPanes, rightCollapsed: boolean, isPlaying: boolean, + domEditSelection: DomEditSelection | null, isGestureRecording?: boolean, ): InspectorState { // fallow-ignore-next-line complexity @@ -93,8 +96,9 @@ export function useInspectorState( inspectorPanelActive, inspectorButtonActive: STUDIO_INSPECTOR_PANELS_ENABLED && !rightCollapsed && inspectorPanelActive, - // Keep the selection box + motion path drawn even when the Inspector is - // collapsed — closing the panel shouldn't visually deselect the element. + shouldShowMotionPath: !!domEditSelection && !isPlaying && !isGestureRecording, + // Keep the selection box drawn even when the Inspector is collapsed — + // closing the panel shouldn't visually deselect the element. // The Variables tab also works against the canvas selection (bind card), // so the selection outline stays visible there too. shouldShowSelectedDomBounds: @@ -102,7 +106,14 @@ export function useInspectorState( !isPlaying && !isGestureRecording, }; - }, [rightPanelTab, rightInspectorPanes, rightCollapsed, isPlaying, isGestureRecording]); + }, [ + rightPanelTab, + rightInspectorPanes, + rightCollapsed, + isPlaying, + isGestureRecording, + domEditSelection, + ]); } // fallow-ignore-next-line complexity diff --git a/packages/studio/src/hooks/useStudioTestHooks.ts b/packages/studio/src/hooks/useStudioTestHooks.ts new file mode 100644 index 0000000000..3453d0be8f --- /dev/null +++ b/packages/studio/src/hooks/useStudioTestHooks.ts @@ -0,0 +1,53 @@ +import { useEffect } from "react"; +import type { DomEditSelection } from "../components/editor/domEditing"; + +interface StudioTestHookDeps { + previewIframeRef: React.MutableRefObject; + buildDomSelectionFromTarget: (target: HTMLElement) => Promise; + applyDomSelection: ( + selection: DomEditSelection | null, + options?: { revealPanel?: boolean }, + ) => void; +} + +/** + * Dev-only headless-QA shortcut. Selecting an element normally requires a + * pixel-precise click inside the preview iframe, which automated verification + * can't reliably land. `window.__studioTest.selectByDomId(id)` resolves the + * DomEditSelection for a preview element by id and reveals the inspector — + * exactly what a click does — so a driver can open the property/ease panels and + * then focus a segment via `__playerStore.getState().setFocusedEaseSegment`. + * No-op in production builds. + */ +export function useStudioTestHooks({ + previewIframeRef, + buildDomSelectionFromTarget, + applyDomSelection, +}: StudioTestHookDeps): void { + // eslint-disable-next-line no-restricted-syntax + useEffect(() => { + let isDev = false; + try { + isDev = import.meta.env.DEV === true; + } catch { + isDev = false; + } + if (!isDev || typeof window === "undefined") return; + const api = { + selectByDomId: async (id: string): Promise => { + const element = previewIframeRef.current?.contentDocument?.getElementById(id) ?? null; + if (!element) return false; + const selection = await buildDomSelectionFromTarget(element); + if (!selection) return false; + applyDomSelection(selection, { revealPanel: true }); + return true; + }, + }; + (window as unknown as { __studioTest?: typeof api }).__studioTest = api; + return () => { + // delete, not `= undefined`: an own key holding undefined keeps + // `"__studioTest" in window` true, which defeats feature detection. + delete (window as unknown as { __studioTest?: typeof api }).__studioTest; + }; + }, [applyDomSelection, buildDomSelectionFromTarget, previewIframeRef]); +} diff --git a/packages/studio/src/hooks/useTimelineEditing.test.tsx b/packages/studio/src/hooks/useTimelineEditing.test.tsx index bc88aca67d..18d81aa55d 100644 --- a/packages/studio/src/hooks/useTimelineEditing.test.tsx +++ b/packages/studio/src/hooks/useTimelineEditing.test.tsx @@ -10,6 +10,17 @@ import { jsonResponse, requestUrl } from "./fetchStubTestUtils"; import { useElementLifecycleOps } from "./useElementLifecycleOps"; import { useTimelineEditing } from "./useTimelineEditing"; +vi.mock("../components/editor/manualEditingAvailability", async (importOriginal) => { + const actual = + await importOriginal(); + return { + ...actual, + STUDIO_SDK_CUTOVER_ENABLED: true, + STUDIO_SDK_CUTOVER_FAMILIES: new Set(["timing"]), + STUDIO_SDK_RESOLVER_SHADOW_ENABLED: false, + }; +}); + (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true; type ZIndexEntry = { @@ -108,7 +119,9 @@ function renderTimelineEditingHook(input: { }) => Promise; reloadPreview?: () => void; sdkSession?: Awaited> | null; + publishSdkSession?: NonNullable[0]["publishSdkSession"]>; forceReloadSdkSession?: () => void; + invalidateGsapCache?: () => void; showToast?: (message: string, kind?: string) => void; }): { move: ReturnType["handleTimelineElementMove"]; @@ -140,7 +153,9 @@ function renderTimelineEditingHook(input: { pendingTimelineEditPathRef: { current: new Set() }, uploadProjectFiles: vi.fn(), sdkSession: input.sdkSession, + publishSdkSession: input.publishSdkSession, forceReloadSdkSession: input.forceReloadSdkSession, + invalidateGsapCache: input.invalidateGsapCache, handleDomZIndexReorderCommitRef: commitRef, }); move = hook.handleTimelineElementMove; @@ -163,6 +178,9 @@ function renderTimelineEditingHook(input: { type TimelineRecordEdit = NonNullable< Parameters[0]["recordEdit"] >; +type TimelinePublishSdkSession = NonNullable< + Parameters[0]["publishSdkSession"] +>; function renderTimelineEditingHookWithLifecycle(input: { timelineElements: TimelineElement[]; @@ -227,28 +245,41 @@ async function flushAsyncWork(): Promise { * with `gsapBody`. Returns the mock for call inspection. */ function stubProjectFetch(files: string | Record, gsapBody?: unknown) { - // Keep this test server's capability, file-read, and mutation routes together; - // splitting the fixture would obscure the request sequence asserted by callers. - // fallow-ignore-next-line complexity - const fetchMock = vi.fn(async (input: Parameters[0]): Promise => { - const url = requestUrl(input); - if (url.includes("/api/projects/p1/gsap-mutation-capabilities")) { - return jsonResponse({ atomicOwnershipPairs: true }); - } - if (url.includes("/api/projects/p1/files/")) { - if (typeof files === "string") return jsonResponse({ content: files }); - const path = decodeURIComponent(url.split("/files/")[1] ?? "index.html"); - return jsonResponse({ content: files[path] }); - } - if (url.includes("/api/projects/p1/gsap-mutations/")) { - const path = decodeURIComponent(url.split("/gsap-mutations/")[1] ?? "index.html"); - const content = typeof files === "string" ? files : (files[path] ?? ""); - return jsonResponse( - gsapBody ?? { mutated: false, scriptText: null, before: content, after: content }, - ); - } - throw new Error(`Unexpected fetch: ${url}`); - }); + const pathAfter = (url: string, marker: string) => + decodeURIComponent(url.split(marker)[1] ?? "index.html"); + const fileContent = (path: string) => (typeof files === "string" ? files : files[path]); + // One handler per route, so the mock itself stays a lookup: the request + // sequence callers assert on is still readable top to bottom. + const routes: Array<[marker: string, respond: (url: string) => Response]> = [ + [ + "/api/projects/p1/gsap-mutation-capabilities", + () => jsonResponse({ atomicOwnershipPairs: true }), + ], + [ + "/api/projects/p1/files/", + (url) => jsonResponse({ content: fileContent(pathAfter(url, "/files/")) }), + ], + [ + "/api/projects/p1/gsap-mutations/", + (url) => { + const content = fileContent(pathAfter(url, "/gsap-mutations/")) ?? ""; + return jsonResponse( + gsapBody ?? { mutated: false, scriptText: null, before: content, after: content }, + ); + }, + ], + ]; + const fetchMock = vi.fn( + async ( + input: Parameters[0], + _init?: Parameters[1], + ): Promise => { + const url = requestUrl(input); + const route = routes.find(([marker]) => url.includes(marker)); + if (!route) throw new Error(`Unexpected fetch: ${url}`); + return route[1](url); + }, + ); vi.stubGlobal("fetch", fetchMock); return fetchMock; } @@ -285,6 +316,39 @@ function setupSingleClipHarness(options?: { return { iframe, clip, commit, writeProjectFile, reloadPreview, fetchMock, ...hook }; } +const SDK_KEYFRAMED_SOURCE = [ + `
`, + `
`, + `
`, + ``, +].join("\n"); + +async function setupSdkKeyframedClipHarness() { + const iframe = createPreviewIframe([{ id: "clip", track: 0 }]); + const clip = timelineElement({ id: "clip", track: 0, zIndex: 0, start: 1 }); + const sdkSession = await openComposition(SDK_KEYFRAMED_SOURCE); + const writeProjectFile = vi.fn<(...args: unknown[]) => Promise>(async () => {}); + const invalidateGsapCache = vi.fn(); + const fetchMock = stubProjectFetch(SDK_KEYFRAMED_SOURCE); + usePlayerStore.getState().setDuration(10); + const hook = renderTimelineEditingHook({ + timelineElements: [clip], + iframe, + onZIndexCommit: vi.fn().mockResolvedValue(undefined), + projectId: "p1", + writeProjectFile, + recordEdit: vi.fn(async () => {}), + sdkSession, + publishSdkSession: vi.fn(() => "published"), + invalidateGsapCache, + }); + return { clip, fetchMock, hook, invalidateGsapCache, writeProjectFile }; +} + /** Assert a lane write landed in both the live iframe DOM and the persisted file. */ function expectLanePersisted( iframe: HTMLIFrameElement, @@ -710,6 +774,58 @@ describe("useTimelineEditing timeline z-index reorder", () => { h.unmount(); }); + it("shifts authored GSAP positions after an SDK-backed clip move commits", async () => { + const { clip, fetchMock, hook, invalidateGsapCache, writeProjectFile } = + await setupSdkKeyframedClipHarness(); + + await act(async () => { + await hook.move(clip, { start: 2.25, track: clip.track }); + }); + + expect(writeProjectFile.mock.calls[0]?.[1]).toContain('data-start="2.25"'); + const mutationCall = fetchMock.mock.calls.find((call) => + requestUrl(call[0]).includes("/gsap-mutations/"), + ); + expect(mutationCall).toBeDefined(); + const init = mutationCall?.[1] as RequestInit | undefined; + expect(JSON.parse(String(init?.body))).toEqual({ + type: "shift-positions", + targetSelector: "#clip", + delta: 1.25, + }); + expect(invalidateGsapCache).toHaveBeenCalledTimes(1); + + hook.unmount(); + }); + + it("scales authored GSAP positions after an SDK-backed clip resize commits", async () => { + const { clip, fetchMock, hook, invalidateGsapCache, writeProjectFile } = + await setupSdkKeyframedClipHarness(); + + await act(async () => { + await hook.resize(clip, { start: 2, duration: 4, playbackStart: undefined }); + }); + + expect(writeProjectFile.mock.calls[0]?.[1]).toContain('data-start="2"'); + expect(writeProjectFile.mock.calls[0]?.[1]).toContain('data-duration="4"'); + const mutationCall = fetchMock.mock.calls.find((call) => + requestUrl(call[0]).includes("/gsap-mutations/"), + ); + expect(mutationCall).toBeDefined(); + const init = mutationCall?.[1] as RequestInit | undefined; + expect(JSON.parse(String(init?.body))).toEqual({ + type: "scale-positions", + targetSelector: "#clip", + oldStart: 1, + oldDuration: 2, + newStart: 2, + newDuration: 4, + }); + expect(invalidateGsapCache).toHaveBeenCalledTimes(1); + + hook.unmount(); + }); + it("persists a vertical-only lane move (start unchanged) through the single-element fallback", async () => { // Regression: `if (!startChanged) return` ran BEFORE the file persist, so a // pure lane change routed through onMoveElement (no onMoveElements wired) @@ -821,6 +937,55 @@ describe("useTimelineEditing timeline z-index reorder", () => { unmount(); }); + it("shifts every keyed clip and invalidates the cache after an SDK-backed group move", async () => { + const source = [ + `
`, + `
`, + `
`, + `
`, + ``, + ].join("\n"); + const { iframe, a, b } = makeTwoClipPair(); + const sdkSession = await openComposition(source); + const fetchMock = stubProjectFetch(source); + const invalidateGsapCache = vi.fn(); + usePlayerStore.getState().setDuration(10); + const hook = renderTimelineEditingHook({ + timelineElements: [a, b], + iframe, + onZIndexCommit: vi.fn().mockResolvedValue(undefined), + projectId: "p1", + writeProjectFile: vi.fn<(...args: unknown[]) => Promise>(async () => {}), + recordEdit: vi.fn(async () => {}), + sdkSession, + publishSdkSession: vi.fn(() => "published"), + invalidateGsapCache, + }); + + await act(async () => { + await hook.groupMove([ + { element: a, start: 1 }, + { element: b, start: 2 }, + ]); + }); + + const mutations = fetchMock.mock.calls + .filter((call) => requestUrl(call[0]).includes("/gsap-mutations/")) + .map((call) => JSON.parse(String((call[1] as RequestInit | undefined)?.body))); + expect(mutations).toEqual([ + { type: "shift-positions", targetSelector: "#a", delta: 1 }, + { type: "shift-positions", targetSelector: "#b", delta: 1 }, + ]); + expect(invalidateGsapCache).toHaveBeenCalledTimes(1); + + hook.unmount(); + }); + it("partitions a group move by source file while keeping one undo entry", async () => { const files: Record = { "index.html": '
', diff --git a/packages/studio/src/hooks/useTimelineEditing.ts b/packages/studio/src/hooks/useTimelineEditing.ts index 2c53299a20..bf846f06fe 100644 --- a/packages/studio/src/hooks/useTimelineEditing.ts +++ b/packages/studio/src/hooks/useTimelineEditing.ts @@ -58,6 +58,7 @@ export function useTimelineEditing({ sdkSession, publishSdkSession, forceReloadSdkSession, + invalidateGsapCache, handleDomZIndexReorderCommitRef, }: UseTimelineEditingOptions) { const projectIdRef = useRef(projectId); @@ -118,6 +119,7 @@ export function useTimelineEditing({ domEditSaveTimestampRef, editQueueRef, forceReloadSdkSession, + invalidateGsapCache, isRecordingRef, pendingTimelineEditPathRef, previewIframeRef, @@ -184,21 +186,24 @@ export function useTimelineEditing({ ); }; const coalesceKey = `timeline-move:${element.hfId ?? element.id}`; + const finishMoveGsapSync = () => + // Every timing writer converges the same GSAP positions after its + // durable clip-start commit. The SDK owns the attribute write; this + // sync owns only the dependent animation rewrite and preview refresh. + finishClipTimingFallback({ + iframe: previewIframeRef.current, + reloadPreview, + projectId: projectIdRef.current, + targetPath, + domId: element.domId, + label: "Move timeline clip", + coalesceKey, + recordEdit, + edit: { kind: "shift", delta: updates.start - element.start }, + }).finally(() => invalidateGsapCache?.()); const moveFallback = () => - enqueueEdit(element, "Move timeline clip", buildMovePatches, coalesceKey).then(() => - // Soft-reload with the server's rewritten GSAP script — the timing-only move already patched - // DOM + store, so swapping the script avoids the all-clips flash; falls back to reloadPreview(). - finishClipTimingFallback({ - iframe: previewIframeRef.current, - reloadPreview, - projectId: projectIdRef.current, - targetPath, - domId: element.domId, - label: "Move timeline clip", - coalesceKey, - recordEdit, - edit: { kind: "shift", delta: updates.start - element.start }, - }), + enqueueEdit(element, "Move timeline clip", buildMovePatches, coalesceKey).then( + finishMoveGsapSync, ); return reorderDone .then(() => { @@ -221,9 +226,10 @@ export function useTimelineEditing({ readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path), publishSession: publishSdkSession, }, - { label: "Move timeline clip", coalesceKey }, + { label: "Move timeline clip", coalesceKey, skipRefresh: true }, ).then((result) => { if (!cutoverCommittedOrThrow(result)) return moveFallback(); + return finishMoveGsapSync(); }); } return moveFallback(); @@ -250,6 +256,7 @@ export function useTimelineEditing({ timelineElements, handleDomZIndexReorderCommitRef, showToast, + invalidateGsapCache, ], ); @@ -287,23 +294,25 @@ export function useTimelineEditing({ // script (timing-only resize) — same no-flash path as move; full reload is // the fallback. const coalesceKey = `timeline-resize:${element.hfId ?? element.id}`; + const finishResizeGsapSync = () => + finishClipTimingFallback({ + iframe: previewIframeRef.current, + reloadPreview, + projectId: projectIdRef.current, + targetPath, + domId: element.domId, + label: "Resize timeline clip", + coalesceKey, + recordEdit, + edit: { + kind: "scale", + from: { start: element.start, duration: element.duration }, + to: { start: updates.start, duration: updates.duration }, + }, + }).finally(() => invalidateGsapCache?.()); const resizeFallback = () => - enqueueEdit(element, "Resize timeline clip", buildResizePatches, coalesceKey).then(() => - finishClipTimingFallback({ - iframe: previewIframeRef.current, - reloadPreview, - projectId: projectIdRef.current, - targetPath, - domId: element.domId, - label: "Resize timeline clip", - coalesceKey, - recordEdit, - edit: { - kind: "scale", - from: { start: element.start, duration: element.duration }, - to: { start: updates.start, duration: updates.duration }, - }, - }), + enqueueEdit(element, "Resize timeline clip", buildResizePatches, coalesceKey).then( + finishResizeGsapSync, ); const persistDone = sdkSession && element.hfId && !hasPbsAdjustment && !needsExtension @@ -323,9 +332,10 @@ export function useTimelineEditing({ readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path), publishSession: publishSdkSession, }, - { label: "Resize timeline clip", coalesceKey }, + { label: "Resize timeline clip", coalesceKey, skipRefresh: true }, ).then((result) => { if (!cutoverCommittedOrThrow(result)) return resizeFallback(); + return finishResizeGsapSync(); }) : resizeFallback(); return persistDone.catch((error) => { @@ -346,6 +356,7 @@ export function useTimelineEditing({ reloadPreview, domEditSaveTimestampRef, showToast, + invalidateGsapCache, ], ); diff --git a/packages/studio/src/hooks/useTimelineEditingTypes.ts b/packages/studio/src/hooks/useTimelineEditingTypes.ts index a391177064..bd3df209d8 100644 --- a/packages/studio/src/hooks/useTimelineEditingTypes.ts +++ b/packages/studio/src/hooks/useTimelineEditingTypes.ts @@ -46,6 +46,8 @@ export interface UseTimelineEditingOptions { publishSdkSession?: PublishSdkSession; /** Resync the SDK session after a server-authoritative timeline write. */ forceReloadSdkSession?: () => void; + /** Reparse authored animations after a timing rewrite changes their positions. */ + invalidateGsapCache?: () => void; handleDomZIndexReorderCommitRef?: MutableRefObject; } diff --git a/packages/studio/src/hooks/useTimelineGroupEditing.ts b/packages/studio/src/hooks/useTimelineGroupEditing.ts index 8a3fe83a81..2b6ac46e70 100644 --- a/packages/studio/src/hooks/useTimelineGroupEditing.ts +++ b/packages/studio/src/hooks/useTimelineGroupEditing.ts @@ -54,6 +54,7 @@ interface UseTimelineGroupEditingOptions { domEditSaveTimestampRef: MutableRefObject; editQueueRef: MutableRefObject>; forceReloadSdkSession?: () => void; + invalidateGsapCache?: () => void; isRecordingRef?: RefObject; pendingTimelineEditPathRef: MutableRefObject>; previewIframeRef: RefObject; @@ -110,6 +111,7 @@ export function useTimelineGroupEditing({ domEditSaveTimestampRef, editQueueRef, forceReloadSdkSession, + invalidateGsapCache, isRecordingRef, pendingTimelineEditPathRef, previewIframeRef, @@ -212,7 +214,12 @@ export function useTimelineGroupEditing({ readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path), publishSession: publishSdkSession, }, - { label: input.label, coalesceKey: input.coalesceKey, coalesceMs: input.coalesceMs }, + { + label: input.label, + coalesceKey: input.coalesceKey, + coalesceMs: input.coalesceMs, + skipRefresh: true, + }, ); return cutoverCommittedOrThrow(result); }, @@ -282,25 +289,25 @@ export function useTimelineGroupEditing({ coalesceKey, coalesceMs, }); - if (handledBySdk) return; - - await persistServerBatch( - projectId, - "Move timeline clips", - changes.map((change) => ({ - element: change.element, - buildPatches: (original, target) => - buildTimelineMoveTimingPatch( - original, - target, - change.start, - change.element.duration, - change.track, - ), - })), - coalesceKey, - coalesceMs, - ); + if (!handledBySdk) { + await persistServerBatch( + projectId, + "Move timeline clips", + changes.map((change) => ({ + element: change.element, + buildPatches: (original, target) => + buildTimelineMoveTimingPatch( + original, + target, + change.start, + change.element.duration, + change.track, + ), + })), + coalesceKey, + coalesceMs, + ); + } // Track-only: no timing delta → no GSAP positions to shift and no // reload (see the trackOnly doc above). Mixed batches (any start // change) keep the full fallback below. @@ -323,6 +330,7 @@ export function useTimelineGroupEditing({ return shiftGsapPositions(projectId, changePath, domId, delta); }, }); + invalidateGsapCache?.(); }).catch((error) => { // Failed persist: revert the optimistic duration readout + live root // alongside the gesture owner's store rollback. @@ -340,6 +348,7 @@ export function useTimelineGroupEditing({ reloadPreview, trySdkBatchPersist, showToast, + invalidateGsapCache, ], ); @@ -384,23 +393,23 @@ export function useTimelineGroupEditing({ coalesceKey, coalesceMs, }); - if (handledBySdk) return; - - await persistServerBatch( - projectId, - "Resize timeline clips", - changes.map((change) => ({ - element: change.element, - buildPatches: (original, target) => - buildTimelineResizeTimingPatch(original, target, change.element, { - start: change.start, - duration: change.duration, - playbackStart: change.playbackStart, - }), - })), - coalesceKey, - coalesceMs, - ); + if (!handledBySdk) { + await persistServerBatch( + projectId, + "Resize timeline clips", + changes.map((change) => ({ + element: change.element, + buildPatches: (original, target) => + buildTimelineResizeTimingPatch(original, target, change.element, { + start: change.start, + duration: change.duration, + playbackStart: change.playbackStart, + }), + })), + coalesceKey, + coalesceMs, + ); + } await finishGroupTimingGsapFallback({ projectId, iframe: previewIframeRef.current, @@ -428,6 +437,7 @@ export function useTimelineGroupEditing({ ); }, }); + invalidateGsapCache?.(); }).catch((error) => { // Failed persist: revert the optimistic duration readout + live root // alongside the gesture owner's store rollback. @@ -445,6 +455,7 @@ export function useTimelineGroupEditing({ reloadPreview, trySdkBatchPersist, showToast, + invalidateGsapCache, ], ); diff --git a/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx b/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx index 34a1cc41ff..e40f0c295b 100644 --- a/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx +++ b/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx @@ -8,18 +8,32 @@ export interface KeyframeDiamondContextMenuState { elementId: string; percentage: number; tweenPercentage?: number; + propertyGroup?: string; + animationId?: string; currentEase?: string; } interface KeyframeDiamondContextMenuProps { state: KeyframeDiamondContextMenuState; onClose: () => void; - onDelete: (elementId: string, percentage: number) => void; + onDelete: ( + elementId: string, + percentage: number, + propertyGroup?: string, + tweenPercentage?: number, + animationId?: string, + ) => void; onDeleteAll: (elementId: string) => void; onChangeEase?: (elementId: string, percentage: number, ease: string) => void; onCopyProperties?: (elementId: string, percentage: number) => void; /** Retime the keyframe to the current playhead, preserving its value + ease. */ - onMoveToPlayhead?: (elementId: string, fromPercentage: number) => void; + onMoveToPlayhead?: ( + elementId: string, + fromPercentage: number, + propertyGroup?: string, + tweenPercentage?: number, + animationId?: string, + ) => void; } export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMenu({ @@ -51,7 +65,13 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe // Pass clip-% — resolveKeyframeTarget keys the cache lookup on clip-% // and returns the tween-% for the mutation. Passing tween-% here would // miss the lookup on any tween whose window is shorter than the clip. - onMoveToPlayhead(state.elementId, state.percentage); + onMoveToPlayhead( + state.elementId, + state.percentage, + state.propertyGroup, + state.tweenPercentage, + state.animationId, + ); onClose(); }} > @@ -64,7 +84,13 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe type="button" className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left" onClick={() => { - onDelete(state.elementId, state.percentage); + onDelete( + state.elementId, + state.percentage, + state.propertyGroup, + state.tweenPercentage, + state.animationId, + ); onClose(); }} > diff --git a/packages/studio/src/player/components/LayerDisclosureRow.tsx b/packages/studio/src/player/components/LayerDisclosureRow.tsx new file mode 100644 index 0000000000..52e345b86a --- /dev/null +++ b/packages/studio/src/player/components/LayerDisclosureRow.tsx @@ -0,0 +1,62 @@ +import { CaretRight } from "@phosphor-icons/react"; +import type { TimelineElement } from "../store/playerStore"; +import { LABEL_COL_W, TRACK_H } from "./timelineLayout"; +import { TrackClipCount } from "./TrackClipCount"; + +// Layer row (Figma order: disclosure ▸/▾, diamond, name) — the disclosure lives +// here, not on the clip bar, and re-expands a collapsed layer. +export function LayerDisclosureRow({ + keyframeClip, + clipCount, + isExpanded, + gutterBackground, + onToggleClipExpanded, +}: { + keyframeClip: TimelineElement; + clipCount: number; + isExpanded: boolean; + gutterBackground: string; + onToggleClipExpanded: () => void; +}) { + const name = keyframeClip.label ?? keyframeClip.domId ?? keyframeClip.id; + return ( +
+ + + ◇ + + + {name} + + +
+ ); +} diff --git a/packages/studio/src/player/components/TimelineClipDiamonds.test.tsx b/packages/studio/src/player/components/TimelineClipDiamonds.test.tsx index 254e5d6086..7a6022a846 100644 --- a/packages/studio/src/player/components/TimelineClipDiamonds.test.tsx +++ b/packages/studio/src/player/components/TimelineClipDiamonds.test.tsx @@ -3,7 +3,7 @@ import React, { act } from "react"; import { createRoot } from "react-dom/client"; import { afterEach, describe, expect, it, vi } from "vitest"; -import { TimelineClipDiamonds } from "./TimelineClipDiamonds"; +import { TimelineClipDiamonds, TimelineDiamondLane } from "./TimelineClipDiamonds"; (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true; @@ -84,12 +84,24 @@ describe("TimelineClipDiamonds", () => { const root = createRoot(host); act(() => { root.render( - { selectedKeyframes={new Set()} onClickKeyframe={onClickKeyframe} onMoveKeyframe={onMoveKeyframe} + groupAware />, ); }); @@ -117,7 +130,12 @@ describe("TimelineClipDiamonds", () => { diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 104 })); }); - expect(onClickKeyframe).toHaveBeenCalledWith(50); + expect(onClickKeyframe).toHaveBeenCalledWith({ + percentage: 50, + tweenPercentage: 100, + propertyGroup: "position", + animationId: "anim-1", + }); expect(onMoveKeyframe).not.toHaveBeenCalled(); act(() => root.unmount()); }); @@ -126,20 +144,39 @@ describe("TimelineClipDiamonds", () => { // keyframe) committed the move but never selected/parked on the result — // the diamond it was just dragged looked exactly like one nothing happened // to. Select it at its NEW position too. - it("selects the keyframe at its new position after a real drag-retime", () => { + it("reselects a retimed keyframe with its post-move tween percentage", () => { const onClickKeyframe = vi.fn(); - const onMoveKeyframe = vi.fn(); + const onMoveKeyframe = vi.fn().mockResolvedValue(true); const host = document.createElement("div"); document.body.append(host); const root = createRoot(host); act(() => { root.render( - { selectedKeyframes={new Set()} onClickKeyframe={onClickKeyframe} onMoveKeyframe={onMoveKeyframe} + groupAware + />, + ); + }); + const diamond = host.querySelector('button[title="40%"]'); + expect(diamond).not.toBeNull(); + + act(() => { + diamond!.dispatchEvent( + pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 80 }), + ); + diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 100 })); + }); + + expect(onMoveKeyframe).toHaveBeenCalledWith( + { + percentage: 40, + tweenPercentage: 50, + propertyGroup: "position", + animationId: "anim-1", + }, + 50, + ); + expect(onClickKeyframe).toHaveBeenCalledWith({ + percentage: 50, + tweenPercentage: 75, + propertyGroup: "position", + animationId: "anim-1", + }); + act(() => root.unmount()); + }); + + it("composes a rapid second retime from the pending position", () => { + const onMoveKeyframe = vi.fn().mockResolvedValue(true); + const host = document.createElement("div"); + document.body.append(host); + const root = createRoot(host); + act(() => { + root.render( + , ); }); @@ -161,13 +273,156 @@ describe("TimelineClipDiamonds", () => { diamond!.dispatchEvent( pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }), ); - // 4px at a 200px clip width is 2 clip-% — well past the no-op epsilon, - // a real retime. - diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 104 })); + diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 150 })); + + // The cache still exposes 50%, but this second +10% drag starts at the + // pending 75% destination and must therefore land at 85%, not 60%. + diamond!.dispatchEvent( + pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 150 }), + ); + diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 170 })); }); - expect(onMoveKeyframe).toHaveBeenCalledWith("clip-1", 50, 52); - expect(onClickKeyframe).toHaveBeenCalledWith(52); + // The second move must identify the FROM keyframe by the pending (already- + // moved) position 75%, not the stale rendered 50%; otherwise the serialized + // mutation can't locate the keyframe the first move relocated. + expect(onMoveKeyframe).toHaveBeenNthCalledWith( + 2, + { + percentage: 75, + tweenPercentage: 75, + propertyGroup: "position", + animationId: "anim-1", + }, + 85, + ); + act(() => root.unmount()); + }); + + it.each([ + ["returns false", () => Promise.resolve(false)], + ["rejects", () => Promise.reject(new Error("retime failed"))], + ])("clears a failed pending retime when the callback %s", async (_label, settle) => { + const onMoveKeyframe = vi.fn().mockImplementationOnce(settle).mockResolvedValue(true); + const host = document.createElement("div"); + document.body.append(host); + const root = createRoot(host); + act(() => { + root.render( + , + ); + }); + const diamond = host.querySelector('button[title="50%"]'); + expect(diamond).not.toBeNull(); + + await act(async () => { + diamond!.dispatchEvent( + pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }), + ); + diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 150 })); + await Promise.resolve(); + }); + + act(() => { + diamond!.dispatchEvent( + pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }), + ); + diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 120 })); + }); + + expect(onMoveKeyframe).toHaveBeenNthCalledWith( + 2, + { + percentage: 50, + tweenPercentage: 50, + propertyGroup: "position", + animationId: "anim-1", + }, + 60, + ); + act(() => root.unmount()); + }); + + it("cancels an in-flight retime on Escape without committing or selecting", () => { + const onClickKeyframe = vi.fn(); + const onMoveKeyframe = vi.fn().mockResolvedValue(true); + const host = document.createElement("div"); + document.body.append(host); + const root = createRoot(host); + act(() => { + root.render( + , + ); + }); + const diamond = host.querySelector('button[title="40%"]'); + expect(diamond).not.toBeNull(); + + act(() => { + diamond!.dispatchEvent( + pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 80 }), + ); + document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })); + diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 100 })); + }); + + // Escape ends the gesture: no retime is written, and the release is not + // reinterpreted as a click that would park the playhead on the keyframe. + expect(onMoveKeyframe).not.toHaveBeenCalled(); + expect(onClickKeyframe).not.toHaveBeenCalled(); act(() => root.unmount()); }); @@ -212,4 +467,88 @@ describe("TimelineClipDiamonds", () => { expect(suppressClickRef.current).toBe(true); act(() => root.unmount()); }); + + const renderSegmentLane = (lastAmbiguous: boolean) => { + const host = document.createElement("div"); + document.body.append(host); + const root = createRoot(host); + const kf = (percentage: number, extra: Record = {}) => ({ + percentage, + tweenPercentage: percentage, + propertyGroup: "position", + animationId: "anim-1", + properties: { x: percentage }, + ...extra, + }); + act(() => { + root.render( + , + ); + }); + return { host, root }; + }; + + it("hides the inline ease button on an ambiguous merged segment", () => { + // Segments 0->50 and 50->100; the 50->100 segment ends on the ambiguous + // keyframe, so its hover/ease-button area is not rendered. + const { host, root } = renderSegmentLane(true); + expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(1); + act(() => root.unmount()); + }); + + it("keeps the inline ease button on unambiguous merged segments", () => { + const { host, root } = renderSegmentLane(false); + expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(2); + act(() => root.unmount()); + }); + + it("hides the inline ease button on a segment with no source animation id", () => { + // A runtime-scanned keyframe has no animationId, so there is no tween to + // target; the segment ending on it must not render a (dead) ease button. + const host = document.createElement("div"); + document.body.append(host); + const root = createRoot(host); + const kf = (percentage: number, animationId?: string) => ({ + percentage, + tweenPercentage: percentage, + propertyGroup: "position", + ...(animationId ? { animationId } : {}), + properties: { x: percentage }, + }); + act(() => { + root.render( + , + ); + }); + expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(1); + act(() => root.unmount()); + }); }); diff --git a/packages/studio/src/player/components/TimelineClipDiamonds.tsx b/packages/studio/src/player/components/TimelineClipDiamonds.tsx index 129104dfb8..09320bdc57 100644 --- a/packages/studio/src/player/components/TimelineClipDiamonds.tsx +++ b/packages/studio/src/player/components/TimelineClipDiamonds.tsx @@ -1,22 +1,33 @@ -import { memo, useRef, useState } from "react"; +import { Fragment, memo, useEffect, useRef, useState } from "react"; import { BEAT_BAND_H } from "./BeatStrip"; import { KEYFRAME_DRAG_THRESHOLD_PX, previewClipPct, resolveKeyframeDrag, } from "../../components/editor/keyframeDrag"; - -interface KeyframeEntry { +import { MiniCurveSvg } from "../../components/editor/EaseCurveSection"; +import { clipToTweenPercentage } from "../../components/editor/KeyframeNavigation"; +import { LANE_H } from "./timelineLayout"; +import { + timelineKeyframeSelectionKey, + type TimelineKeyframeTarget, +} from "./timelineKeyframeIdentity"; +export interface TimelineDiamondKeyframe { percentage: number; /** Tween-relative percentage (the retime mutation keys on this, not clip %). */ tweenPercentage?: number; + propertyGroup?: string; + animationId?: string; properties: Record; ease?: string; + /** Set when 2+ source animations collide at this percentage (a single inline + * ease button can't target one): the collapsed row hides the button here. */ + easeAmbiguous?: boolean; } interface KeyframeCacheEntry { format: string; - keyframes: KeyframeEntry[]; + keyframes: TimelineDiamondKeyframe[]; ease?: string; easeEach?: string; } @@ -32,25 +43,46 @@ interface TimelineClipDiamondsProps { isSelected: boolean; currentPercentage: number; elementId: string; - selectedKeyframes: Set; + selectedKeyframes: ReadonlySet; onClickKeyframe?: (percentage: number) => void; onShiftClickKeyframe?: (elementId: string, percentage: number) => void; onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void; /** Drag-to-retime: move a keyframe to a new time, preserving its value + ease. - * Both percentages are clip-relative: `fromClipPercentage` identifies the - * dragged keyframe, `toClipPercentage` is the neighbour-clamped drop position. - * The handler decides move (within the tween) vs resize (past its boundary). */ + * `keyframe` identifies the dragged keyframe (clip-relative percentage plus + * whatever animation identity the row carries); `toClipPercentage` is the + * neighbour-clamped drop position, also clip-relative. The handler decides + * move (within the tween) vs resize (past its boundary). */ onMoveKeyframe?: ( elementId: string, - fromClipPercentage: number, + keyframe: TimelineKeyframeTarget, toClipPercentage: number, - ) => void; + ) => Promise; + /** Open the segment ease editor for the hovered mid-point button — available on + * the inline clip row too, not just the expanded lanes. */ + onSelectSegment?: (elementId: string, target: TimelineKeyframeTarget) => void; /** Set while resolving a diamond press so the ancestor clip's onClick (which * toggles selection off when already selected) ignores the native "click" * the browser auto-synthesizes after this button's pointerdown+pointerup. */ suppressClickRef?: React.RefObject; } +interface TimelineDiamondLaneProps extends Omit< + TimelineClipDiamondsProps, + | "onClickKeyframe" + | "onShiftClickKeyframe" + | "onContextMenuKeyframe" + | "onMoveKeyframe" + | "onSelectSegment" +> { + groupAware?: boolean; + globalEase?: string; + onSelectSegment?: (target: TimelineKeyframeTarget) => void; + onClickKeyframe?: (target: TimelineKeyframeTarget) => void; + onShiftClickKeyframe?: (target: TimelineKeyframeTarget) => void; + onContextMenuKeyframe?: (e: React.MouseEvent, target: TimelineKeyframeTarget) => void; + onMoveKeyframe?: (target: TimelineKeyframeTarget, toClipPercentage: number) => Promise; +} + const DIAMOND_RATIO = 0.8; // Percentage tolerance for rendering keyframes near clip boundaries. Keyframes // slightly outside [0, 100] (from rounding or stale cache during the async @@ -64,9 +96,30 @@ type DragState = { startX: number; fromClipPct: number; moved: boolean; + /** Latest pointer x, flushed to the preview once per frame. */ + lastX: number; + /** Index in the sorted row, needed by the neighbour clamp off the render path. */ + index: number; + /** Escape was pressed: the drag is dead, and the pointerup that follows is + * swallowed rather than falling through to the click branch. */ + cancelled?: boolean; }; -export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({ +function keyframeTarget( + keyframe: TimelineDiamondKeyframe, + groupAware: boolean, +): TimelineKeyframeTarget { + return groupAware + ? { + percentage: keyframe.percentage, + tweenPercentage: keyframe.tweenPercentage, + propertyGroup: keyframe.propertyGroup, + animationId: keyframe.animationId, + } + : { percentage: keyframe.percentage }; +} + +export const TimelineDiamondLane = memo(function TimelineDiamondLane({ keyframesData, clipWidthPx, clipHeightPx, @@ -80,14 +133,60 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({ onShiftClickKeyframe, onContextMenuKeyframe, onMoveKeyframe, + onSelectSegment, suppressClickRef, -}: TimelineClipDiamondsProps) { + groupAware = false, + globalEase = "none", +}: TimelineDiamondLaneProps) { // Hooks must run before the early return below. const dragRef = useRef(null); + // Pending retime destination (clip + tween %) per keyframe key, so a rapid + // second drag composes from where the first move left the keyframe (whose + // cache entry has not rebuilt yet) instead of the stale rendered value. + const pendingRetimeRef = useRef(new Map()); + useEffect(() => { + // Clear a pending entry once the authoritative cache reflects a keyframe at + // ~its destination. Match by tolerance, not equality: cache writers round + // clip %s, so an exact check would leak an entry after every successful retime. + for (const [key, pending] of pendingRetimeRef.current) { + if (keyframesData.keyframes.some((k) => Math.abs(k.percentage - pending.clipPct) < 0.2)) { + pendingRetimeRef.current.delete(key); + } + } + }, [keyframesData.keyframes]); // Visual-only preview of the dragged diamond's clip-% — no runtime/GSAP hold // (that optimistic hold was the #1763 flake). The atomic move-keyframe commit // on drop re-keys the diamond from source. const [preview, setPreview] = useState<{ kfKey: string; clipPct: number } | null>(null); + // One preview render per frame: a 120Hz trackpad fires pointermove far faster + // than the lane can repaint, and every diamond in the row re-evaluates its + // memo on each of those renders. + const previewFrameRef = useRef(null); + const cancelPreviewFrame = () => { + if (previewFrameRef.current === null) return; + cancelAnimationFrame(previewFrameRef.current); + previewFrameRef.current = null; + }; + // Escape backs out of an in-flight retime, the way clip and element drags + // already do. Nothing was written yet (the commit happens on pointerup), so + // dropping the preview is the whole undo. + useEffect(() => { + const onKeyDown = (event: KeyboardEvent) => { + if (event.key !== "Escape" || !dragRef.current || dragRef.current.cancelled) return; + dragRef.current.cancelled = true; + cancelPreviewFrame(); + setPreview(null); + }; + document.addEventListener("keydown", onKeyDown); + return () => { + document.removeEventListener("keydown", onKeyDown); + cancelPreviewFrame(); + }; + }, []); + // Index of the segment whose mid-point ease button is revealed on hover, like + // Figma. Null = no segment hovered → no button shown (resting state is just + // the connector line + diamonds). + const [hoveredSegment, setHoveredSegment] = useState(null); // The button element can re-render (reposition/unmount) synchronously from // the state updates onClickKeyframe/onMoveKeyframe trigger, before the // browser gets to auto-synthesize the "click" event that normally follows @@ -108,7 +207,12 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({ // When the beat strip occupies the top band, shrink the diamonds and center // them in the remaining bottom region so they don't collide with it. - const diamondSize = Math.round(clipHeightPx * (beatsActive ? 0.45 : DIAMOND_RATIO)); + // One consistent keyframe-diamond size everywhere (clip bars + property lanes), + // matching the property-lane size (LANE_H · ratio). Beat-strip tracks still + // shrink to fit under the strip. + const diamondSize = beatsActive + ? Math.round(clipHeightPx * 0.45) + : Math.round(LANE_H * DIAMOND_RATIO); const half = diamondSize / 2; const centerY = beatsActive ? BEAT_BAND_H + (clipHeightPx - BEAT_BAND_H) / 2 : clipHeightPx / 2; const sorted = keyframesData.keyframes @@ -136,37 +240,95 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({ }} > {sorted.map((kf, i) => { - if (i === 0) return null; - const prev = sorted[i - 1]!; + const prev = sorted[i - 1]; + if (!prev) return null; const x1 = Math.max(0, Math.min(clipWidthPx, (prev.percentage / 100) * clipWidthPx)); const x2 = Math.max(0, Math.min(clipWidthPx, (kf.percentage / 100) * clipWidthPx)); if (x2 - x1 < 1) return null; + // Group-aware target for the ease button: the segment ease is + // per-keyframe (each keyframe carries its own animationId/tweenPercentage). + // On a merged inline row the button is hidden where the segment is + // ambiguous (two source animations collide at this % with different + // eases; see easeAmbiguous) or the keyframe has no source animation id + // (runtime-scanned) so there is no tween to target. + const target = keyframeTarget(kf, true); + const ease = kf.ease ?? globalEase; return ( -
+ +
+ {onSelectSegment && !kf.easeAmbiguous && kf.animationId !== undefined && ( +
setHoveredSegment(i)} + onMouseLeave={() => setHoveredSegment((h) => (h === i ? null : h))} + > + {hoveredSegment === i && ( + + )} +
+ )} + ); })} {sorted.map((kf, i) => { - const kfKey = `${elementId}:${kf.percentage}`; + const target = keyframeTarget(kf, groupAware); + const kfKey = timelineKeyframeSelectionKey(elementId, target); // While dragging this diamond, render it at the live preview clip-%. const renderPct = preview?.kfKey === kfKey ? preview.clipPct : kf.percentage; - // Center the diamond ON its keyframe %: left = (% · width) − half so the - // diamond's midpoint sits exactly at the percentage. At 0% the midpoint - // is the clip's left edge (the left half overflows, which the - // overflow-visible clip shows) — NOT shifted fully inside. + // Center the diamond ON its keyframe %: left = (% · width) − half, so the + // diamond's midpoint sits exactly on the playhead/ruler x for that time. + // The 0% diamond's left half lands in the reserved left gutter (the + // content origin is inset past the label column, Figma-style) so it stays + // fully visible instead of being clipped by the sticky label column. const leftPx = (renderPct / 100) * clipWidthPx - half; const isKfSelected = selectedKeyframes.has(kfKey); const atPlayhead = isSelected && Math.abs(kf.percentage - currentPercentage) < 0.5; @@ -181,46 +343,65 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({ dragRef.current = { kfKey, startX: e.clientX, - fromClipPct: kf.percentage, + lastX: e.clientX, + index: i, + fromClipPct: pendingRetimeRef.current.get(kfKey)?.clipPct ?? kf.percentage, moved: false, }; } }; const onPointerMove = (e: React.PointerEvent) => { const d = dragRef.current; - if (!d || d.kfKey !== kfKey) return; + if (!d || d.kfKey !== kfKey || d.cancelled) return; + d.lastX = e.clientX; if (!d.moved && Math.abs(e.clientX - d.startX) >= KEYFRAME_DRAG_THRESHOLD_PX) { d.moved = true; } - if (d.moved) { + if (!d.moved || previewFrameRef.current !== null) return; + previewFrameRef.current = requestAnimationFrame(() => { + previewFrameRef.current = null; + const live = dragRef.current; + if (!live || live.kfKey !== kfKey || live.cancelled) return; setPreview({ kfKey, clipPct: previewClipPct({ - pointerDownX: d.startX, - pointerMoveX: e.clientX, + pointerDownX: live.startX, + pointerMoveX: live.lastX, clipWidthPx, - draggedClipPct: d.fromClipPct, - draggedIndex: i, + draggedClipPct: live.fromClipPct, + draggedIndex: live.index, sortedClipPcts, }), }); - } + }); }; const onPointerUp = (e: React.PointerEvent) => { const d = dragRef.current; + if (d?.kfKey === kfKey && d.cancelled) { + // Escape already ended this drag; the release is not a click. + dragRef.current = null; + e.currentTarget.releasePointerCapture?.(e.pointerId); + suppressNextClick(); + return; + } // No drag armed (canDrag false / non-primary press) → treat as a click. if (!d || d.kfKey !== kfKey) { if (e.button !== 0) return; suppressNextClick(); - if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage); - else onClickKeyframe?.(kf.percentage); + if (e.shiftKey) onShiftClickKeyframe?.(target); + else onClickKeyframe?.(target); return; } e.stopPropagation(); dragRef.current = null; + cancelPreviewFrame(); setPreview(null); e.currentTarget.releasePointerCapture?.(e.pointerId); suppressNextClick(); + // Single-diamond retime by design: a multi-select drag would have to + // move every selected keyframe as one mutation, which the script ops + // do not express yet. Selecting several and dragging one moves only + // the dragged one. const res = resolveKeyframeDrag({ pointerDownX: d.startX, pointerUpX: e.clientX, @@ -235,14 +416,54 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({ // back onto ~the same position — no real retime, so treat it as the // click it was. Otherwise a normal click with a few px of mouse/ // trackpad drift silently does nothing: no selection, no move. - if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage); - else onClickKeyframe?.(kf.percentage); + if (e.shiftKey) onShiftClickKeyframe?.(target); + else onClickKeyframe?.(target); } else if (res.kind === "move" && res.toClipPct != null) { - onMoveKeyframe?.(elementId, d.fromClipPct, res.toClipPct); + const animKfs = + target.animationId === undefined + ? keyframesData.keyframes + : keyframesData.keyframes.filter((k) => k.animationId === target.animationId); + // Clamp to the mapped tween range: clipToTweenPercentage extrapolates + // linearly, so a boundary drag past the range would otherwise reselect + // an out-of-range tween % (e.g. 150%) even though the mutation clamps + // the moved endpoint back to the boundary. + const tweenPcts = animKfs + .map((k) => k.tweenPercentage) + .filter((v): v is number => typeof v === "number"); + const clampTween = (v: number) => + tweenPcts.length + ? Math.max(Math.min(...tweenPcts), Math.min(Math.max(...tweenPcts), v)) + : v; + const newTweenPct = clampTween(clipToTweenPercentage(animKfs, res.toClipPct)); + // For a rapid second retime the diamond still renders the stale cache + // position, so identify the FROM keyframe by the pending (already-moved) + // position; the mutation locates the source keyframe by this identity. + const pendingBefore = pendingRetimeRef.current.get(kfKey); + const fromTarget = pendingBefore + ? { + ...target, + percentage: pendingBefore.clipPct, + tweenPercentage: pendingBefore.tweenPct, + } + : target; + const pending = { clipPct: res.toClipPct, tweenPct: newTweenPct }; + pendingRetimeRef.current.set(kfKey, pending); + const clearPending = () => { + if (pendingRetimeRef.current.get(kfKey) === pending) { + pendingRetimeRef.current.delete(kfKey); + } + }; + void onMoveKeyframe?.(fromTarget, res.toClipPct).then((committed) => { + if (!committed) clearPending(); + }, clearPending); // A retime still targeted this exact diamond — park/select it at its // new position, same as a plain click, or a drag that actually moved // something looks identical to one that silently did nothing. - onClickKeyframe?.(res.toClipPct); + onClickKeyframe?.({ + ...target, + percentage: res.toClipPct, + tweenPercentage: newTweenPct, + }); } }; @@ -251,6 +472,10 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({ key={`${i}-${kf.percentage}`} type="button" className="absolute" + data-keyframe-group={groupAware ? kf.propertyGroup : undefined} + data-keyframe-percentage={ + groupAware ? (kf.tweenPercentage ?? kf.percentage) : undefined + } style={{ left: leftPx, top: centerY, @@ -268,10 +493,20 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({ onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={onPointerUp} + onPointerCancel={(e) => { + // Browser/OS cancellation (or lost capture) ends the drag without a + // pointerup, so clear the armed drag and preview or a ghost diamond + // stays stuck at the last previewed position. + if (dragRef.current?.kfKey !== kfKey) return; + dragRef.current = null; + cancelPreviewFrame(); + setPreview(null); + e.currentTarget.releasePointerCapture?.(e.pointerId); + }} onContextMenu={(e) => { e.preventDefault(); e.stopPropagation(); - onContextMenuKeyframe?.(e, elementId, kf.percentage); + onContextMenuKeyframe?.(e, target); }} title={`${kf.percentage}%`} > @@ -297,3 +532,33 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
); }); + +export const TimelineClipDiamonds = memo(function TimelineClipDiamonds( + props: TimelineClipDiamondsProps, +) { + return ( + props.onClickKeyframe?.(target.percentage)} + onShiftClickKeyframe={(target) => + props.onShiftClickKeyframe?.(props.elementId, target.percentage) + } + onContextMenuKeyframe={(e, target) => + props.onContextMenuKeyframe?.(e, props.elementId, target.percentage) + } + onMoveKeyframe={ + props.onMoveKeyframe + ? (target, toClipPercentage) => + props.onMoveKeyframe?.(props.elementId, target, toClipPercentage) ?? + Promise.resolve(false) + : undefined + } + onSelectSegment={ + props.onSelectSegment + ? (target) => props.onSelectSegment?.(props.elementId, target) + : undefined + } + /> + ); +}); diff --git a/packages/studio/src/player/components/TimelineLanes.tsx b/packages/studio/src/player/components/TimelineLanes.tsx index 75069c1a0b..8437bb64e3 100644 --- a/packages/studio/src/player/components/TimelineLanes.tsx +++ b/packages/studio/src/player/components/TimelineLanes.tsx @@ -3,6 +3,7 @@ import { Eye, EyeSlash } from "@phosphor-icons/react"; import { BeatStrip, BeatBackgroundLines } from "./BeatStrip"; import { TimelineClip } from "./TimelineClip"; import { TimelineClipDiamonds } from "./TimelineClipDiamonds"; +import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity"; import type { MusicBeatAnalysis } from "@hyperframes/core/beats"; import { getTimelineEditCapabilities, resolveBlockedTimelineEditIntent } from "./timelineEditing"; import type { TimelineTheme } from "./timelineTheme"; @@ -76,9 +77,9 @@ export interface TimelineLaneBaseProps { onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void; onMoveKeyframe?: ( elementId: string, - fromClipPercentage: number, + keyframe: TimelineKeyframeTarget, toClipPercentage: number, - ) => void; + ) => Promise; onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void; /** * Right-click on EMPTY lane space (not on a clip — those preventDefault diff --git a/packages/studio/src/player/components/TimelineOverlays.tsx b/packages/studio/src/player/components/TimelineOverlays.tsx index bd0896e0be..44e3120747 100644 --- a/packages/studio/src/player/components/TimelineOverlays.tsx +++ b/packages/studio/src/player/components/TimelineOverlays.tsx @@ -106,12 +106,12 @@ export function TimelineOverlays({ setKfContextMenu(null)} - onDelete={(elId, pct) => onDeleteKeyframe?.(elId, pct)} + onDelete={(elId, pct) => onDeleteKeyframe?.(elId, { percentage: pct })} onDeleteAll={(elId) => onDeleteAllKeyframes?.(elId)} onChangeEase={(elId, pct, ease) => onChangeKeyframeEase?.(elId, pct, ease)} onMoveToPlayhead={ onMoveKeyframeToPlayhead - ? (elId, pct) => onMoveKeyframeToPlayhead(elId, pct) + ? (elId, pct) => onMoveKeyframeToPlayhead(elId, { percentage: pct }) : undefined } onCopyProperties={(elId, pct) => { diff --git a/packages/studio/src/player/components/TimelinePropertyLanes.test.tsx b/packages/studio/src/player/components/TimelinePropertyLanes.test.tsx new file mode 100644 index 0000000000..475dbd1e96 --- /dev/null +++ b/packages/studio/src/player/components/TimelinePropertyLanes.test.tsx @@ -0,0 +1,433 @@ +// @vitest-environment happy-dom + +import React, { act } from "react"; +import { createRoot, type Root } from "react-dom/client"; +import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser"; +import { afterEach, describe, expect, it, vi } from "vitest"; +import { TimelineClipDiamonds } from "./TimelineClipDiamonds"; +import { + getTimelinePropertyLanes, + TimelinePropertyLanes, + type TimelinePropertyLanesProps, +} from "./TimelinePropertyLanes"; +import { timelineKeyframeSelectionKey } from "./timelineKeyframeIdentity"; + +(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true; + +afterEach(() => { + document.body.innerHTML = ""; +}); + +function animation( + id: string, + propertyGroup: PropertyGroupName, + keyframes: Array<{ + percentage: number; + properties: Record; + ease?: string; + }>, +): GsapAnimation { + return { + id, + targetSelector: "#clip-1", + method: "to", + position: 0, + duration: 1, + properties: {}, + propertyGroup, + keyframes: { format: "percentage", keyframes }, + }; +} + +function flatAnimation( + id: string, + propertyGroup: PropertyGroupName, + properties: Record, +): GsapAnimation { + return { + id, + targetSelector: "#clip-1", + method: "to", + position: 0, + duration: 1, + properties, + propertyGroup, + }; +} + +function renderPropertyLanes(overrides: Partial = {}): { + host: HTMLDivElement; + root: Root; +} { + const host = document.createElement("div"); + document.body.append(host); + const root = createRoot(host); + act(() => { + root.render( + , + ); + }); + return { host, root }; +} + +function laneDiamonds(host: HTMLElement, group: string): HTMLButtonElement[] { + return Array.from( + host.querySelectorAll( + `[data-property-group="${group}"] button[data-keyframe-percentage]`, + ), + ); +} + +function expectLanePercentages(host: HTMLElement, group: string, percentages: string[]) { + expect(laneDiamonds(host, group).map((diamond) => diamond.dataset.keyframePercentage)).toEqual( + percentages, + ); +} + +function laneEaseButtons(host: HTMLElement, group: string): HTMLButtonElement[] { + return Array.from( + host.querySelectorAll( + `[data-property-group="${group}"] button[data-keyframe-ease-button]`, + ), + ); +} + +function laneEaseSegments(host: HTMLElement, group: string): HTMLElement[] { + return Array.from( + host.querySelectorAll( + `[data-property-group="${group}"] [data-keyframe-ease-segment]`, + ), + ); +} + +// The mid-segment ease button is revealed on hover (Figma parity), so tests must +// hover the segment strip before its button exists. React derives onMouseEnter +// from a bubbling mouseover, so dispatching that is what arms the hover. +function revealEaseButton(segment: HTMLElement): HTMLButtonElement | null { + act(() => { + segment.dispatchEvent(new MouseEvent("mouseover", { bubbles: true })); + }); + return segment.querySelector("button[data-keyframe-ease-button]"); +} + +const POSITION_SEGMENT_ANIMATION = animation("position-tween", "position", [ + { percentage: 0, properties: { x: 0 } }, + { percentage: 50, properties: { x: 50 } }, +]); + +describe("TimelinePropertyLanes", () => { + it("returns a position lane with synthesized endpoints for a flat tween", () => { + const lanes = getTimelinePropertyLanes( + [flatAnimation("position-tween", "position", { x: 420 })], + 0, + 1, + ); + + expect(lanes).toHaveLength(1); + expect(lanes[0]?.group).toBe("position"); + expect(lanes[0]?.keyframes).toEqual([ + { + percentage: 0, + tweenPercentage: 0, + properties: { x: 0 }, + propertyGroup: "position", + animationId: "position-tween", + }, + { + percentage: 100, + tweenPercentage: 100, + properties: { x: 420 }, + propertyGroup: "position", + animationId: "position-tween", + }, + ]); + }); + + it("returns both flat and authored keyframe property groups", () => { + const lanes = getTimelinePropertyLanes( + [ + flatAnimation("position-tween", "position", { x: 420 }), + animation("visual-tween", "visual", [ + { percentage: 0, properties: { opacity: 0 } }, + { percentage: 100, properties: { opacity: 1 } }, + ]), + ], + 0, + 1, + ); + + expect(lanes.map((lane) => lane.group)).toEqual(["position", "visual"]); + expect(lanes.map((lane) => lane.keyframes.map((keyframe) => keyframe.percentage))).toEqual([ + [0, 100], + [0, 100], + ]); + }); + + it("renders each source property group at its independent keyframe positions", () => { + const animations = [ + animation("position-tween", "position", [ + { percentage: 0, properties: { x: 0, y: 0 } }, + { percentage: 50, properties: { x: 100, y: 20 } }, + { percentage: 100, properties: { x: 200, y: 40 } }, + ]), + animation("visual-tween", "visual", [{ percentage: 25, properties: { opacity: 0.5 } }]), + ]; + + const { host, root } = renderPropertyLanes({ animations }); + const position = laneDiamonds(host, "position"); + const visual = laneDiamonds(host, "visual"); + + expect(position).toHaveLength(3); + expect(visual).toHaveLength(1); + // Diamonds are centered on their true keyframe time (0% at -half); the + // reserved left gutter (content origin inset, tested at the Timeline level) + // keeps the overflowing left half visible rather than clamping it inward. + expect(position.map((diamond) => diamond.style.left)).toEqual(["-11px", "89px", "189px"]); + expect(visual[0]?.style.left).toBe("39px"); + expect( + host.querySelectorAll('[data-property-group="position"] [data-keyframe-connector]'), + ).toHaveLength(2); + act(() => root.unmount()); + }); + + it("keeps both groups' diamonds when their source keyframes share 0% and 100%", () => { + const animations = [ + animation("position-tween", "position", [ + { percentage: 0, properties: { x: 0 } }, + { percentage: 100, properties: { x: 100 } }, + ]), + animation("visual-tween", "visual", [ + { percentage: 0, properties: { opacity: 0 } }, + { percentage: 100, properties: { opacity: 1 } }, + ]), + ]; + + const { host, root } = renderPropertyLanes({ animations }); + + expectLanePercentages(host, "position", ["0", "100"]); + expectLanePercentages(host, "visual", ["0", "100"]); + act(() => root.unmount()); + }); + + it("renders an authored hold keyframe whose value equals its predecessor", () => { + const animations = [ + animation("position-tween", "position", [ + { percentage: 0, properties: { x: 10 } }, + { percentage: 50, properties: { x: 10 } }, + { percentage: 100, properties: { x: 20 } }, + ]), + ]; + + const { host, root } = renderPropertyLanes({ animations }); + + expectLanePercentages(host, "position", ["0", "50", "100"]); + act(() => root.unmount()); + }); + + it("keeps Position@50% selection distinct from Opacity@50%", () => { + const onClickKeyframe = vi.fn(); + const animations = [ + animation("position-tween", "position", [{ percentage: 50, properties: { x: 50 } }]), + animation("visual-tween", "visual", [{ percentage: 50, properties: { opacity: 0.5 } }]), + ]; + const { host, root } = renderPropertyLanes({ animations, onClickKeyframe }); + const position = laneDiamonds(host, "position")[0]!; + + act(() => { + position.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, button: 0 })); + }); + + const target = onClickKeyframe.mock.calls[0]?.[0]; + expect(target).toEqual({ + animationId: "position-tween", + percentage: 50, + propertyGroup: "position", + tweenPercentage: 50, + }); + + act(() => { + root.render( + , + ); + }); + + const positionFill = laneDiamonds(host, "position")[0]?.querySelector("path:last-child"); + const visualFill = laneDiamonds(host, "visual")[0]?.querySelector("path:last-child"); + expect(positionFill?.getAttribute("fill")).toBe("#4ba3d2"); + expect(visualFill?.getAttribute("fill")).toBe("#a3a3a3"); + act(() => root.unmount()); + }); + + it("reveals one midpoint ease button per segment on hover, regardless of selection", () => { + const animations = [ + animation("position-tween", "position", [ + { percentage: 0, properties: { x: 0 } }, + { percentage: 50, properties: { x: 50 } }, + { percentage: 100, properties: { x: 100 } }, + ]), + ]; + const { host, root } = renderPropertyLanes({ animations, onSelectSegment: vi.fn() }); + + const segments = laneEaseSegments(host, "position"); + expect(segments).toHaveLength(2); + expect(segments.map((segment) => segment.style.left)).toEqual(["0px", "100px"]); + expect(laneDiamonds(host, "position")).toHaveLength(3); + // Resting state: no button until a segment is hovered. + expect(laneEaseButtons(host, "position")).toHaveLength(0); + + // Hovering reveals exactly one button — the hovered segment's. + expect(revealEaseButton(segments[0]!)).not.toBeNull(); + expect(laneEaseButtons(host, "position")).toHaveLength(1); + + // The ease button is available on hover even when the element is NOT selected + // (a lane shows for the track's active/primary clip, not only the selected one). + act(() => { + root.render( + , + ); + }); + const unselectedSegments = laneEaseSegments(host, "position"); + expect(unselectedSegments).toHaveLength(2); + expect(revealEaseButton(unselectedSegments[0]!)).not.toBeNull(); + act(() => root.unmount()); + }); + + it("reveals each segment's button with its destination keyframe ease curve", () => { + const animations = [ + animation("position-tween", "position", [ + { percentage: 0, properties: { x: 0 } }, + { percentage: 33, properties: { x: 33 }, ease: "none" }, + { percentage: 66, properties: { x: 66 }, ease: "power2.out" }, + { + percentage: 100, + properties: { x: 100 }, + ease: "custom(M0,0 C0.1,0.2 0.3,0.9 1,1)", + }, + ]), + ]; + const { host, root } = renderPropertyLanes({ animations, onSelectSegment: vi.fn() }); + + const segments = laneEaseSegments(host, "position"); + expect(segments).toHaveLength(3); + const paths = segments.map((segment) => + revealEaseButton(segment)?.querySelector("path")?.getAttribute("d"), + ); + expect(paths).toHaveLength(3); + expect(new Set(paths).size).toBe(3); + act(() => root.unmount()); + }); + + it("selects the destination keyframe when a hovered segment's ease button is clicked", () => { + const onSelectSegment = vi.fn(); + const { host, root } = renderPropertyLanes({ + animations: [POSITION_SEGMENT_ANIMATION], + onSelectSegment, + }); + + const button = revealEaseButton(laneEaseSegments(host, "position")[0]!); + act(() => button?.click()); + + expect(onSelectSegment).toHaveBeenCalledWith({ + animationId: "position-tween", + percentage: 50, + propertyGroup: "position", + tweenPercentage: 50, + }); + act(() => root.unmount()); + }); + + it("routes a colliding Position segment to the Position animation", () => { + const onSelectSegment = vi.fn(); + const animations = [ + POSITION_SEGMENT_ANIMATION, + animation("visual-tween", "visual", [ + { percentage: 0, properties: { opacity: 0 } }, + { percentage: 50, properties: { opacity: 0.5 } }, + ]), + ]; + const { host, root } = renderPropertyLanes({ animations, onSelectSegment }); + + const button = revealEaseButton(laneEaseSegments(host, "position")[0]!); + act(() => button?.click()); + + expect(onSelectSegment.mock.calls[0]?.[0]).toMatchObject({ + animationId: "position-tween", + propertyGroup: "position", + }); + act(() => root.unmount()); + }); + + it("keeps the collapsed TimelineClipDiamonds positions and callback contract unchanged", () => { + const onClickKeyframe = vi.fn(); + const host = document.createElement("div"); + document.body.append(host); + const root = createRoot(host); + act(() => { + root.render( + , + ); + }); + const diamonds = Array.from(host.querySelectorAll("button")); + + // Unified keyframe-diamond size (LANE_H·ratio ≈ 22px, half 11) on collapsed + // clips too, so 0% sits at -11px regardless of clip-bar height. + expect(diamonds.map((diamond) => diamond.style.left)).toEqual(["-11px", "89px"]); + expect(diamonds[1]?.querySelector("path:last-child")?.getAttribute("fill")).toBe("#4ba3d2"); + act(() => { + diamonds[1]?.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, button: 0 })); + }); + expect(onClickKeyframe).toHaveBeenCalledWith(50); + act(() => root.unmount()); + }); +}); diff --git a/packages/studio/src/player/components/TimelinePropertyLanes.tsx b/packages/studio/src/player/components/TimelinePropertyLanes.tsx new file mode 100644 index 0000000000..bd518e7727 --- /dev/null +++ b/packages/studio/src/player/components/TimelinePropertyLanes.tsx @@ -0,0 +1,163 @@ +import type { MouseEvent as ReactMouseEvent, RefObject } from "react"; +import { + classifyPropertyGroup, + type GsapAnimation, + type PropertyGroupName, +} from "@hyperframes/core/gsap-parser"; +import { toAbsoluteTime } from "../../hooks/gsapShared"; +import { synthesizeFlatTweenKeyframes } from "../../hooks/gsapTweenSynth"; +import { TimelineDiamondLane, type TimelineDiamondKeyframe } from "./TimelineClipDiamonds"; +import { LANE_H, getTimelineLaneTop } from "./timelineLayout"; +import type { TimelineKeyframeTarget } from "./timelineKeyframeIdentity"; + +export interface TimelinePropertyLanesProps { + animations: readonly GsapAnimation[]; + clipStart: number; + clipDuration: number; + clipLeftPx: number; + clipWidthPx: number; + accentColor: string; + isSelected: boolean; + currentPercentage: number; + elementId: string; + selectedKeyframes: ReadonlySet; + onSelectSegment?: (target: TimelineKeyframeTarget) => void; + onClickKeyframe?: (target: TimelineKeyframeTarget) => void; + onShiftClickKeyframe?: (target: TimelineKeyframeTarget) => void; + onContextMenuKeyframe?: (e: ReactMouseEvent, target: TimelineKeyframeTarget) => void; + onMoveKeyframe?: (target: TimelineKeyframeTarget, toClipPercentage: number) => Promise; + suppressClickRef?: RefObject; +} + +function hasGroupProperty( + properties: Record, + group: PropertyGroupName, +): boolean { + return Object.keys(properties).some((property) => classifyPropertyGroup(property) === group); +} + +/** The tween's editable keyframes: its real keyframes, or the start→end pair + * synthesized for a flat tween. Empty for a tween that animates nothing. */ +function animationKeyframes(animation: GsapAnimation) { + return animation.keyframes?.keyframes ?? synthesizeFlatTweenKeyframes(animation)?.keyframes ?? []; +} + +/** A tween contributes a property lane when it has a group and at least one + * editable keyframe (real or synthesized). */ +export function animationContributesLane(animation: GsapAnimation): boolean { + return !!animation.propertyGroup && animationKeyframes(animation).length > 0; +} + +function sourceGroups(animations: readonly GsapAnimation[]) { + const groups = new Map(); + for (const animation of animations) { + if (!animation.propertyGroup || !animationContributesLane(animation)) continue; + const groupAnimations = groups.get(animation.propertyGroup) ?? []; + groupAnimations.push(animation); + groups.set(animation.propertyGroup, groupAnimations); + } + return groups; +} + +function groupKeyframes( + animations: readonly GsapAnimation[], + group: PropertyGroupName, + clipStart: number, + clipDuration: number, +): TimelineDiamondKeyframe[] { + const keyframes: TimelineDiamondKeyframe[] = []; + for (const animation of animations) { + const tweenStart = + animation.resolvedStart ?? (typeof animation.position === "number" ? animation.position : 0); + const tweenDuration = animation.duration ?? clipDuration; + for (const keyframe of animationKeyframes(animation)) { + if (!hasGroupProperty(keyframe.properties, group)) continue; + const absoluteTime = toAbsoluteTime(tweenStart, tweenDuration, keyframe.percentage); + keyframes.push({ + ...keyframe, + percentage: ((absoluteTime - clipStart) / clipDuration) * 100, + tweenPercentage: keyframe.percentage, + propertyGroup: group, + animationId: animation.id, + }); + } + } + return keyframes; +} + +export function getTimelinePropertyLanes( + animations: readonly GsapAnimation[], + clipStart: number, + clipDuration: number, +) { + if (clipDuration <= 0) return []; + return Array.from(sourceGroups(animations), ([group, groupAnimations]) => ({ + group, + animations: groupAnimations, + keyframes: groupKeyframes(groupAnimations, group, clipStart, clipDuration), + })).filter((lane) => lane.keyframes.length > 0); +} + +export function TimelinePropertyLanes({ + animations, + clipStart, + clipDuration, + clipLeftPx, + clipWidthPx, + accentColor, + isSelected, + currentPercentage, + elementId, + selectedKeyframes, + onSelectSegment, + onClickKeyframe, + onShiftClickKeyframe, + onContextMenuKeyframe, + onMoveKeyframe, + suppressClickRef, +}: TimelinePropertyLanesProps) { + if (clipWidthPx < 20 || clipDuration <= 0) return null; + const lanes = getTimelinePropertyLanes(animations, clipStart, clipDuration); + + if (lanes.length === 0) return null; + return ( + <> + {lanes.map(({ group, animations: groupAnimations, keyframes }, laneIndex) => ( +
+ +
+ ))} + + ); +} diff --git a/packages/studio/src/player/components/TimelineTrackHeader.test.tsx b/packages/studio/src/player/components/TimelineTrackHeader.test.tsx new file mode 100644 index 0000000000..96feb17947 --- /dev/null +++ b/packages/studio/src/player/components/TimelineTrackHeader.test.tsx @@ -0,0 +1,306 @@ +// @vitest-environment happy-dom + +import React, { act } from "react"; +import { createRoot, type Root } from "react-dom/client"; +import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser"; +import { afterEach, describe, expect, it, vi } from "vitest"; +import { TimelinePropertyLanes } from "./TimelinePropertyLanes"; +import { TimelineTrackHeader } from "./TimelineTrackHeader"; +import { defaultTimelineTheme } from "./timelineTheme"; +import type { TimelineElement } from "../store/playerStore"; +import type { TimelineEditCallbacks } from "./timelineCallbacks"; +import { LABEL_COL_W } from "./timelineLayout"; + +(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true; + +afterEach(() => { + document.body.innerHTML = ""; +}); + +const ELEMENT: TimelineElement = { + id: "clip-1", + label: "Hero card", + tag: "div", + start: 0, + duration: 2, + track: 0, +}; + +function animation( + id: string, + propertyGroup: PropertyGroupName, + keyframes: Array<{ + percentage: number; + properties: Record; + }>, +): GsapAnimation { + return { + id, + targetSelector: "#clip-1", + method: "to", + position: 0, + duration: 2, + properties: {}, + propertyGroup, + keyframes: { format: "percentage", keyframes }, + }; +} + +const POSITION = animation("position-tween", "position", [ + { percentage: 0, properties: { x: 0, y: 0 } }, + { percentage: 50, properties: { x: 100, y: 50 } }, + { percentage: 100, properties: { x: 200, y: 100 } }, +]); + +const OPACITY = animation("opacity-tween", "visual", [ + { percentage: 0, properties: { opacity: 0 } }, + { percentage: 50, properties: { opacity: 0.5 } }, + { percentage: 100, properties: { opacity: 1 } }, +]); + +interface RenderHeaderOptions { + animations?: GsapAnimation[]; + clipCount?: number; + currentTime?: number; + expanded?: boolean; + onSeek?: (time: number) => void; + onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"]; +} + +function renderHeader(options: RenderHeaderOptions = {}): { + host: HTMLDivElement; + root: Root; + rerender: (next: RenderHeaderOptions) => void; +} { + const host = document.createElement("div"); + document.body.append(host); + const root = createRoot(host); + const render = (next: RenderHeaderOptions) => { + act(() => { + root.render( + , + ); + }); + }; + render(options); + return { host, root, rerender: render }; +} + +function click(host: HTMLElement, label: string) { + const button = host.querySelector(`button[aria-label="${label}"]`); + expect(button).not.toBeNull(); + act(() => button?.click()); +} + +describe("TimelineTrackHeader", () => { + // The header shows one clip's lanes, so how many clips the track holds is + // otherwise invisible from the label column. A single-clip track stays silent. + it("shows the track's clip count only once the track holds more than one clip", () => { + const view = renderHeader({ clipCount: 1 }); + expect(view.host.querySelector('[aria-label="1 clips"]')).toBeNull(); + + view.rerender({ clipCount: 3 }); + expect(view.host.querySelector('[aria-label="3 clips"]')?.textContent).toBe("3"); + act(() => view.root.unmount()); + }); + + it("adds and removes a keyframe on the explicitly targeted property-group tween", () => { + const onTogglePropertyGroupKeyframe = vi.fn(); + const view = renderHeader({ currentTime: 0.5, onTogglePropertyGroupKeyframe }); + + click(view.host, "Toggle Opacity keyframe"); + expect(onTogglePropertyGroupKeyframe).toHaveBeenLastCalledWith( + ELEMENT, + expect.objectContaining({ + animationId: "opacity-tween", + propertyGroup: "visual", + tweenPercentage: 25, + properties: { opacity: 0.25 }, + remove: false, + }), + ); + + view.rerender({ currentTime: 1, onTogglePropertyGroupKeyframe }); + click(view.host, "Toggle Opacity keyframe"); + expect(onTogglePropertyGroupKeyframe).toHaveBeenLastCalledWith( + ELEMENT, + expect.objectContaining({ + animationId: "opacity-tween", + propertyGroup: "visual", + tweenPercentage: 50, + properties: { opacity: 0.5 }, + remove: true, + }), + ); + expect(onTogglePropertyGroupKeyframe).not.toHaveBeenCalledWith( + ELEMENT, + expect.objectContaining({ animationId: "position-tween" }), + ); + act(() => view.root.unmount()); + }); + + it("seeks only to the selected group's adjacent keyframes", () => { + const onSeek = vi.fn(); + const view = renderHeader({ + currentTime: 1, + animations: [ + POSITION, + animation("opacity-tween", "visual", [ + { percentage: 25, properties: { opacity: 0.25 } }, + { percentage: 50, properties: { opacity: 0.5 } }, + { percentage: 75, properties: { opacity: 0.75 } }, + ]), + ], + onSeek, + }); + + click(view.host, "Next Position keyframe"); + expect(onSeek).toHaveBeenLastCalledWith(2); + click(view.host, "Previous Position keyframe"); + expect(onSeek).toHaveBeenLastCalledWith(0); + expect(onSeek).not.toHaveBeenCalledWith(1.5); + act(() => view.root.unmount()); + }); + + // The lane header sits inside the track row, whose own click handler selects + // the track. Every control in the label column has to own its click, or + // seeking to a keyframe also reselects whatever is behind the header. + it("keeps lane-header control clicks off the ancestor track row", () => { + const onAncestorClick = vi.fn(); + const view = renderHeader({ + currentTime: 1, + onSeek: vi.fn(), + onTogglePropertyGroupKeyframe: vi.fn(), + }); + // React 18 delegates from the root container, so an ancestor of it is where + // a leaked click actually shows up. + document.body.addEventListener("click", onAncestorClick); + + // Every control in the lane's label column, found by row rather than by + // label, so a wording change to one button can't silently drop it here. + const controls = view.host.querySelectorAll( + '[data-property-group="position"] button', + ); + expect(controls.length).toBeGreaterThanOrEqual(3); + for (const button of controls) { + act(() => { + button.dispatchEvent(new MouseEvent("click", { bubbles: true })); + }); + } + + document.body.removeEventListener("click", onAncestorClick); + expect(onAncestorClick).not.toHaveBeenCalled(); + act(() => view.root.unmount()); + }); + + it("fills the toggle diamond exactly at that group's keyframe", () => { + const view = renderHeader({ currentTime: 0.5 }); + const positionToggle = view.host.querySelector( + 'button[aria-label="Toggle Position keyframe"]', + ); + expect(positionToggle?.textContent).toBe("◇"); + + view.rerender({ currentTime: 1 }); + expect( + view.host.querySelector('button[aria-label="Toggle Position keyframe"]') + ?.textContent, + ).toBe("◆"); + act(() => view.root.unmount()); + }); + + it("updates formatted group values when the playhead moves", () => { + const view = renderHeader({ currentTime: 0.5 }); + expect(view.host.querySelector('[data-property-group="position"]')?.textContent).toContain( + "50, 25", + ); + expect(view.host.querySelector('[data-property-group="visual"]')?.textContent).toContain("25%"); + + view.rerender({ currentTime: 1.5 }); + expect(view.host.querySelector('[data-property-group="position"]')?.textContent).toContain( + "150, 75", + ); + expect(view.host.querySelector('[data-property-group="visual"]')?.textContent).toContain("75%"); + act(() => view.root.unmount()); + }); + + it("disables the previous chevron at or before the group's first keyframe", () => { + const view = renderHeader({ currentTime: 0 }); + const prevAt0 = view.host.querySelector( + 'button[aria-label="Previous Position keyframe"]', + ); + expect(prevAt0).not.toBeNull(); + expect(prevAt0?.disabled).toBe(true); + + view.rerender({ currentTime: 1 }); + const prevAt1 = view.host.querySelector( + 'button[aria-label="Previous Position keyframe"]', + ); + expect(prevAt1?.disabled).toBe(false); + act(() => view.root.unmount()); + }); + + it("uses the same lane row offsets when collapsed, expanded once, and expanded multiple times", () => { + const view = renderHeader({ expanded: false }); + expect(view.host.querySelectorAll("[data-timeline-lane-top]")).toHaveLength(0); + + const assertAligned = (animations: GsapAnimation[]) => { + view.rerender({ animations }); + const lanesHost = document.createElement("div"); + document.body.append(lanesHost); + const lanesRoot = createRoot(lanesHost); + act(() => { + lanesRoot.render( + , + ); + }); + expect( + Array.from(view.host.querySelectorAll("[data-timeline-lane-top]")).map( + (row) => row.style.top, + ), + ).toEqual( + Array.from(lanesHost.querySelectorAll("[data-timeline-lane-top]")).map( + (row) => row.style.top, + ), + ); + expect( + Array.from(lanesHost.querySelectorAll("[data-timeline-property-lane]")).map( + (row) => row.style.left, + ), + ).toEqual(animations.map(() => "120px")); + act(() => lanesRoot.unmount()); + }; + + assertAligned([POSITION]); + assertAligned([POSITION, OPACITY]); + act(() => view.root.unmount()); + }); +}); diff --git a/packages/studio/src/player/components/TimelineTrackHeader.tsx b/packages/studio/src/player/components/TimelineTrackHeader.tsx new file mode 100644 index 0000000000..7364fb7c61 --- /dev/null +++ b/packages/studio/src/player/components/TimelineTrackHeader.tsx @@ -0,0 +1,367 @@ +import { useState } from "react"; +import { Eye, EyeSlash } from "@phosphor-icons/react"; +import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser"; +import { Music } from "../../icons/SystemIcons"; +import type { TimelineElement } from "../store/playerStore"; +import type { TimelineEditCallbacks } from "./timelineCallbacks"; +import { getTimelinePropertyLanes } from "./TimelinePropertyLanes"; +import { LayerDisclosureRow } from "./LayerDisclosureRow"; +import { TrackClipCount } from "./TrackClipCount"; +import { LABEL_COL_W, LANE_H, getTimelineLaneTop } from "./timelineLayout"; +import type { TimelineTheme } from "./timelineTheme"; +import { + resolveLaneHeaderState, + type KeyframeNavigationState, + type TimelinePropertyLane, +} from "./trackHeaderLaneState"; +import { valueReadout } from "./trackHeaderLaneValues"; + +interface TimelineTrackHeaderProps { + trackNumber: number; + trackLabel: string; + contentOrigin: number; + /** The track's active keyframe clip (selected, else primary) — the one whose + * disclosure + property rows this header shows, whether expanded or not. */ + keyframeClip: TimelineElement | null; + /** Clips on this track, so the header can say how many the row holds. */ + clipCount: number; + isExpanded: boolean; + animations: readonly GsapAnimation[]; + currentTime: number; + isTrackHidden: boolean; + isAudioTrack: boolean; + isActive: boolean; + isHovered: boolean; + theme: TimelineTheme; + onToggleClipExpanded: () => void; + onToggleTrackHidden: TimelineEditCallbacks["onToggleTrackHidden"]; + onTogglePropertyGroupKeyframe?: TimelineEditCallbacks["onTogglePropertyGroupKeyframe"]; + onSeek?: (time: number) => void; +} + +function VisibilityButton({ + hidden, + trackNumber, + visible, + onToggle, +}: { + hidden: boolean; + trackNumber: number; + visible: boolean; + onToggle: TimelineEditCallbacks["onToggleTrackHidden"]; +}) { + if (!visible) return