Merge branch 'main' into test/fe-741-grid-thumbnail-e2e

browser_tests/tests/subgraph/subgraphLifecycle.spec.ts

@@ -1,9 +1,6 @@
-import type { ConsoleMessage } from '@playwright/test'
 import { expect } from '@playwright/test'
 
-import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
-import { TestIds } from '@e2e/fixtures/selectors'
 import { getPseudoPreviewWidgets } from '@e2e/fixtures/utils/promotedWidgets'
 
 const domPreviewSelector = '.image-preview'
@@ -98,147 +95,4 @@ test.describe('Subgraph Lifecycle', { tag: ['@subgraph'] }, () => {
       await expect(comfyPage.page.locator(domPreviewSelector)).toHaveCount(0)
     })
   })
-
-  test.describe('Detach Race Repro', { tag: ['@vue-nodes'] }, () => {
-    const SUBGRAPH_NODE_TITLE = 'New Subgraph'
-
-    // Queues legacy onNodeRemoved/onSelectionChange so unpack completes first,
-    // widening the race window so a guard regression deterministically surfaces.
-    async function deferLegacyHandlers(comfyPage: ComfyPage) {
-      return await comfyPage.page.evaluateHandle(() => {
-        const graph = window.app!.graph!
-        const canvas = window.app!.canvas!
-        const queue: Array<() => void> = []
-        const originalNodeRemoved = graph.onNodeRemoved
-        const originalSelectionChange = canvas.onSelectionChange
-        graph.onNodeRemoved = function (node) {
-          queue.push(() => originalNodeRemoved?.call(this, node))
-        }
-        canvas.onSelectionChange = function (selected) {
-          queue.push(() => originalSelectionChange?.call(this, selected))
-        }
-        return {
-          drain: () => {
-            for (const fn of queue.splice(0)) fn()
-          },
-          restore: () => {
-            graph.onNodeRemoved = originalNodeRemoved
-            canvas.onSelectionChange = originalSelectionChange
-          }
-        }
-      })
-    }
-
-    function isNullGraphErrorText(text: string): boolean {
-      return text.includes('NullGraphError') || text.endsWith('has no graph')
-    }
-
-    // Vue's default errorHandler routes render throws to console.error,
-    // not pageerror - listen to both.
-    function captureNullGraphErrors(comfyPage: ComfyPage) {
-      const captured: string[] = []
-      const onPageError = (err: Error) => {
-        if (
-          err.name === 'NullGraphError' ||
-          isNullGraphErrorText(err.message ?? '')
-        ) {
-          captured.push(`pageerror ${err.name}: ${err.message}`)
-        }
-      }
-      const onConsoleMessage = (msg: ConsoleMessage) => {
-        if (msg.type() !== 'error') return
-        const text = msg.text()
-        if (isNullGraphErrorText(text)) {
-          captured.push(`console.error: ${text}`)
-        }
-      }
-      comfyPage.page.on('pageerror', onPageError)
-      comfyPage.page.on('console', onConsoleMessage)
-      return {
-        getErrors: () => [...captured],
-        stop: () => {
-          comfyPage.page.off('pageerror', onPageError)
-          comfyPage.page.off('console', onConsoleMessage)
-        }
-      }
-    }
-
-    async function unpackViaContextMenu(comfyPage: ComfyPage, title: string) {
-      const fixture = await comfyPage.vueNodes.getFixtureByTitle(title)
-      await comfyPage.contextMenu.openForVueNode(fixture.header)
-      await comfyPage.contextMenu.clickMenuItemExact('Unpack Subgraph')
-    }
-
-    async function unpackAndCaptureErrors(
-      comfyPage: ComfyPage
-    ): Promise<string[]> {
-      const subgraphNode =
-        comfyPage.vueNodes.getNodeByTitle(SUBGRAPH_NODE_TITLE)
-      const errors = captureNullGraphErrors(comfyPage)
-      const deferred = await deferLegacyHandlers(comfyPage)
-      try {
-        await unpackViaContextMenu(comfyPage, SUBGRAPH_NODE_TITLE)
-        await expect(subgraphNode).toHaveCount(0)
-        await deferred.evaluate((handlers) => handlers.drain())
-        // Let drained-handler reactive flushes settle before stop().
-        await comfyPage.nextFrame()
-        return errors.getErrors()
-      } finally {
-        await deferred.evaluate((handlers) => handlers.restore())
-        await deferred.dispose()
-        errors.stop()
-      }
-    }
-
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.RightSidePanel.IsOpen', true)
-      await comfyPage.workflow.loadWorkflow(
-        'subgraphs/subgraph-with-promoted-text-widget'
-      )
-      const subgraphNode =
-        comfyPage.vueNodes.getNodeByTitle(SUBGRAPH_NODE_TITLE)
-      await expect(subgraphNode).toBeVisible()
-
-      const fixture =
-        await comfyPage.vueNodes.getFixtureByTitle(SUBGRAPH_NODE_TITLE)
-      await fixture.header.click()
-      await expect(
-        comfyPage.page.getByTestId(TestIds.propertiesPanel.root)
-      ).toBeVisible()
-      await comfyPage.nextFrame()
-    })
-
-    test('unpack does not surface NullGraphError on the LGraphNode render path', async ({
-      comfyPage
-    }) => {
-      const nullGraphErrors = await unpackAndCaptureErrors(comfyPage)
-      expect(
-        nullGraphErrors,
-        'LGraphNode render path: detach race must not surface NullGraphError'
-      ).toEqual([])
-    })
-
-    test('unpack does not surface NullGraphError from the TabSubgraphInputs panel', async ({
-      comfyPage
-    }) => {
-      const nullGraphErrors = await unpackAndCaptureErrors(comfyPage)
-      expect(
-        nullGraphErrors,
-        'TabSubgraphInputs panel: detach race must not surface NullGraphError'
-      ).toEqual([])
-    })
-
-    test('unpack with subgraph editor open does not surface NullGraphError from the SubgraphEditor panel', async ({
-      comfyPage
-    }) => {
-      await comfyPage.page.getByTestId(TestIds.subgraphEditor.toggle).click()
-      await comfyPage.nextFrame()
-
-      const nullGraphErrors = await unpackAndCaptureErrors(comfyPage)
-      expect(
-        nullGraphErrors,
-        'SubgraphEditor panel: detach race must not surface NullGraphError'
-      ).toEqual([])
-    })
-  })
 })

browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts

@@ -180,4 +180,44 @@ test.describe('Vue Nodes Batch Image Preview', { tag: '@vue-nodes' }, () => {
       await expect.poll(() => countColumns(node.imageGrid)).toBeLessThan(10)
     }
   )
+
+  wstest(
+    'requests lightweight thumbnail URLs for grid cells',
+    async ({ comfyPage, getWebSocket }) => {
+      const execution = new ExecutionHelper(comfyPage, await getWebSocket())
+
+      await test.step('Add node', async () => {
+        await comfyPage.menu.topbar.newWorkflowButton.click()
+        await comfyPage.nextFrame()
+
+        await comfyPage.searchBoxV2.addNode('Preview Image')
+        const previewImage = comfyPage.vueNodes.getNodeByTitle('Preview Image')
+        await expect(previewImage).toBeVisible()
+      })
+
+      const node = await comfyPage.vueNodes.getFixtureByTitle('Preview Image')
+      const gridImages = node.imageGrid.locator('img')
+
+      await test.step('Inject a multi-image grid', async () => {
+        const images = Array.from({ length: 4 }, (_, index) => ({
+          filename: `grid-${index}.png`,
+          subfolder: '',
+          type: 'output'
+        }))
+        execution.executed('', '1', { images })
+        await expect(gridImages).toHaveCount(4)
+      })
+
+      // FE-741: small on-node grid cells must request a server re-encoded
+      // thumbnail (`preview=webp;75`, `;` may be percent-encoded) instead of
+      // downloading the full-resolution image, while still pointing at the
+      // real `/api/view` URL for that output. Verifies the full path: WS
+      // output -> nodeOutputStore.buildImageUrls -> getGridThumbnailUrl ->
+      // rendered grid `<img>`.
+      for (const cell of await gridImages.all()) {
+        await expect(cell).toHaveAttribute('src', /[?&]preview=webp(%3B|;)75/)
+        await expect(cell).toHaveAttribute('src', /[?&]filename=grid-\d+\.png/)
+      }
+    }
+  )
 })

src/composables/graph/useGraphNodeManager.test.ts

