diff --git a/browser_tests/assets/string_node_id.json b/browser_tests/assets/string_node_id.json new file mode 100644 index 000000000..275f81177 --- /dev/null +++ b/browser_tests/assets/string_node_id.json @@ -0,0 +1,377 @@ +{ + "last_node_id": 0, + "last_link_id": 18, + "nodes": [ + { + "id": "CheckpointLoaderSimple.0", + "type": "CheckpointLoaderSimple", + "pos": { + "0": 100, + "1": 130 + }, + "size": { + "0": 315, + "1": 98 + }, + "flags": {}, + "order": 0, + "mode": 0, + "inputs": [], + "outputs": [ + { + "name": "MODEL", + "type": "MODEL", + "links": [ + 12 + ], + "shape": 3 + }, + { + "name": "CLIP", + "type": "CLIP", + "links": [ + 10, + 11 + ], + "shape": 3 + }, + { + "name": "VAE", + "type": "VAE", + "links": [ + 17 + ], + "shape": 3 + } + ], + "properties": { + "Node name for S&R": "CheckpointLoaderSimple" + }, + "widgets_values": [ + "v1-5-pruned-emaonly.ckpt" + ] + }, + { + "id": "CLIPTextEncode.0", + "type": "CLIPTextEncode", + "pos": { + "0": 515, + "1": 130 + }, + "size": { + "0": 400, + "1": 200 + }, + "flags": {}, + "order": 2, + "mode": 0, + "inputs": [ + { + "name": "clip", + "type": "CLIP", + "link": 10 + } + ], + "outputs": [ + { + "name": "CONDITIONING", + "type": "CONDITIONING", + "links": [ + 13 + ], + "shape": 3 + } + ], + "properties": { + "Node name for S&R": "CLIPTextEncode" + }, + "widgets_values": [ + "beautiful scenery nature glass bottle landscape, , purple galaxy bottle," + ] + }, + { + "id": "CLIPTextEncode.1", + "type": "CLIPTextEncode", + "pos": { + "0": 515, + "1": 460 + }, + "size": { + "0": 400, + "1": 200 + }, + "flags": {}, + "order": 3, + "mode": 0, + "inputs": [ + { + "name": "clip", + "type": "CLIP", + "link": 11 + } + ], + "outputs": [ + { + "name": "CONDITIONING", + "type": "CONDITIONING", + "links": [ + 14 + ], + "shape": 3 + } + ], + "properties": { + "Node name for S&R": "CLIPTextEncode" + }, + "widgets_values": [ + "text, watermark" + ] + }, + { + "id": "EmptyLatentImage.0", + "type": "EmptyLatentImage", + "pos": { + "0": 100, + "1": 358 + }, + "size": { + "0": 315, + "1": 106 + }, + "flags": {}, + "order": 1, + "mode": 0, + "inputs": [], + "outputs": [ + { + "name": "LATENT", + "type": "LATENT", + "links": [ + 15 + ], + "shape": 3 + } + ], + "properties": { + "Node name for S&R": "EmptyLatentImage" + }, + "widgets_values": [ + 512, + 512, + 1 + ] + }, + { + "id": "KSampler.0", + "type": "KSampler", + "pos": { + "0": 1015, + "1": 130 + }, + "size": { + "0": 315, + "1": 262 + }, + "flags": {}, + "order": 4, + "mode": 0, + "inputs": [ + { + "name": "model", + "type": "MODEL", + "link": 12 + }, + { + "name": "positive", + "type": "CONDITIONING", + "link": 13 + }, + { + "name": "negative", + "type": "CONDITIONING", + "link": 14 + }, + { + "name": "latent_image", + "type": "LATENT", + "link": 15 + } + ], + "outputs": [ + { + "name": "LATENT", + "type": "LATENT", + "links": [ + 16 + ], + "shape": 3 + } + ], + "properties": { + "Node name for S&R": "KSampler" + }, + "widgets_values": [ + 3, + "randomize", + 20, + 8, + "euler", + "normal", + 1 + ] + }, + { + "id": "VAEDecode.0", + "type": "VAEDecode", + "pos": { + "0": 1430, + "1": 130 + }, + "size": { + "0": 210, + "1": 46 + }, + "flags": {}, + "order": 5, + "mode": 0, + "inputs": [ + { + "name": "samples", + "type": "LATENT", + "link": 16 + }, + { + "name": "vae", + "type": "VAE", + "link": 17 + } + ], + "outputs": [ + { + "name": "IMAGE", + "type": "IMAGE", + "links": [ + 18 + ], + "shape": 3 + } + ], + "properties": { + "Node name for S&R": "VAEDecode" + } + }, + { + "id": "SaveImage.0", + "type": "SaveImage", + "pos": { + "0": 1740, + "1": 130 + }, + "size": { + "0": 315, + "1": 58 + }, + "flags": {}, + "order": 6, + "mode": 0, + "inputs": [ + { + "name": "images", + "type": "IMAGE", + "link": 18 + } + ], + "outputs": [], + "properties": {}, + "widgets_values": [ + "ComfyUI" + ] + } + ], + "links": [ + [ + 10, + "CheckpointLoaderSimple.0", + 1, + "CLIPTextEncode.0", + 0, + "CLIP" + ], + [ + 11, + "CheckpointLoaderSimple.0", + 1, + "CLIPTextEncode.1", + 0, + "CLIP" + ], + [ + 12, + "CheckpointLoaderSimple.0", + 0, + "KSampler.0", + 0, + "MODEL" + ], + [ + 13, + "CLIPTextEncode.0", + 0, + "KSampler.0", + 1, + "CONDITIONING" + ], + [ + 14, + "CLIPTextEncode.1", + 0, + "KSampler.0", + 2, + "CONDITIONING" + ], + [ + 15, + "EmptyLatentImage.0", + 0, + "KSampler.0", + 3, + "LATENT" + ], + [ + 16, + "KSampler.0", + 0, + "VAEDecode.0", + 0, + "LATENT" + ], + [ + 17, + "CheckpointLoaderSimple.0", + 2, + "VAEDecode.0", + 1, + "VAE" + ], + [ + 18, + "VAEDecode.0", + 0, + "SaveImage.0", + 0, + "IMAGE" + ] + ], + "groups": [], + "config": {}, + "extra": { + "ds": { + "scale": 1, + "offset": [ + 149.9747408641311, + 383.8593224280729 + ] + } + }, + "version": 0.4 +} \ No newline at end of file diff --git a/browser_tests/interaction.spec.ts b/browser_tests/interaction.spec.ts index 432010cc8..82ac55972 100644 --- a/browser_tests/interaction.spec.ts +++ b/browser_tests/interaction.spec.ts @@ -337,3 +337,10 @@ test.describe('Widget Interaction', () => { await expect(textBox).toHaveValue('1girl') }) }) + +test.describe('Load workflow', () => { + test('Can load workflow with string node id', async ({ comfyPage }) => { + await comfyPage.loadWorkflow('string_node_id') + await expect(comfyPage.canvas).toHaveScreenshot('string_node_id.png') + }) +}) diff --git a/browser_tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png b/browser_tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png new file mode 100644 index 000000000..d8178b346 Binary files /dev/null and b/browser_tests/interaction.spec.ts-snapshots/string-node-id-chromium-linux.png differ diff --git a/package-lock.json b/package-lock.json index b46fa75bf..a1f9d7680 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.2.46", "dependencies": { "@atlaskit/pragmatic-drag-and-drop": "^1.2.1", - "@comfyorg/litegraph": "^0.7.63", + "@comfyorg/litegraph": "^0.7.64", "@primevue/themes": "^4.0.0-rc.2", "@vitejs/plugin-vue": "^5.0.5", "@vueuse/core": "^11.0.0", @@ -1883,9 +1883,9 @@ "dev": true }, "node_modules/@comfyorg/litegraph": { - "version": "0.7.63", - "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.63.tgz", - "integrity": "sha512-fMPUN7QoGv/sLY8OecN5dE6uNzdFgyZm16xBM2UmskxcWEkDnQzWKalqOlz1w9sl06SolvSvQ3DM0OueThfdjg==", + "version": "0.7.64", + "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.64.tgz", + "integrity": "sha512-fgdEUGPx37PkWlBW+Q8URHZ7GwN25DfSHsldFwsqyFwxMChR7X5yNejIJL5qRBGJrBtM0Ftv82j3raGpd7hPNw==", "license": "MIT" }, "node_modules/@cspotcode/source-map-support": { diff --git a/package.json b/package.json index d62274c89..d2052409e 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ }, "dependencies": { "@atlaskit/pragmatic-drag-and-drop": "^1.2.1", - "@comfyorg/litegraph": "^0.7.63", + "@comfyorg/litegraph": "^0.7.64", "@primevue/themes": "^4.0.0-rc.2", "@vitejs/plugin-vue": "^5.0.5", "@vueuse/core": "^11.0.0", diff --git a/src/extensions/core/nodeTemplates.ts b/src/extensions/core/nodeTemplates.ts index 7a910a360..b33ae7a8e 100644 --- a/src/extensions/core/nodeTemplates.ts +++ b/src/extensions/core/nodeTemplates.ts @@ -377,7 +377,7 @@ app.registerExtension({ data = JSON.parse(data) const nodeIds = Object.keys(app.canvas.selected_nodes) for (let i = 0; i < nodeIds.length; i++) { - const node = app.graph.getNodeById(Number.parseInt(nodeIds[i])) + const node = app.graph.getNodeById(nodeIds[i]) // @ts-expect-error const nodeData = node?.constructor.nodeData diff --git a/src/extensions/core/uploadAudio.ts b/src/extensions/core/uploadAudio.ts index 758fc9245..67d199fe2 100644 --- a/src/extensions/core/uploadAudio.ts +++ b/src/extensions/core/uploadAudio.ts @@ -124,7 +124,7 @@ app.registerExtension({ }, onNodeOutputsUpdated(nodeOutputs: Record) { for (const [nodeId, output] of Object.entries(nodeOutputs)) { - const node = app.graph.getNodeById(Number.parseInt(nodeId)) + const node = app.graph.getNodeById(nodeId) if ('audio' in output) { const audioUIWidget = node.widgets.find( (w) => w.name === 'audioUI' diff --git a/src/scripts/app.ts b/src/scripts/app.ts index faee493cf..2951468cb 100644 --- a/src/scripts/app.ts +++ b/src/scripts/app.ts @@ -2804,7 +2804,7 @@ export class ComfyApp { this.changeWorkflow(() => { for (const id of ids) { const data = apiData[id] - const node = app.graph.getNodeById(Number.parseInt(id)) + const node = app.graph.getNodeById(id) for (const input in data.inputs ?? {}) { const value = data.inputs[input] if (value instanceof Array) { @@ -2839,7 +2839,7 @@ export class ComfyApp { for (const id of ids) { const data = apiData[id] - const node = app.graph.getNodeById(Number.parseInt(id)) + const node = app.graph.getNodeById(id) for (const input in data.inputs ?? {}) { const value = data.inputs[input] if (value instanceof Array) { @@ -3009,7 +3009,6 @@ export class ComfyApp { } public goToNode(nodeId: NodeId) { - // @ts-expect-error TODO: Update litegraph's nodeId type to string | number const graphNode = this.graph.getNodeById(nodeId) if (!graphNode) return this.canvas.centerOnNode(graphNode)