Refactor: More state management simplification (#5721)

## Summary

Remove more procedural synchronization in favor of using reactive
references.

> Note: Also includes some fixes for issues caused during HMR.

## Review Focus

In testing it seems to work the same, but let me know if I missed
something.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5721-Refactor-More-state-management-simplification-2766d73d3650819b8d7ddc047c460f2b)
by [Unito](https://www.unito.io)

src/composables/graph/useGraphNodeManager.ts

@@ -72,8 +72,6 @@ export interface GraphNodeManager {
   // Reactive state - safe data extracted from LiteGraph nodes
   vueNodeData: ReadonlyMap<string, VueNodeData>
   nodeState: ReadonlyMap<string, NodeState>
-  nodePositions: ReadonlyMap<string, { x: number; y: number }>
-  nodeSizes: ReadonlyMap<string, { width: number; height: number }>
 
   // Access to original LiteGraph nodes (non-reactive)
   getNode(id: string): LGraphNode | undefined
@@ -88,7 +86,6 @@ export interface GraphNodeManager {
     priority?: 'critical' | 'normal' | 'low'
   ): void
   forceSync(): void
-  detectChangesInRAF(): void
 
   // Spatial queries
   getVisibleNodeIds(viewportBounds: Bounds): Set<string>
@@ -101,17 +98,12 @@ export interface GraphNodeManager {
   getSpatialIndexDebugInfo(): SpatialIndexDebugInfo | null
 }
 
-export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
+export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
   // Get layout mutations composable
-  const { moveNode, resizeNode, createNode, deleteNode, setSource } =
-    useLayoutMutations()
+  const { createNode, deleteNode, setSource } = useLayoutMutations()
   // Safe reactive data extracted from LiteGraph nodes
   const vueNodeData = reactive(new Map<string, VueNodeData>())
   const nodeState = reactive(new Map<string, NodeState>())
-  const nodePositions = reactive(new Map<string, { x: number; y: number }>())
-  const nodeSizes = reactive(
-    new Map<string, { width: number; height: number }>()
-  )
 
   // Non-reactive storage for original LiteGraph nodes
   const nodeRefs = new Map<string, LGraphNode>()
@@ -365,7 +357,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
   //   }
   //   return metadata
   // }
-
   const scheduleUpdate = (
     nodeId?: string,
     priority: 'critical' | 'normal' | 'low' = 'normal'
@@ -432,8 +423,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
         nodeRefs.delete(id)
         vueNodeData.delete(id)
         nodeState.delete(id)
-        nodePositions.delete(id)
-        nodeSizes.delete(id)
         lastNodesSnapshot.delete(id)
         spatialIndex.remove(id)
       }
@@ -459,8 +448,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
           lastUpdate: performance.now(),
           culled: false
         })
-        nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
-        nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
         attachMetadata(node)
 
         // Add to spatial index
@@ -496,120 +483,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     return visibleIds
   }
 