@@ -776,55 +776,3 @@ describe('reconcileNodeErrorFlags (via lastNodeErrors watcher)', () => {
     expect(subgraphNode.has_errors).toBe(true)
   })
 })
-
-describe('Pre-remove vueNodeData drain', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false }))
-  })
-
-  it('drops vueNodeData entry before node.onRemoved fires', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-    graph.add(node)
-    const { vueNodeData } = useGraphNodeManager(graph)
-
-    expect(vueNodeData.has(String(node.id))).toBe(true)
-
-    let dataPresentInOnRemoved: boolean | undefined
-    node.onRemoved = () => {
-      dataPresentInOnRemoved = vueNodeData.has(String(node.id))
-    }
-
-    graph.remove(node)
-
-    expect(
-      dataPresentInOnRemoved,
-      'vueNodeData entry must be cleared before node.onRemoved fires so reactive consumers cannot observe the detached node'
-    ).toBe(false)
-  })
-
-  it('clears vueNodeData when LGraph.clear() dispatches node:before-removed for each node', () => {
-    const graph = new LGraph()
-    const nodeA = new LGraphNode('a')
-    const nodeB = new LGraphNode('b')
-    graph.add(nodeA)
-    graph.add(nodeB)
-    const { vueNodeData } = useGraphNodeManager(graph)
-
-    expect(vueNodeData.size).toBe(2)
-
-    const beforeRemovedSpy = vi.fn()
-    graph.events.addEventListener('node:before-removed', beforeRemovedSpy)
-
-    graph.clear()
-
-    expect(
-      beforeRemovedSpy,
-      'clear() must dispatch node:before-removed so reactive consumers can drop refs before nodes detach'
-    ).toHaveBeenCalledTimes(2)
-    expect(
-      vueNodeData.size,
-      'node:before-removed listener must drain vueNodeData when clear() removes every node'
-    ).toBe(0)
-  })
-})

src/composables/graph/useGraphNodeManager.ts

@@ -631,20 +631,27 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     }
   }
 
-  const dropNodeReferences = (node: LGraphNode) => {
-    const id = String(node.id)
-    nodeRefs.delete(id)
-    vueNodeData.delete(id)
-  }
-
+  /**
+   * Handles node removal from the graph - cleans up all references
+   */
   const handleNodeRemoved = (
     node: LGraphNode,
     originalCallback?: (node: LGraphNode) => void
   ) => {
     const id = String(node.id)
+
+    // Remove node from layout store
     setSource(LayoutSource.Canvas)
     void deleteNode(id)
-    originalCallback?.(node)
+
+    // Clean up all tracking references
+    nodeRefs.delete(id)
+    vueNodeData.delete(id)
+
+    // Call original callback if provided
+    if (originalCallback) {
+      originalCallback(node)
+    }
   }
 
   /**
@@ -667,6 +674,9 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     }
   }
 
+  /**
+   * Sets up event listeners - now simplified with extracted handlers
+   */
   const setupEventListeners = (): (() => void) => {
     // Store original callbacks
     const originalOnNodeAdded = graph.onNodeAdded
@@ -682,16 +692,6 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
       handleNodeRemoved(node, originalOnNodeRemoved)
     }
 
