test: expose viewport culling correctness gaps

Author: benjcooley

browser_tests/tests/vueNodes/interactions/canvas/pan.spec.ts-snapshots/vue-nodes-paned-with-touch-mobile-chrome-linux.png

@@ -9,6 +9,9 @@ import {
   LiteGraph
 } from '@/lib/litegraph/src/litegraph'
 import { LLink } from '@/lib/litegraph/src/LLink'
+import { getSlotKey } from '@/renderer/core/layout/slots/slotIdentifier'
+import { layoutStore } from '@/renderer/core/layout/store/layoutStore'
+import type { SlotLayout } from '@/renderer/core/layout/types'
 import { toLinkId } from '@/types/linkId'
 import { createMockCanvas2DContext } from '@/utils/__tests__/litegraphTestUtils'
 
@@ -205,4 +208,77 @@ describe('drawConnections widget-input slot positioning', () => {
     const offset = LiteGraph.NODE_SLOT_HEIGHT * 0.5
     expect(input.pos![1]).toBe(widget.y + offset)
   })
+
+  it('draws a legacy link whose custom slot positions reach the viewport', () => {
+    const sourceNode = new LGraphNode('Source')
+    sourceNode.pos = [-5000, 100]
+    sourceNode.size = [150, 60]
+    sourceNode.addOutput('out', '*')
+    sourceNode.getOutputPos = vi.fn((): [number, number] => [100, 100])
+    graph.add(sourceNode)
+
+    const targetNode = new LGraphNode('Target')
+    targetNode.pos = [-4000, 100]
+    targetNode.size = [150, 60]
+    targetNode.addInput('in', '*')
+    targetNode.getInputPos = vi.fn((): [number, number] => [200, 100])
+    graph.add(targetNode)
+
+    createTestLink(graph, sourceNode, 0, targetNode, 0)
+    const renderLink = vi.spyOn(canvas, 'renderLink')
+
+    canvas.drawConnections(createMockCtx())
+
+    expect(renderLink).toHaveBeenCalled()
+  })
+
+  it('draws a Vue link whose measured slots reach outside node bounds', () => {
+    const sourceNode = new LGraphNode('Source')
+    sourceNode.pos = [-5000, 100]
+    sourceNode.size = [150, 60]
+    sourceNode.addOutput('out', '*')
+    graph.add(sourceNode)
+
+    const targetNode = new LGraphNode('Target')
+    targetNode.pos = [-4000, 100]
+    targetNode.size = [150, 60]
+    targetNode.addInput('in', '*')
+    graph.add(targetNode)
+
+    createTestLink(graph, sourceNode, 0, targetNode, 0)
+
+    const sourceKey = getSlotKey(sourceNode.id, 0, false)
+    const targetKey = getSlotKey(targetNode.id, 0, true)
+    const layouts = new Map([
+      [
+        sourceKey,
+        {
+          nodeId: sourceNode.id,
+          index: 0,
+          type: 'output',
+          position: { x: 100, y: 100 },
+          bounds: { x: 95, y: 95, width: 10, height: 10 }
+        } satisfies SlotLayout
+      ],
+      [
+        targetKey,
+        {
+          nodeId: targetNode.id,
+          index: 0,
+          type: 'input',
+          position: { x: 200, y: 100 },
+          bounds: { x: 195, y: 95, width: 10, height: 10 }
+        } satisfies SlotLayout
+      ]
+    ])
+    vi.mocked(layoutStore.getSlotLayout).mockImplementation(
+      (key) => layouts.get(key) ?? null
+    )
+    LiteGraph.vueNodesMode = true
+    const renderLink = vi.spyOn(canvas, 'renderLink')
+
+    canvas.drawConnections(createMockCtx())
+
+    expect(renderLink).toHaveBeenCalled()
+  })
 })

src/lib/litegraph/src/LGraphCanvas.drawConnections.test.ts

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import * as Y from 'yjs'
 
 import { toLinkId } from '@/types/linkId'
 import { toNodeId } from '@/types/nodeId'
@@ -14,6 +15,8 @@ import type {
   NodeLayout,
   SlotLayout
 } from '@/renderer/core/layout/types'