-  /**
-   * Detects position changes for a single node and updates reactive state
-   */
-  const detectPositionChanges = (node: LGraphNode, id: string): boolean => {
-    const currentPos = nodePositions.get(id)
-
-    if (
-      !currentPos ||
-      currentPos.x !== node.pos[0] ||
-      currentPos.y !== node.pos[1]
-    ) {
-      nodePositions.set(id, { x: node.pos[0], y: node.pos[1] })
-
-      // Push position change to layout store
-      // Source is already set to 'canvas' in detectChangesInRAF
-      void moveNode(id, { x: node.pos[0], y: node.pos[1] })
-
-      return true
-    }
-    return false
-  }
-
-  /**
-   * Detects size changes for a single node and updates reactive state
-   */
-  const detectSizeChanges = (node: LGraphNode, id: string): boolean => {
-    const currentSize = nodeSizes.get(id)
-
-    if (
-      !currentSize ||
-      currentSize.width !== node.size[0] ||
-      currentSize.height !== node.size[1]
-    ) {
-      nodeSizes.set(id, { width: node.size[0], height: node.size[1] })
-
-      // Push size change to layout store
-      // Source is already set to 'canvas' in detectChangesInRAF
-      void resizeNode(id, {
-        width: node.size[0],
-        height: node.size[1]
-      })
-
-      return true
-    }
-    return false
-  }
-
-  /**
-   * Updates spatial index for a node if bounds changed
-   */
-  const updateSpatialIndex = (node: LGraphNode, id: string): void => {
-    const bounds: Bounds = {
-      x: node.pos[0],
-      y: node.pos[1],
-      width: node.size[0],
-      height: node.size[1]
-    }
-    spatialIndex.update(id, bounds)
-  }
-
-  /**
-   * Updates performance metrics after change detection
-   */
-  const updatePerformanceMetrics = (
-    startTime: number,
-    positionUpdates: number,
-    sizeUpdates: number
-  ): void => {
-    const endTime = performance.now()
-    performanceMetrics.updateTime = endTime - startTime
-    performanceMetrics.nodeCount = vueNodeData.size
-    performanceMetrics.culledCount = Array.from(nodeState.values()).filter(
-      (state) => state.culled
-    ).length
-    spatialMetrics.nodesInIndex = spatialIndex.size
-
-    if (positionUpdates > 0 || sizeUpdates > 0) {
-      performanceMetrics.rafUpdateCount++
-    }
-  }
-
-  /**
-   * Main RAF change detection function
-   */
-  const detectChangesInRAF = () => {
-    const startTime = performance.now()
-
-    if (!graph?._nodes) return
-
-    let positionUpdates = 0
-    let sizeUpdates = 0
-
-    // Set source for all canvas-driven updates
-    setSource(LayoutSource.Canvas)
-
-    // Process each node for changes
-    for (const node of graph._nodes) {
-      const id = String(node.id)
-
-      const posChanged = detectPositionChanges(node, id)
-      const sizeChanged = detectSizeChanges(node, id)
-
-      if (posChanged) positionUpdates++
-      if (sizeChanged) sizeUpdates++
-
-      // Update spatial index if geometry changed
-      if (posChanged || sizeChanged) {
-        updateSpatialIndex(node, id)
-      }
-    }
-
-    updatePerformanceMetrics(startTime, positionUpdates, sizeUpdates)
-  }
-
   /**
    * Handles node addition to the graph - sets up Vue state and spatial indexing
    * Defers position extraction until after potential configure() calls
@@ -642,8 +515,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
       const nodePosition = { x: node.pos[0], y: node.pos[1] }
       const nodeSize = { width: node.size[0], height: node.size[1] }
 
-      nodePositions.set(id, nodePosition)
-      nodeSizes.set(id, nodeSize)
       attachMetadata(node)
 
       // Add to spatial index for viewport culling with final positions
@@ -709,8 +580,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
     nodeRefs.delete(id)
     vueNodeData.delete(id)
     nodeState.delete(id)
-    nodePositions.delete(id)
-    nodeSizes.delete(id)
     lastNodesSnapshot.delete(id)
 
     // Call original callback if provided
@@ -743,8 +612,6 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
       nodeRefs.clear()
       vueNodeData.clear()
       nodeState.clear()
-      nodePositions.clear()
-      nodeSizes.clear()
       lastNodesSnapshot.clear()
       pendingUpdates.clear()
       criticalUpdates.clear()
@@ -846,14 +713,11 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => {
   return {
     vueNodeData,
     nodeState,
-    nodePositions,
-    nodeSizes,
     getNode,
     setupEventListeners,
     cleanup,
     scheduleUpdate,
     forceSync: syncWithGraph,
-    detectChangesInRAF,
     getVisibleNodeIds,
     performanceMetrics,
     spatialMetrics,

src/composables/graph/useViewportCulling.ts

@@ -6,21 +6,18 @@
  * 2. Set display none on element to avoid cascade resolution overhead
  * 3. Only run when transform changes (event driven)
  */
+import { useThrottleFn } from '@vueuse/core'
 import { computed } from 'vue'
 
 import { useVueNodeLifecycle } from '@/composables/graph/useVueNodeLifecycle'
