perf: draw nodes as boxes on a renderer-owned canvas when zoomed out

The previous approach mounted a div per node while zoomed out past
legibility, which still cost an element per node - 3,003 of them on a
large graph - and profiling showed most of a frame going to layout, paint
and compositing for what amounts to filled rectangles.

Draw them onto a canvas instead. The drawing lives in nodeBoxRenderer,
which takes a 2D context and a set of bounds and has no graph or canvas
renderer dependencies, mirroring how CanvasPathRenderer already owns link
drawing. A zoomed-out graph therefore does not depend on the legacy canvas
renderer being present, which an earlier attempt at this did.

Node bounds come from the culling index, which already keeps them cached
against layoutVersion, so redrawing each frame rebuilds nothing.

3000-node graph at its opening zoom: 227,787 -> 418 DOM elements, the
remainder being application chrome rather than nodes.

Author: benjcooley

src/components/graph/GraphCanvas.vue

@@ -71,22 +71,29 @@
     @pointerup.capture="forwardPointerUpPanEvent"
     @pointermove.capture="forwardPointerMovePanEvent"
   >
-    <!-- Vue nodes rendered based on graph nodes -->
-    <template v-for="nodeData in allNodes" :key="nodeData.id">
-      <LGraphNodeLOD v-if="isLowQuality" :node-data="nodeData" />
-      <LGraphNode
-        v-else
-        :node-data="nodeData"
-        :error="
-          executionErrorStore.lastExecutionErrorNodeId === nodeData.id
-            ? 'Execution error'
-            : null
-        "
-        :data-node-id="nodeData.id"
-      />
-    </template>
+    <!--
+      Vue nodes rendered based on graph nodes. While zoomed out past
+      legibility they are replaced wholesale by NodeBoxOverlay, which draws the
+      same rectangles onto a canvas for a fraction of the cost.
+    -->
+    <LGraphNode
+      v-for="nodeData in isLowQuality ? [] : allNodes"
+      :key="nodeData.id"
+      :node-data="nodeData"
+      :error="
+        executionErrorStore.lastExecutionErrorNodeId === nodeData.id
+          ? 'Execution error'
+          : null
+      "
+      :data-node-id="nodeData.id"
+    />
   </TransformPane>
 
+  <NodeBoxOverlay
+    v-if="shouldRenderVueNodes && comfyAppReady && isLowQuality"
+    :get-boxes="getNodeBoxes"
+  />
+
   <LinkOverlayCanvas
     v-if="shouldRenderVueNodes && comfyApp.canvas && comfyAppReady"
     :canvas="comfyApp.canvas"
@@ -161,6 +168,7 @@ import { useGroupContextMenu } from '@/composables/graph/useGroupContextMenu'
 import { installErrorClearingHooks } from '@/composables/graph/useErrorClearingHooks'
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
 import { useViewportCulling } from '@/composables/graph/useViewportCulling'
+import type { NodeId } from '@/renderer/core/layout/types'
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
 import { useNodeBadge } from '@/composables/node/useNodeBadge'
 import { useCanvasDrop } from '@/composables/useCanvasDrop'
@@ -187,7 +195,7 @@ import type { StartupOutcome } from '@/platform/workflow/persistence/base/draftT
 import { useFirstRunEntry } from '@/renderer/extensions/firstRunTour/gettingStarted/firstRunEntry'
 import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
 import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
-import LGraphNodeLOD from '@/renderer/extensions/vueNodes/components/LGraphNodeLOD.vue'
+import NodeBoxOverlay from '@/renderer/extensions/vueNodes/components/NodeBoxOverlay.vue'
 import { useLowQualityRendering } from '@/renderer/extensions/vueNodes/composables/useLowQualityRendering'
 import { requestSlotLayoutSyncForAllNodes } from '@/renderer/extensions/vueNodes/composables/useSlotElementTracking'
 import { UnauthorizedError } from '@/scripts/api'
@@ -298,6 +306,21 @@ watch(
   }
 )
 
