mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 18:26:17 +00:00
fix(studio): remove keyframe dragging from the timeline (#1763)
Dragging timeline keyframe diamonds was unreliable — clip<->tween percentage remapping, an optimistic-hold workaround, and an intermittent no-op/revert when the GSAP session lagged the drag (its own comments document the flakiness). Remove the drag interaction entirely: diamonds still display, click-to-seek, and offer the context menu (add/remove/ease) — keyframe timing is edited via the playhead + panel, which are deterministic. Deletes the keyframe-move plan module + its wiring through TimelineClipDiamonds -> TimelineCanvas -> Timeline -> TimelineEditContext.
This commit is contained in:
Miguel Ángel
@@ -1,101 +0,0 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { pickKeyframeTween, computeKeyframeMovePlan } from "./keyframeMove";
|
||||
|
||||
const flat = (id: string, target: string, position: number, duration: number, group?: string) => ({
|
||||
id,
|
||||
targetSelector: target,
|
||||
position,
|
||||
duration,
|
||||
resolvedStart: position,
|
||||
propertyGroup: group,
|
||||
});
|
||||
|
||||
const el = { start: 0, duration: 10, domId: "box", selector: "#box" };
|
||||
|
||||
describe("pickKeyframeTween", () => {
|
||||
it("matches by the element's selector", () => {
|
||||
const anims = [flat("a", "#other", 0, 5), flat("b", "#box", 2, 3)];
|
||||
expect(pickKeyframeTween(anims, el, 3, undefined)?.id).toBe("b");
|
||||
});
|
||||
|
||||
it("prefers the dragged keyframe's property group", () => {
|
||||
const anims = [flat("pos", "#box", 0, 8, "position"), flat("vis", "#box", 0, 8, "visual")];
|
||||
expect(pickKeyframeTween(anims, el, 1, "visual")?.id).toBe("vis");
|
||||
});
|
||||
|
||||
it("among same-group tweens picks the one whose window contains the original time", () => {
|
||||
const fadeIn = flat("in", "#box", 1, 1, "visual");
|
||||
const fadeOut = flat("out", "#box", 8, 1, "visual");
|
||||
expect(pickKeyframeTween([fadeIn, fadeOut], el, 8.5, "visual")?.id).toBe("out");
|
||||
expect(pickKeyframeTween([fadeIn, fadeOut], el, 1.2, "visual")?.id).toBe("in");
|
||||
});
|
||||
|
||||
it("returns undefined when there are no tweens", () => {
|
||||
expect(pickKeyframeTween([], el, 1, undefined)).toBeUndefined();
|
||||
});
|
||||
|
||||
it("returns undefined rather than editing another element on a selector mismatch", () => {
|
||||
const anims = [flat("a", "#other", 0, 5), flat("b", ".unrelated", 2, 3)];
|
||||
expect(pickKeyframeTween(anims, el, 3, undefined)).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe("computeKeyframeMovePlan — flat tween", () => {
|
||||
const anim = flat("t", "#box", 2, 4); // window [2, 6]
|
||||
|
||||
it("start point trims the front, keeping the end fixed", () => {
|
||||
// newPct 30% → abs 3 → start moves to 3, duration shrinks to 3.
|
||||
const plan = computeKeyframeMovePlan(anim, 0, el, 30);
|
||||
expect(plan.meta).toEqual({ position: 3, duration: 3 });
|
||||
expect(plan.removes).toEqual([]);
|
||||
});
|
||||
|
||||
it("end point resizes, keeping the start", () => {
|
||||
// tweenOldPct 100 (end) → newPct 80% → abs 8 → duration 6, start unchanged.
|
||||
const plan = computeKeyframeMovePlan(anim, 100, el, 80);
|
||||
expect(plan.meta).toEqual({ position: 2, duration: 6 });
|
||||
});
|
||||
});
|
||||
|
||||
describe("computeKeyframeMovePlan — keyframe-array tween", () => {
|
||||
const anim = {
|
||||
id: "k",
|
||||
targetSelector: "#box",
|
||||
position: 0,
|
||||
duration: 10,
|
||||
resolvedStart: 0,
|
||||
keyframes: {
|
||||
keyframes: [
|
||||
{ percentage: 0, properties: { x: 0 } },
|
||||
{ percentage: 50, properties: { x: 50 } },
|
||||
{ percentage: 100, properties: { x: 100 } },
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
it("moves an intermediate keyframe without touching the tween or others", () => {
|
||||
// mid keyframe (tweenPct 50) → newPct 70% → abs 7 → 70% of the tween.
|
||||
const plan = computeKeyframeMovePlan(anim, 50, el, 70);
|
||||
expect(plan.meta).toBeUndefined();
|
||||
expect(plan.removes).toEqual([50]);
|
||||
expect(plan.adds).toEqual([{ pct: 70, properties: { x: 50 } }]);
|
||||
});
|
||||
|
||||
it("start move remaps intermediates to preserve their absolute times", () => {
|
||||
// start (tweenPct 0) → newPct 20% → abs 2 → window [2,10]. The 50% keyframe
|
||||
// was at abs 5 → now (5-2)/8 = 37.5%.
|
||||
const plan = computeKeyframeMovePlan(anim, 0, el, 20);
|
||||
expect(plan.meta).toEqual({ position: 2, duration: 8 });
|
||||
expect(plan.removes).toContain(50);
|
||||
const mid = plan.adds.find((a) => a.properties.x === 50);
|
||||
expect(mid?.pct).toBeCloseTo(37.5, 1);
|
||||
});
|
||||
|
||||
it("is a no-op when the dragged keyframe can't be located (stale cache)", () => {
|
||||
// tweenOldPct 33 matches no keyframe (0/50/100) → must NOT resize the tween.
|
||||
const plan = computeKeyframeMovePlan(anim, 33, el, 70);
|
||||
expect(plan.meta).toBeUndefined();
|
||||
expect(plan.removes).toEqual([]);
|
||||
expect(plan.adds).toEqual([]);
|
||||
});
|
||||
});
|
||||
@@ -1,151 +0,0 @@
|
||||
/**
|
||||
* Pure helpers for committing a keyframe-diamond drag: pick the tween the
|
||||
* dragged keyframe belongs to, and compute the GSAP mutations (tween
|
||||
* position/duration and/or keyframe add/remove) for the move. Kept free of
|
||||
* React/store so the timeline drag handler stays a thin orchestrator.
|
||||
*/
|
||||
|
||||
interface TweenLike {
|
||||
id: string;
|
||||
targetSelector: string;
|
||||
position: number | string;
|
||||
duration?: number;
|
||||
resolvedStart?: number;
|
||||
propertyGroup?: string;
|
||||
keyframes?: { keyframes: { percentage: number; properties: Record<string, number | string> }[] };
|
||||
}
|
||||
|
||||
interface ElementWindow {
|
||||
start: number;
|
||||
duration: number;
|
||||
domId?: string;
|
||||
selector?: string;
|
||||
}
|
||||
|
||||
export interface KeyframeMovePlan {
|
||||
/** Tween timing change (start/end point drags). */
|
||||
meta?: { position: number; duration: number };
|
||||
/** Keyframe percentages to remove, then re-add (intermediate move / remap). */
|
||||
removes: number[];
|
||||
adds: { pct: number; properties: Record<string, number | string> }[];
|
||||
}
|
||||
|
||||
const round3 = (n: number) => Math.round(n * 1000) / 1000;
|
||||
const clampPct = (n: number) => Math.max(0, Math.min(100, Math.round(n * 100) / 100));
|
||||
const MIN_DUR = 0.05;
|
||||
|
||||
function tweenWindow(a: TweenLike): { start: number; dur: number } {
|
||||
return {
|
||||
start: a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0),
|
||||
dur: a.duration ?? 0,
|
||||
};
|
||||
}
|
||||
|
||||
type Kf = { percentage: number; properties: Record<string, number | string> };
|
||||
|
||||
/**
|
||||
* Remap every keyframe except `keepIdx` from the old tween window to the new one
|
||||
* so their absolute times stay fixed after a start/end resize. Returns the
|
||||
* remove/add ops (empty for flat tweens, which have no intermediates).
|
||||
*/
|
||||
function remapKeyframes(
|
||||
kfs: Kf[],
|
||||
keepIdx: number,
|
||||
oldStart: number,
|
||||
oldDur: number,
|
||||
newStart: number,
|
||||
newDur: number,
|
||||
): Pick<KeyframeMovePlan, "removes" | "adds"> {
|
||||
const removes: number[] = [];
|
||||
const adds: KeyframeMovePlan["adds"] = [];
|
||||
if (newDur <= 0) return { removes, adds };
|
||||
for (let i = 0; i < kfs.length; i++) {
|
||||
if (i === keepIdx) continue;
|
||||
const k = kfs[i]!;
|
||||
const absT = oldStart + (k.percentage / 100) * oldDur;
|
||||
const remapped = clampPct(((absT - newStart) / newDur) * 100);
|
||||
if (Math.abs(remapped - k.percentage) < 0.05) continue;
|
||||
removes.push(k.percentage);
|
||||
adds.push({ pct: remapped, properties: k.properties });
|
||||
}
|
||||
return { removes, adds };
|
||||
}
|
||||
|
||||
/**
|
||||
* Pick the tween the dragged keyframe belongs to: restrict to the element's
|
||||
* selector and (if known) the keyframe's property group, then choose the one
|
||||
* whose time window contains — or is nearest — the keyframe's original time.
|
||||
* An element can have several tweens in one group (e.g. fade-in + fade-out).
|
||||
*/
|
||||
export function pickKeyframeTween<T extends TweenLike>(
|
||||
anims: T[],
|
||||
el: ElementWindow,
|
||||
origAbsTime: number,
|
||||
group: string | undefined,
|
||||
): T | undefined {
|
||||
const selectors = [el.domId ? `#${el.domId}` : null, el.selector].filter(Boolean);
|
||||
const forEl = anims.filter((a) => selectors.includes(a.targetSelector));
|
||||
// Only ever pick among THIS element's tweens. Don't fall back to all
|
||||
// animations — a selector mismatch (e.g. a class/compound-selector tween)
|
||||
// would otherwise edit a different element's keyframes. No match → no-op.
|
||||
if (forEl.length === 0) return undefined;
|
||||
const groupPool = group ? forEl.filter((a) => a.propertyGroup === group) : [];
|
||||
const candidates = groupPool.length > 0 ? groupPool : forEl;
|
||||
const dist = (a: T): number => {
|
||||
const { start, dur } = tweenWindow(a);
|
||||
if (origAbsTime >= start && origAbsTime <= start + dur) return 0;
|
||||
return Math.min(Math.abs(origAbsTime - start), Math.abs(origAbsTime - (start + dur)));
|
||||
};
|
||||
return candidates.reduce((best, a) => (dist(a) < dist(best) ? a : best), candidates[0]!);
|
||||
}
|
||||
|
||||
/**
|
||||
* Compute the mutations for moving a keyframe to `newPct` (clip-relative):
|
||||
* - start point → trim front (position moves, end fixed),
|
||||
* - end point → resize (duration changes, start fixed),
|
||||
* - intermediate → move only that keyframe; start/end moves remap the other
|
||||
* keyframes so their absolute times stay put.
|
||||
*/
|
||||
// fallow-ignore-next-line complexity
|
||||
export function computeKeyframeMovePlan(
|
||||
anim: TweenLike,
|
||||
tweenOldPct: number,
|
||||
el: ElementWindow,
|
||||
newPct: number,
|
||||
): KeyframeMovePlan {
|
||||
const newAbsTime = el.start + (newPct / 100) * el.duration;
|
||||
const tweenStart = tweenWindow(anim).start;
|
||||
const tweenDur = anim.duration ?? el.duration;
|
||||
const kfs = anim.keyframes
|
||||
? anim.keyframes.keyframes.slice().sort((a, b) => a.percentage - b.percentage)
|
||||
: null;
|
||||
const idx = kfs ? kfs.findIndex((k) => Math.abs(k.percentage - tweenOldPct) < 0.5) : -1;
|
||||
|
||||
// Keyframe-array tween but the dragged keyframe couldn't be located (stale
|
||||
// cache / precision drift): no-op rather than falling through to an end-point
|
||||
// resize that would silently rescale the whole tween and re-time every key.
|
||||
if (kfs && idx === -1) return { removes: [], adds: [] };
|
||||
|
||||
if (kfs && idx > 0 && idx < kfs.length - 1) {
|
||||
const movedPct = tweenDur > 0 ? clampPct(((newAbsTime - tweenStart) / tweenDur) * 100) : 0;
|
||||
return { removes: [tweenOldPct], adds: [{ pct: movedPct, properties: kfs[idx]!.properties }] };
|
||||
}
|
||||
|
||||
const isStartPoint = kfs ? idx === 0 : tweenOldPct <= 50;
|
||||
let newStart = tweenStart;
|
||||
let newDur = tweenDur;
|
||||
if (isStartPoint) {
|
||||
const end = tweenStart + tweenDur;
|
||||
newStart = Math.max(0, Math.min(newAbsTime, end - MIN_DUR));
|
||||
newDur = end - newStart;
|
||||
} else {
|
||||
newDur = Math.max(MIN_DUR, newAbsTime - tweenStart);
|
||||
}
|
||||
|
||||
const windowChanged = newStart !== tweenStart || newDur !== tweenDur;
|
||||
const remap =
|
||||
kfs && windowChanged
|
||||
? remapKeyframes(kfs, idx, tweenStart, tweenDur, newStart, newDur)
|
||||
: { removes: [], adds: [] };
|
||||
return { meta: { position: round3(newStart), duration: round3(newDur) }, ...remap };
|
||||
}
|
||||
Reference in New Issue
Block a user