fix: keep cached link views reactive

Amp-Thread-ID: https://ampcode.com/threads/T-019fef81-c9e1-7658-a571-55818c44c32a

Author: ampagent

docs/architecture/link-topology-store.md

@@ -106,9 +106,7 @@ All `graph.links` mutation funnels through its store-backed `LinkMap` and
 registration/unregistration (and link-layout cleanup on removal).
 `LinkMap` caches its owner-local regular or floating view so rendering can use
 native `Map` reads and snapshot iterators without rebuilding topology on each
-access. Store mutations centrally invalidate the view when its membership
-changes; endpoint-only updates keep the same link objects and do not invalidate
-it.
+access. Store mutations centrally invalidate the reactive view.
 `addFloatingLink` / `removeFloatingLink` apply floating-specific lifecycle
 policy through the same topology collection. `LLink.disconnect` performs the
 equivalent effects inline because it only holds a `LinkNetwork`, and

src/lib/litegraph/src/LGraph.ts

@@ -32,7 +32,7 @@ import {
   observeRerouteId
 } from './idAllocation'
 import type { LGraphState } from './idAllocation'
-import { getLinkStoreRevision, useLinkStore } from '@/stores/linkStore'
+import { useLinkStore } from '@/stores/linkStore'
 import { useNodeDataStore } from '@/stores/nodeDataStore'
 import { useRerouteStore } from '@/stores/rerouteStore'
 import {
@@ -536,15 +536,16 @@ export class LGraph
    * @param o data from previous serialization [optional]
    */
   constructor(o?: ISerialisedGraph | SerialisableGraph) {
+    const linkStore = useLinkStore()
     /** @see MapProxyHandler */
     const links = new LinkMap(
       () => (this.rootGraph ? graphScopeOf(this) : undefined),
       (scope) =>
-        [...useLinkStore().graphTopologies(scope)]
+        [...linkStore.graphTopologies(scope)]
           .filter((topology) => !isFloatingTopology(topology))
           .map(resolveLinkTopology)
           .filter((link): link is LLink => link !== undefined),
-      getLinkStoreRevision,
+      linkStore.getRevision,
       (link) => this._addLink(link),
       (id) => this._removeLink(id)
     )
@@ -558,11 +559,11 @@ export class LGraph
     this.floatingLinks = new LinkMap(
       () => (this.rootGraph ? graphScopeOf(this) : undefined),
       (scope) =>
-        [...useLinkStore().graphTopologies(scope)]
+        [...linkStore.graphTopologies(scope)]
           .filter(isFloatingTopology)
           .map(resolveLinkTopology)
           .filter((link): link is LLink => link !== undefined),
-      getLinkStoreRevision,
+      linkStore.getRevision,
       (link) => this.addFloatingLink(link),
       (id) => {
         const link = this.floatingLinks.get(id)

src/lib/litegraph/src/LLink.store.test.ts

@@ -473,7 +473,7 @@ describe('LLink ↔ linkStore integration', () => {
     )
   })
 
-  it('reuses link views until membership changes', () => {
+  it('reactively updates cached link views', () => {
     const graph = new LGraph()
     const a = new LGraphNode('A')
     const b = new LGraphNode('B')
@@ -482,10 +482,15 @@ describe('LLink ↔ linkStore integration', () => {
     b.addInput('in1', 'INT')
     graph.add(a)
     graph.add(b)
+    const linkCount = computed(() => graph.links.size)
+
+    expect(linkCount.value).toBe(0)
+
     const link = a.connect(0, b, 0)!
     const store = useLinkStore()
     const graphTopologies = vi.spyOn(store, 'graphTopologies')
 
+    expect(linkCount.value).toBe(1)
     expect(graph.links.size).toBe(1)
     const traversalCount = graphTopologies.mock.calls.length
     expect([...graph.links.values()]).toEqual([link])
@@ -495,7 +500,7 @@ describe('LLink ↔ linkStore integration', () => {
     link.target_slot = 1
 
     expect(graph.links.get(link.id)).toBe(link)
-    expect(graphTopologies).toHaveBeenCalledTimes(traversalCount)
+    expect(graphTopologies.mock.calls.length).toBeGreaterThan(traversalCount)
 
     link.target_id = UNASSIGNED_NODE_ID
 

src/stores/linkStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { reactive, toRaw } from 'vue'
+import { reactive, shallowRef, toRaw } from 'vue'
 
 import type {
   GraphScope,
@@ -82,11 +82,6 @@ interface RootTopologyBucket {
 }
 
 const EMPTY_LINKS: ReadonlySet<LinkTopology> = new Set()
-let revision = 0
-
-export function getLinkStoreRevision(): number {
-  return revision
-}
 
 /**
  * A link is keyed by its target input slot only when that slot uniquely
@@ -110,6 +105,11 @@ function hasUniqueTarget(topology: LinkTopology): boolean {
  */
 export const useLinkStore = defineStore('link', () => {
   const roots = reactive(new Map<RootGraphId, RootTopologyBucket>())
+  const revision = shallowRef(0)
+
+  function getRevision(): number {
+    return revision.value
+  }
 
   function rootBucket(rootGraphId: RootGraphId): RootTopologyBucket {
     const existing = roots.get(rootGraphId)
@@ -234,7 +234,7 @@ export const useLinkStore = defineStore('link', () => {
     if (expected) displace(targetBucket, expected)
     const owned = Object.assign(replacement, { graphId: scope.owningGraphId })
     const placed = placeValidated(targetBucket, owned)
-    revision++
+    revision.value++
     return placed
   }
 
@@ -262,7 +262,7 @@ export const useLinkStore = defineStore('link', () => {
     if (!bucket || !ownsPlacement(scope, bucket, topology)) return false
     displace(bucket, topology)
     if (bucket.byId.size === 0) roots.delete(scope.rootGraphId)
-    revision++
+    revision.value++
     return true
   }
 
@@ -339,15 +339,6 @@ export const useLinkStore = defineStore('link', () => {
   ): EndpointUpdateResult<LinkTopology[]> {
     const error = validateEndpointUpdates(scope, updates, removals)
     if (error) return { ok: false, error }
-    const changesLinkView =
-      removals.length > 0 ||
-      updates.some(
-        ({ topology, patch }) =>
-          isFloatingTopology({
-            ...toRaw(topology),
-            ...patchedEndpoints(topology, patch)
-          }) !== isFloatingTopology(topology)
-      )
 
     const bucket = rootBucket(scope.rootGraphId)
     for (const { topology } of updates) displace(bucket, topology)
@@ -358,7 +349,7 @@ export const useLinkStore = defineStore('link', () => {
       return placeValidated(bucket, topology)
     })
     if (bucket.byId.size === 0) roots.delete(scope.rootGraphId)
-    if (changesLinkView) revision++
+    revision.value++
     return { ok: true, value }
   }
 
@@ -438,7 +429,7 @@ export const useLinkStore = defineStore('link', () => {
   }
 
   function clearGraph(graphId: RootGraphId): void {
-    if (roots.delete(graphId)) revision++
+    if (roots.delete(graphId)) revision.value++
   }
 
   function clearOwner(scope: GraphScope): void {
@@ -450,7 +441,7 @@ export const useLinkStore = defineStore('link', () => {
       if (topology) displace(bucket, topology)
     }
     if (bucket.byId.size === 0) roots.delete(scope.rootGraphId)
-    revision++
+    revision.value++
   }
 
   return {
@@ -465,6 +456,7 @@ export const useLinkStore = defineStore('link', () => {
     getOutputSlotLinks,
     getTopology,
     graphTopologies,
+    getRevision,
     clearOwner,
     clearGraph
   }