+// Colour per node, rebuilt only when the node list changes rather than per
+// frame; the overlay redraws every frame.
+const nodeColors = computed(() => {
+  const colors = new Map<NodeId, string | undefined>()
+  for (const node of rawNodes.value) colors.set(node.id, node.bgcolor)
+  return colors
+})
+
+function getNodeBoxes() {
+  const colors = nodeColors.value
+  return cullingIndex
+    .entries()
+    .map((entry) => ({ bounds: entry.bounds!, color: colors.get(entry.id) }))
+}
+
 const { isLowQuality } = useLowQualityRendering(
   computed(() => canvasStore.canvas ?? undefined)
 )

src/renderer/core/canvas/nodeBoxRenderer.test.ts

@@ -0,0 +1,68 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { drawNodeBoxes } from '@/renderer/core/canvas/nodeBoxRenderer'
+import type { NodeBox } from '@/renderer/core/canvas/nodeBoxRenderer'
+
+function fakeContext() {
+  const fills: Array<{ rect: number[]; color: string }> = []
+  let fillStyle = ''
+  const ctx = {
+    save: vi.fn(),
+    restore: vi.fn(),
+    scale: vi.fn(),
+    translate: vi.fn(),
+    fillRect: (...rect: number[]) => fills.push({ rect, color: fillStyle }),
+    get fillStyle() {
+      return fillStyle
+    },
+    set fillStyle(value: string) {
+      fillStyle = value
+    }
+  }
+  return { ctx: ctx as unknown as CanvasRenderingContext2D, fills }
+}
+
+const box = (x: number, color?: string): NodeBox => ({
+  bounds: { x, y: 0, width: 100, height: 50 },
+  color
+})
+
+const VIEWPORT = { x: 0, y: 0, width: 1000, height: 1000 }
+const CAMERA = { x: 0, y: 0, z: 1 }
+const STYLE = { defaultColor: '#333' }
+
+describe('drawNodeBoxes', () => {
+  it('draws only boxes intersecting the viewport', () => {
+    const { ctx, fills } = fakeContext()
+
+    const drawn = drawNodeBoxes(
+      ctx,
+      [box(0), box(500), box(50_000)],
+      CAMERA,
+      VIEWPORT,
+      STYLE
+    )
+
+    expect(drawn).toBe(2)
+    expect(fills.map((f) => f.rect[0])).toEqual([0, 500])
+  })
+
+  it('uses each node colour, falling back to the default', () => {
+    const { ctx, fills } = fakeContext()
+
+    drawNodeBoxes(ctx, [box(0, '#abcdef'), box(200)], CAMERA, VIEWPORT, STYLE)
+
+    expect(fills.map((f) => f.color)).toEqual(['#abcdef', '#333'])
+  })
+
+  it('applies the camera to the context rather than to each box', () => {
+    const { ctx, fills } = fakeContext()
+
+    drawNodeBoxes(ctx, [box(10)], { x: -5, y: -7, z: 2 }, VIEWPORT, STYLE)
+
+    expect(ctx.scale).toHaveBeenCalledWith(2, 2)
+    expect(ctx.translate).toHaveBeenCalledWith(-5, -7)
+    // Bounds stay in graph space; the context carries the transform.
+    expect(fills[0].rect).toEqual([10, 0, 100, 50])
+  })
+})

src/renderer/core/canvas/nodeBoxRenderer.ts

