Skip to content

fix(studio): route rotation field edits through the animation like X/Y/W/H#1427

Open
calcarazgre646 wants to merge 2 commits into
heygen-com:mainfrom
calcarazgre646:fix/studio-rotation-field-animated-property
Open

fix(studio): route rotation field edits through the animation like X/Y/W/H#1427
calcarazgre646 wants to merge 2 commits into
heygen-com:mainfrom
calcarazgre646:fix/studio-rotation-field-animated-property

Conversation

@calcarazgre646

Copy link
Copy Markdown
Contributor

Problem

In the PropertyPanel transform section, typing into X/Y or W/H on a GSAP-animated element routes the value into the animation:

if (onCommitAnimatedProperty && hasGsapAnimation) {
  void onCommitAnimatedProperty(element, axis, parsed);
  return;
}

commitManualRotation did not do this — it went straight to onSetManualRotation, so typing a rotation on an animated element behaved differently from every other transform field. Rotation is a supported animated property (SUPPORTED_PROPS includes "rotation"), and both the rotate-drag gesture (tryGsapRotationIntercept) and the rotation keyframe button (onCommitAnimatedProperty(element, "rotation", ...)) already route through the animation — the panel field was the one path that bypassed it.

Fix

Extract the shared animated-transform routing (animated property -> keyframe -> "no callbacks" toast) into commitAnimatedTransformValue, and have both commitManualOffset and commitManualRotation go through it. Non-animated elements still fall through to the manual setter unchanged. commitManualSize keeps its own keyframe-less shape.

Notes

  • No test added: PropertyPanel.test.ts covers pure helpers only, and the X/Y/W/H routing has no render-test coverage either; this mirrors them. Full studio suite stays green (796 passing).

…Y/W/H

In the PropertyPanel transform section, typing into X/Y or W/H on a
GSAP-animated element routes the value into the animation (via
`onCommitAnimatedProperty`, or a new keyframe). `commitManualRotation` did not
— it always went straight to `onSetManualRotation`, so typing a rotation on an
animated element behaved differently from every other transform field, even
though rotation is a supported animated property and both the rotate-drag
gesture and the rotation keyframe button already route through the animation.

Extract the shared animated-transform routing (animated property -> keyframe ->
"no callbacks" toast) into `commitAnimatedTransformValue`, and have both
`commitManualOffset` and `commitManualRotation` use it. Non-animated elements
still fall through to the manual setter unchanged. `commitManualSize` keeps its
own (keyframe-less) shape.
@miguel-heygen miguel-heygen self-requested a review June 14, 2026 05:25

@miguel-heygen miguel-heygen left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Strengths:

  • PropertyPanel.tsx:164–183commitAnimatedTransformValue is a clean extraction. The boolean return / early-return pattern reads clearly and the three callers (onCommitAnimatedProperty, onAddKeyframe, hasGsapAnimation-only toast) are correctly unified.
  • The bug is real. commitManualOffset already routed through the animation; commitManualRotation silently bypassed it. "rotation" is already in SUPPORTED_PROPS and the drag gesture already routes through onCommitAnimatedProperty, so this field was the one inconsistent path.

Blocker:

packages/studio/src/components/editor/PropertyPanel.tsx613 lines (max 600).

##[error]packages/studio/src/components/editor/PropertyPanel.tsx has 613 lines (max 600)

The File size check CI gate is failing. The refactor adds a net +27 lines, which pushed the file 13 lines over the limit. The fix logic is sound — the file just needs to shed those lines before merge.

Options:

  1. Move commitAnimatedTransformValue (and possibly the existing commitManualSize helper) into a co-located util / hook (e.g., usePropertyPanelCommit.ts).
  2. Or trim equivalent lines elsewhere in the panel if there's dead weight.

Verdict: REQUEST CHANGES
Reasoning: One required CI gate failing (File size check). The bug fix and refactor are correct; the only issue is the file now exceeds the 600-line limit.

— Magi

Addresses review on heygen-com#1427: the inline `commitAnimatedTransformValue` extraction
pushed PropertyPanel.tsx to 613 lines (over the 600 limit). Move the transform
commit factory (`commitAnimatedTransformValue` + the X/Y, W/H and rotation
handlers) into `propertyPanelTransformCommit.ts` and call it from the panel.
PropertyPanel.tsx drops to 543 lines; behavior is unchanged.

Co-authored-by: Miguel Ángel <miguel07alm@protonmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants