refactor(library): one helper for the on-screen affordance scale

`arcScaleForZoom` and `getHandleScreenScale` were the same function written
twice with different clamp spellings, and React Flow writes it a third time as
its own `scaleSelector`. Keeps the descriptive name, in `geometry/scalar`
alongside the other scalar helpers, so the arcs, the edge grips and the resize
band all read the same definition.

`ArcScalePublisher` also drops its hand-rolled store subscription. It now
reduces to the scale inside a `useStore` selector — the idiom the file next
door already uses, and the reason it re-renders only when the scale changes
rather than on every frame — leaving a `useLayoutEffect` to write the custom
property. The old `store.subscribe` had no selector, so it ran on every store
mutation and needed its own dedup to avoid writing on node drags and
selections; and as a plain effect it let the first frame after mount paint at
the fallback scale.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LuVfUjEN3BSUNFK5TyQ37k

Author: FelixTJDietrich

library/lib/components/ArcScalePublisher.tsx

@@ -1,56 +1,23 @@
-import { useStore, useStoreApi } from "@xyflow/react"
-import { useEffect } from "react"
-import { CANVAS } from "@/constants"
-
-/**
- * Connection indicators keep a usable minimum on-screen size when zoomed out and
- * grow with the node when zoomed in:
- *   scale = 1 / min(zoom, 1) — constant on screen for zoom <= 1, natural above.
- */
-export const arcScaleForZoom = (zoom: number): number =>
-  1 /
-  Math.min(
-    Math.max(
-      Number.isFinite(zoom) && zoom > 0 ? zoom : 1,
-      CANVAS.MIN_SCALE_TO_ZOOM_OUT
-    ),
-    1
-  )
+import { useStore } from "@xyflow/react"
+import { useLayoutEffect } from "react"
+import { getHandleScreenScale } from "@/utils/geometry/scalar"
 
 /**
  * Publishes `--arc-scale` once for the whole canvas.
  *
- * Every node's wrapper used to read `state.transform[2]` to write this custom
- * property onto each handle's inline style. That subscribes every node to the
- * zoom, so a single wheel gesture re-rendered every node on every frame — the
- * exact pattern React Flow's performance guide warns about, and the reason
- * zooming got heavier the more elements a diagram had.
- *
- * Custom properties inherit, so the value only has to exist on an ancestor. This
- * writes it straight to the DOM from a store subscription instead of rendering:
- * no node re-renders, and no React render at all per frame — just one style
- * property set, and only when the value actually changes.
+ * Custom properties inherit, so the value only has to exist on an ancestor.
+ * Publishing it here rather than from each node's style keeps zoom out of every
+ * node's subscription list, and reducing to the scale inside the selector means a
+ * re-render only when the scale itself changes, not on every frame of a zoom.
  */
 export const ArcScalePublisher = () => {
   const domNode = useStore((state) => state.domNode)
-  const store = useStoreApi()
-
-  useEffect(() => {
-    if (!domNode) return
-
-    let published: number | undefined
-    const write = (zoom: number) => {
-      const scale = arcScaleForZoom(zoom)
-      // Zoom changes every frame of a gesture; the scale it maps to does not once
-      // zoomed past 1, and the DOM write is skipped whenever it has not moved.
-      if (scale === published) return
-      published = scale
-      domNode.style.setProperty("--arc-scale", String(scale))
-    }
+  const scale = useStore((state) => getHandleScreenScale(state.transform[2]))
 
-    write(store.getState().transform[2])
-    return store.subscribe((state) => write(state.transform[2]))
-  }, [domNode, store])
+  // Layout effect: this is a style the same frame paints with.
+  useLayoutEffect(() => {
+    domNode?.style.setProperty("--arc-scale", String(scale))
+  }, [domNode, scale])
 
   return null
 }

library/lib/edges/GenericEdge.tsx

@@ -23,30 +23,10 @@ import { Assessment } from "@/typings"
 import type { BendHandle } from "@/utils/geometry/bendHandles"
 import { getSegmentGhostHandles } from "@/utils/geometry/freeWaypoints"
 import { isFreeformEdgeAnchor } from "@/utils/edgeUtils"
-import { CANVAS, EDGES } from "@/constants"
+import { EDGES } from "@/constants"
 import { useLabels } from "@/i18n/useLabels"
