fix(studio): delete only the active element's selected keyframes (#1453)

Pressing Delete with keyframes multi-selected removed keyframes from the
wrong element. selectedKeyframes holds "<elementId>:<percentage>" keys and
can outlive the element it was built on (a clip click, keyframe click, layers
selection, or keyframe context menu changes the active element without clearing
it, and a shift-selection can span elements). deleteSelectedKeyframes parsed
only the percentage from each key and applied it to the active animation,
ignoring which element each selected keyframe belonged to, so a stale selection
deleted keyframes the user never targeted on the active element.

Extract selectedKeyframePercentagesForElement, which keeps only the percentages
whose key matches the active element id, and route the delete through it. The
common case (all selected keyframes on the active element) is unchanged; stale
cross-element keys are skipped instead of mis-applied.

Co-authored-by: Carlos Alcaraz <193642530+calcarazgre646@users.noreply.github.com>
This commit is contained in:
Carlos Alcaraz Gregor
2026-06-14 23:19:28 -04:00
committed by GitHub
co-authored by Carlos Alcaraz
parent e6da47d8f8
commit f1a50e03ea
3 changed files with 81 additions and 6 deletions
+7 -6
View File
@@ -17,6 +17,7 @@ import { useBlockHandlers } from "./hooks/useBlockHandlers";
import { useAppHotkeys } from "./hooks/useAppHotkeys";
import { useClipboard } from "./hooks/useClipboard";
import { readStudioUiPreferences, writeStudioUiPreferences } from "./utils/studioUiPreferences";
import { selectedKeyframePercentagesForElement } from "./utils/keyframeSelection";
import { useCaptionDetection } from "./hooks/useCaptionDetection";
import { useRenderClipContent } from "./hooks/useRenderClipContent";
import { useConsoleErrorCapture } from "./hooks/useConsoleErrorCapture";
@@ -305,13 +306,13 @@ export function StudioApp() {
resetKeyframesRef.current = domEditSession.handleResetSelectedElementKeyframes;
invalidateGsapCacheRef.current = domEditSession.invalidateGsapCache;
deleteSelectedKeyframesRef.current = () => {
const sk = usePlayerStore.getState().selectedKeyframes;
const { selectedKeyframes, selectedElementId } = usePlayerStore.getState();
const a = domEditSession.selectedGsapAnimations.find((x) => x.keyframes);
if (!a || sk.size === 0) return;
sk.forEach((k) => {
const p = Number(k.split(":")[1]);
if (Number.isFinite(p)) domEditSession.handleGsapRemoveKeyframe(a.id, p);
});
if (!a) return;
// Only the active element's keyframes; a stale cross-element selection must not delete here.
for (const p of selectedKeyframePercentagesForElement(selectedKeyframes, selectedElementId)) {
domEditSession.handleGsapRemoveKeyframe(a.id, p);
}
};
useCaptionDetection({
projectId,