ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-11-12 20:47:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(studio): use 0.1% precision for keyframe placement instead of 1%

Browse Source 
Math.round to integer percentages caused visible offset between the
playhead and the keyframe diamond at higher zoom levels. Now rounds
to 1 decimal place (e.g., 16.3% instead of 16%) for sub-second
precision across all keyframe creation paths.
This commit is contained in:
Miguel Ángel
2026-06-02 19:43:45 -04:00
parent cd2ac3141e
commit 63d06540f4
3 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/TimelineToolbar.tsx
+2 -2
View File
@@ -110,7 +110,7 @@ function useKeyframeToggle(session?: DomEditSessionSlice) {
const elDuration = Number.parseFloat(sel.dataAttributes?.duration ?? "1") || 1;
const pct =
elDuration > 0
? Math.max(0, Math.min(100, Math.round(((currentTime - elStart) / elDuration) * 100)))
? Math.max(0, Math.min(100, Math.round(((currentTime - elStart) / elDuration) * 1000) / 10))
: 0;
state = kfAnim.keyframes.keyframes.some((k) => Math.abs(k.percentage - pct) <= 1)
? "active"
@@ -126,7 +126,7 @@ function useKeyframeToggle(session?: DomEditSessionSlice) {
const elDuration = Number.parseFloat(sel.dataAttributes?.duration ?? "1") || 1;
const pct =
elDuration > 0
? Math.max(0, Math.min(100, Math.round(((t - elStart) / elDuration) * 100)))
? Math.max(0, Math.min(100, Math.round(((t - elStart) / elDuration) * 1000) / 10))
: 0;
const existing = kfAnim.keyframes.keyframes.find(
(k) => Math.abs(k.percentage - pct) <= 1,
packages/studio/src/components/editor/PropertyPanel.tsx
+1 -1
View File
@@ -239,7 +239,7 @@ export const PropertyPanel = memo(function PropertyPanel({
const parsed = parsePxMetricValue(nextValue);
if (parsed == null) return;
if (gsapKeyframes && gsapAnimId && onAddKeyframe) {
const pct = Math.max(0, Math.min(100, Math.round(currentPct)));
const pct = Math.max(0, Math.min(100, Math.round(currentPct * 10) / 10));
onAddKeyframe(gsapAnimId, pct, axis, parsed);
return;
}
packages/studio/src/hooks/gsapRuntimeBridge.ts
+1 -1
View File
@@ -95,7 +95,7 @@ function computeCurrentPercentage(selection: DomEditSelection): number {
const elDuration = Number.parseFloat(selection.dataAttributes?.duration ?? "1") || 1;
const currentTime = usePlayerStore.getState().currentTime;
return elDuration > 0
? Math.max(0, Math.min(100, Math.round(((currentTime - elStart) / elDuration) * 100)))
? Math.max(0, Math.min(100, Math.round(((currentTime - elStart) / elDuration) * 1000) / 10))
: 0;
}