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)
2026-02-23 16:24:06 +00:00 · 2025-09-22 13:15:33 -07:00
parent f086377307
commit e5d4d07d32
9 changed files with 61 additions and 239 deletions
--- a/src/composables/graph/useGraphNodeManager.ts
+++ b/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,