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

feat(studio): add PROP_CONSTRAINTS and clampPropertyValue for animation properties

Browse Source
This commit is contained in:
Miguel Ángel
2026-06-02 19:16:19 -04:00
parent 259afd0dca
commit b8c2fffa3c
2 changed files with 34 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/components/editor/AnimationCard.tsx
+7 -1
View File
@@ -9,9 +9,11 @@ import {
METHOD_LABELS,
METHOD_TOOLTIPS,
PERCENT_PROPS,
PROP_CONSTRAINTS,
PROP_LABELS,
PROP_TOOLTIPS,
PROP_UNITS,
clampPropertyValue,
} from "./gsapAnimationConstants";
import { buildTweenSummary } from "./gsapAnimationHelpers";
import { EaseCurveSection } from "./EaseCurveSection";
@@ -27,7 +29,11 @@ function displayValue(prop: string, val: number | string): string {
}
function adjustedValue(prop: string, raw: string): string {
if (isPercentProp(prop)) return String(Math.max(0, Math.min(1, Number(raw) / 100)));
if (isPercentProp(prop)) return String(clampPropertyValue(prop, Number(raw) / 100));
const num = Number(raw);
if (!Number.isNaN(num) && PROP_CONSTRAINTS[prop]) {
return String(clampPropertyValue(prop, num));
}
return raw;
}
packages/studio/src/components/editor/gsapAnimationConstants.ts
+27
View File
@@ -123,6 +123,33 @@ export function parseCustomEaseFromString(ease: string): {
export const PERCENT_PROPS = new Set(["opacity", "autoAlpha"]);
export const PROP_CONSTRAINTS: Record<string, { min?: number; max?: number; step?: number }> = {
opacity: { min: 0, max: 1, step: 0.01 },
autoAlpha: { min: 0, max: 1, step: 0.01 },
scale: { min: -10, max: 10, step: 0.01 },
scaleX: { min: -10, max: 10, step: 0.01 },
scaleY: { min: -10, max: 10, step: 0.01 },
rotation: { step: 1 },
skewX: { min: -90, max: 90, step: 1 },
skewY: { min: -90, max: 90, step: 1 },
width: { min: 0, step: 1 },
height: { min: 0, step: 1 },
borderRadius: { min: 0, step: 1 },
x: { step: 1 },
y: { step: 1 },
fontSize: { min: 1, step: 1 },
letterSpacing: { step: 0.1 },
};
export function clampPropertyValue(prop: string, value: number): number {
const constraint = PROP_CONSTRAINTS[prop];
if (!constraint) return value;
let clamped = value;
if (constraint.min !== undefined) clamped = Math.max(constraint.min, clamped);
if (constraint.max !== undefined) clamped = Math.min(constraint.max, clamped);
return clamped;
}
export const ADD_METHODS = ["to", "from", "fromTo", "set"] as const;
export const ADD_METHOD_LABELS: Record<string, string> = {