+import { getHandleScreenScale } from "@/utils/geometry/scalar"
 
-// Edge handles live inside the zoomed React Flow viewport. We want them to
-// keep a usable MINIMUM on-screen size when zoomed out (so they never shrink to
-// a few px), but to GROW with the edge when zoomed in (so they stay in
-// proportion to the thick edge instead of looking like a tiny dot on it).
-//
-//   scale = 1 / min(zoom, 1)   (zoom floored to the canvas minimum)
-//     zoom <= 1  → 1/zoom  → constant on-screen size (counter-scaled)
-//     zoom  > 1  → 1       → natural flow size → grows on-screen with zoom
-export const getHandleScreenScale = (zoom: number): number => {
-  const safeZoom = Math.max(
-    Number.isFinite(zoom) && zoom > 0 ? zoom : 1,
-    CANVAS.MIN_SCALE_TO_ZOOM_OUT
-  )
-  return 1 / Math.min(safeZoom, 1)
-}
-
-// The reduction runs INSIDE the selector so Zustand compares the scale rather than
-// the raw zoom. The scale is exactly 1 for every zoom >= 1, so zooming in stops
-// re-rendering these handles entirely; selecting `transform[2]` and reducing
-// outside re-rendered every edge's handles on every frame of every gesture, which
-// is the bulk of what made zooming heavy on a diagram with edges.
 const useHandleScreenScale = (): number =>
   useStore((state) => getHandleScreenScale(state.transform[2]))
 

library/lib/utils/geometry/scalar.ts

@@ -1,3 +1,5 @@
+import { CANVAS } from "./routingConstants"
+
 /** Constrain `v` to `[lo, hi]`. */
 export const clamp = (v: number, lo: number, hi: number): number =>
   Math.max(lo, Math.min(hi, v))
@@ -19,3 +21,22 @@ export const lexLess = (
   }
   return false
 }
+
+/**
+ * On-screen scale for canvas affordances that must stay grabbable when zoomed out
+ * without looking undersized when zoomed in:
+ *
+ *   zoom <= 1 → 1/zoom → counter-scales, so the affordance holds a constant
+ *               on-screen size (zoom floored to the canvas minimum)
+ *   zoom  > 1 → 1      → natural flow size, so it grows with the node it sits on
+ *
+ * Reduce with this inside a Zustand selector rather than selecting the raw zoom:
+ * the result is exactly 1 for every zoom >= 1, so zooming in re-renders nothing.
+ */
+export const getHandleScreenScale = (zoom: number): number => {
+  const safeZoom = Math.max(
+    Number.isFinite(zoom) && zoom > 0 ? zoom : 1,
+    CANVAS.MIN_SCALE_TO_ZOOM_OUT
+  )
+  return 1 / Math.min(safeZoom, 1)
+}

library/tests/unit/handleScreenScale.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest"
+import { getHandleScreenScale } from "@/utils/geometry/scalar"
+import { CANVAS } from "@/constants"
+
+/**
+ * Connection indicators hold a usable on-screen size when zoomed out and grow with
+ * the node when zoomed in. The identity above 1 is what lets the publisher skip
+ * writes for most of a zoom-in gesture.
+ */
+describe("getHandleScreenScale", () => {
+  it("leaves the arc at its natural size once zoomed in", () => {
+    expect(getHandleScreenScale(1)).toBe(1)
+    expect(getHandleScreenScale(2)).toBe(1)
+  })
+
+  it("counter-scales below 1 so the arc keeps its on-screen size", () => {
+    expect(getHandleScreenScale(0.5)).toBe(2)
+  })
+
+  it("clamps rather than diverging at a very small zoom", () => {
+    expect(getHandleScreenScale(CANVAS.MIN_SCALE_TO_ZOOM_OUT / 10)).toBe(
+      1 / CANVAS.MIN_SCALE_TO_ZOOM_OUT
+    )
+  })
+
+  it("falls back to natural size for a zoom that is not a positive number", () => {
+    expect(getHandleScreenScale(0)).toBe(1)
+    expect(getHandleScreenScale(-1)).toBe(1)
+    expect(getHandleScreenScale(Number.NaN)).toBe(1)
+  })
+})