perf: restore LiteGraph LOD parity for Nodes 2.0

Author: benjcooley

browser_tests/fixtures/VueNodeHelpers.ts

@@ -199,13 +199,41 @@ export class VueNodeHelpers {
    * Wait for Vue nodes to be rendered
    */
   async waitForNodes(expectedCount?: number): Promise<void> {
-    if (expectedCount !== undefined) {
-      await this.page.waitForFunction(
-        (count) => document.querySelectorAll('[data-node-id]').length >= count,
-        expectedCount
-      )
-    } else {
-      await this.page.locator('[data-node-id]').first().waitFor()
+    try {
+      if (expectedCount !== undefined) {
+        await this.page.waitForFunction(
+          (count) =>
+            document.querySelectorAll('[data-node-id]').length >= count,
+          expectedCount
+        )
+      } else {
+        await this.page.locator('[data-node-id]').first().waitFor()
+      }
+    } catch (error) {
+      // Below the level-of-detail threshold no `[data-node-id]` is ever
+      // created, so this waits out its full timeout and reports only that a
+      // locator was not found - which points at the node rather than the zoom,
+      // and costs the timeout on every test in the file. Say so instead.
+      const belowLod = await this.page.evaluate(() => {
+        const canvas = window.app?.canvas
+        const minFontSize = canvas?.min_font_size_for_lod ?? 0
+        if (!canvas || minFontSize <= 0) return null
+
+        const textSize = window.LiteGraph?.NODE_TEXT_SIZE ?? 14
+        const threshold =
+          minFontSize / (textSize * Math.sqrt(window.devicePixelRatio || 1))
+        return canvas.ds.scale < threshold
+          ? { scale: canvas.ds.scale, threshold }
+          : null
+      })
+
+      if (belowLod) {
+        throw new Error(
+          `No Vue nodes are addressable: canvas zoom ${belowLod.scale.toFixed(3)} is below the level-of-detail threshold ${belowLod.threshold.toFixed(3)}, so nodes render as canvas boxes with no [data-node-id] element. Call ensureNodesAddressable(comfyPage) after loading, or set a zoom above the threshold.`,
+          { cause: error }
+        )
+      }
+      throw error
     }
   }
 

browser_tests/fixtures/utils/fitToView.ts

@@ -1,5 +1,6 @@
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
 import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import { ensureNodesAddressable } from '@e2e/fixtures/utils/lodZoom'
 
 interface FitToViewOptions {
   selectionOnly?: boolean
@@ -95,10 +96,14 @@ export async function fitToViewInstant(
 
       const canvas = app.canvas
       canvas.ds.fitToBounds(bounds, { zoom })
+
       canvas.setDirty(true, true)
     },
     { bounds, zoom }
   )
 
-  await comfyPage.nextFrame()
+  // 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]` exists. Specs
+  // that want the simplified mode set the zoom themselves.
+  await ensureNodesAddressable(comfyPage)
 }

browser_tests/fixtures/utils/lodZoom.ts

@@ -0,0 +1,46 @@
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+
+/**
+ * Margin above the threshold. The composable applies 1.15 hysteresis on the way
+ * back up, so sitting exactly at the threshold is not enough to stay there.
+ */
+const LOD_CLEARANCE = 1.2
+
+/**
+ * Raises the canvas zoom until Vue nodes exist as DOM elements.
+ *
+ * Any spec that queries `[data-node-id]` needs this whenever the zoom is not
+ * under its own control - a workflow fixture can pin `extra.ds.scale` below the
+ * threshold, and `large-graph-workflow.json` does exactly that at 0.5 against a
+ * default threshold of 0.571. The symptom is a bare locator timeout with
+ * nothing pointing back at the zoom, or a `count() === 0` assertion that passes
+ * for the wrong reason.
+ *
+ * A no-op above the threshold, and when LOD is disabled entirely.
+ */
+export async function ensureNodesAddressable(comfyPage: ComfyPage) {
+  await comfyPage.page.evaluate(async (clearance) => {
+    const canvas = window.app?.canvas
+    if (!canvas) return
+
+    const vueNodesEnabled = await window.app?.extensionManager.setting.get(
+      'Comfy.VueNodes.Enabled'
+    )
+    if (!vueNodesEnabled) return
+
+    const minFontSize = canvas.min_font_size_for_lod ?? 0
+    if (minFontSize <= 0) return
+
+    const textSize = window.LiteGraph?.NODE_TEXT_SIZE ?? 14
+    const dprAdjustment = Math.sqrt(window.devicePixelRatio || 1)
+    const minimumInteractiveZoom =
+      (minFontSize / (textSize * dprAdjustment)) * clearance
+
+    if (canvas.ds.scale < minimumInteractiveZoom) {
+      canvas.ds.changeScale(minimumInteractiveZoom)
+      canvas.setDirty(true, true)
+    }
+  }, LOD_CLEARANCE)
+
+  await comfyPage.nextFrame()
+}

browser_tests/fixtures/utils/runtimeReflow.ts

@@ -23,14 +23,69 @@ interface ReflowNodeUnderTest {
 }
 
 /**
- * Adds a reflow node, fits it into view, and captures its starting height so a
- * test can assert on the height delta after triggering runtime growth.
+ * Floor for the measurement zoom, used when the LOD threshold cannot be read.
+ * Above the default threshold at DPR >= 1, but a literal cannot stay safe as
+ * DPR drops - at DPR 0.5 the threshold is 0.808 - which is why the real zoom
+ * is derived on the page from the live threshold instead.
+ */
+const MEASUREMENT_ZOOM_FLOOR = 0.8
+
+/** Centers the viewport on a node at a zoom derived to sit above the LOD threshold. */
+async function centerOnNode(comfyPage: ComfyPage, nodeId: string) {
+  await comfyPage.page.evaluate(
+    ([id, zoomFloor]) => {
+      const canvas = window.app!.canvas
+      const graph = window.graph as unknown as TestGraphAccess
+      const node = graph._nodes_by_id[id]
+      if (!node) {
+        // A silent return here surfaces later as an opaque locator timeout
+        // pointing at the node rather than at this fixture.
+        throw new Error(
+          `runtimeReflow: node ${id} not found in the graph; cannot center on it`
+        )
+      }
+
+      // Derived from the live threshold, reading the same inputs litegraph
+      // uses, so a DPR or setting change cannot silently put the measurement
+      // below the LOD cutoff where no [data-node-id] exists.
+      const minFontSize = canvas.min_font_size_for_lod ?? 0
+      const textSize = window.LiteGraph?.NODE_TEXT_SIZE ?? 14
+      const lodThreshold =
+        minFontSize > 0
+          ? minFontSize / (textSize * Math.sqrt(window.devicePixelRatio || 1))
+          : 0
+      const zoom = Math.max(Number(zoomFloor), lodThreshold * 1.4)
+
+      const element = canvas.canvas
+      canvas.ds.scale = Number(zoom)
+      canvas.ds.offset[0] =
+        -(node.pos[0] + node.size[0] / 2) +
+        element.clientWidth / 2 / Number(zoom)
+      canvas.ds.offset[1] =
+        -(node.pos[1] + node.size[1] / 2) +
+        element.clientHeight / 2 / Number(zoom)
+      canvas.setDirty(true, true)
+    },
+    [nodeId, MEASUREMENT_ZOOM_FLOOR] as const
+  )
+  await comfyPage.nextFrame()
+}
+
+/**
+ * Adds a reflow node, centers it at a deterministic zoom, and captures its
+ * starting height so a test can assert on the height delta after triggering
+ * runtime growth.
+ *
+ * Fit-to-view alone can land below the LOD threshold on this workflow, where
+ * no Vue node elements exist at all, so the node is centered at a fixed zoom
+ * instead of measured wherever fit happens to leave it.
  */
 export async function addReflowNodeAndMeasure(
   comfyPage: ComfyPage
 ): Promise<ReflowNodeUnderTest> {
   const nodeId = await addRuntimeReflowNode(comfyPage)
   await fitToViewInstant(comfyPage)
+  await centerOnNode(comfyPage, nodeId)
 
   const node = comfyPage.vueNodes.getNodeLocator(nodeId)
   await expect(node).toBeVisible()

browser_tests/tests/performance.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { ensureNodesAddressable } from '@e2e/fixtures/utils/lodZoom'
 import {
   logMeasurement,
   recordMeasurement
@@ -328,6 +329,10 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
       await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+      // The fixture pins extra.ds.scale to 0.5, below the 0.571 LOD threshold,
+      // so nothing mounts and waitForNodes below would time out on every test
+      // in this describe.
+      await ensureNodesAddressable(comfyPage)
       await comfyPage.vueNodes.waitForNodes()
     })
 
@@ -370,27 +375,37 @@ test.describe('Performance', { tag: ['@perf'] }, () => {
     })
 
     test('zoom out culling', async ({ comfyPage }) => {
+      const canvasBox = await comfyPage.canvas.boundingBox()
+      if (!canvasBox) throw new Error('Canvas bounding box not available')
+
+      const centerX = canvasBox.x + canvasBox.width / 2
+      const centerY = canvasBox.y + canvasBox.height / 2
+      const lodThreshold = await comfyPage.page.evaluate(() => {
+        const canvas = window.app!.canvas
+        const textSize = window.LiteGraph!.NODE_TEXT_SIZE
+        const dprAdjustment = Math.sqrt(window.devicePixelRatio || 1)
+        return canvas.min_font_size_for_lod / (textSize * dprAdjustment)
+      })
+
       await comfyPage.perf.startMeasuring()
 
-      // Zoom out far enough that nodes become < 4px screen size
-      // (triggers size-based culling in isNodeInViewport)
+      await comfyPage.page.mouse.move(centerX, centerY)
       for (let i = 0; i < 20; i++) {
-        await comfyPage.canvasOps.zoom(100)
+        await comfyPage.page.mouse.wheel(0, 100)
+        await comfyPage.nextFrame()
       }
 
-      // Verify we actually entered the culling regime.
-      // isNodeTooSmall triggers when max(width, height) * scale < 4px.
-      // Typical nodes are ~200px wide, so scale must be < 0.02.
-      await expect.poll(() => comfyPage.canvasOps.getScale()).toBeLessThan(0.02)
+      await expect
+        .poll(() => comfyPage.canvasOps.getScale())
+        .toBeLessThan(lodThreshold)
 
-      // Idle at extreme zoom-out — most nodes should be culled
       for (let i = 0; i < 60; i++) {
         await comfyPage.nextFrame()
       }
 
-      // Zoom back in
       for (let i = 0; i < 20; i++) {
-        await comfyPage.canvasOps.zoom(-100)
+        await comfyPage.page.mouse.wheel(0, -100)
+        await comfyPage.nextFrame()
       }
 
       const m = await comfyPage.perf.stopMeasuring('vue-zoom-culling')

browser_tests/tests/vueNodes/viewportKeepAlive.spec.ts

@@ -2,7 +2,12 @@ import {
   comfyExpect as expect,
   comfyPageFixture as test
 } from '@e2e/fixtures/ComfyPage'
+import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
+import largeGraphWorkflow from '@e2e/assets/large-graph-workflow.json' with { type: 'json' }
 import type { Page } from '@playwright/test'
+import { zComfyWorkflow } from '@/platform/workflow/validation/schemas/workflowSchema'
+
+const LARGE_GRAPH_WORKFLOW = zComfyWorkflow.parse(largeGraphWorkflow)
 
 async function setCanvasOffsetX(page: Page, offsetX: number): Promise<void> {
   await page.evaluate((x) => {
@@ -12,13 +17,28 @@ async function setCanvasOffsetX(page: Page, offsetX: number): Promise<void> {
   }, offsetX)
 }
 
+async function setCanvasScale(comfyPage: ComfyPage, scale: number) {
+  await comfyPage.canvasOps.setScale(scale)
+  await comfyPage.nextFrame()
+}
+
+async function getGraphNodeSize(page: Page, nodeId: string) {
+  return await page.evaluate((id) => {
+    const node = window.app!.graph!.nodes.find(
+      (candidate) => String(candidate.id) === id
+    )
+    if (!node) throw new Error(`Node ${id} is missing`)
+    return Array.from(node.size)
+  }, nodeId)
+}
+
 test.describe(
   'Vue node viewport KeepAlive',
   { tag: ['@canvas', '@node', '@vue-nodes', '@slow'] },
   () => {
     test.beforeEach(async ({ comfyPage }) => {
       await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.workflow.loadWorkflow('large-graph-workflow')
+      await comfyPage.workflow.loadGraphData(LARGE_GRAPH_WORKFLOW)
       await comfyPage.canvasOps.setScale(1)
       await comfyPage.page.evaluate(() => {
         const canvas = window.app!.canvas
@@ -45,13 +65,7 @@ test.describe(
       if (!nodeId || !initialElement) {
         throw new Error('Expected an active Vue node with an id')
       }
-      const initialSize = await comfyPage.page.evaluate((id) => {
-        const node = window.app!.graph!.nodes.find(
-          (candidate) => String(candidate.id) === id
-        )
-        if (!node) throw new Error(`Node ${id} is missing`)
-        return Array.from(node.size)
-      }, nodeId)
+      const initialSize = await getGraphNodeSize(comfyPage.page, nodeId)
 
       await setCanvasOffsetX(comfyPage.page, -100_000)
 
@@ -75,15 +89,9 @@ test.describe(
           returnedElement
         )
       ).toBe(true)
-      expect(
-        await comfyPage.page.evaluate((id) => {
-          const node = window.app!.graph!.nodes.find(
-            (candidate) => String(candidate.id) === id
-          )
-          if (!node) throw new Error(`Node ${id} is missing`)
-          return Array.from(node.size)
-        }, nodeId)
-      ).toEqual(initialSize)
+      expect(await getGraphNodeSize(comfyPage.page, nodeId)).toEqual(
+        initialSize
+      )
     })
 
     test('keeps the focused node connected while panning away', async ({
@@ -149,5 +157,61 @@ test.describe(
         .poll(() => sourceElement.evaluate((element) => element.isConnected))
         .toBe(false)
     })
+
+    test('uses boxes at low quality and restores the same node element', async ({
+      comfyPage
+    }) => {
+      test.slow()
+      const initialNode = comfyPage.vueNodes.nodes.first()
+      const nodeId = await initialNode.getAttribute('data-node-id')
+      const initialElement = await initialNode.elementHandle()
+      if (!nodeId || !initialElement) {
+        throw new Error('Expected an active Vue node with an id')
+      }
+      const initialSize = await getGraphNodeSize(comfyPage.page, nodeId)
+
+      await setCanvasScale(comfyPage, 0.4)
+      await expect(comfyPage.page.getByTestId('node-box-overlay')).toBeVisible()
+      await expect
+        .poll(() => initialElement.evaluate((element) => element.isConnected))
+        .toBe(false)
+
+      await setCanvasScale(comfyPage, 1)
+      const returnedNode = comfyPage.vueNodes.getNodeLocator(nodeId)
+      await expect(returnedNode).toBeVisible()
+      const returnedElement = await returnedNode.elementHandle()
+      if (!returnedElement) throw new Error('Expected the Vue node to return')
+
+      expect(
+        await initialElement.evaluate(
+          (element, candidate) => element === candidate,
+          returnedElement
+        )
+      ).toBe(true)
+      expect(await getGraphNodeSize(comfyPage.page, nodeId)).toEqual(
+        initialSize
+      )
+    })
+
+    test('keeps the focused node connected in low-quality mode', async ({
+      comfyPage
+    }) => {
+      test.slow()
+      const focusedNode = comfyPage.vueNodes.nodes.first()
+      const focusedElement = await focusedNode.elementHandle()
+      if (!focusedElement) throw new Error('Expected an active Vue node')
+      await focusedNode.focus()
+
+      await setCanvasScale(comfyPage, 0.4)
+      await expect(comfyPage.page.getByTestId('node-box-overlay')).toBeVisible()
+      await expect
+        .poll(() => focusedElement.evaluate((element) => element.isConnected))
+        .toBe(true)
+      expect(
+        await focusedElement.evaluate((element) =>
+          element.contains(document.activeElement)
+        )
+      ).toBe(true)
+    })
   }
 )