perf: draw only visible boxes, and stop measuring style per frame

The overlay loop existed to save frame time and was spending it:

- getComputedStyle per frame for a static class literal on the same
  element, forcing a style recalculation right after TransformPane
  dirties style by writing the pane transform. Read once per element.
- clientWidth/clientHeight per frame, forcing layout for a canvas that
  is absolute inset-0 size-full and only changes with the window.
- A redraw every frame regardless of whether anything moved. Nothing
  drawn can change without the camera or node geometry changing, so an
  idle frame now does nothing.
- getBoxes() materialised every node so drawNodeBoxes could discard the
  off-screen ones - O(all) to draw O(visible), and at 3000 nodes about
  180k short-lived objects a second inside the pan loop. It now takes
  the visible rect and queries the index spatially.

Also narrows the index's entries() to a PositionedEntry type so the call
site no longer asserts bounds are non-null, which mattered because
query() deliberately appends the unpositioned ids - making 'include them
in entries() too' a plausible change that would have compiled and then
thrown inside the draw loop.

And clamps fitToViewInstant above the threshold. It has 24 call sites,
each of which could otherwise land in simplified mode where no
[data-node-id] exists: locators time out and count()===0 assertions pass
for the wrong reason, with nothing in the symptom pointing back to LOD.

Author: benjcooley

browser_tests/fixtures/utils/fitToView.ts

@@ -95,6 +95,25 @@ export async function fitToViewInstant(
 
       const canvas = app.canvas
       canvas.ds.fitToBounds(bounds, { zoom })
+
+      // Fitting a large graph can land below the level-of-detail threshold,
+      // where Vue nodes are drawn as canvas boxes and no `[data-node-id]`
+      // element exists. A spec that then queries one gets a bare locator
+      // timeout, or a `count() === 0` assertion that passes for the wrong
+      // reason - and neither symptom points back here. Clamp so fitting always
+      // leaves nodes addressable; specs that want the simplified mode should
+      // set the zoom themselves.
+      const minFontSize = canvas.min_font_size_for_lod ?? 0
+      if (minFontSize > 0) {
+        const dprAdjustment = Math.sqrt(window.devicePixelRatio || 1)
+        // Matches getLowQualityThreshold, plus the composable's hysteresis.
+        const lodThreshold = minFontSize / (14 * dprAdjustment)
+        const minimumInteractiveZoom = lodThreshold * 1.2
+        if (canvas.ds.scale < minimumInteractiveZoom) {
+          canvas.ds.changeScale(minimumInteractiveZoom)
+        }
+      }
+
       canvas.setDirty(true, true)
     },
     { bounds, zoom }

src/components/graph/GraphCanvas.vue