@@ -0,0 +1,75 @@
+/**
+ * Draws nodes as plain filled rectangles.
+ *
+ * Used while the view is zoomed out far enough that node contents would be
+ * illegible, where a node resolves to little more than a rectangle on screen
+ * anyway. Pure canvas drawing with no graph or renderer dependencies: it needs
+ * only a 2D context and a set of bounds.
+ */
+import type { Bounds } from '@/renderer/core/layout/types'
+
+export interface NodeBox {
+  bounds: Bounds
+  /** Node's own colour; falls back to the shared default when absent. */
+  color?: string
+}
+
+export interface NodeBoxStyle {
+  defaultColor: string
+}
+
+export interface NodeBoxCamera {
+  x: number
+  y: number
+  z: number
+}
+
+/**
+ * Rectangles are drawn in graph space with the camera applied to the context,
+ * matching how the other canvas layers position themselves.
+ *
+ * @returns how many boxes were actually drawn
+ */
+export function drawNodeBoxes(
+  ctx: CanvasRenderingContext2D,
+  boxes: Iterable<NodeBox>,
+  camera: NodeBoxCamera,
+  viewport: Bounds,
+  style: NodeBoxStyle
+): number {
+  const scale = camera.z || 1
+
+  ctx.save()
+  ctx.scale(scale, scale)
+  ctx.translate(camera.x, camera.y)
+
+  let drawn = 0
+  let currentColor = ''
+
+  for (const { bounds, color } of boxes) {
+    if (!intersects(bounds, viewport)) continue
+
+    // Batching by colour avoids a state change per node; most nodes in a graph
+    // share the default.
+    const fill = color || style.defaultColor
+    if (fill !== currentColor) {
+      ctx.fillStyle = fill
+      currentColor = fill
+    }
+
+    ctx.fillRect(bounds.x, bounds.y, bounds.width, bounds.height)
+    drawn++
+  }
+
+  ctx.restore()
+  return drawn
+}
+
+function intersects(a: Bounds, b: Bounds): boolean {
+  return !(
+    a.x + a.width < b.x ||
+    b.x + b.width < a.x ||
+    a.y + a.height < b.y ||
+    b.y + b.height < a.y
+  )
+}

src/renderer/core/spatial/nodeCullingIndex.ts

@@ -44,6 +44,9 @@ export function createNodeCullingIndex({
   /** Nodes with no bounds yet; they cannot be indexed, so always report them. */
   let unpositioned: NodeId[] = []
 
+  /** Retained so callers can iterate bounds without rebuilding them. */
+  let positionedEntries: CullingIndexEntry[] = []
+
   function rebuild(): void {
     const positioned: CullingIndexEntry[] = []
     const pending: NodeId[] = []
@@ -67,6 +70,7 @@ export function createNodeCullingIndex({
     }
 
     unpositioned = pending
+    positionedEntries = positioned
 
     if (positioned.length === 0) {
       tree = null
@@ -104,6 +108,16 @@ export function createNodeCullingIndex({
       return unpositioned.length ? matches.concat(unpositioned) : matches
     },
 
+    /**
+     * Every node that has bounds, for callers that iterate the whole set
+     * rather than query a region. Shares the version-keyed cache, so reading
+     * it each frame does not rebuild anything.
+     */
+    entries(): readonly CullingIndexEntry[] {
+      ensureFresh()
+      return positionedEntries
+    },
+
     /** Forces a rebuild on next query, for changes the version does not cover. */
     invalidate(): void {
       built = false

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

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useRafFn } from '@vueuse/core'
+import { useTemplateRef } from 'vue'
+
+import { drawNodeBoxes } from '@/renderer/core/canvas/nodeBoxRenderer'
+import type { NodeBox } from '@/renderer/core/canvas/nodeBoxRenderer'
+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>
+}>()
+
+const { camera } = useTransformState()
+const canvasRef = useTemplateRef<HTMLCanvasElement>('canvasRef')
+
+/** Visible region in graph space, from the inverse of the camera transform. */
+function viewportBounds(width: number, height: number): Bounds {
+  const scale = camera.z || 1
+  return {
+    x: -camera.x,
+    y: -camera.y,
+    width: width / scale,
+    height: height / scale
+  }
+}
+
+useRafFn(() => {
+  const el = canvasRef.value
+  if (!el) return
+
+  const dpr = window.devicePixelRatio || 1
+  const width = el.clientWidth
+  const height = el.clientHeight
+  if (!width || !height) return
+
+  const pixelWidth = Math.round(width * dpr)
+  const pixelHeight = Math.round(height * dpr)
+  if (el.width !== pixelWidth || el.height !== pixelHeight) {
+    el.width = pixelWidth
+    el.height = pixelHeight
+  }
+
+  const ctx = el.getContext('2d')
+  if (!ctx) return
+
+  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'
+  })
+})
+</script>
+
+<template>
+  <!--
+    Stands in for the node layer while zoomed out past legibility. Owned and
+    drawn by the renderer, so a zoomed-out graph does not depend on the canvas
+    renderer being present.
+  -->
+  <canvas
+    ref="canvasRef"
+    data-testid="node-box-overlay"
+    class="pointer-events-none absolute inset-0 size-full [--node-box-color:var(--color-zinc-700)]"
+  />
+</template>