-import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { app as comfyApp } from '@/scripts/app'
 
 export function useViewportCulling() {
   const canvasStore = useCanvasStore()
-  const { shouldRenderVueNodes } = useVueFeatureFlags()
-  const { vueNodeData, nodeDataTrigger, nodeManager } = useVueNodeLifecycle()
+  const { vueNodeData, nodeManager } = useVueNodeLifecycle()
 
   const allNodes = computed(() => {
-    if (!shouldRenderVueNodes.value) return []
-    void nodeDataTrigger.value // Force re-evaluation when nodeManager initializes
     return Array.from(vueNodeData.value.values())
   })
 
@@ -28,7 +25,7 @@ export function useViewportCulling() {
    * Update visibility of all nodes based on viewport
    * Queries DOM directly - no cache maintenance needed
    */
-  const updateVisibility = () => {
+  function updateVisibility() {
     if (!nodeManager.value || !canvasStore.canvas || !comfyApp.canvas) return
 
     const canvas = canvasStore.canvas
@@ -70,31 +67,17 @@ export function useViewportCulling() {
     }
   }
 
+  const updateVisibilityDebounced = useThrottleFn(updateVisibility, 20)
+
   // RAF throttling for smooth updates during continuous panning
-  let rafId: number | null = null
-
-  /**
-   * Handle transform update - called by TransformPane event
-   * Uses RAF to batch updates for smooth performance
-   */
-  const handleTransformUpdate = () => {
-    if (!shouldRenderVueNodes.value) return
-
-    // Cancel previous RAF if still pending
-    if (rafId !== null) {
-      cancelAnimationFrame(rafId)
-    }
-
-    // Schedule update in next animation frame
-    rafId = requestAnimationFrame(() => {
-      updateVisibility()
-      rafId = null
+  function handleTransformUpdate() {
+    requestAnimationFrame(async () => {
+      await updateVisibilityDebounced()
     })
   }
 
   return {
     allNodes,
-    handleTransformUpdate,
-    updateVisibility
+    handleTransformUpdate
   }
 }

src/composables/graph/useVueNodeLifecycle.ts

@@ -43,15 +43,6 @@ function useVueNodeLifecycleIndividual() {
   // Vue node data state
   const vueNodeData = ref<ReadonlyMap<string, VueNodeData>>(new Map())
   const nodeState = ref<ReadonlyMap<string, NodeState>>(new Map())
-  const nodePositions = ref<ReadonlyMap<string, { x: number; y: number }>>(
-    new Map()
-  )
-  const nodeSizes = ref<ReadonlyMap<string, { width: number; height: number }>>(
-    new Map()
-  )
-
-  // Change detection function
-  const detectChangesInRAF = ref<() => void>(() => {})
 
   // Trigger for forcing computed re-evaluation
   const nodeDataTrigger = ref(0)
@@ -71,9 +62,6 @@ function useVueNodeLifecycleIndividual() {
     // Use the manager's data maps
     vueNodeData.value = manager.vueNodeData
     nodeState.value = manager.nodeState
-    nodePositions.value = manager.nodePositions
-    nodeSizes.value = manager.nodeSizes
-    detectChangesInRAF.value = manager.detectChangesInRAF
 
     // Initialize layout system with existing nodes from active graph
     const nodes = activeGraph._nodes.map((node: LGraphNode) => ({
@@ -137,11 +125,6 @@ function useVueNodeLifecycleIndividual() {
     // Reset reactive maps to clean state
     vueNodeData.value = new Map()
     nodeState.value = new Map()
-    nodePositions.value = new Map()
-    nodeSizes.value = new Map()
-
-    // Reset change detection function
-    detectChangesInRAF.value = () => {}
   }
 
   // Watch for Vue nodes enabled state changes
@@ -236,11 +219,8 @@ function useVueNodeLifecycleIndividual() {
   return {
     vueNodeData,
     nodeState,
-    nodePositions,
-    nodeSizes,
     nodeDataTrigger: readonly(nodeDataTrigger),
     nodeManager: readonly(nodeManager),
-    detectChangesInRAF: readonly(detectChangesInRAF),
     isNodeManagerReady,
 
     // Lifecycle methods