fix(studio): property panel group-aware keyframe routing (#1358)

* 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.

* fix(studio): keyframe cache propertyGroup tagging + timeline UI fixes

Tag cached keyframes with propertyGroup for group-aware operations.
Add tweenPercentage for accurate keyframe matching, activeKeyframePct
for diamond-click targeting, context menu offset, selected diamond z-index,
clearProps after kill in soft reload.

* fix(studio): property panel group-aware keyframe routing

Add animIdForProp helper routing keyframe diamonds to correct property-group
animation. Wire StudioPreviewArea delete/move/toggle handlers to use
propertyGroup for routing. Fix per-property epsilon in rdpSimplify.
This commit is contained in:
Miguel Ángel
2026-06-12 00:19:31 -04:00
committed by GitHub
parent caf23eff8a
commit c435a4ee46
4 changed files with 65 additions and 25 deletions
+3 -2
View File
@@ -97,7 +97,7 @@ function simplifyTimeSeries(
export function simplifyGestureSamples(
samples: Array<{ time: number; properties: Record<string, number> }>,
totalDuration: number,
epsilon: number,
epsilon: number | ((key: string) => number),
): Map<number, Record<string, number>> {
if (samples.length === 0) return new Map();
if (totalDuration <= 0) return new Map();
@@ -120,7 +120,8 @@ export function simplifyGestureSamples(
series.push({ time: s.time, value: s.properties[key] });
}
}
const simplified = simplifyTimeSeries(series, epsilon);
const keyEpsilon = typeof epsilon === "function" ? epsilon(key) : epsilon;
const simplified = simplifyTimeSeries(series, keyEpsilon);
for (const pt of simplified) {
survivingTimes.add(pt.time);
}