Fix badge position on collapsed nodes (#797)

* Update litegraph (Proper collapsed node handling)

* Add playwright test

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/rightClickMenu.spec.ts

@@ -1,5 +1,6 @@
 import { expect } from '@playwright/test'
 import { comfyPageFixture as test } from './ComfyPage'
+import { NodeBadgeMode } from '../src/types/nodeSource'
 
 test.describe('Canvas Right Click Menu', () => {
   // See https://github.com/comfyanonymous/ComfyUI/issues/3883
@@ -64,6 +65,24 @@ test.describe('Node Right Click Menu', () => {
     )
   })
 
+  test('Can collapse (Node Badge)', async ({ comfyPage }) => {
+    await comfyPage.setSetting(
+      'Comfy.NodeBadge.NodeIdBadgeMode',
+      NodeBadgeMode.ShowAll
+    )
+    await comfyPage.setSetting(
+      'Comfy.NodeBadge.NodeSourceBadgeMode',
+      NodeBadgeMode.ShowAll
+    )
+
+    await comfyPage.rightClickEmptyLatentNode()
+    await comfyPage.page.getByText('Collapse').click()
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot(
+      'right-click-node-collapsed-badge.png'
+    )
+  })
+
   test('Can bypass', async ({ comfyPage }) => {
     await comfyPage.rightClickEmptyLatentNode()
     await expect(comfyPage.canvas).toHaveScreenshot('right-click-node.png')

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.2.49",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-        "@comfyorg/litegraph": "^0.7.70",
+        "@comfyorg/litegraph": "^0.7.71",
         "@primevue/themes": "^4.0.5",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vueuse/core": "^11.0.0",
@@ -1909,9 +1909,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.7.70",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.70.tgz",
-      "integrity": "sha512-v+Et39tqTVCovdKTHCAvlr7pxgyJ4Wpx/vkFXxBf97HmawiHjA+Av2mbWY1ZFluKOcbIuqf9Qo0Z7w4XNjCw+g==",
+      "version": "0.7.71",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.71.tgz",
+      "integrity": "sha512-WjV5ZY+yfNfu9n99bdfeUTdeFvCkOW/8KIFsCFu6aqGGUbsuRRwTbXk+qOvcDquzPGzrnDmo4z7UQpaMqCT9nA==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-    "@comfyorg/litegraph": "^0.7.70",
+    "@comfyorg/litegraph": "^0.7.71",
     "@primevue/themes": "^4.0.5",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vueuse/core": "^11.0.0",

src/components/graph/TitleEditor.vue

@@ -73,11 +73,8 @@ watch(
       inputStyle.value.fontSize = `${fontSize}px`
     } else if (target instanceof LGraphNode) {
       const node = target
-      const isCollapsed = node.flags?.collapsed
-      const [x, y, nodeWidth, nodeHeight] = node.getBounding()
-      const canvasWidth =
-        // @ts-expect-error Remove after collapsed_width is exposed in LiteGraph
-        isCollapsed && node._collapsed_width ? node._collapsed_width : nodeWidth
+      const [x, y] = node.getBounding()
+      const canvasWidth = node.width
       const canvasHeight = LiteGraph.NODE_TITLE_HEIGHT
 
       const [left, top] = app.canvasPosToClientPos([x, y])