Comfy-Org / Comfy-Org/ComfyUI_frontend

Optimize SVG coordinate transform during CurveEditor drag operations

Open
#9,113 0 comments 0 reactions 1 assignee Claimed by @christian-byrne View on GitHub
area:ui
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.