Comfy-Org / Comfy-Org/ComfyUI_frontend
Optimize SVG coordinate transform during CurveEditor drag operations
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Background
In the CurveEditor component (`src/composables/useCurveEditor.ts`), the `svgCoords()` function is called on every `pointermove` event during drag operations. This function performs relatively expensive operations:
- `svg.getScreenCTM()`
- `ctm.inverse()`
- `new DOMPoint(...).matrixTransform(...)`
## Suggested Optimization
Precompute and reuse the inverse transformation matrix during active drags:
1. In `startDrag`, compute `const inv = svg.getScreenCTM()?.inverse()` once
2. In `onMove`, reuse the cached `inv` matrix if present
3. Recompute only on `lostpointercapture` / endDrag, or optionally refresh at most once per animation frame
This would reduce redundant matrix computations during high-frequency pointer events.
## References
- PR: #8860
- Comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/8860#discussion_r2838896090
- Requested by: @christian-byrne
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9113-Optimize-SVG-coordinate-transform-during-CurveEditor-drag-operations-3106d73d365081bcae12d0a86ea731df) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.