-    const beforeNodeRemovedListener = (
-      e: CustomEvent<{ node: LGraphNode }>
-    ) => {
-      dropNodeReferences(e.detail.node)
-    }
-    graph.events.addEventListener(
-      'node:before-removed',
-      beforeNodeRemovedListener
-    )
-
     const triggerHandlers: {
       [K in LGraphTriggerAction]: (event: LGraphTriggerParam<K>) => void
     } = {
@@ -840,19 +840,12 @@ export function useGraphNodeManager(graph: LGraph): GraphNodeManager {
     // Initialize state
     syncWithGraph()
 
-    const cleanup = createCleanupFunction(
+    // Return cleanup function
+    return createCleanupFunction(
       originalOnNodeAdded || undefined,
       originalOnNodeRemoved || undefined,
       originalOnTrigger || undefined
     )
-
-    return () => {
-      graph.events.removeEventListener(
-        'node:before-removed',
-        beforeNodeRemovedListener
-      )
-      cleanup()
-    }
   }
 
   // Set up event listeners immediately

src/composables/node/usePromotedPreviews.test.ts

@@ -137,18 +137,6 @@ describe(usePromotedPreviews, () => {
     expect(promotedPreviews.value).toEqual([])
   })
 
-  it('returns empty array (does not throw) when SubgraphNode is detached', () => {
-    const setup = createSetup()
-    const parentGraph = setup.subgraphNode.graph!
-    parentGraph.add(setup.subgraphNode)
-    parentGraph.remove(setup.subgraphNode)
-
-    expect(setup.subgraphNode.graph).toBeNull()
-    const { promotedPreviews } = usePromotedPreviews(() => setup.subgraphNode)
-    expect(() => promotedPreviews.value).not.toThrow()
-    expect(promotedPreviews.value).toEqual([])
-  })
-
   it('returns empty array when no $$ promotions exist', () => {
     const setup = createSetup()
     addInteriorNode(setup, { id: 10 })

src/composables/node/usePromotedPreviews.ts

@@ -68,7 +68,6 @@ export function usePromotedPreviews(
   const promotedPreviews = computed((): PromotedPreview[] => {
     const node = toValue(lgraphNode)
     if (!(node instanceof SubgraphNode)) return []
-    if (node.isDetached) return []
 
     const rootGraphId = node.rootGraph.id
     const hostLocator = String(node.id)

src/core/graph/subgraph/promotionUtils.test.ts

@@ -478,22 +478,6 @@ describe('hasUnpromotedWidgets', () => {
 
     expect(hasUnpromotedWidgets(subgraphNode)).toBe(false)
   })
-
-  it('returns false (does not throw) when SubgraphNode is detached', () => {
-    const subgraph = createTestSubgraph()
-    const subgraphNode = createTestSubgraphNode(subgraph)
-    const parentGraph = subgraphNode.graph!
-    parentGraph.add(subgraphNode)
-    const interiorNode = new LGraphNode('InnerNode')
-    subgraph.add(interiorNode)
-    interiorNode.addWidget('text', 'seed', '123', () => {})
-
-    parentGraph.remove(subgraphNode)
-
-    expect(subgraphNode.graph).toBeNull()
-    expect(() => hasUnpromotedWidgets(subgraphNode)).not.toThrow()
-    expect(hasUnpromotedWidgets(subgraphNode)).toBe(false)
-  })
 })
 
 describe('isLinkedPromotion', () => {

src/core/graph/subgraph/promotionUtils.ts

@@ -562,7 +562,6 @@ export function pruneDisconnected(subgraphNode: SubgraphNode) {
 }
 
 export function hasUnpromotedWidgets(subgraphNode: SubgraphNode): boolean {
-  if (subgraphNode.isDetached) return false
   const { subgraph } = subgraphNode
 
   return subgraph.nodes.some((interiorNode) =>

src/extensions/core/load3d.test.ts

@@ -173,7 +173,7 @@ function makePreview3DAdvancedNode(
     constructor: { comfyClass: overrides.comfyClass ?? 'Preview3DAdvanced' },
     size: [400, 550],
     setSize: vi.fn(),
-    widgets: overrides.widgets ?? [{ name: 'viewport_state', value: '' }],
+    widgets: overrides.widgets ?? [{ name: 'image', value: '' }],
     properties: overrides.properties ?? {}
   } as unknown as LGraphNode
 }
@@ -783,9 +783,9 @@ describe('Comfy.Preview3DAdvanced.nodeCreated', () => {
     expect(load3dInstance.setCameraState).not.toHaveBeenCalled()
   })
 
-  it('attaches a camera-only serializeValue to the viewport_state widget', async () => {
+  it('attaches a camera-only serializeValue to the image widget', async () => {
     const { preview3DAdvancedExt } = await loadExtensionsFresh()
-    const widgets: FakeWidget[] = [{ name: 'viewport_state', value: '' }]
+    const widgets: FakeWidget[] = [{ name: 'image', value: '' }]
     const node = makePreview3DAdvancedNode({ widgets })
 
     await preview3DAdvancedExt.nodeCreated(node)
@@ -795,7 +795,7 @@ describe('Comfy.Preview3DAdvanced.nodeCreated', () => {
 
   it('serializeValue returns live camera_info plus empty media fields, omitting model_3d_info when none', async () => {
     const { preview3DAdvancedExt } = await loadExtensionsFresh()
-    const widgets: FakeWidget[] = [{ name: 'viewport_state', value: '' }]
+    const widgets: FakeWidget[] = [{ name: 'image', value: '' }]
     const node = makePreview3DAdvancedNode({ widgets })
 
     const load3d = makeLoad3dMock()
@@ -819,7 +819,7 @@ describe('Comfy.Preview3DAdvanced.nodeCreated', () => {
 
   it('serializeValue wraps a present getModelInfo result in a single-element list', async () => {
     const { preview3DAdvancedExt } = await loadExtensionsFresh()
-    const widgets: FakeWidget[] = [{ name: 'viewport_state', value: '' }]
+    const widgets: FakeWidget[] = [{ name: 'image', value: '' }]
     const node = makePreview3DAdvancedNode({ widgets })
 
     const load3d = makeLoad3dMock()

src/extensions/core/load3d.ts

@@ -270,16 +270,8 @@ useExtensionService().registerExtension({
     }
   ],
   getCustomWidgets() {
-    const VIEWPORT_STATE_NODES = new Set([
-      'Preview3DAdvanced',
-      'PreviewGaussianSplat',
-      'PreviewPointCloud'
-    ])
     return {
       LOAD_3D(node) {
-        const inputName = VIEWPORT_STATE_NODES.has(node.constructor.comfyClass)
-          ? 'viewport_state'
-          : 'image'
         const hasModelFileWidget = node.widgets?.some(
           (w) => w.name === 'model_file'
         )
@@ -324,9 +316,9 @@ useExtensionService().registerExtension({
 
         const widget = new ComponentWidgetImpl({
           node: node,
-          name: inputName,
+          name: 'image',
           component: Load3D,
-          inputSpec: { ...inputSpecLoad3D, name: inputName },
+          inputSpec: inputSpecLoad3D,
           options: {}
         })
 
@@ -723,7 +715,7 @@ useExtensionService().registerExtension({
     })
 
     useLoad3d(node).waitForLoad3d((load3d) => {
-      const sceneWidget = node.widgets?.find((w) => w.name === 'viewport_state')
+      const sceneWidget = node.widgets?.find((w) => w.name === 'image')
       if (!sceneWidget) return
 
       const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d

src/extensions/core/load3dPreviewExtensions.test.ts

@@ -186,7 +186,7 @@ describe('Comfy.PreviewGaussianSplat.nodeCreated', () => {
 
     expect(node.properties['Last Time Model File']).toBe('scene.ply')
     expect(configureForSaveMeshMock).toHaveBeenLastCalledWith(
-      'temp',
+      'output',
       'scene.ply',
       expect.objectContaining({ silentOnNotFound: true })
     )
@@ -231,7 +231,7 @@ describe('Comfy.PreviewGaussianSplat.nodeCreated', () => {
     const node = makePreviewNode({
       widgets: [
         { name: 'model_file', value: '' },
-        { name: 'viewport_state', value: '' },
+        { name: 'image', value: '' },
         widthWidget,
         heightWidget
       ]
@@ -262,7 +262,7 @@ describe('Comfy.PreviewGaussianSplat.nodeCreated', () => {
     )
     const sceneWidget: FakeWidget & {
       serializeValue?: () => Promise<unknown>
-    } = { name: 'viewport_state', value: '' }
+    } = { name: 'image', value: '' }
     const node = makePreviewNode({
       widgets: [{ name: 'model_file', value: '' }, sceneWidget]
     })
@@ -318,7 +318,7 @@ describe('Comfy.PreviewPointCloud.nodeCreated', () => {
 
     expect(node.properties['Last Time Model File']).toBe('pointcloud.ply')
     expect(configureForSaveMeshMock).toHaveBeenLastCalledWith(
-      'temp',
+      'output',
       'pointcloud.ply',
       expect.objectContaining({ silentOnNotFound: true })
     )

src/extensions/core/load3dPreviewExtensions.ts

@@ -46,7 +46,7 @@ function applyResultToLoad3d(
   }
 
   const config = new Load3DConfiguration(load3d, node.properties)
-  config.configureForSaveMesh('temp', normalizedPath, {
+  config.configureForSaveMesh('output', normalizedPath, {
     silentOnNotFound: true
   })
 
@@ -119,7 +119,7 @@ function createPreview3DExtension(
         if (!lastTimeModelFile) return
 
         const config = new Load3DConfiguration(load3d, node.properties)
-        config.configureForSaveMesh('temp', lastTimeModelFile as string, {
+        config.configureForSaveMesh('output', lastTimeModelFile as string, {
           silentOnNotFound: true
         })
 
@@ -136,9 +136,7 @@ function createPreview3DExtension(
       })
 
       waitForLoad3d((load3d) => {
-        const sceneWidget = node.widgets?.find(
-          (w) => w.name === 'viewport_state'
-        )
+        const sceneWidget = node.widgets?.find((w) => w.name === 'image')
         const widthWidget = node.widgets?.find((w) => w.name === 'width')
         const heightWidget = node.widgets?.find((w) => w.name === 'height')
 

src/lib/litegraph/src/LGraph.test.ts

@@ -5,7 +5,6 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import type { NodeId, Subgraph } from '@/lib/litegraph/src/litegraph'
 import {
   LGraph,
-  LGraphGroup,
   LGraphNode,
   LiteGraph,
   LLink,
@@ -326,96 +325,6 @@ describe('Graph Clearing and Callbacks', () => {
   })
 })
 
-describe('node:before-removed event', () => {
-  it('fires node:before-removed for a successful node removal', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-    graph.add(node)
-
-    const events: { node: LGraphNode; graphAtDispatch: unknown }[] = []
-    graph.events.addEventListener('node:before-removed', (e) => {
-      events.push({
-        node: e.detail.node,
-        graphAtDispatch: e.detail.node.graph
-      })
-    })
-
-    graph.remove(node)
-
-    expect(events).toHaveLength(1)
-    expect(events[0].node).toBe(node)
-    expect(events[0].graphAtDispatch).toBe(graph)
-    expect(node.graph).toBeNull()
-  })
-
-  it('does not fire node:before-removed for a node not in the graph', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-
-    const fired = vi.fn()
-    graph.events.addEventListener('node:before-removed', fired)
-
-    graph.remove(node)
-
-    expect(fired).not.toHaveBeenCalled()
-  })
-
-  it('does not fire node:before-removed when removing an LGraphGroup', () => {
-    const graph = new LGraph()
-    const group = new LGraphGroup('test-group')
-    graph.add(group)
-
-    const fired = vi.fn()
-    graph.events.addEventListener('node:before-removed', fired)
-
-    graph.remove(group)
-
-    expect(fired).not.toHaveBeenCalled()
-  })
-
-  it('does not fire node:before-removed when ignore_remove is set', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-    graph.add(node)
-    node.ignore_remove = true
-
-    const fired = vi.fn()
-    graph.events.addEventListener('node:before-removed', fired)
-
-    graph.remove(node)
-
-    expect(fired).not.toHaveBeenCalled()
-    expect(graph.nodes).toContain(node)
-  })
-
-  it('fires node:before-removed before node.onRemoved and detach', () => {
-    const graph = new LGraph()
-    const node = new LGraphNode('test')
-    graph.add(node)
-
-    const order: string[] = []
-    graph.events.addEventListener('node:before-removed', () => {
-      order.push(
-        `before-removed(graph=${node.graph === graph ? 'set' : 'null'})`
-      )
-    })
-    node.onRemoved = () => {
-      order.push(`onRemoved(graph=${node.graph === graph ? 'set' : 'null'})`)
-    }
-    graph.onNodeRemoved = (n) => {
-      order.push(`onNodeRemoved(graph=${n.graph === null ? 'null' : 'set'})`)
-    }
-
-    graph.remove(node)
-
-    expect(order).toEqual([
-      'before-removed(graph=set)',
-      'onRemoved(graph=set)',
-      'onNodeRemoved(graph=null)'
-    ])
-  })
-})
-
 describe('Subgraph Definition Garbage Collection', () => {
   beforeEach(() => {
     setActivePinia(createTestingPinia({ stubActions: false }))
@@ -468,53 +377,6 @@ describe('Subgraph Definition Garbage Collection', () => {
     expect(graphRemovedNodeIds.size).toBe(2)
   })
 
-  it('subgraph-definition GC dispatches node:before-removed on the inner subgraph for each inner node', () => {
-    const rootGraph = new LGraph()
-    const { subgraph, innerNodes } = createSubgraphWithNodes(rootGraph, 2)
-
-    const dispatched: { node: LGraphNode; graphAtDispatch: unknown }[] = []
-    subgraph.events.addEventListener('node:before-removed', (e) => {
-      dispatched.push({
-        node: e.detail.node,
-        graphAtDispatch: e.detail.node.graph
-      })
-    })
-
-    const subgraphNode = createTestSubgraphNode(subgraph, { pos: [100, 100] })
-    rootGraph.add(subgraphNode)
-
-    rootGraph.remove(subgraphNode)
-
-    expect(dispatched.map((e) => e.node)).toEqual(innerNodes)
-    for (const entry of dispatched) {
-      expect(entry.graphAtDispatch).toBe(subgraph)
-    }
-  })
-
-  it('subgraph-definition GC dispatches node:before-removed before each inner node onRemoved', () => {
-    const rootGraph = new LGraph()
-    const { subgraph, innerNodes } = createSubgraphWithNodes(rootGraph, 1)
-    const innerNode = innerNodes[0]
-
-    const order: string[] = []
-    subgraph.events.addEventListener('node:before-removed', () => {
-      order.push('before-removed')
-    })
-    innerNode.onRemoved = () => {
-      order.push('onRemoved')
-    }
-    subgraph.onNodeRemoved = () => {
-      order.push('onNodeRemoved')
-    }
-
-    const subgraphNode = createTestSubgraphNode(subgraph, { pos: [100, 100] })
-    rootGraph.add(subgraphNode)
-
-    rootGraph.remove(subgraphNode)
-
-    expect(order).toEqual(['before-removed', 'onRemoved', 'onNodeRemoved'])
-  })
-
   it('subgraph definition is removed when SubgraphNode is removed', () => {
     const rootGraph = new LGraph()
     const { subgraph } = createSubgraphWithNodes(rootGraph, 1)

src/lib/litegraph/src/LGraph.ts

@@ -175,13 +175,6 @@ export interface BaseLGraph {
   readonly rootGraph: LGraph
 }
 
-function fireNodeRemovalLifecycle(node: LGraphNode): void {
-  const graph: LGraph | null = node.graph
-  graph?.events.dispatch('node:before-removed', { node })
-  node.onRemoved?.()
-  graph?.onNodeRemoved?.(node)
-}
-
 /**
  * LGraph is the class that contain a full graph. We instantiate one and add nodes to it, and then we can run the execution loop.
  * supported callbacks:
@@ -413,7 +406,8 @@ export class LGraph
     // safe clear
     if (this._nodes) {
       for (const _node of this._nodes) {
-        fireNodeRemovalLifecycle(_node)
+        _node.onRemoved?.()
+        this.onNodeRemoved?.(_node)
       }
     }
 
@@ -1076,8 +1070,6 @@ export class LGraph
     // sure? - almost sure is wrong
     this.beforeChange()
 
-    this.events.dispatch('node:before-removed', { node })
-
     const { inputs, outputs } = node
 
     // disconnect inputs
@@ -1113,7 +1105,10 @@ export class LGraph
       )
 
       if (!hasRemainingReferences) {
-        forEachNode(node.subgraph, fireNodeRemovalLifecycle)
+        forEachNode(node.subgraph, (innerNode) => {
+          innerNode.onRemoved?.()
+          innerNode.graph?.onNodeRemoved?.(innerNode)
+        })
         this.rootGraph.subgraphs.delete(node.subgraph.id)
       }
     }

src/lib/litegraph/src/infrastructure/LGraphEventMap.ts

@@ -1,5 +1,5 @@
 import type { LGraph } from '@/lib/litegraph/src/LGraph'
-import type { LGraphNode, NodeId } from '@/lib/litegraph/src/LGraphNode'
+import type { NodeId } from '@/lib/litegraph/src/LGraphNode'
 import type { LLink, ResolvedConnection } from '@/lib/litegraph/src/LLink'
 import type { ReadOnlyRect } from '@/lib/litegraph/src/interfaces'
 import type { Subgraph } from '@/lib/litegraph/src/subgraph/Subgraph'
@@ -51,13 +51,6 @@ export interface LGraphEventMap {
     closingGraph: LGraph | Subgraph
   }
 
-  /**
-   * Fires on the owning graph before per-node teardown begins
-   */
-  'node:before-removed': {
-    node: LGraphNode
-  }
-
   'node:property:changed': {
     nodeId: NodeId
     property: string

src/lib/litegraph/src/subgraph/SubgraphNode.test.ts

@@ -79,19 +79,6 @@ describe('SubgraphNode Construction', () => {
     expect(subgraphNode.graph).toBeNull()
   })
 
-  it('should return empty widgets array (not throw) after removal', () => {
-    const subgraph = createTestSubgraph()
-    const subgraphNode = createTestSubgraphNode(subgraph)
-    const parentGraph = subgraphNode.graph!
-    parentGraph.add(subgraphNode)
-
-    parentGraph.remove(subgraphNode)
-
-    expect(subgraphNode.graph).toBeNull()
-    expect(() => subgraphNode.widgets).not.toThrow()
-    expect(subgraphNode.widgets).toEqual([])
-  })
-
   subgraphTest(
     'should synchronize slots with subgraph definition',
     ({ subgraphWithNode }) => {

src/lib/litegraph/src/subgraph/SubgraphNode.ts

@@ -77,10 +77,6 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
     return this.graph.rootGraph
   }
 
-  get isDetached(): boolean {
-    return !this.graph
-  }
-
   override get displayType(): string {
     return 'Subgraph node'
   }
@@ -203,7 +199,6 @@ export class SubgraphNode extends LGraphNode implements BaseLGraph {
   }
 
   private _getPromotedViews(): PromotedWidgetView[] {
-    if (this.isDetached) return []
     const cachedViews = this._promotedViewsCache
     if (cachedViews?.version === this._cacheVersion) return cachedViews.views
 

src/renderer/core/canvas/canvasStore.test.ts

@@ -1,10 +1,7 @@
 import { createTestingPinia } from '@pinia/testing'
 import { setActivePinia } from 'pinia'
-import { nextTick } from 'vue'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import type { LGraphCanvas, Positionable } from '@/lib/litegraph/src/litegraph'
-import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
 import { LGraphGroup } from '@/lib/litegraph/src/LGraphGroup'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 
@@ -88,42 +85,6 @@ describe('useCanvasStore', () => {
       expect(originalHandler).toHaveBeenCalledWith(2.0, app.canvas.ds.offset)
     })
   })
-
-  describe('node:before-removed selection cleanup', () => {
-    it('removes the node from store.selectedItems before its onRemoved fires', async () => {
-      const graph = new LGraph()
-      const node = new LGraphNode('test')
-      graph.add(node)
-
-      const selectedItems = new Set<Positionable>([node])
-      const fakeCanvas = {
-        canvas: document.createElement('canvas'),
-        graph,
-        selectedItems,
-        deselect: vi.fn((item: Positionable) => {
-          selectedItems.delete(item)
-        })
-      }
-      store.canvas = fakeCanvas as unknown as LGraphCanvas
-      await nextTick()
-      store.updateSelectedItems()
-      expect(store.selectedItems).toContain(node)
-
-      let stillSelectedInOnRemoved: boolean | undefined
-      node.onRemoved = () => {
-        stillSelectedInOnRemoved = store.selectedItems.includes(node)
-      }
-
-      graph.remove(node)
-
-      expect(
-        stillSelectedInOnRemoved,
-        'selectedItems must not contain the node when onRemoved fires'
-      ).toBe(false)
-      expect(store.selectedItems).toEqual([])
-    })
-  })
-
   it('Does not include groups in selected nodeIds', async () => {
     store.selectedItems = [new LGraphGroup()]
 

src/renderer/core/canvas/canvasStore.ts

@@ -131,18 +131,6 @@ export const useCanvasStore = defineStore('canvas', () => {
   whenever(
     () => canvas.value,
     (newCanvas) => {
-      currentGraph.value = newCanvas.graph
-      // Scoped to the on-screen graph: selection only holds items from it,
-      // so removals in other graphs can't affect the live selection.
-      useEventListener(
-        () => currentGraph.value?.events,
-        'node:before-removed',
-        (e: CustomEvent<{ node: LGraphNode }>) => {
-          newCanvas.deselect(e.detail.node)
-          updateSelectedItems()
-        }
-      )
-
       useEventListener(
         newCanvas.canvas,
         'litegraph:set-graph',