perf(maskeditor): read the brush container rect once per move, not per axis (#15384)

## Summary

`brushLeft` and `brushTop` in `BrushCursor.vue` each called
`containerRef.getBoundingClientRect()`. Both depend on
`store.cursorPoint`, which changes on every mousemove, so painting in
the mask editor cost **two forced synchronous layouts per pointer
event** to obtain one rect.

## The change

One `brushPosition` computed reads the rect once and returns both axes;
`brushLeft` and `brushTop` read from it.

## Why this is safe

The read stays inside a computed over `cursorPoint` deliberately. A
`DOMRect` is not reactive, so nothing would invalidate a cached one —
re-reading it as the cursor moves is precisely what keeps the offset
correct while the mask editor dialog is dragged or resized.

**So this changes how many reads happen, not when.** Dialog move and
resize behave exactly as before, which is what makes it reviewable
without an interactive pass over those paths.

## Tests

Added `should read the container rect once per position, not once per
axis`, which spies on the container's `getBoundingClientRect`. Verified
it fails on current `main`:

```
AssertionError: left and top come from the same rect; reading it twice is
two forced layouts per mousemove: expected "getBoundingClientRect" to be
called 1 times, but got 2 times
```

12 tests green, `oxfmt --check` and `oxlint` clean, `vue-tsc` reports
nothing on either file.

## Review focus

- The existing offset test (`should subtract container offset when
containerRef is provided`) still passes unchanged, which is the evidence
that positioning is untouched.
- If anyone wants the rect cached across moves instead, that is a
different and larger change: it needs a `ResizeObserver` plus a drag
hook on the dialog, and it would alter behaviour rather than cost.
Deliberately not attempted here.

Author: christian-byrne

src/components/maskeditor/BrushCursor.test.ts

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/vue'
-import { reactive } from 'vue'
+import { nextTick, reactive } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import BrushCursor from '@/components/maskeditor/BrushCursor.vue'
@@ -140,6 +140,51 @@ describe('BrushCursor', () => {
       expect(style).toContain('left: 150px')
       expect(style).toContain('top: 220px')
     })
+
+    it('should read the container rect once per position, not once per axis', async () => {
+      mockStore.cursorPoint = { x: 200, y: 300 }
+      mockStore.panOffset = { x: 0, y: 0 }
+      mockStore.brushSettings.size = 20
+      mockStore.brushSettings.hardness = 1
+      mockStore.zoomRatio = 1
+
+      const container = document.createElement('div')
+      const readRect = vi
+        .spyOn(container, 'getBoundingClientRect')
+        .mockReturnValue({
+          left: 30,
+          top: 60,
+          right: 0,
+          bottom: 0,
+          width: 0,
+          height: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => ({})
+        } as DOMRect)
+
+      renderCursor(container)
+
+      // `getBoundingClientRect` forces a synchronous layout and the cursor
+      // moves on every mousemove, so reading it per axis doubled the cost for
+      // one rect.
+      expect(
+        readRect,
+        'left and top come from the same rect; reading it twice is two forced layouts per mousemove'
+      ).toHaveBeenCalledTimes(1)
+
+      mockStore.cursorPoint = { x: 201, y: 301 }
+      await nextTick()
+
+      // The other half of the guarantee, and the one that keeps the offset
+      // correct while the dialog is dragged: a DOMRect is not reactive, so
+      // caching it across moves would pass the assertion above and silently
+      // stop tracking the container.
+      expect(
+        readRect,
+        'a moved cursor must re-read the rect; a cached one goes stale the moment the dialog moves'
+      ).toHaveBeenCalledTimes(2)
+    })
   })
 
   describe('gradient preview', () => {

src/components/maskeditor/BrushCursor.vue

@@ -56,27 +56,36 @@ const brushSize = computed(() => {
   return brushRadius.value * 2
 })
 
-const brushLeft = computed(() => {
+/**
+ * One rect read per move, not one per axis. `cursorPoint` changes on every
+ * mousemove and `getBoundingClientRect` forces layout, so reading it separately
+ * in `brushLeft` and `brushTop` cost two synchronous layouts per event for a
+ * single rect.
+ *
+ * The read is deliberately still inside a computed over `cursorPoint`: the rect
+ * is not reactive, and re-reading it as the cursor moves is what keeps the
+ * offset correct while the dialog is dragged or resized. This halves the reads
+ * without changing when they happen.
+ */
+const brushPosition = computed(() => {
   const dialogRect = containerRef?.getBoundingClientRect()
-  const dialogOffsetLeft = dialogRect?.left || 0
-  return (
-    store.cursorPoint.x +
-    store.panOffset.x -
-    brushRadius.value -
-    dialogOffsetLeft
-  )
+  return {
+    left:
+      store.cursorPoint.x +
+      store.panOffset.x -
+      brushRadius.value -
+      (dialogRect?.left || 0),
+    top:
+      store.cursorPoint.y +
+      store.panOffset.y -
+      brushRadius.value -
+      (dialogRect?.top || 0)
+  }
 })
 
-const brushTop = computed(() => {
-  const dialogRect = containerRef?.getBoundingClientRect()
-  const dialogOffsetTop = dialogRect?.top || 0
-  return (
-    store.cursorPoint.y +
-    store.panOffset.y -
-    brushRadius.value -
-    dialogOffsetTop
-  )
-})
+const brushLeft = computed(() => brushPosition.value.left)
+
+const brushTop = computed(() => brushPosition.value.top)
 
 const borderRadius = computed(() => {
   return store.brushSettings.type === BrushShape.Rect ? '0%' : '50%'