mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-08 10:46:06 +00:00
fix(studio): the shared-row follow-ups (#3215)
* fix(core): dedupe the wet/dry mix math between delayFeedback and chorusLfo Both effect builders set wet.gain to the mix and dry.gain to its complement in identical two-line blocks; fallow kept re-flagging it as a 10-line clone on every unrelated change. Extracted setWetDryMix. * fix(core): remove the build-audio-fx-runtime.ts stray resurrected by a main merge An earlier merge with main brought this deleted file back (git's merge/delete handling on an unchanged-on-one-side file); package.json already points at build-inline-artifact.ts, so it sat unreachable and duplicating that file's config, both of which fallow flagged. * fix(studio): pull TimelineLanes under the 600-line cap TimelineLanes.tsx hit 620 lines. Extracted the three per-clip pointer gestures (resize-start, pointer-down move-arm, click/razor-split) into createClipGestureHandlers — one factory call per rendered clip instead of ~120 lines of inline handler bodies in the render loop. 529 lines now. * fix(studio): split the extracted pointerdown handler under the CRAP threshold Moving the ~120-line gesture logic into timelineClipGestureHandlers.ts concentrated it into two functions fallow flagged (onPointerDown at CRAP 63.6, onResizeStart at 31.6). Split the decision logic (which gesture a pointerdown implies) into a pure resolvePointerDownAction, then split its own intent-blocking check into isIntentBlocked. onResizeStart's guard moved into canStartResize. Every function now scores under 30. * fix(studio): drop the unused DomEditSelection import in PropertyPanelFlat CI caught it on PR #3026 (wa-12-panel-params); a later refactor in the stack removed the last use of the type here without removing the import. * fix(studio): close the typecheck and fallow gaps wa-18b-reschedule opened useAutomationLanes.ts's write() assumed gesture-scoped coalescing and a preview-only commit that useDomEditAttributeCommits.ts never grew — backported that option support from its own later commit so the two sides of the API agree. The paste path and its tests were missing the box selection's v0/v1 bounds a sibling commit added to AutomationSelection. The FX panel's carve controls still edited the six mechanism numbers (maxCutDb, bands, intelligibilityBias) after carveProfile() collapsed authoring to one Strength knob, so those fields no longer existed on HfCarveSettings; UI now edits strength, and analyseCarveBands is called with carveProfile(strength). Also closes fallow's complexity, dead-code and duplication findings on this PR's diff: extracted automationLaneDragMath.ts (pure group/point-move math) and useAutomationRangeDrag.ts (the marquee-select gesture) out of useAutomationLaneGestures.ts, pulled a couple of render-loop ternaries and a resolver into named functions, dropped an export nothing outside its file used, and shared a step-simplifier between audioCarve's two envelope builders. The edge-stretch vs. box-select priority test in TimelineAutomationLane.test was still pinning the pre-box-select rule (edge wins over a point sitting on it) that a sibling commit deliberately reversed — a point inside the box is now selected content, so grabbing it drags the group instead. Updated the test to the shipped rule instead of the old one. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(core): cap the via conic's weight so an edge-clamped via point can't NaN A via point pulled out past the segment (viaX: 5, viaY: -3) clamps to (0.999, 0.001) — exactly on the steady region's edge, where edge - viaX is 0. viaConic divided by that zero to get an infinite weight, and shapeVia turned Infinity into NaN a few steps later (Infinity - Infinity in the quadratic coefficient). NaN reaching setValueCurveAtTime silences the automated parameter for the rest of the render. Capped the weight at 1e6 instead of leaving it unbounded — past that point the arc already reads as touching the via point, so nothing visible is lost. Also hardened shapeVia's existing denominator guard (`<= 0`) to `!(> 0)`, since NaN fails the original comparison and fell through it. Review by Miga (PR #3208). * fix(studio-server): fingerprint the proactive waveform cache key too The route already keys the waveform cache on the asset's size and mtime as well as its path, so a rebuilt-in-place file gets fresh peaks instead of stale ones. generateWaveformCache — the proactive path that runs on upload — still called buildWaveformCacheKey with the path alone, so it wrote to a different key than the route reads from (making the pre-generated cache never found) and kept the exact collision bug this fingerprint exists to fix on its own path. Review by Miga (PR #3211). * style(docs): run oxfmt on the /hyperframes-audio skill docs Table column widths had drifted out of alignment with oxfmt's own rules, failing format:check and blocking the Preflight gate every downstream branch inherits. Whitespace only, no content change. * fix(core): stop \b from missing underscore-separated names, guard clipsOverlap's negative duration \b treats `_` as a word character, so \bbed\b never matched bed_01, music_bed_loop, or theme_song, and \bvo\b/\bvox\b/\btts\b had the same gap — an underscore-separated bed classified as "unknown" and could end up offered as its own carve source. Replaced the short hints with a boundary that actually excludes letters and digits on both sides. clipsOverlap computed end = start + duration without guarding sign, so a negative duration put end before start — an interval that does not describe anything, and one specific case showed it silently dropping a real overlap (a shorter, earlier broken end rejected a clip that genuinely contained the point). Duration clamps to zero instead: a clip cannot un-play time, and a zero-length clip at its start is the sane reading of "duration nobody wrote down as positive." Review by Miga (PR #3212). * fix(studio): widen PropertyPanel's resetModules render timeout again The 20s margin (already once widened for the same reason) is timing out in CI's full-monorepo Test run — the resetModules()+fresh-import render this test needs is uncached and competes with every other package's test suite for the same worker pool, and the same test passes in well under 2s standalone. Went to 45s rather than re-tuning to whatever number happens to clear the current CI load, since that number moves every time CI gains a package. * fix(studio): stop the single-candidate auto-apply carve firing twice Two auto-apply effects both fire when sourceOptions.length === 1: the multi-candidate effect only guards length === 0, so a single candidate passes it too, and the single-candidate effect passes its own guard right after — both compute the same sources list and both call setCarve, so the common case (one narrator, one bed) triggered two decodes, two FFT runs, and two concurrent attribute writes for one decision. The multi-candidate effect now defers to its sibling for exactly one candidate, which already has its own detailed handling for that case. Review by Miga (PR #3213). * feat(core): carve against every voice over a bed, always (#3212) * feat(core): carve against every voice over a bed, always dynamically A bed usually runs under a whole sequence — a narrator, an interview answer, a second presenter — and carving against one of them left the others fighting it. `source` becomes `sources`, and `mixCarveSources` sums every voice onto the BED's clock before anything is measured. That is what keeps one analysis sufficient: the chain is fixed, so there is no per-voice filter to switch between, and bands drawn from all the speech there is with envelopes that rise wherever any of it happens answer the actual question — where and when is speech masking this bed. Summed rather than averaged: two people talking at once mask more than either alone. Audio before the bed starts is dropped rather than folded in at zero, since it plays over nothing and shifting it would put a cut where there is no voice. `dynamic` is gone. A fixed depth thins the bed through every pause, and once both have been heard there is no reason to want it, so every carve follows the speech. Two helpers the panel and the headless script now share instead of each carrying a copy — two definitions of "what does this name suggest" drift, and then the two disagree about which track is the voice: - `classifyAudioName` reads a track's kind from its id and filename together. `unknown` is deliberately common: treating an unrecognised name as "not a voice" would hide the one track somebody needs to pick. - `clipsOverlap` keeps out a voice that never plays while the bed does. An unwritten duration counts as unbounded, not zero — refusing a clip whose length the composition leaves to the media would drop the commonest case there is. Files written before this still load: a single `source` reads as a one-voice list, a stored `dynamic` is ignored, and an absent attribute means the defaults whole. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(core): stop \b from missing underscore-separated names, guard clipsOverlap's negative duration \b treats `_` as a word character, so \bbed\b never matched bed_01, music_bed_loop, or theme_song, and \bvo\b/\bvox\b/\btts\b had the same gap — an underscore-separated bed classified as "unknown" and could end up offered as its own carve source. Replaced the short hints with a boundary that actually excludes letters and digits on both sides. clipsOverlap computed end = start + duration without guarding sign, so a negative duration put end before start — an interval that does not describe anything, and one specific case showed it silently dropping a real overlap (a shorter, earlier broken end rejected a clip that genuinely contained the point). Duration clamps to zero instead: a clip cannot un-play time, and a zero-length clip at its start is the sane reading of "duration nobody wrote down as positive." Review by Miga (PR #3212). --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(studio): port the carve UI off the removed source/dynamic fields #3212 (accidentally squash-merged into this branch instead of main) changed HfCarveSettings from a single `source` + `dynamic` toggle to a `sources` list with dynamic mode removed outright — the multi-voice UI consumer that goes with that shape lands in the very next PR, so this branch was left with a type that no longer matched its own code. Minimal port, not the multi-voice redesign that PR does properly: the "Listen to" picker and analyse() treat sources[0] as the one voice this UI still understands, and every dynamic-mode branch (the automated envelope lanes, the toggle, the checkbox) is gone along with the field — a carve is now always the static value the analysis computes, matching what the type change made permanent. Test suite trimmed the same way: the automation-lane and toggle tests covered behavior that no longer exists. --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Vance Ingalls
co-authored by
Claude Opus 5
Claude Opus 5
parent
9b18fa7a26
commit
df57ad4bac
@@ -28,7 +28,9 @@ export function AutomationValueInput({
|
||||
}: AutomationValueInputProps) {
|
||||
return (
|
||||
<input
|
||||
className="hf-automation-value absolute rounded-[3px] border border-panel-border-input bg-panel-bg-2 px-1 font-mono text-[9px] text-panel-text-1"
|
||||
// pointer-events-auto: the lane band around it takes none, so that clips
|
||||
// sharing the row do not cover each other's envelopes (see the lane).
|
||||
className="hf-automation-value pointer-events-auto absolute rounded-[3px] border border-panel-border-input bg-panel-bg-2 px-1 font-mono text-[9px] text-panel-text-1"
|
||||
style={{ left: leftPx, top: 1, width: 44, zIndex: 4 }}
|
||||
// The lane is a pointer surface, and the timeline above it owns single-key
|
||||
// shortcuts. Without stopping both, a press lands on the lane instead of
|
||||
|
||||
@@ -610,11 +610,58 @@ describe("Timeline provider boundary", () => {
|
||||
// One shared volume row, and BOTH clips hold it open.
|
||||
expectTrackExpansion(row, ["narration-1", "narration-2"], TRACK_H + AUTOMATION_LANE_H);
|
||||
|
||||
// Every clip bar on the row is capped to one track height. Only the clip
|
||||
// owning the property lanes used to be, so its siblings stretched the whole
|
||||
// expanded row and painted their waveforms over the envelopes below.
|
||||
expect(
|
||||
["narration-1", "narration-2"].map(
|
||||
(id) => host.querySelector<HTMLElement>(`[data-el-id="${id}"]`)?.style.height,
|
||||
),
|
||||
).toEqual([`${TRACK_H - 2 * CLIP_Y}px`, `${TRACK_H - 2 * CLIP_Y}px`]);
|
||||
|
||||
act(() => caret()?.click());
|
||||
expectTrackExpansion(row, [], TRACK_H);
|
||||
act(() => root.unmount());
|
||||
});
|
||||
|
||||
// The lanes are the row's, and selecting a clip must not rebuild them. They
|
||||
// used to hang off the active clip's property lanes, so clicking a sibling
|
||||
// moved the whole subtree into a different element and remounted every lane —
|
||||
// which threw away each one's hover state and any gesture in flight. Pressing
|
||||
// a lane to select its clip therefore made the handles vanish under the
|
||||
// pointer, which is the one gesture the read-only lane exists to support.
|
||||
it("keeps the automation lanes mounted when the selection moves along the row", () => {
|
||||
const host = createSizedTimelineHost(720);
|
||||
const automation = JSON.stringify({
|
||||
version: 1,
|
||||
lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
|
||||
});
|
||||
usePlayerStore.setState({
|
||||
duration: 8,
|
||||
timelineReady: true,
|
||||
selectedElementId: "narration-2",
|
||||
elements: [
|
||||
{ id: "narration-1", tag: "audio", start: 0, duration: 4, track: 0, automation },
|
||||
{ id: "narration-2", tag: "audio", start: 4, duration: 4, track: 0, automation },
|
||||
],
|
||||
});
|
||||
const root = createRoot(host);
|
||||
act(() => root.render(React.createElement(Timeline)));
|
||||
act(() => host.querySelector<HTMLButtonElement>('button[aria-label$=" keyframes"]')?.click());
|
||||
|
||||
const before = [...host.querySelectorAll(".hf-automation-lane")];
|
||||
expect(before).toHaveLength(2);
|
||||
|
||||
act(() => usePlayerStore.setState({ selectedElementId: "narration-1" }));
|
||||
|
||||
// Identity, not deep equality: a remount produces structurally identical
|
||||
// nodes, so only `toBe` can tell the two apart.
|
||||
const after = [...host.querySelectorAll(".hf-automation-lane")];
|
||||
expect(after).toHaveLength(before.length);
|
||||
after.forEach((node, index) => expect(node).toBe(before[index]));
|
||||
act(() => root.unmount());
|
||||
});
|
||||
|
||||
it("marks every clip in selectedElementIds as selected", () => {
|
||||
const host = createSizedTimelineHost(720);
|
||||
|
||||
|
||||
@@ -328,7 +328,12 @@ export function TimelineAutomationLane({
|
||||
|
||||
return (
|
||||
<div
|
||||
className="hf-automation-lane absolute"
|
||||
// Spans the whole row so the separator below can, but takes no pointer
|
||||
// events itself: clips sharing a row each mount one of these over the
|
||||
// full width, so a band that accepted the pointer would let whichever
|
||||
// clip rendered last swallow every sibling's envelope — hover, drag and
|
||||
// all. Only the drawn parts opt back in.
|
||||
className="hf-automation-lane pointer-events-none absolute"
|
||||
style={{ top: topPx, left: 0, right: 0, height: h }}
|
||||
data-automation-lane={target}
|
||||
>
|
||||
@@ -347,7 +352,7 @@ export function TimelineAutomationLane({
|
||||
envelope it described and scrolled horizontally away from its own row. */}
|
||||
<svg
|
||||
ref={svgRef}
|
||||
className="hf-automation-svg absolute"
|
||||
className="hf-automation-svg pointer-events-auto absolute"
|
||||
style={{
|
||||
left: leftPx - PAD_X,
|
||||
top: 0,
|
||||
|
||||
@@ -102,8 +102,7 @@ const readingBind = (element: TimelineElement, isSelected: boolean): AutomationL
|
||||
onRangeClear: vi.fn(),
|
||||
});
|
||||
|
||||
/** Every drawn envelope as `row @ left`, which is the whole claim under test. */
|
||||
function mountRow(elements: readonly TimelineElement[], selectedKey?: string) {
|
||||
function renderRow(elements: readonly TimelineElement[], selectedKey?: string): HTMLElement {
|
||||
const host = document.createElement("div");
|
||||
document.body.append(host);
|
||||
act(() => {
|
||||
@@ -119,7 +118,12 @@ function mountRow(elements: readonly TimelineElement[], selectedKey?: string) {
|
||||
/>,
|
||||
);
|
||||
});
|
||||
return [...host.querySelectorAll<HTMLElement>(".hf-automation-lane")]
|
||||
return host;
|
||||
}
|
||||
|
||||
/** Every drawn envelope as `row @ left`, which is the whole claim under test. */
|
||||
function mountRow(elements: readonly TimelineElement[], selectedKey?: string) {
|
||||
return [...renderRow(elements, selectedKey).querySelectorAll<HTMLElement>(".hf-automation-lane")]
|
||||
.map((lane) => `${lane.style.top} @ ${lane.querySelector("svg")?.style.left}`)
|
||||
.sort();
|
||||
}
|
||||
@@ -148,6 +152,21 @@ describe("TimelineAutomationLaneSlot shared rows", () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it("lets each clip's envelope be reached, not just the one drawn last", () => {
|
||||
// Every clip mounts a band spanning the WHOLE row (the row separator needs
|
||||
// the full width), so three bands sit on top of each other here. If a band
|
||||
// took the pointer, the last one rendered would swallow hover and drag over
|
||||
// its siblings' envelopes — handles appeared only on the final clip, and
|
||||
// only on rows that a single clip happened to own.
|
||||
const host = renderRow([narration1, narration2]);
|
||||
const bands = [...host.querySelectorAll<HTMLElement>(".hf-automation-lane")];
|
||||
expect(bands.length).toBeGreaterThan(1);
|
||||
for (const band of bands) {
|
||||
expect(band.className).toContain("pointer-events-none");
|
||||
expect(band.querySelector("svg")?.getAttribute("class")).toContain("pointer-events-auto");
|
||||
}
|
||||
});
|
||||
|
||||
it("keeps the same rows whichever clip is selected", () => {
|
||||
// The bug this replaces: the row listed only the selected clip's lanes, so
|
||||
// clicking a sibling swapped which envelopes existed.
|
||||
|
||||
@@ -232,10 +232,23 @@ describe("TimelineLanes track numbering", () => {
|
||||
describe("TimelineLanes disclosure target", () => {
|
||||
const ANIMATIONS = new Map([["clip-a", [positionTween("clip-a")]]]);
|
||||
|
||||
function ariaControlsTarget(host: HTMLElement): HTMLElement | null {
|
||||
/**
|
||||
* `aria-controls` is an ID LIST, and the caret needs one: it reveals the
|
||||
* active clip's keyframe lanes AND the track's automation lanes, which cannot
|
||||
* be one element — one belongs to a clip, the other to the row.
|
||||
*/
|
||||
function ariaControlsIds(host: HTMLElement): string[] {
|
||||
const caret = host.querySelector("button[aria-controls]");
|
||||
const id = caret?.getAttribute("aria-controls");
|
||||
return id ? host.querySelector<HTMLElement>(`#${id}`) : null;
|
||||
return (caret?.getAttribute("aria-controls") ?? "").split(/\s+/).filter(Boolean);
|
||||
}
|
||||
|
||||
function ariaControlsTargets(host: HTMLElement): (HTMLElement | null)[] {
|
||||
return ariaControlsIds(host).map((id) => host.querySelector<HTMLElement>(`#${id}`));
|
||||
}
|
||||
|
||||
/** The first region named, which is the keyframe lanes. */
|
||||
function ariaControlsTarget(host: HTMLElement): HTMLElement | null {
|
||||
return ariaControlsTargets(host)[0] ?? null;
|
||||
}
|
||||
|
||||
// aria-controls used to name a div in the sticky label column: it computed to
|
||||
@@ -246,6 +259,9 @@ describe("TimelineLanes disclosure target", () => {
|
||||
|
||||
expect(target).not.toBeNull();
|
||||
expect(target?.querySelectorAll("[data-timeline-property-lane]").length).toBeGreaterThan(0);
|
||||
// Every region it names has to exist, or the caret points at nothing.
|
||||
expect(ariaControlsTargets(view.host).length).toBeGreaterThan(1);
|
||||
expect(ariaControlsTargets(view.host).every(Boolean)).toBe(true);
|
||||
act(() => view.root.unmount());
|
||||
});
|
||||
|
||||
@@ -255,6 +271,9 @@ describe("TimelineLanes disclosure target", () => {
|
||||
|
||||
expect(target).not.toBeNull();
|
||||
expect(target?.querySelectorAll("[data-timeline-property-lane]")).toHaveLength(0);
|
||||
// Including the automation region, which is mounted empty while collapsed
|
||||
// for exactly this reason.
|
||||
expect(ariaControlsTargets(view.host).every(Boolean)).toBe(true);
|
||||
act(() => view.root.unmount());
|
||||
});
|
||||
|
||||
@@ -266,8 +285,8 @@ describe("TimelineLanes disclosure target", () => {
|
||||
const second = renderLanes({ animations: ANIMATIONS, expandedClipIds: ["clip-a"] });
|
||||
|
||||
const idsFor = (host: HTMLElement) =>
|
||||
Array.from(host.querySelectorAll("button[aria-controls]")).map((caret) =>
|
||||
caret.getAttribute("aria-controls"),
|
||||
Array.from(host.querySelectorAll("button[aria-controls]")).flatMap((caret) =>
|
||||
(caret.getAttribute("aria-controls") ?? "").split(/\s+/).filter(Boolean),
|
||||
);
|
||||
const firstIds = idsFor(first.host);
|
||||
const secondIds = idsFor(second.host);
|
||||
|
||||
@@ -209,6 +209,12 @@ export function TimelineLanes({
|
||||
);
|
||||
const keyframeClipKey = keyframeClip?.key ?? keyframeClip?.id;
|
||||
const rowExpanded = isTrackRowExpanded(els, expandedClipIds);
|
||||
// How tall a clip BAR is drawn. An expanded row is mostly lanes, and a
|
||||
// clip left to fill it painted its waveform straight over them — so the
|
||||
// bar is capped for every clip on the row, not just the one whose
|
||||
// property lanes are showing. Undefined means "fill the row", which is
|
||||
// right only while it is collapsed and the row is nothing but bar.
|
||||
const clipBarHeight = rowExpanded ? TRACK_H - 2 * CLIP_Y : undefined;
|
||||
// The clips whose envelopes this row draws, at their dragged positions.
|
||||
// Once per row, not once per clip in the map below.
|
||||
const automationElements = els.map(getPreviewElement);
|
||||
@@ -217,6 +223,10 @@ export function TimelineLanes({
|
||||
// on the canvas. Keyed by display row, not by `trackNum`, which is a
|
||||
// fractional sort key and would mint ids like `...-0.16666666666666666`.
|
||||
const lanesId = `${lanesIdPrefix}-track-${row}`;
|
||||
// The caret reveals two canvas regions now: the active clip's keyframe
|
||||
// lanes and the track's automation lanes. They cannot be one element —
|
||||
// one belongs to a clip, the other to the row — so the caret names both.
|
||||
const automationLanesId = `${lanesId}-automation`;
|
||||
// The header's remove buttons write through the same binding the lanes
|
||||
// themselves edit through, so a deletion persists exactly like dragging
|
||||
// a point does — and the binding reports read-only for an unselected
|
||||
@@ -245,6 +255,7 @@ export function TimelineLanes({
|
||||
logicalRow={logicalRow}
|
||||
propertyRows={trackLogicalRows.slice(1)}
|
||||
lanesId={lanesId}
|
||||
headerLanesId={`${lanesId} ${automationLanesId}`}
|
||||
top={rowGeometry.getRowTop(row)}
|
||||
height={rowHeight}
|
||||
virtualized={rowsVirtualized}
|
||||
@@ -263,7 +274,7 @@ export function TimelineLanes({
|
||||
els[0]?.id ??
|
||||
`Track${trackDisplaySuffix(displayNumber)}`
|
||||
}
|
||||
lanesId={lanesId}
|
||||
lanesId={`${lanesId} ${automationLanesId}`}
|
||||
contentOrigin={contentOrigin}
|
||||
keyframeClip={keyframeClip}
|
||||
trackElements={els}
|
||||
@@ -411,7 +422,7 @@ export function TimelineLanes({
|
||||
el={previewElement}
|
||||
pps={pps}
|
||||
clipY={CLIP_Y}
|
||||
clipHeight={showsLanes ? TRACK_H - 2 * CLIP_Y : undefined}
|
||||
clipHeight={clipBarHeight}
|
||||
isSelected={isSelected}
|
||||
isHovered={hoveredClip === clipKey}
|
||||
isDragging={false}
|
||||
@@ -503,25 +514,6 @@ export function TimelineLanes({
|
||||
Promise.resolve(false)
|
||||
}
|
||||
suppressClickRef={suppressClickRef}
|
||||
footer={
|
||||
showsLanes ? (
|
||||
// Every clip on the row, not this one: the lanes are
|
||||
// the TRACK's, one row per automated property.
|
||||
<TimelineAutomationLaneSlot
|
||||
elements={automationElements}
|
||||
isSelected={(element) => {
|
||||
const key = getTimelineElementIdentity(element);
|
||||
return selectedElementId === key || selectedElementIds.has(key);
|
||||
}}
|
||||
lanes={automationLanes}
|
||||
pps={pps}
|
||||
laneCount={laneCounts.get(elementKey) ?? 0}
|
||||
accentColor={clipStyle.accent}
|
||||
currentTime={currentTime}
|
||||
beatTimes={beatAnalysis?.beatTimes}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -556,6 +548,36 @@ export function TimelineLanes({
|
||||
);
|
||||
})
|
||||
}
|
||||
{/* The automation lanes belong to the ROW, so they are mounted
|
||||
here rather than under the active clip's property lanes.
|
||||
Hanging off that clip meant selecting a sibling moved the
|
||||
whole subtree into a different clip's element and remounted
|
||||
every lane — which threw away each lane's hover state (and
|
||||
any gesture mid-flight), so pressing a lane to select its
|
||||
clip made the handles you were reaching for disappear.
|
||||
|
||||
Mounted in BOTH disclosure states, empty while collapsed, so
|
||||
the caret's aria-controls resolves either way — same reason
|
||||
the keyframe lanes are. Absolute positions inside resolve
|
||||
against this same relative row, so the geometry is unchanged
|
||||
by the move. */}
|
||||
<div id={automationLanesId}>
|
||||
{rowExpanded ? (
|
||||
<TimelineAutomationLaneSlot
|
||||
elements={automationElements}
|
||||
isSelected={(element) => {
|
||||
const key = getTimelineElementIdentity(element);
|
||||
return selectedElementId === key || selectedElementIds.has(key);
|
||||
}}
|
||||
lanes={automationLanes}
|
||||
pps={pps}
|
||||
laneCount={keyframeClipKey ? (laneCounts.get(keyframeClipKey) ?? 0) : 0}
|
||||
accentColor={getTrackStyle(keyframeClip?.tag ?? "").accent}
|
||||
currentTime={currentTime}
|
||||
beatTimes={beatAnalysis?.beatTimes}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</TimelineTrackRow>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useMemo, type MouseEvent as ReactMouseEvent, type ReactNode, type RefObject } from "react";
|
||||
import { useMemo, type MouseEvent as ReactMouseEvent, type RefObject } from "react";
|
||||
import {
|
||||
classifyPropertyGroup,
|
||||
type GsapAnimation,
|
||||
@@ -35,12 +35,6 @@ export interface TimelinePropertyLanesProps {
|
||||
onContextMenuKeyframe?: (e: ReactMouseEvent, target: TimelineKeyframeTarget) => void;
|
||||
onMoveKeyframe?: (target: TimelineKeyframeTarget, toClipPercentage: number) => Promise<boolean>;
|
||||
suppressClickRef?: RefObject<boolean>;
|
||||
/**
|
||||
* Rendered after the keyframe lanes, inside this wrapper. An audio clip's
|
||||
* automation lane lives here so it shares the same disclosure — and so the
|
||||
* header caret's `aria-controls` covers it too.
|
||||
*/
|
||||
footer?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -202,7 +196,6 @@ export function TimelinePropertyLanes({
|
||||
onContextMenuKeyframe,
|
||||
onMoveKeyframe,
|
||||
suppressClickRef,
|
||||
footer,
|
||||
}: TimelinePropertyLanesProps) {
|
||||
// Memoized: TimelineDiamondLane is React.memo'd, and rebuilding the lanes (and
|
||||
// a fresh keyframesData literal per lane) on every render would re-render every
|
||||
@@ -270,7 +263,6 @@ export function TimelinePropertyLanes({
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{footer}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -30,8 +30,11 @@ interface TimelineTrackHeaderProps {
|
||||
* from the label rather than inventing one (see trackDisplayNumber). */
|
||||
trackDisplayNumber: number | null;
|
||||
trackLabel: string;
|
||||
/** Id of the canvas-side lanes element the disclosure caret expands. Minted by
|
||||
* TimelineLanes, which is the one place that sees both subtrees. */
|
||||
/** Ids of the canvas-side lane regions the disclosure caret expands, space
|
||||
* separated as `aria-controls` takes them: the active clip's keyframe lanes
|
||||
* and the track's automation lanes are separate elements, one owned by a
|
||||
* clip and one by the row. Minted by TimelineLanes, the one place that sees
|
||||
* every subtree. */
|
||||
lanesId: string;
|
||||
contentOrigin: number;
|
||||
/** The track's active keyframe clip (selected, else primary) — the one whose
|
||||
|
||||
@@ -7,7 +7,13 @@ interface TimelineTrackRowProps {
|
||||
rowKey: number;
|
||||
logicalRow: TimelineLogicalRow;
|
||||
propertyRows: readonly TimelineLogicalRow[];
|
||||
/** Names the canvas-side content cell — the active clip's own property lanes,
|
||||
* minted with this single id in TimelinePropertyLanes. */
|
||||
lanesId: string;
|
||||
/** Names the header cell. Space-separated because the caret it lives under
|
||||
* expands two disjoint subtrees (the clip's keyframe lanes AND the track's
|
||||
* automation lanes) — see TimelineTrackHeader for why they cannot share one id. */
|
||||
headerLanesId: string;
|
||||
top: number;
|
||||
height: number;
|
||||
virtualized: boolean;
|
||||
@@ -24,6 +30,7 @@ export function TimelineTrackRow({
|
||||
logicalRow,
|
||||
propertyRows,
|
||||
lanesId,
|
||||
headerLanesId,
|
||||
top,
|
||||
height,
|
||||
virtualized,
|
||||
@@ -78,7 +85,7 @@ export function TimelineTrackRow({
|
||||
<div
|
||||
role="rowheader"
|
||||
aria-colindex={1}
|
||||
aria-owns={timelineLogicalRowCellId(lanesId, row.id, "header")}
|
||||
aria-owns={timelineLogicalRowCellId(headerLanesId, row.id, "header")}
|
||||
>
|
||||
{group}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user