@@ -168,6 +168,7 @@ import { useChainCallback } from '@/composables/functional/useChainCallback'
 import { useGroupContextMenu } from '@/composables/graph/useGroupContextMenu'
 import { installErrorClearingHooks } from '@/composables/graph/useErrorClearingHooks'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import type { Bounds, NodeId } from '@/renderer/core/layout/types'
 import {
   findNodesOptedOutOfCulling,
   findNodesWithLiveState
@@ -319,11 +320,11 @@ const nodeColors = computed(() => {
   return colors
 })
 
-function getNodeBoxes() {
+function getNodeBoxes(viewport: Bounds) {
   const colors = nodeColors.value
   return cullingIndex
-    .entries()
-    .map((entry) => ({ bounds: entry.bounds!, color: colors.get(entry.id) }))
+    .queryEntries(viewport)
+    .map((entry) => ({ bounds: entry.bounds, color: colors.get(entry.id) }))
 }
 
 const { isLowQuality } = useLowQualityRendering(

src/renderer/core/spatial/nodeCullingIndex.ts

@@ -23,6 +23,9 @@ export interface CullingIndexEntry {
   bounds: Bounds | null
 }
 
+/** An entry known to have bounds, so callers need no assertion. */
+export type PositionedEntry = CullingIndexEntry & { bounds: Bounds }
+
 interface NodeCullingIndexOptions {
   /**
    * Changes whenever any node's position or size changes. Entries must be
@@ -45,10 +48,11 @@ export function createNodeCullingIndex({
   let unpositioned: NodeId[] = []
 
   /** Retained so callers can iterate bounds without rebuilding them. */
-  let positionedEntries: CullingIndexEntry[] = []
+  let positionedEntries: PositionedEntry[] = []
+  let entriesById = new Map<NodeId, PositionedEntry>()
 
   function rebuild(): void {
-    const positioned: { id: NodeId; bounds: Bounds }[] = []
+    const positioned: PositionedEntry[] = []
     const pending: NodeId[] = []
 
     let minX = Infinity
@@ -71,6 +75,7 @@ export function createNodeCullingIndex({
 
     unpositioned = pending
     positionedEntries = positioned
+    entriesById = new Map(positioned.map((entry) => [entry.id, entry]))
 
     if (positioned.length === 0) {
       tree = null
@@ -123,11 +128,25 @@ export function createNodeCullingIndex({
      * rather than query a region. Shares the version-keyed cache, so reading
      * it each frame does not rebuild anything.
      */
-    entries(): readonly CullingIndexEntry[] {
+    entries(): readonly PositionedEntry[] {
       ensureFresh()
       return positionedEntries
     },
 
+    /**
+     * Positioned entries intersecting the rect. Lets a draw pass be O(visible)
+     * rather than materialising the whole graph and discarding most of it.
+     */
+    queryEntries(bounds: Bounds): PositionedEntry[] {
+      ensureFresh()
+      const found: PositionedEntry[] = []
+      for (const id of tree ? tree.query(bounds) : []) {
+        const entry = entriesById.get(id)
+        if (entry) found.push(entry)
+      }
+      return found
+    },
+
     /** Forces a rebuild on next query, for changes the version does not cover. */
     invalidate(): void {
       built = false

src/renderer/extensions/vueNodes/components/NodeBoxOverlay.vue

@@ -1,20 +1,50 @@
 <script setup lang="ts">
-import { useRafFn } from '@vueuse/core'
-import { useTemplateRef } from 'vue'
+import { useEventListener, useRafFn } from '@vueuse/core'
+import { useTemplateRef, watch } from 'vue'
 
 import { drawNodeBoxes } from '@/renderer/core/canvas/nodeBoxRenderer'
 import type { NodeBox } from '@/renderer/core/canvas/nodeBoxRenderer'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
 import { useTransformState } from '@/renderer/core/layout/transform/useTransformState'
 import type { Bounds } from '@/renderer/core/layout/types'
 
 const { getBoxes } = defineProps<{
-  /** Boxes to draw, in graph space. Called once per frame. */
-  getBoxes: () => Iterable<NodeBox>
+  /**
+   * Boxes to draw, in graph space. Receives the visible rect so the caller can
+   * return only what intersects it rather than the whole graph.
+   */
+  getBoxes: (viewport: Bounds) => Iterable<NodeBox>
 }>()
 
 const { camera } = useTransformState()
 const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef')
 
+// Read once per element rather than per frame: it is a static class literal on
+// this canvas, and getComputedStyle forces a style recalculation in a loop
+// whose entire justification is frame time - with TransformPane having just
+// dirtied style by writing the pane transform.
+let boxColor = ''
+// Element size likewise: clientWidth forces layout, and this canvas is
+// `absolute inset-0 size-full`, so it only changes when the window does.
+let elementWidth = 0
+let elementHeight = 0
+
+function measureElement(el: HTMLCanvasElement): void {
+  boxColor =
+    getComputedStyle(el).getPropertyValue('--node-box-color').trim() ||
+    '#353535'
+  elementWidth = el.clientWidth
+  elementHeight = el.clientHeight
+}
+
+useEventListener(window, 'resize', () => {
+  if (canvasRef.value) measureElement(canvasRef.value)
+})
+
+watch(canvasRef, (el) => {
+  if (el) measureElement(el)
+})
+
 /** Visible region in graph space, from the inverse of the camera transform. */
 function viewportBounds(width: number, height: number): Bounds {
   const scale = camera.z || 1
@@ -26,15 +56,23 @@ function viewportBounds(width: number, height: number): Bounds {
   }
 }
 
+// Nothing drawn here can change without the camera moving or node geometry
+// changing, so an idle frame does no work at all.
+let lastSignature = ''
+
 useRafFn(() => {
   const el = canvasRef.value
   if (!el) return
 
   const dpr = window.devicePixelRatio || 1
-  const width = el.clientWidth
-  const height = el.clientHeight
+  const width = elementWidth
+  const height = elementHeight
   if (!width || !height) return
 
+  const signature = `${camera.x},${camera.y},${camera.z},${layoutStore.nodeGeometryVersion},${width}x${height}`
+  if (signature === lastSignature) return
+  lastSignature = signature
+
   const pixelWidth = Math.round(width * dpr)
   const pixelHeight = Math.round(height * dpr)
   if (el.width !== pixelWidth || el.height !== pixelHeight) {
@@ -48,12 +86,11 @@ useRafFn(() => {
   ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
   ctx.clearRect(0, 0, width, height)
 
-  drawNodeBoxes(ctx, getBoxes(), camera, viewportBounds(width, height), {
-    // Matches the node surface colour so a zoomed-out graph reads the same as
-    // a zoomed-in one.
-    defaultColor:
-      getComputedStyle(el).getPropertyValue('--node-box-color').trim() ||
-      '#353535'
+  // Matches the node surface colour so a zoomed-out graph reads the same as a
+  // zoomed-in one.
+  const viewport = viewportBounds(width, height)
+  drawNodeBoxes(ctx, getBoxes(viewport), camera, viewport, {
+    defaultColor: boxColor
   })
 })
 </script>