+import { layoutToYNode } from '@/renderer/core/layout/utils/mappers'
+import type { NodeLayoutMap } from '@/renderer/core/layout/utils/mappers'
 
 function getOperationsAddedBy(action: () => void): LayoutOperation[] {
   const operationCount = layoutStore.getOperationsSince(0).length
@@ -530,6 +533,73 @@ describe('layoutStore CRDT operations', () => {
     expect(nodesInBounds).toContain('node-c')
   })
 
+  it('synchronizes the spatial index after remote geometry changes', () => {
+    const remote = new Y.Doc()
+    const remoteNodes = remote.getMap<NodeLayoutMap>('nodes')
+    const nodeId = toNodeId('remote-node')
+    const layout: NodeLayout = {
+      ...createTestNode(nodeId),
+      position: { x: 0, y: 0 },
+      bounds: { x: 0, y: 0, width: 200, height: 100 }
+    }
+
+    remoteNodes.set(nodeId, layoutToYNode(layout))
+    layoutStore.applyUpdate(Y.encodeStateAsUpdate(remote))
+
+    expect(
+      layoutStore.queryNodesInBounds({
+        x: -10,
+        y: -10,
+        width: 300,
+        height: 200
+      })
+    ).toContain(nodeId)
+
+    const remoteNode = remoteNodes.get(nodeId)
+    expect(remoteNode).toBeDefined()
+    remoteNode?.set('position', { x: 50_000, y: 40_000 })
+    remoteNode?.set('bounds', {
+      x: 50_000,
+      y: 40_000,
+      width: 200,
+      height: 100
+    })
+    layoutStore.applyUpdate(
+      Y.encodeStateAsUpdate(remote, Y.encodeStateVector(layoutStore.getYDoc()))
+    )
+
+    expect(
+      layoutStore.queryNodesInBounds({
+        x: -10,
+        y: -10,
+        width: 300,
+        height: 200
+      })
+    ).not.toContain(nodeId)
+    expect(
+      layoutStore.queryNodesInBounds({
+        x: 49_900,
+        y: 39_900,
+        width: 400,
+        height: 300
+      })
+    ).toContain(nodeId)
+
+    remoteNodes.delete(nodeId)
+    layoutStore.applyUpdate(
+      Y.encodeStateAsUpdate(remote, Y.encodeStateVector(layoutStore.getYDoc()))
+    )
+
+    expect(
+      layoutStore.queryNodesInBounds({
+        x: 49_900,
+        y: 39_900,
+        width: 400,
+        height: 300
+      })
+    ).not.toContain(nodeId)
+  })
+
   it('should maintain operation history', () => {
     const nodeId = toNodeId('test-node-history')
     const layout = createTestNode(nodeId)

src/renderer/core/layout/store/layoutStore.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+
+import type { Bounds, NodeId } from '@/renderer/core/layout/types'
+import { SpatialIndexManager } from '@/renderer/core/spatial/SpatialIndex'
+
+const id = (value: string) => value as NodeId
+
+function box(x: number, y: number, size = 100): Bounds {
+  return { x, y, width: size, height: size }
+}
+
+describe('SpatialIndexManager', () => {
+  it('indexes entries outside the initial root bounds', () => {
+    const index = new SpatialIndexManager<NodeId>()
+    const distant = id('distant')
+
+    index.insert(distant, box(250_000, -80_000))
+
+    expect(index.query(box(249_900, -80_100, 500))).toEqual([distant])
+    expect(index.size).toBe(1)
+  })
+
+  it('keeps an entry indexed when an update crosses the root boundary', () => {
+    const index = new SpatialIndexManager<NodeId>()
+    const moving = id('moving')
+
+    index.insert(moving, box(0, 0))
+    index.update(moving, box(40_000, 40_000))
+
+    expect(index.query(box(0, 0, 500))).toEqual([])
+    expect(index.query(box(39_900, 39_900, 500))).toEqual([moving])
+  })
+
+  it('reports unindexable entries conservatively', () => {
+    const index = new SpatialIndexManager<NodeId>()
+    const broken = id('broken')
+
+    index.insert(broken, {
+      x: Number.NaN,
+      y: 0,
+      width: 100,
+      height: 100
+    })
+
+    expect(index.query(box(50_000, 50_000))).toContain(broken)
+    expect(index.size).toBe(1)
+  })
+
+  it('retains every update when a batch expands the root', () => {
+    const index = new SpatialIndexManager<NodeId>()
+    const left = id('left')
+    const right = id('right')
+
+    index.insert(left, box(0, 0))
+    index.insert(right, box(100, 100))
+    index.batchUpdate([
+      { nodeId: left, bounds: box(-50_000, 0) },
+      { nodeId: right, bounds: box(50_000, 0) }
+    ])
+
+    expect(index.query(box(-50_100, -100, 500))).toEqual([left])
+    expect(index.query(box(49_900, -100, 500))).toEqual([right])
+    expect(index.size).toBe(2)
+  })
+})

src/renderer/core/spatial/SpatialIndex.test.ts

@@ -7,6 +7,7 @@ import {
   findNodesOptedOutOfCulling,
   findNodesWithLiveState
 } from '@/renderer/extensions/vueNodes/composables/liveNodeState'
+import * as liveNodeState from '@/renderer/extensions/vueNodes/composables/liveNodeState'
 
 function mountNode(id: string, inner: string): HTMLElement {
   const root = document.createElement('div')
@@ -110,4 +111,24 @@ describe('findNodesOptedOutOfCulling', () => {
       new Set()
     )
   })
+
+  it('registers a node-type opt-out with lifecycle cleanup', () => {
+    type RegisterOptOut = (nodeType: string) => () => void
+    const candidate = Reflect.get(
+      liveNodeState,
+      'registerNodeTypeCullingOptOut'
+    )
+    expect(candidate).toBeTypeOf('function')
+    if (typeof candidate !== 'function') return
+
+    const cleanup = (candidate as RegisterOptOut)('stateful')
+    const statefulNode = { ...node('stateful'), type: 'stateful' }
+
+    expect(findNodesOptedOutOfCulling([statefulNode])).toEqual(
+      new Set(['stateful'])
+    )
+
+    cleanup()
+    expect(findNodesOptedOutOfCulling([statefulNode])).toEqual(new Set())
+  })
 })

src/renderer/extensions/vueNodes/composables/liveNodeState.test.ts

@@ -2,6 +2,7 @@ import { render } from '@testing-library/vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { toNodeId } from '@/types/nodeId'
+import type { NodeId } from '@/types/nodeId'
 import { defineComponent, nextTick, ref } from 'vue'
 
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
@@ -17,6 +18,7 @@ import {
   requestSlotLayoutSyncForAllNodes,
   useSlotElementTracking
 } from './useSlotElementTracking'
+import * as slotTracking from './useSlotElementTracking'
 
 const mockGraph = vi.hoisted(() => ({ _nodes: [] as unknown[] }))
 const mockCanvasState = vi.hoisted(() => ({
@@ -181,6 +183,46 @@ describe('useSlotElementTracking', () => {
     expect(layoutStore.pendingSlotSync).toBe(true)
   })
 
+  it('completes only for a resolved empty rendered-node set', () => {
+    type BeginSync = () => void
+    type IsPending = () => boolean
+    type SetExpected = (nodeIds: ReadonlySet<NodeId> | null) => void
+
+    const beginCandidate = Reflect.get(slotTracking, 'beginVueNodeSlotSync')
+    const pendingCandidate = Reflect.get(
+      slotTracking,
+      'isVueNodeSlotSyncPending'
+    )
+    const expectedCandidate = Reflect.get(
+      slotTracking,
+      'setExpectedRenderedNodeIds'
+    )
+
+    expect(beginCandidate).toBeTypeOf('function')
+    expect(pendingCandidate).toBeTypeOf('function')
+    expect(expectedCandidate).toBeTypeOf('function')
+    if (
+      typeof beginCandidate !== 'function' ||
+      typeof pendingCandidate !== 'function' ||
+      typeof expectedCandidate !== 'function'
+    ) {
+      return
+    }
+
+    const beginSync = beginCandidate as BeginSync
+    const isPending = pendingCandidate as IsPending
+    const setExpected = expectedCandidate as SetExpected
+
+    beginSync()
+    setExpected(null)
+    flushScheduledSlotLayoutSync()
+    expect(isPending()).toBe(true)
+
+    setExpected(new Set())
+    flushScheduledSlotLayoutSync()
+    expect(isPending()).toBe(false)
+  })
+
   it('keeps pendingSlotSync when all registered slots are hidden', () => {
     const slotKey = getSlotKey(NODE_ID, SLOT_INDEX, true)
     const hiddenSlot = document.createElement('div')