@remotion/studio: Selection outline respects transforms#7844
Conversation
Use a getBoxQuads ponyfill for Chromium so rotated and translated elements show a correct quad outline instead of an axis-aligned box. Fixes #7832 Co-authored-by: Cursor <cursoragent@cursor.com>
|
Pullfrog stalled The agent stopped emitting events for 304s and was killed by the activity-timeout watchdog. 154 events were processed before the failure. Recent agent stderr
|
JonnyBurger
changed the title
@remotion/studio: Selection outline should respect transform@remotion/studio: Selection outline respects transforms
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — the PR replaces the custom transform-based outline calculation in @remotion/studio with a getBoxQuads ponyfill so selection outlines correctly follow CSS transforms.
- Replace manual outline quad calculation with
getBoxQuadsponyfill — removes custom transform parsing and projection inSelectedOutlineOverlay.tsxin favor of an adapted MIT-licensed ponyfill. - Add
get-box-quads-polyfill-internals.js— ~3k line adaptation fromjogibear9988/getBoxQuadsPolyfillwith 14 documented performance fixes. - Add
getBoxQuadsPonyfillwrapper — uses native API when available, falls back to ponyfill, and silently falls back to axis-aligned bounding box on error. - Update
CenteredSolidexample — adds 3D transforms andstarbursteffect for manual testing. tsconfig.json— enablesallowJsto import the ponyfill.jsmodule.
ℹ️ Ponyfill fork maintenance
The get-box-quads-polyfill-internals.js file (3k+ lines) is effectively a long-term fork of an actively maintained upstream library. Consider recording the exact upstream commit hash in the file header alongside the repository URL so future maintainers can diff against upstream bug fixes.
ℹ️ Nitpicks
packages/studio/src/helpers/get-box-quads-polyfill-internals.jsexportsaddPolyfill, which patcheswindow.__getBoxQuadsPolyfillFnsandNode.prototype. The file header claims "does not patch globals", but this exported function contradicts that. Removing the unused export or updating the header comment would keep them aligned.
Kimi K2 ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — the PR replaces the custom transform-based outline calculation in @remotion/studio with a getBoxQuads ponyfill so selection outlines correctly follow CSS transforms.
- Replace manual outline quad calculation with
getBoxQuadsponyfill — removes custom transform parsing and projection inSelectedOutlineOverlay.tsxin favor of an adapted MIT-licensed ponyfill. - Add
get-box-quads-polyfill-internals.js— ~3k line adaptation fromjogibear9988/getBoxQuadsPolyfillwith 14 documented performance fixes. - Add
getBoxQuadsPonyfillwrapper — uses native API when available, falls back to ponyfill, and silently falls back to axis-aligned bounding box on error. - Update
CenteredSolidexample — adds 3D transforms andstarbursteffect for manual testing. tsconfig.json— enablesallowJsto import the ponyfill.jsmodule.
ℹ️ Ponyfill fork maintenance
The get-box-quads-polyfill-internals.js file (3k+ lines) is effectively a long-term fork of an actively maintained upstream library. Consider recording the exact upstream commit hash in the file header alongside the repository URL so future maintainers can diff against upstream bug fixes.
ℹ️ Nitpicks
packages/studio/src/helpers/get-box-quads-polyfill-internals.jsexportsaddPolyfill, which patcheswindow.__getBoxQuadsPolyfillFnsandNode.prototype. The file header claims "does not patch globals", but this exported function contradicts that. Removing the unused export or updating the header comment would keep them aligned.
Kimi K2 ｜ 𝕏
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 participant
Fixes #7832
What
Selection outlines in Studio now follow CSS transforms (rotation, translate, scale, etc.) on the selected element instead of drawing an axis-aligned bounding box.
How
getBoxQuadsPonyfill()that uses nativegetBoxQuads()when available, otherwise geometry adapted from getBoxQuadsPolyfill (MIT) as a ponyfill (no global monkey-patching).SelectedOutlineOverlaymeasures the selectedrefForOutlinetarget’s border box as aDOMQuadrelative to the overlay SVG and renders a<polygon>.getBoundingClientRect()when quad calculation fails.Tradeoffs
@remotion/studiofor Chromium, wheregetBoxQuads()is unavailable. Scope is limited to selected outline measurement (not all timeline sequences).getBoundingClientRect,offsetWidth, computed style, etc.) run on each animation frame for selected items, but avoid DOM mutation like web-renderer’s transform-stripping approach.Test plan
centered-solidcomposition in Studio<Solid>sequence on the timeline