fix: Optimize CurveEditor drag performance with requestAnimationFrame batching (#9114)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/composables/useCurveEditor.ts

@@ -102,8 +102,13 @@ export function useCurveEditor({ svgRef, modelValue }: UseCurveEditorOptions) {
 
     svg.setPointerCapture(e.pointerId)
 
-    const onMove = (ev: PointerEvent) => {
-      if (dragIndex.value < 0) return
+    let rafId: number | null = null
+    let latestPointerEvent: PointerEvent | null = null
+
+    const applyMove = () => {
+      rafId = null
+      const ev = latestPointerEvent
+      if (!ev || dragIndex.value < 0) return
       const [x, y] = svgCoords(ev)
       const movedPoint: CurvePoint = [x, y]
       const newPoints = [...modelValue.value]
@@ -113,7 +118,20 @@ export function useCurveEditor({ svgRef, modelValue }: UseCurveEditorOptions) {
       dragIndex.value = newPoints.indexOf(movedPoint)
     }
 
+    const onMove = (ev: PointerEvent) => {
+      if (dragIndex.value < 0) return
+      latestPointerEvent = ev
+      if (rafId === null) {
+        rafId = requestAnimationFrame(applyMove)
+      }
+    }
+
     const endDrag = () => {
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId)
+        rafId = null
+        applyMove()
+      }
       if (dragIndex.value < 0) return
       dragIndex.value = -1
       svg.removeEventListener('pointermove', onMove)

src/locales/en/main.json

@@ -178,7 +178,7 @@
     "uploadAlreadyInProgress": "Upload already in progress",
     "capture": "capture",
     "nodes": "Nodes",
-    "nodesCount": "{count} nodes | {count} node | {count} nodes",
+    "nodesCount": "{count} node | {count} nodes",
     "addNode": "Add a node...",
     "filterBy": "Filter by:",
     "filterByType": "Filter by {type}...",
@@ -222,7 +222,7 @@
     "failed": "Failed",
     "cancelled": "Cancelled",
     "job": "Job",
-    "asset": "{count} assets | {count} asset | {count} assets",
+    "asset": "{count} asset | {count} assets",
     "untitled": "Untitled",
     "emDash": "—",
     "enabling": "Enabling {id}",
@@ -3347,7 +3347,7 @@
     }
   },
   "errorOverlay": {
-    "errorCount": "{count} ERRORS | {count} ERROR | {count} ERRORS",
+    "errorCount": "{count} ERROR | {count} ERRORS",
     "seeErrors": "See Errors"
   },
   "help": {
@@ -3357,7 +3357,7 @@
   "progressToast": {
     "importingModels": "Importing Models",
     "downloadingModel": "Downloading model...",
-    "downloadsFailed": "{count} downloads failed | {count} download failed | {count} downloads failed",
+    "downloadsFailed": "{count} download failed | {count} downloads failed",
     "allDownloadsCompleted": "All downloads completed",
     "noImportsInQueue": "No {filter} in queue",
     "failed": "Failed",
@@ -3374,7 +3374,7 @@
     "exportingAssets": "Exporting Assets",
     "preparingExport": "Preparing export...",
     "exportError": "Export failed",
-    "exportFailed": "{count} export failed | {count} export failed | {count} exports failed",
+    "exportFailed": "{count} export failed | {count} exports failed",
     "allExportsCompleted": "All exports completed",
     "noExportsInQueue": "No {filter} exports in queue",
     "exportStarted": "Preparing ZIP download...",