mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-07 18:26:17 +00:00
Miguel Ángel
95029e083e
* fix(core): per-property-group keyframe foundations
Add PropertyGroupName type system (position/scale/size/rotation/visual/other),
PROPERTY_GROUPS constant, classifyPropertyGroup/classifyTweenPropertyGroup
functions. Parser generates group-aware animation IDs, resolves position strings
(+=, -=, <, >), uses numeric matching with 2% tolerance, and preserves IDs
across all mutations.
* fix(core): add split-into-property-groups and replace-with-keyframes mutations
Server-side mutations for atomic property-group splitting and keyframe
replacement. Client commitMutation returns early on changed:false instead
of throwing.
* fix(studio): per-property-group intercept routing + drag/resize fixes
Rewire GSAP runtime bridge for property-group routing: drag sends only {x,y}
to position group, resize routes to scale group via data-hf-studio-original-width,
rotation routes to rotation group. Add resolveGroupTween helper, from-extend
with split-first-then-position-only pattern, autoKeyframeEnabled guards,
GSAP base + delta fix in drag draft, cancel-restores-GSAP-x/y from data attrs.
79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
|
|
|
|
export function absoluteToPercentage(
|
|
time: number,
|
|
tweenStart: number,
|
|
tweenDuration: number,
|
|
): number {
|
|
if (tweenDuration <= 0) return 0;
|
|
const raw = ((time - tweenStart) / tweenDuration) * 100;
|
|
return Math.max(0, Math.min(100, Math.round(raw * 10) / 10));
|
|
}
|
|
|
|
export function percentageToAbsolute(
|
|
pct: number,
|
|
tweenStart: number,
|
|
tweenDuration: number,
|
|
): number {
|
|
return tweenStart + (pct / 100) * tweenDuration;
|
|
}
|
|
|
|
export function isTimeWithinTween(
|
|
time: number,
|
|
tweenStart: number,
|
|
tweenDuration: number,
|
|
): boolean {
|
|
return time >= tweenStart && time <= tweenStart + tweenDuration;
|
|
}
|
|
|
|
export function resolveTweenStart(animation: GsapAnimation): number | null {
|
|
if (animation.resolvedStart != null) return animation.resolvedStart;
|
|
if (typeof animation.position === "number") return animation.position;
|
|
const parsed = Number.parseFloat(animation.position as string);
|
|
if (!Number.isNaN(parsed)) return parsed;
|
|
return null;
|
|
}
|
|
|
|
export function resolveTweenDuration(animation: GsapAnimation): number {
|
|
return animation.duration ?? 0.5;
|
|
}
|
|
|
|
export function findTweenAtTime(
|
|
time: number,
|
|
animations: GsapAnimation[],
|
|
selector: string,
|
|
): GsapAnimation | null {
|
|
for (const anim of animations) {
|
|
if (!matchesSelector(anim.targetSelector, selector)) continue;
|
|
const start = resolveTweenStart(anim);
|
|
if (start === null) continue;
|
|
const duration = resolveTweenDuration(anim);
|
|
if (isTimeWithinTween(time, start, duration)) return anim;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
export function absoluteToPercentageForAnimation(
|
|
time: number,
|
|
animation: GsapAnimation,
|
|
): number | null {
|
|
const start = resolveTweenStart(animation);
|
|
if (start === null) return null;
|
|
const duration = resolveTweenDuration(animation);
|
|
return absoluteToPercentage(time, start, duration);
|
|
}
|
|
|
|
export function percentageToAbsoluteForAnimation(
|
|
pct: number,
|
|
animation: GsapAnimation,
|
|
): number | null {
|
|
const start = resolveTweenStart(animation);
|
|
if (start === null) return null;
|
|
const duration = resolveTweenDuration(animation);
|
|
return percentageToAbsolute(pct, start, duration);
|
|
}
|
|
|
|
function matchesSelector(tweenSelector: string, querySelector: string): boolean {
|
|
return tweenSelector.split(",").some((part) => part.trim() === querySelector);
|
|
}
|