app.js 66 KB
Newer Older
pythongosssss's avatar
pythongosssss committed
1
import { ComfyLogging } from "./logging.js";
2
import { ComfyWidgets, initWidgets } from "./widgets.js";
3
import { ComfyUI, $el } from "./ui.js";
pythongosssss's avatar
pythongosssss committed
4
5
import { api } from "./api.js";
import { defaultGraph } from "./defaultGraph.js";
6
import { getPngMetadata, getWebpMetadata, importA1111, getLatentMetadata } from "./pnginfo.js";
7
import { addDomClippingSetting } from "./domWidget.js";
8
9
10
11
12
import { createImageHost, calculateImageGrid } from "./ui/imagePreview.js";
import { ComfyAppMenu } from "./ui/menu/index.js";
import { getStorageValue, setStorageValue } from "./utils.js";
import { ComfyWorkflowManager } from "./workflows.js";
export const ANIM_PREVIEW_WIDGET = "$$comfy_animation_preview";
13
14
15
16
17
18
19
20
21
22
23

function sanitizeNodeName(string) {
	let entityMap = {
	'&': '',
	'<': '',
	'>': '',
	'"': '',
	"'": '',
	'`': '',
	'=': ''
	};
24
	return String(string).replace(/[&<>"'`=]/g, function fromEntityMap (s) {
25
26
27
28
		return entityMap[s];
	});
}

29
/**
30
31
32
33
34
35
36
 * @typedef {import("types/comfy").ComfyExtension} ComfyExtension
 */

export class ComfyApp {
	/**
	 * List of entries to queue
	 * @type {{number: number, batchCount: number}[]}
37
38
39
40
	 */
	#queueItems = [];
	/**
	 * If the queue is currently being processed
41
	 * @type {boolean}
42
43
44
	 */
	#processingQueue = false;

ltdrdata's avatar
ltdrdata committed
45
46
47
48
49
	/**
	 * Content Clipboard
	 * @type {serialized node object}
	 */
	static clipspace = null;
50
	static clipspace_invalidate_handler = null;
51
52
	static open_maskeditor = null;
	static clipspace_return_node = null;
ltdrdata's avatar
ltdrdata committed
53

pythongosssss's avatar
pythongosssss committed
54
55
	constructor() {
		this.ui = new ComfyUI(this);
pythongosssss's avatar
pythongosssss committed
56
		this.logging = new ComfyLogging(this);
57
58
59
60
61
62
		this.workflowManager = new ComfyWorkflowManager(this);
		this.bodyTop = $el("div.comfyui-body-top", { parent: document.body });
		this.bodyLeft = $el("div.comfyui-body-left", { parent: document.body });
		this.bodyRight = $el("div.comfyui-body-right", { parent: document.body });
		this.bodyBottom = $el("div.comfyui-body-bottom", { parent: document.body });		  
		this.menu = new ComfyAppMenu(this);
63
64
65
66
67

		/**
		 * List of extensions that are registered with the app
		 * @type {ComfyExtension[]}
		 */
68
		this.extensions = [];
69
70
71
72
73

		/**
		 * Stores the execution output data for each node
		 * @type {Record<string, any>}
		 */
pythongosssss's avatar
pythongosssss committed
74
		this.nodeOutputs = {};
75

space-nuko's avatar
space-nuko committed
76
77
78
79
80
81
		/**
		 * Stores the preview image data for each node
		 * @type {Record<string, Image>}
		 */
		this.nodePreviewImages = {};

82
83
84
85
		/**
		 * If the shift key on the keyboard is pressed
		 * @type {boolean}
		 */
pythongosssss's avatar
pythongosssss committed
86
		this.shiftDown = false;
pythongosssss's avatar
pythongosssss committed
87
88
	}

89
90
91
92
93
94
95
96
	getPreviewFormatParam() {
		let preview_format = this.ui.settings.getSettingValue("Comfy.PreviewFormat");
		if(preview_format)
			return `&preview=${preview_format}`;
		else
			return "";
	}

Jairo Correa's avatar
Jairo Correa committed
97
98
99
100
	getRandParam() {
		return "&rand=" + Math.random();
	}

101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
	static isImageNode(node) {
		return node.imgs || (node && node.widgets && node.widgets.findIndex(obj => obj.name === 'image') >= 0);
	}

	static onClipspaceEditorSave() {
		if(ComfyApp.clipspace_return_node) {
			ComfyApp.pasteFromClipspace(ComfyApp.clipspace_return_node);
		}
	}

	static onClipspaceEditorClosed() {
		ComfyApp.clipspace_return_node = null;
	}

	static copyToClipspace(node) {
		var widgets = null;
		if(node.widgets) {
			widgets = node.widgets.map(({ type, name, value }) => ({ type, name, value }));
		}

		var imgs = undefined;
		var orig_imgs = undefined;
		if(node.imgs != undefined) {
			imgs = [];
			orig_imgs = [];

			for (let i = 0; i < node.imgs.length; i++) {
				imgs[i] = new Image();
				imgs[i].src = node.imgs[i].src;
				orig_imgs[i] = imgs[i];
			}
		}

		var selectedIndex = 0;
		if(node.imageIndex) {
			selectedIndex = node.imageIndex;
		}

		ComfyApp.clipspace = {
			'widgets': widgets,
			'imgs': imgs,
			'original_imgs': orig_imgs,
			'images': node.images,
			'selectedIndex': selectedIndex,
			'img_paste_mode': 'selected' // reset to default im_paste_mode state on copy action
		};

		ComfyApp.clipspace_return_node = null;

		if(ComfyApp.clipspace_invalidate_handler) {
			ComfyApp.clipspace_invalidate_handler();
		}
	}

	static pasteFromClipspace(node) {
		if(ComfyApp.clipspace) {
			// image paste
			if(ComfyApp.clipspace.imgs && node.imgs) {
				if(node.images && ComfyApp.clipspace.images) {
					if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
161
						node.images = [ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]];
162
					}
163
164
165
166
167
168
					else {
						node.images = ComfyApp.clipspace.images;
					}

					if(app.nodeOutputs[node.id + ""])
						app.nodeOutputs[node.id + ""].images = node.images;
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
				}

				if(ComfyApp.clipspace.imgs) {
					// deep-copy to cut link with clipspace
					if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
						const img = new Image();
						img.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
						node.imgs = [img];
						node.imageIndex = 0;
					}
					else {
						const imgs = [];
						for(let i=0; i<ComfyApp.clipspace.imgs.length; i++) {
							imgs[i] = new Image();
							imgs[i].src = ComfyApp.clipspace.imgs[i].src;
							node.imgs = imgs;
						}
					}
				}
			}

			if(node.widgets) {
				if(ComfyApp.clipspace.images) {
					const clip_image = ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']];
					const index = node.widgets.findIndex(obj => obj.name === 'image');
					if(index >= 0) {
195
196
197
198
199
200
						if(node.widgets[index].type != 'image' && typeof node.widgets[index].value == "string" && clip_image.filename) {
							node.widgets[index].value = (clip_image.subfolder?clip_image.subfolder+'/':'') + clip_image.filename + (clip_image.type?` [${clip_image.type}]`:'');
						}
						else {
							node.widgets[index].value = clip_image;
						}
201
202
203
204
205
					}
				}
				if(ComfyApp.clipspace.widgets) {
					ComfyApp.clipspace.widgets.forEach(({ type, name, value }) => {
						const prop = Object.values(node.widgets).find(obj => obj.type === type && obj.name === name);
206
207
						if (prop && prop.type != 'button') {
							if(prop.type != 'image' && typeof prop.value == "string" && value.filename) {
Dr.Lt.Data's avatar
Dr.Lt.Data committed
208
209
210
211
212
213
214
								prop.value = (value.subfolder?value.subfolder+'/':'') + value.filename + (value.type?` [${value.type}]`:'');
							}
							else {
								prop.value = value;
								prop.callback(value);
							}
						}
215
216
217
218
219
220
221
222
					});
				}
			}

			app.graph.setDirtyCanvas(true);
		}
	}

pythongosssss's avatar
pythongosssss committed
223
224
	/**
	 * Invoke an extension callback
225
226
	 * @param {keyof ComfyExtension} method The extension callback to execute
	 * @param  {any[]} args Any arguments to pass to the callback
227
	 * @returns
pythongosssss's avatar
pythongosssss committed
228
	 */
pythongosssss's avatar
pythongosssss committed
229
230
231
232
233
234
235
	#invokeExtensions(method, ...args) {
		let results = [];
		for (const ext of this.extensions) {
			if (method in ext) {
				try {
					results.push(ext[method](...args, this));
				} catch (error) {
236
					console.error(
pythongosssss's avatar
pythongosssss committed
237
238
239
240
241
242
243
244
245
246
247
						`Error calling extension '${ext.name}' method '${method}'`,
						{ error },
						{ extension: ext },
						{ args }
					);
				}
			}
		}
		return results;
	}

pythongosssss's avatar
pythongosssss committed
248
249
250
251
252
	/**
	 * Invoke an async extension callback
	 * Each callback will be invoked concurrently
	 * @param {string} method The extension callback to execute
	 * @param  {...any} args Any arguments to pass to the callback
253
	 * @returns
pythongosssss's avatar
pythongosssss committed
254
	 */
pythongosssss's avatar
pythongosssss committed
255
256
257
258
259
260
261
	async #invokeExtensionsAsync(method, ...args) {
		return await Promise.all(
			this.extensions.map(async (ext) => {
				if (method in ext) {
					try {
						return await ext[method](...args, this);
					} catch (error) {
262
						console.error(
pythongosssss's avatar
pythongosssss committed
263
264
265
266
267
268
269
270
271
272
							`Error calling extension '${ext.name}' method '${method}'`,
							{ error },
							{ extension: ext },
							{ args }
						);
					}
				}
			})
		);
	}
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
	
	#addRestoreWorkflowView() {
		const serialize = LGraph.prototype.serialize;
		const self = this;
		LGraph.prototype.serialize = function() {
			const workflow = serialize.apply(this, arguments);

			// Store the drag & scale info in the serialized workflow if the setting is enabled
			if (self.enableWorkflowViewRestore.value) {
				if (!workflow.extra) {
					workflow.extra = {};
				}
				workflow.extra.ds = {
					scale: self.canvas.ds.scale,
					offset: self.canvas.ds.offset,
				};
			} else if (workflow.extra?.ds) {
				// Clear any old view data
				delete workflow.extra.ds;
			}

			return workflow;
		}
		this.enableWorkflowViewRestore = this.ui.settings.addSetting({
			id: "Comfy.EnableWorkflowViewRestore",
			name: "Save and restore canvas position and zoom level in workflows",
			type: "boolean",
			defaultValue: true
		});
	}
pythongosssss's avatar
pythongosssss committed
303

pythongosssss's avatar
pythongosssss committed
304
305
306
307
308
	/**
	 * Adds special context menu handling for nodes
	 * e.g. this adds Open Image functionality for nodes that show images
	 * @param {*} node The node to add the menu handler
	 */
pythongosssss's avatar
pythongosssss committed
309
	#addNodeContextMenuHandler(node) {
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
		function getCopyImageOption(img) {
			if (typeof window.ClipboardItem === "undefined") return [];
			return [
				{
					content: "Copy Image",
					callback: async () => {
						const url = new URL(img.src);
						url.searchParams.delete("preview");

						const writeImage = async (blob) => {
							await navigator.clipboard.write([
								new ClipboardItem({
									[blob.type]: blob,
								}),
							]);
						};

						try {
							const data = await fetch(url);
							const blob = await data.blob();
							try {
								await writeImage(blob);
							} catch (error) {
								// Chrome seems to only support PNG on write, convert and try again
								if (blob.type !== "image/png") {
									const canvas = $el("canvas", {
										width: img.naturalWidth,
										height: img.naturalHeight,
									});
									const ctx = canvas.getContext("2d");
									let image;
									if (typeof window.createImageBitmap === "undefined") {
										image = new Image();
										const p = new Promise((resolve, reject) => {
											image.onload = resolve;
											image.onerror = reject;
										}).finally(() => {
											URL.revokeObjectURL(image.src);
										});
										image.src = URL.createObjectURL(blob);
										await p;
									} else {
										image = await createImageBitmap(blob);
									}
									try {
										ctx.drawImage(image, 0, 0);
										canvas.toBlob(writeImage, "image/png");
									} finally {
										if (typeof image.close === "function") {
											image.close();
										}
									}

									return;
								}
								throw error;
							}
						} catch (error) {
							alert("Error copying image: " + (error.message ?? error));
						}
					},
				},
			];
		}

pythongosssss's avatar
pythongosssss committed
375
376
377
378
379
380
381
382
383
384
385
386
		node.prototype.getExtraMenuOptions = function (_, options) {
			if (this.imgs) {
				// If this node has images then we add an open in new tab item
				let img;
				if (this.imageIndex != null) {
					// An image is selected so select that
					img = this.imgs[this.imageIndex];
				} else if (this.overIndex != null) {
					// No image is selected but one is hovered
					img = this.imgs[this.overIndex];
				}
				if (img) {
pythongosssss's avatar
pythongosssss committed
387
388
389
					options.unshift(
						{
							content: "Open Image",
390
391
							callback: () => {
								let url = new URL(img.src);
392
393
								url.searchParams.delete("preview");
								window.open(url, "_blank");
394
							},
pythongosssss's avatar
pythongosssss committed
395
						},
396
						...getCopyImageOption(img), 
pythongosssss's avatar
pythongosssss committed
397
398
399
400
						{
							content: "Save Image",
							callback: () => {
								const a = document.createElement("a");
401
								let url = new URL(img.src);
402
								url.searchParams.delete("preview");
403
404
								a.href = url;
								a.setAttribute("download", new URLSearchParams(url.search).get("filename"));
pythongosssss's avatar
pythongosssss committed
405
406
407
408
409
410
								document.body.append(a);
								a.click();
								requestAnimationFrame(() => a.remove());
							},
						}
					);
pythongosssss's avatar
pythongosssss committed
411
412
				}
			}
ltdrdata's avatar
ltdrdata committed
413

414
			options.push({
415
416
417
418
419
420
421
				content: "Bypass",
				callback: (obj) => {
					if (this.mode === 4) this.mode = 0;
					else this.mode = 4;
					this.graph.change();
				},
			});
422

423
			// prevent conflict of clipspace content
424
			if (!ComfyApp.clipspace_return_node) {
425
				options.push({
426
427
428
429
430
					content: "Copy (Clipspace)",
					callback: (obj) => {
						ComfyApp.copyToClipspace(this);
					},
				});
ltdrdata's avatar
ltdrdata committed
431

432
				if (ComfyApp.clipspace != null) {
433
					options.push({
434
435
436
437
438
						content: "Paste (Clipspace)",
						callback: () => {
							ComfyApp.pasteFromClipspace(this);
						},
					});
439
				}
440

441
				if (ComfyApp.isImageNode(this)) {
442
					options.push({
443
444
445
446
447
448
449
						content: "Open in MaskEditor",
						callback: (obj) => {
							ComfyApp.copyToClipspace(this);
							ComfyApp.clipspace_return_node = this;
							ComfyApp.open_maskeditor();
						},
					});
450
				}
ltdrdata's avatar
ltdrdata committed
451
			}
pythongosssss's avatar
pythongosssss committed
452
453
454
		};
	}

455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
	#addNodeKeyHandler(node) {
		const app = this;
		const origNodeOnKeyDown = node.prototype.onKeyDown;

		node.prototype.onKeyDown = function(e) {
			if (origNodeOnKeyDown && origNodeOnKeyDown.apply(this, e) === false) {
				return false;
			}

			if (this.flags.collapsed || !this.imgs || this.imageIndex === null) {
				return;
			}

			let handled = false;

			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
				if (e.key === "ArrowLeft") {
					this.imageIndex -= 1;
				} else if (e.key === "ArrowRight") {
					this.imageIndex += 1;
				}
				this.imageIndex %= this.imgs.length;

				if (this.imageIndex < 0) {
					this.imageIndex = this.imgs.length + this.imageIndex;
				}
				handled = true;
			} else if (e.key === "Escape") {
				this.imageIndex = null;
				handled = true;
			}

			if (handled === true) {
				e.preventDefault();
				e.stopImmediatePropagation();
				return false;
			}
		}
	}

pythongosssss's avatar
pythongosssss committed
495
496
497
498
499
	/**
	 * Adds Custom drawing logic for nodes
	 * e.g. Draws images and handles thumbnail navigation on nodes that output images
	 * @param {*} node The node to add the draw handler
	 */
pythongosssss's avatar
pythongosssss committed
500
501
	#addDrawBackgroundHandler(node) {
		const app = this;
502
503
504
505
506
507
508
509
510
511
512

		function getImageTop(node) {
			let shiftY;
			if (node.imageOffset != null) {
				shiftY = node.imageOffset;
			} else {
				if (node.widgets?.length) {
					const w = node.widgets[node.widgets.length - 1];
					shiftY = w.last_y;
					if (w.computeSize) {
						shiftY += w.computeSize()[1] + 4;
513
514
515
516
517
					}
					else if(w.computedHeight) {
						shiftY += w.computedHeight;
					}
					else {
518
519
520
521
522
523
524
525
526
						shiftY += LiteGraph.NODE_WIDGET_HEIGHT + 4;
					}
				} else {
					shiftY = node.computeSize()[1];
				}
			}
			return shiftY;
		}

527
528
529
		node.prototype.setSizeForImage = function (force) {
			if(!force && this.animatedImages) return;

530
			if (this.inputHeight || this.freeWidgetSpace > 210) {
531
532
533
				this.setSize(this.size);
				return;
			}
534
535
536
537
538
539
			const minHeight = getImageTop(this) + 220;
			if (this.size[1] < minHeight) {
				this.setSize([this.size[0], minHeight]);
			}
		};

pythongosssss's avatar
pythongosssss committed
540
541
		node.prototype.onDrawBackground = function (ctx) {
			if (!this.flags.collapsed) {
space-nuko's avatar
space-nuko committed
542
543
544
				let imgURLs = []
				let imagesChanged = false

pythongosssss's avatar
pythongosssss committed
545
				const output = app.nodeOutputs[this.id + ""];
546
547
				if (output?.images) {
					this.animatedImages = output?.animated?.find(Boolean);
pythongosssss's avatar
pythongosssss committed
548
549
					if (this.images !== output.images) {
						this.images = output.images;
space-nuko's avatar
space-nuko committed
550
						imagesChanged = true;
551
552
553
554
555
						imgURLs = imgURLs.concat(
							output.images.map((params) => {
								return api.apiURL(
									"/view?" +
										new URLSearchParams(params).toString() +
556
										(this.animatedImages ? "" : app.getPreviewFormatParam()) + app.getRandParam()
557
558
559
								);
							})
						);
space-nuko's avatar
space-nuko committed
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
					}
				}

				const preview = app.nodePreviewImages[this.id + ""]
				if (this.preview !== preview) {
					this.preview = preview
					imagesChanged = true;
					if (preview != null) {
						imgURLs.push(preview);
					}
				}

				if (imagesChanged) {
					this.imageIndex = null;
					if (imgURLs.length > 0) {
pythongosssss's avatar
pythongosssss committed
575
						Promise.all(
space-nuko's avatar
space-nuko committed
576
							imgURLs.map((src) => {
pythongosssss's avatar
pythongosssss committed
577
578
579
								return new Promise((r) => {
									const img = new Image();
									img.onload = () => r(img);
comfyanonymous's avatar
comfyanonymous committed
580
									img.onerror = () => r(null);
space-nuko's avatar
space-nuko committed
581
									img.src = src
pythongosssss's avatar
pythongosssss committed
582
583
584
								});
							})
						).then((imgs) => {
space-nuko's avatar
space-nuko committed
585
							if ((!output || this.images === output.images) && (!preview || this.preview === preview)) {
pythongosssss's avatar
pythongosssss committed
586
								this.imgs = imgs.filter(Boolean);
587
								this.setSizeForImage?.();
pythongosssss's avatar
pythongosssss committed
588
589
590
591
								app.graph.setDirtyCanvas(true);
							}
						});
					}
space-nuko's avatar
space-nuko committed
592
593
594
					else {
						this.imgs = null;
					}
pythongosssss's avatar
pythongosssss committed
595
				}
pythongosssss's avatar
pythongosssss committed
596

Dr.Lt.Data's avatar
Dr.Lt.Data committed
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
				function calculateGrid(w, h, n) {
					let columns, rows, cellsize;

					if (w > h) {
						cellsize = h;
						columns = Math.ceil(w / cellsize);
						rows = Math.ceil(n / columns);
					} else {
						cellsize = w;
						rows = Math.ceil(h / cellsize);
						columns = Math.ceil(n / rows);
					}

					while (columns * rows < n) {
						cellsize++;
						if (w >= h) {
							columns = Math.ceil(w / cellsize);
							rows = Math.ceil(n / columns);
						} else {
							rows = Math.ceil(h / cellsize);
							columns = Math.ceil(n / rows);
						}
					}

					const cell_size = Math.min(w/columns, h/rows);
					return {cell_size, columns, rows};
				}

				function is_all_same_aspect_ratio(imgs) {
					// assume: imgs.length >= 2
					let ratio = imgs[0].naturalWidth/imgs[0].naturalHeight;

					for(let i=1; i<imgs.length; i++) {
						let this_ratio = imgs[i].naturalWidth/imgs[i].naturalHeight;
						if(ratio != this_ratio)
							return false;
					}

					return true;
				}

638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
				if (this.imgs?.length) {
					const widgetIdx = this.widgets?.findIndex((w) => w.name === ANIM_PREVIEW_WIDGET);
				
					if(this.animatedImages) {
						// Instead of using the canvas we'll use a IMG
						if(widgetIdx > -1) {
							// Replace content
							const widget = this.widgets[widgetIdx];
							widget.options.host.updateImages(this.imgs);
						} else {
							const host = createImageHost(this);
							this.setSizeForImage(true);
							const widget = this.addDOMWidget(ANIM_PREVIEW_WIDGET, "img", host.el, {
								host,
								getHeight: host.getHeight,
								onDraw: host.onDraw,
								hideOnZoom: false
							});
							widget.serializeValue = () => undefined;
							widget.options.host.updateImages(this.imgs);
						}
						return;
					}

					if (widgetIdx > -1) {
663
						this.widgets[widgetIdx].onRemove?.();
664
665
666
						this.widgets.splice(widgetIdx, 1);
					}

667
					const canvas = app.graph.list_of_graphcanvas[0];
pythongosssss's avatar
pythongosssss committed
668
669
670
671
					const mouse = canvas.graph_mouse;
					if (!canvas.pointer_is_down && this.pointerDown) {
						if (mouse[0] === this.pointerDown.pos[0] && mouse[1] === this.pointerDown.pos[1]) {
							this.imageIndex = this.pointerDown.index;
pythongosssss's avatar
pythongosssss committed
672
						}
pythongosssss's avatar
pythongosssss committed
673
674
						this.pointerDown = null;
					}
pythongosssss's avatar
pythongosssss committed
675

pythongosssss's avatar
pythongosssss committed
676
677
678
679
680
					let imageIndex = this.imageIndex;
					const numImages = this.imgs.length;
					if (numImages === 1 && !imageIndex) {
						this.imageIndex = imageIndex = 0;
					}
pythongosssss's avatar
pythongosssss committed
681

Dr.Lt.Data's avatar
Dr.Lt.Data committed
682
683
					const top = getImageTop(this);
					var shiftY = top;
pythongosssss's avatar
pythongosssss committed
684

pythongosssss's avatar
pythongosssss committed
685
686
687
					let dw = this.size[0];
					let dh = this.size[1];
					dh -= shiftY;
pythongosssss's avatar
pythongosssss committed
688

pythongosssss's avatar
pythongosssss committed
689
					if (imageIndex == null) {
Dr.Lt.Data's avatar
Dr.Lt.Data committed
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
						var cellWidth, cellHeight, shiftX, cell_padding, cols;

						const compact_mode = is_all_same_aspect_ratio(this.imgs);
						if(!compact_mode) {
							// use rectangle cell style and border line
							cell_padding = 2;
							const { cell_size, columns, rows } = calculateGrid(dw, dh, numImages);
							cols = columns;

							cellWidth = cell_size;
							cellHeight = cell_size;
							shiftX = (dw-cell_size*cols)/2;
							shiftY = (dh-cell_size*rows)/2 + top;
						}
						else {
							cell_padding = 0;
706
							({ cellWidth, cellHeight, cols, shiftX } = calculateImageGrid(this.imgs, dw, dh));
pythongosssss's avatar
pythongosssss committed
707
						}
pythongosssss's avatar
pythongosssss committed
708

pythongosssss's avatar
pythongosssss committed
709
710
711
712
713
714
715
716
						let anyHovered = false;
						this.imageRects = [];
						for (let i = 0; i < numImages; i++) {
							const img = this.imgs[i];
							const row = Math.floor(i / cols);
							const col = i % cols;
							const x = col * cellWidth + shiftX;
							const y = row * cellHeight + shiftY;
pythongosssss's avatar
pythongosssss committed
717
							if (!anyHovered) {
pythongosssss's avatar
pythongosssss committed
718
								anyHovered = LiteGraph.isInsideRectangle(
pythongosssss's avatar
pythongosssss committed
719
720
721
722
									mouse[0],
									mouse[1],
									x + this.pos[0],
									y + this.pos[1],
pythongosssss's avatar
pythongosssss committed
723
724
									cellWidth,
									cellHeight
pythongosssss's avatar
pythongosssss committed
725
								);
pythongosssss's avatar
pythongosssss committed
726
727
728
								if (anyHovered) {
									this.overIndex = i;
									let value = 110;
pythongosssss's avatar
pythongosssss committed
729
									if (canvas.pointer_is_down) {
pythongosssss's avatar
pythongosssss committed
730
731
732
733
										if (!this.pointerDown || this.pointerDown.index !== i) {
											this.pointerDown = { index: i, pos: [...mouse] };
										}
										value = 125;
pythongosssss's avatar
pythongosssss committed
734
									}
pythongosssss's avatar
pythongosssss committed
735
736
737
738
739
									ctx.filter = `contrast(${value}%) brightness(${value}%)`;
									canvas.canvas.style.cursor = "pointer";
								}
							}
							this.imageRects.push([x, y, cellWidth, cellHeight]);
740

Dr.Lt.Data's avatar
Dr.Lt.Data committed
741
742
743
744
745
746
747
748
							let wratio = cellWidth/img.width;
							let hratio = cellHeight/img.height;
							var ratio = Math.min(wratio, hratio);

							let imgHeight = ratio * img.height;
							let imgY = row * cellHeight + shiftY + (cellHeight - imgHeight)/2;
							let imgWidth = ratio * img.width;
							let imgX = col * cellWidth + shiftX + (cellWidth - imgWidth)/2;
749

Dr.Lt.Data's avatar
Dr.Lt.Data committed
750
751
752
753
754
755
756
757
							ctx.drawImage(img, imgX+cell_padding, imgY+cell_padding, imgWidth-cell_padding*2, imgHeight-cell_padding*2);
							if(!compact_mode) {
								// rectangle cell and border line style
								ctx.strokeStyle = "#8F8F8F";
								ctx.lineWidth = 1;
								ctx.strokeRect(x+cell_padding, y+cell_padding, cellWidth-cell_padding*2, cellHeight-cell_padding*2);
							}

pythongosssss's avatar
pythongosssss committed
758
759
760
761
762
763
764
765
766
							ctx.filter = "none";
						}

						if (!anyHovered) {
							this.pointerDown = null;
							this.overIndex = null;
						}
					} else {
						// Draw individual
Dr.Lt.Data's avatar
Dr.Lt.Data committed
767
768
769
						let w = this.imgs[imageIndex].naturalWidth;
						let h = this.imgs[imageIndex].naturalHeight;

pythongosssss's avatar
pythongosssss committed
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
						const scaleX = dw / w;
						const scaleY = dh / h;
						const scale = Math.min(scaleX, scaleY, 1);

						w *= scale;
						h *= scale;

						let x = (dw - w) / 2;
						let y = (dh - h) / 2 + shiftY;
						ctx.drawImage(this.imgs[imageIndex], x, y, w, h);

						const drawButton = (x, y, sz, text) => {
							const hovered = LiteGraph.isInsideRectangle(mouse[0], mouse[1], x + this.pos[0], y + this.pos[1], sz, sz);
							let fill = "#333";
							let textFill = "#fff";
							let isClicking = false;
							if (hovered) {
								canvas.canvas.style.cursor = "pointer";
								if (canvas.pointer_is_down) {
									fill = "#1e90ff";
									isClicking = true;
pythongosssss's avatar
pythongosssss committed
791
								} else {
pythongosssss's avatar
pythongosssss committed
792
793
									fill = "#eee";
									textFill = "#000";
pythongosssss's avatar
pythongosssss committed
794
								}
pythongosssss's avatar
pythongosssss committed
795
796
797
							} else {
								this.pointerWasDown = null;
							}
pythongosssss's avatar
pythongosssss committed
798

pythongosssss's avatar
pythongosssss committed
799
800
801
802
803
804
805
806
							ctx.fillStyle = fill;
							ctx.beginPath();
							ctx.roundRect(x, y, sz, sz, [4]);
							ctx.fill();
							ctx.fillStyle = textFill;
							ctx.font = "12px Arial";
							ctx.textAlign = "center";
							ctx.fillText(text, x + 15, y + 20);
pythongosssss's avatar
pythongosssss committed
807

pythongosssss's avatar
pythongosssss committed
808
809
							return isClicking;
						};
pythongosssss's avatar
pythongosssss committed
810

pythongosssss's avatar
pythongosssss committed
811
						if (numImages > 1) {
Dr.Lt.Data's avatar
Dr.Lt.Data committed
812
							if (drawButton(dw - 40, dh + top - 40, 30, `${this.imageIndex + 1}/${numImages}`)) {
pythongosssss's avatar
pythongosssss committed
813
814
815
								let i = this.imageIndex + 1 >= numImages ? 0 : this.imageIndex + 1;
								if (!this.pointerDown || !this.pointerDown.index === i) {
									this.pointerDown = { index: i, pos: [...mouse] };
pythongosssss's avatar
pythongosssss committed
816
								}
pythongosssss's avatar
pythongosssss committed
817
							}
pythongosssss's avatar
pythongosssss committed
818

Dr.Lt.Data's avatar
Dr.Lt.Data committed
819
							if (drawButton(dw - 40, top + 10, 30, `x`)) {
pythongosssss's avatar
pythongosssss committed
820
821
								if (!this.pointerDown || !this.pointerDown.index === null) {
									this.pointerDown = { index: null, pos: [...mouse] };
pythongosssss's avatar
pythongosssss committed
822
823
824
825
826
827
828
829
830
								}
							}
						}
					}
				}
			}
		};
	}

pythongosssss's avatar
pythongosssss committed
831
832
833
	/**
	 * Adds a handler allowing drag+drop of files onto the window to load workflows
	 */
pythongosssss's avatar
pythongosssss committed
834
835
836
837
838
	#addDropHandler() {
		// Get prompt from dropped PNG or json
		document.addEventListener("drop", async (event) => {
			event.preventDefault();
			event.stopPropagation();
839
840
841
842
843

			const n = this.dragOverNode;
			this.dragOverNode = null;
			// Node handles file drop, we dont use the built in onDropFile handler as its buggy
			// If you drag multiple files it will call it multiple times with the same file
844
			if (n && n.onDragDrop && (await n.onDragDrop(event))) {
845
846
				return;
			}
847
848
			// Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
			if (event.dataTransfer.files.length && event.dataTransfer.files[0].type !== "image/bmp") {
849
			await this.handleFile(event.dataTransfer.files[0]);
850
851
852
853
854
855
856
857
858
859
860
			} else {
				// Try loading the first URI in the transfer list
				const validTypes = ["text/uri-list", "text/x-moz-url"];
				const match = [...event.dataTransfer.types].find((t) => validTypes.find(v => t === v));
				if (match) {
					const uri = event.dataTransfer.getData(match)?.split("\n")?.[0];
					if (uri) {
						await this.handleFile(await (await fetch(uri)).blob());
					}
				}
			}
pythongosssss's avatar
pythongosssss committed
861
		});
862

863
864
865
866
867
868
		// Always clear over node on drag leave
		this.canvasEl.addEventListener("dragleave", async () => {
			if (this.dragOverNode) {
				this.dragOverNode = null;
				this.graph.setDirtyCanvas(false, true);
			}
pythongosssss's avatar
pythongosssss committed
869
		});
870

871
872
873
874
875
876
877
878
879
		// Add handler for dropping onto a specific node
		this.canvasEl.addEventListener(
			"dragover",
			(e) => {
				this.canvas.adjustMouseEvent(e);
				const node = this.graph.getNodeOnPos(e.canvasX, e.canvasY);
				if (node) {
					if (node.onDragOver && node.onDragOver(e)) {
						this.dragOverNode = node;
880
881

						// dragover event is fired very frequently, run this on an animation frame
882
883
884
885
886
887
888
889
890
891
						requestAnimationFrame(() => {
							this.graph.setDirtyCanvas(false, true);
						});
						return;
					}
				}
				this.dragOverNode = null;
			},
			false
		);
pythongosssss's avatar
pythongosssss committed
892
893
	}

pythongosssss's avatar
pythongosssss committed
894
	/**
895
	 * Adds a handler on paste that extracts and loads images or workflows from pasted JSON data
pythongosssss's avatar
pythongosssss committed
896
	 */
pythongosssss's avatar
pythongosssss committed
897
	#addPasteHandler() {
pythongosssss's avatar
pythongosssss committed
898
		document.addEventListener("paste", async (e) => {
899
900
901
902
			// ctrl+shift+v is used to paste nodes with connections
			// this is handled by litegraph
			if(this.shiftDown) return;

903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
			let data = (e.clipboardData || window.clipboardData);
			const items = data.items;

			// Look for image paste data
			for (const item of items) {
				if (item.type.startsWith('image/')) {
					var imageNode = null;

					// If an image node is selected, paste into it
					if (this.canvas.current_node &&
						this.canvas.current_node.is_selected &&
						ComfyApp.isImageNode(this.canvas.current_node)) {
						imageNode = this.canvas.current_node;
					}

					// No image node selected: add a new one
					if (!imageNode) {
						const newNode = LiteGraph.createNode("LoadImage");
						newNode.pos = [...this.canvas.graph_mouse];
						imageNode = this.graph.add(newNode);
						this.graph.change();
					}
					const blob = item.getAsFile();
					imageNode.pasteFile(blob);
					return;
				}
			}

			// No image found. Look for node data
			data = data.getData("text/plain");
pythongosssss's avatar
pythongosssss committed
933
934
935
936
937
938
939
940
941
942
943
			let workflow;
			try {
				data = data.slice(data.indexOf("{"));
				workflow = JSON.parse(data);
			} catch (err) {
				try {
					data = data.slice(data.indexOf("workflow\n"));
					data = data.slice(data.indexOf("{"));
					workflow = JSON.parse(data);
				} catch (error) {}
			}
pythongosssss's avatar
pythongosssss committed
944

pythongosssss's avatar
pythongosssss committed
945
			if (workflow && workflow.version && workflow.nodes && workflow.extra) {
pythongosssss's avatar
pythongosssss committed
946
				await this.loadGraphData(workflow);
pythongosssss's avatar
pythongosssss committed
947
			}
948
			else {
949
950
951
952
				if (e.target.type === "text" || e.target.type === "textarea") {
					return;
				}

953
				// Litegraph default paste
954
				this.canvas.pasteFromClipboard();
955
956
957
958
959
960
961
962
963
964
965
966
			}


		});
	}


	/**
	 * Adds a handler on copy that serializes selected nodes to JSON
	 */
	#addCopyHandler() {
		document.addEventListener("copy", (e) => {
Michael Abrahams's avatar
Michael Abrahams committed
967
968
969
970
			if (e.target.type === "text" || e.target.type === "textarea") {
				// Default system copy
				return;
			}
971

Michael Abrahams's avatar
Michael Abrahams committed
972
			// copy nodes and clear clipboard
973
			if (e.target.className === "litegraph" && this.canvas.selected_nodes) {
Michael Abrahams's avatar
Michael Abrahams committed
974
				this.canvas.copyToClipboard();
comfyanonymous's avatar
comfyanonymous committed
975
				e.clipboardData.setData('text', ' '); //clearData doesn't remove images from clipboard
Michael Abrahams's avatar
Michael Abrahams committed
976
977
978
				e.preventDefault();
				e.stopImmediatePropagation();
				return false;
979
			}
pythongosssss's avatar
pythongosssss committed
980
981
982
		});
	}

983

Jairo Correa's avatar
Jairo Correa committed
984
985
986
987
988
989
990
991
992
993
	/**
	 * Handle mouse
	 *
	 * Move group by header
	 */
	#addProcessMouseHandler() {
		const self = this;

		const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown;
		LGraphCanvas.prototype.processMouseDown = function(e) {
994
995
996
997
998
999
			// prepare for ctrl+shift drag: zoom start
			if(e.ctrlKey && e.shiftKey && e.buttons) {
				self.zoom_drag_start = [e.x, e.y, this.ds.scale];
				return;
			}

Jairo Correa's avatar
Jairo Correa committed
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
			const res = origProcessMouseDown.apply(this, arguments);

			this.selected_group_moving = false;

			if (this.selected_group && !this.selected_group_resizing) {
				var font_size =
					this.selected_group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE;
				var height = font_size * 1.4;

				// Move group by header
				if (LiteGraph.isInsideRectangle(e.canvasX, e.canvasY, this.selected_group.pos[0], this.selected_group.pos[1], this.selected_group.size[0], height)) {
					this.selected_group_moving = true;
				}
			}

			return res;
		}

		const origProcessMouseMove = LGraphCanvas.prototype.processMouseMove;
		LGraphCanvas.prototype.processMouseMove = function(e) {
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
			// handle ctrl+shift drag
			if(e.ctrlKey && e.shiftKey && self.zoom_drag_start) {
				// stop canvas zoom action
				if(!e.buttons) {
					self.zoom_drag_start = null;
					return;
				}

				// calculate delta
				let deltaY = e.y - self.zoom_drag_start[1];
				let startScale = self.zoom_drag_start[2];

				let scale = startScale - deltaY/100;

				this.ds.changeScale(scale, [this.ds.element.width/2, this.ds.element.height/2]);
				this.graph.change();

				return;
			}

Jairo Correa's avatar
Jairo Correa committed
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
			const orig_selected_group = this.selected_group;

			if (this.selected_group && !this.selected_group_resizing && !this.selected_group_moving) {
				this.selected_group = null;
			}

			const res = origProcessMouseMove.apply(this, arguments);

			if (orig_selected_group && !this.selected_group_resizing && !this.selected_group_moving) {
				this.selected_group = orig_selected_group;
			}

			return res;
		};
	}

1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
	/**
	 * Handle keypress
	 *
	 * Ctrl + M mute/unmute selected nodes
	 */
	#addProcessKeyHandler() {
		const self = this;
		const origProcessKey = LGraphCanvas.prototype.processKey;
		LGraphCanvas.prototype.processKey = function(e) {
			if (!this.graph) {
				return;
			}

			var block_default = false;

			if (e.target.localName == "input") {
				return;
			}

1075
1076
			if (e.type == "keydown" && !e.repeat) {

1077
				// Ctrl + M mute/unmute
1078
				if (e.key === 'm' && e.ctrlKey) {
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
					if (this.selected_nodes) {
						for (var i in this.selected_nodes) {
							if (this.selected_nodes[i].mode === 2) { // never
								this.selected_nodes[i].mode = 0; // always
							} else {
								this.selected_nodes[i].mode = 2; // never
							}
						}
					}
					block_default = true;
				}
1090

1091
1092
				// Ctrl + B bypass
				if (e.key === 'b' && e.ctrlKey) {
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
					if (this.selected_nodes) {
						for (var i in this.selected_nodes) {
							if (this.selected_nodes[i].mode === 4) { // never
								this.selected_nodes[i].mode = 0; // always
							} else {
								this.selected_nodes[i].mode = 4; // never
							}
						}
					}
					block_default = true;
				}
1104

1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
				// Alt + C collapse/uncollapse
				if (e.key === 'c' && e.altKey) {
					if (this.selected_nodes) {
						for (var i in this.selected_nodes) {
							this.selected_nodes[i].collapse()
						}
					}
					block_default = true;
				}

1115
1116
				// Ctrl+C Copy
				if ((e.key === 'c') && (e.metaKey || e.ctrlKey)) {
comfyanonymous's avatar
comfyanonymous committed
1117
1118
					// Trigger onCopy
					return true;
1119
1120
1121
				}

				// Ctrl+V Paste
1122
				if ((e.key === 'v' || e.key == 'V') && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
comfyanonymous's avatar
comfyanonymous committed
1123
1124
					// Trigger onPaste
					return true;
1125
				}
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139

				if((e.key === '+') && e.altKey) {
					block_default = true;
					let scale = this.ds.scale * 1.1;
					this.ds.changeScale(scale, [this.ds.element.width/2, this.ds.element.height/2]);
					this.graph.change();
				}

				if((e.key === '-') && e.altKey) {
					block_default = true;
					let scale = this.ds.scale * 1 / 1.1;
					this.ds.changeScale(scale, [this.ds.element.width/2, this.ds.element.height/2]);
					this.graph.change();
				}
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
			}

			this.graph.change();

			if (block_default) {
				e.preventDefault();
				e.stopImmediatePropagation();
				return false;
			}

1150
1151
			// Fall through to Litegraph defaults
			return origProcessKey.apply(this, arguments);
1152
1153
1154
		};
	}

Jairo Correa's avatar
Jairo Correa committed
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
	/**
	 * Draws group header bar
	 */
	#addDrawGroupsHandler() {
		const self = this;

		const origDrawGroups = LGraphCanvas.prototype.drawGroups;
		LGraphCanvas.prototype.drawGroups = function(canvas, ctx) {
			if (!this.graph) {
				return;
			}

			var groups = this.graph._groups;

			ctx.save();
			ctx.globalAlpha = 0.7 * this.editor_alpha;

			for (var i = 0; i < groups.length; ++i) {
				var group = groups[i];

				if (!LiteGraph.overlapBounding(this.visible_area, group._bounding)) {
					continue;
				} //out of the visible area

				ctx.fillStyle = group.color || "#335";
				ctx.strokeStyle = group.color || "#335";
				var pos = group._pos;
				var size = group._size;
				ctx.globalAlpha = 0.25 * this.editor_alpha;
				ctx.beginPath();
				var font_size =
					group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE;
				ctx.rect(pos[0] + 0.5, pos[1] + 0.5, size[0], font_size * 1.4);
				ctx.fill();
				ctx.globalAlpha = this.editor_alpha;
			}

			ctx.restore();

			const res = origDrawGroups.apply(this, arguments);
			return res;
		}
	}

pythongosssss's avatar
pythongosssss committed
1199
	/**
pythongosssss's avatar
pythongosssss committed
1200
	 * Draws node highlights (executing, drag drop) and progress bar
pythongosssss's avatar
pythongosssss committed
1201
	 */
1202
	#addDrawNodeHandler() {
1203
		const origDrawNodeShape = LGraphCanvas.prototype.drawNodeShape;
pythongosssss's avatar
pythongosssss committed
1204
		const self = this;
1205

pythongosssss's avatar
pythongosssss committed
1206
		LGraphCanvas.prototype.drawNodeShape = function (node, ctx, size, fgcolor, bgcolor, selected, mouse_over) {
1207
			const res = origDrawNodeShape.apply(this, arguments);
pythongosssss's avatar
pythongosssss committed
1208

1209
			const nodeErrors = self.lastNodeErrors?.[node.id];
1210

1211
			let color = null;
1212
			let lineWidth = 1;
1213
1214
1215
1216
1217
			if (node.id === +self.runningNodeId) {
				color = "#0f0";
			} else if (self.dragOverNode && node.id === self.dragOverNode.id) {
				color = "dodgerblue";
			}
1218
			else if (nodeErrors?.errors) {
1219
1220
1221
				color = "red";
				lineWidth = 2;
			}
1222
1223
1224
1225
			else if (self.lastExecutionError && +self.lastExecutionError.node_id === node.id) {
				color = "#f0f";
				lineWidth = 2;
			}
1226
1227

			if (color) {
pythongosssss's avatar
pythongosssss committed
1228
				const shape = node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE;
1229
				ctx.lineWidth = lineWidth;
pythongosssss's avatar
pythongosssss committed
1230
1231
1232
				ctx.globalAlpha = 0.8;
				ctx.beginPath();
				if (shape == LiteGraph.BOX_SHAPE)
pythongosssss's avatar
pythongosssss committed
1233
					ctx.rect(-6, -6 - LiteGraph.NODE_TITLE_HEIGHT, 12 + size[0] + 1, 12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT);
pythongosssss's avatar
pythongosssss committed
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
				else if (shape == LiteGraph.ROUND_SHAPE || (shape == LiteGraph.CARD_SHAPE && node.flags.collapsed))
					ctx.roundRect(
						-6,
						-6 - LiteGraph.NODE_TITLE_HEIGHT,
						12 + size[0] + 1,
						12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT,
						this.round_radius * 2
					);
				else if (shape == LiteGraph.CARD_SHAPE)
					ctx.roundRect(
						-6,
pythongosssss's avatar
pythongosssss committed
1245
						-6 - LiteGraph.NODE_TITLE_HEIGHT,
pythongosssss's avatar
pythongosssss committed
1246
1247
						12 + size[0] + 1,
						12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT,
pythongosssss's avatar
pythongosssss committed
1248
						[this.round_radius * 2, this.round_radius * 2, 2, 2]
pythongosssss's avatar
pythongosssss committed
1249
				);
pythongosssss's avatar
pythongosssss committed
1250
1251
				else if (shape == LiteGraph.CIRCLE_SHAPE)
					ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5 + 6, 0, Math.PI * 2);
1252
				ctx.strokeStyle = color;
pythongosssss's avatar
pythongosssss committed
1253
1254
1255
				ctx.stroke();
				ctx.strokeStyle = fgcolor;
				ctx.globalAlpha = 1;
1256
1257
1258
1259
1260
1261
1262
			}

			if (self.progress && node.id === +self.runningNodeId) {
				ctx.fillStyle = "green";
				ctx.fillRect(0, 0, size[0] * (self.progress.value / self.progress.max), 6);
				ctx.fillStyle = bgcolor;
			}
pythongosssss's avatar
pythongosssss committed
1263

1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
			// Highlight inputs that failed validation
			if (nodeErrors) {
				ctx.lineWidth = 2;
				ctx.strokeStyle = "red";
				for (const error of nodeErrors.errors) {
					if (error.extra_info && error.extra_info.input_name) {
						const inputIndex = node.findInputSlot(error.extra_info.input_name)
						if (inputIndex !== -1) {
							let pos = node.getConnectionPos(true, inputIndex);
							ctx.beginPath();
							ctx.arc(pos[0] - node.pos[0], pos[1] - node.pos[1], 12, 0, 2 * Math.PI, false)
							ctx.stroke();
						}
					}
pythongosssss's avatar
pythongosssss committed
1278
1279
1280
1281
1282
				}
			}

			return res;
		};
1283
1284
1285
1286

		const origDrawNode = LGraphCanvas.prototype.drawNode;
		LGraphCanvas.prototype.drawNode = function (node, ctx) {
			var editor_alpha = this.editor_alpha;
1287
			var old_color = node.bgcolor;
1288
1289
1290
1291
1292

			if (node.mode === 2) { // never
				this.editor_alpha = 0.4;
			}

1293
1294
1295
1296
1297
			if (node.mode === 4) { // never
				node.bgcolor = "#FF00FF";
				this.editor_alpha = 0.2;
			}

1298
1299
1300
			const res = origDrawNode.apply(this, arguments);

			this.editor_alpha = editor_alpha;
1301
			node.bgcolor = old_color;
1302
1303
1304

			return res;
		};
pythongosssss's avatar
pythongosssss committed
1305
1306
	}

pythongosssss's avatar
pythongosssss committed
1307
1308
1309
	/**
	 * Handles updates from the API socket
	 */
pythongosssss's avatar
pythongosssss committed
1310
	#addApiUpdateHandlers() {
pythongosssss's avatar
pythongosssss committed
1311
1312
		api.addEventListener("status", ({ detail }) => {
			this.ui.setStatus(detail);
pythongosssss's avatar
pythongosssss committed
1313
1314
		});

pythongosssss's avatar
pythongosssss committed
1315
1316
1317
		api.addEventListener("reconnecting", () => {
			this.ui.dialog.show("Reconnecting...");
		});
pythongosssss's avatar
pythongosssss committed
1318

pythongosssss's avatar
pythongosssss committed
1319
1320
1321
		api.addEventListener("reconnected", () => {
			this.ui.dialog.close();
		});
pythongosssss's avatar
pythongosssss committed
1322
1323

		api.addEventListener("progress", ({ detail }) => {
1324
1325
			if (this.workflowManager.activePrompt?.workflow 
				&& this.workflowManager.activePrompt.workflow !== this.workflowManager.activeWorkflow) return;
pythongosssss's avatar
pythongosssss committed
1326
1327
1328
1329
1330
			this.progress = detail;
			this.graph.setDirtyCanvas(true, false);
		});

		api.addEventListener("executing", ({ detail }) => {
1331
1332
			if (this.workflowManager.activePrompt ?.workflow
				&& this.workflowManager.activePrompt.workflow !== this.workflowManager.activeWorkflow) return;
pythongosssss's avatar
pythongosssss committed
1333
1334
1335
			this.progress = null;
			this.runningNodeId = detail;
			this.graph.setDirtyCanvas(true, false);
space-nuko's avatar
space-nuko committed
1336
			delete this.nodePreviewImages[this.runningNodeId]
pythongosssss's avatar
pythongosssss committed
1337
1338
		});

pythongosssss's avatar
pythongosssss committed
1339
		api.addEventListener("executed", ({ detail }) => {
1340
1341
			if (this.workflowManager.activePrompt ?.workflow
				&& this.workflowManager.activePrompt.workflow !== this.workflowManager.activeWorkflow) return;
pythongosssss's avatar
pythongosssss committed
1342
1343
1344
1345
1346
1347
1348
1349
1350
1351
1352
1353
1354
			const output = this.nodeOutputs[detail.node];
			if (detail.merge && output) {
				for (const k in detail.output ?? {}) {
					const v = output[k];
					if (v instanceof Array) {
						output[k] = v.concat(detail.output[k]);
					} else {
						output[k] = detail.output[k];
					}
				}
			} else {
				this.nodeOutputs[detail.node] = detail.output;
			}
1355
			const node = this.graph.getNodeById(detail.node);
space-nuko's avatar
space-nuko committed
1356
1357
1358
			if (node) {
				if (node.onExecuted)
					node.onExecuted(detail.output);
1359
			}
pythongosssss's avatar
pythongosssss committed
1360
		});
pythongosssss's avatar
pythongosssss committed
1361

1362
		api.addEventListener("execution_start", ({ detail }) => {
space-nuko's avatar
space-nuko committed
1363
			this.runningNodeId = null;
1364
			this.lastExecutionError = null
Chris's avatar
Chris committed
1365
1366
1367
1368
			this.graph._nodes.forEach((node) => {
				if (node.onExecutionStart)
					node.onExecutionStart()
			})
1369
1370
1371
1372
1373
1374
1375
1376
1377
		});

		api.addEventListener("execution_error", ({ detail }) => {
			this.lastExecutionError = detail;
			const formattedError = this.#formatExecutionError(detail);
			this.ui.dialog.show(formattedError);
			this.canvas.draw(true, true);
		});

space-nuko's avatar
space-nuko committed
1378
1379
1380
1381
1382
1383
1384
1385
1386
1387
		api.addEventListener("b_preview", ({ detail }) => {
			const id = this.runningNodeId
			if (id == null)
				return;

			const blob = detail
			const blobUrl = URL.createObjectURL(blob)
			this.nodePreviewImages[id] = [blobUrl]
		});

pythongosssss's avatar
pythongosssss committed
1388
1389
1390
		api.init();
	}

1391
1392
	#addKeyboardHandler() {
		window.addEventListener("keydown", (e) => {
pythongosssss's avatar
pythongosssss committed
1393
			this.shiftDown = e.shiftKey;
1394
		});
pythongosssss's avatar
pythongosssss committed
1395
1396
1397
		window.addEventListener("keyup", (e) => {
			this.shiftDown = e.shiftKey;
		});
1398
1399
	}

1400
1401
1402
1403
1404
1405
1406
1407
1408
1409
1410
1411
1412
1413
1414
1415
1416
1417
1418
1419
1420
1421
1422
1423
1424
1425
1426
1427
1428
1429
1430
1431
1432
1433
	#addConfigureHandler() {
		const app = this;
		const configure = LGraph.prototype.configure;
		// Flag that the graph is configuring to prevent nodes from running checks while its still loading
		LGraph.prototype.configure = function () {
			app.configuringGraph = true;
			try {
				return configure.apply(this, arguments);
			} finally {
				app.configuringGraph = false;
			}
		};
	}

	#addAfterConfigureHandler() {
		const app = this;
		const onConfigure = app.graph.onConfigure;
		app.graph.onConfigure = function () {
			// Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
			for (const node of app.graph._nodes) {
				node.onGraphConfigured?.();
			}
			
			const r = onConfigure?.apply(this, arguments);
			
			// Fire after onConfigure, used by primitves to generate widget using input nodes config
			for (const node of app.graph._nodes) {
				node.onAfterGraphConfigured?.();
			}

			return r;
		};
	}

1434
	/**
1435
	 * Loads all extensions from the API into the window in parallel
1436
1437
	 */
	async #loadExtensions() {
1438
1439
1440
1441
1442
1443
1444
1445
1446
1447
1448
1449
	    const extensions = await api.getExtensions();
	    this.logging.addEntry("Comfy.App", "debug", { Extensions: extensions });
	
	    const extensionPromises = extensions.map(async ext => {
	        try {
	            await import(api.apiURL(ext));
	        } catch (error) {
	            console.error("Error loading extension", ext, error);
	        }
	    });
	
	    await Promise.all(extensionPromises);
1450
1451
1452
1453
1454
		try {
			this.menu.workflows.registerExtension(this);
		} catch (error) {
			console.error(error);
		}
1455
1456
	}

1457
1458
1459
1460
1461
1462
1463
1464
1465
1466
1467
1468
1469
1470
1471
1472
1473
1474
1475
1476
1477
1478
1479
1480
1481
1482
1483
1484
1485
1486
1487
1488
1489
1490
1491
1492
1493
1494
1495
1496
1497
1498
1499
1500
1501
1502
1503
1504
1505
1506
1507
1508
1509
1510
1511
1512
1513
1514
1515
1516
1517
1518
1519
1520
1521
1522
1523
1524
1525
1526
1527
1528
1529
1530
1531
1532
1533
1534
1535
1536
	async #migrateSettings() {
		this.isNewUserSession = true;
		// Store all current settings
		const settings = Object.keys(this.ui.settings).reduce((p, n) => {
			const v = localStorage[`Comfy.Settings.${n}`];
			if (v) {
				try {
					p[n] = JSON.parse(v);
				} catch (error) {}
			}
			return p;
		}, {});

		await api.storeSettings(settings);
	}

	async #setUser() {
		const userConfig = await api.getUserConfig();
		this.storageLocation = userConfig.storage;
		if (typeof userConfig.migrated == "boolean") {
			// Single user mode migrated true/false for if the default user is created
			if (!userConfig.migrated && this.storageLocation === "server") {
				// Default user not created yet
				await this.#migrateSettings();
			}
			return;
		}

		this.multiUserServer = true;
		let user = localStorage["Comfy.userId"];
		const users = userConfig.users ?? {};
		if (!user || !users[user]) {
			// This will rarely be hit so move the loading to on demand
			const { UserSelectionScreen } = await import("./ui/userSelection.js");
		
			this.ui.menuContainer.style.display = "none";
			const { userId, username, created } = await new UserSelectionScreen().show(users, user);
			this.ui.menuContainer.style.display = "";

			user = userId;
			localStorage["Comfy.userName"] = username;
			localStorage["Comfy.userId"] = user;

			if (created) {
				api.user = user;
				await this.#migrateSettings();
			}
		}

		api.user = user;

		this.ui.settings.addSetting({
			id: "Comfy.SwitchUser",
			name: "Switch User",
			type: (name) => {
				let currentUser = localStorage["Comfy.userName"];
				if (currentUser) {
					currentUser = ` (${currentUser})`;
				}
				return $el("tr", [
					$el("td", [
						$el("label", {
							textContent: name,
						}),
					]),
					$el("td", [
						$el("button", {
							textContent: name + (currentUser ?? ""),
							onclick: () => {
								delete localStorage["Comfy.userId"];
								delete localStorage["Comfy.userName"];
								window.location.reload();
							},
						}),
					]),
				]);
			},
		});
	}

pythongosssss's avatar
pythongosssss committed
1537
1538
1539
1540
	/**
	 * Set up the app on the page
	 */
	async setup() {
1541
		await this.#setUser();
1542

pythongosssss's avatar
pythongosssss committed
1543
		// Create and mount the LiteGraph in the DOM
ltdrdata's avatar
ltdrdata committed
1544
1545
1546
		const mainCanvas = document.createElement("canvas")
		mainCanvas.style.touchAction = "none"
		const canvasEl = (this.canvasEl = Object.assign(mainCanvas, { id: "graph-canvas" }));
1547
		canvasEl.tabIndex = "1";
1548
1549
1550
1551
1552
		document.body.append(canvasEl);
		this.resizeCanvas();

		await Promise.all([this.workflowManager.loadWorkflows(), this.ui.settings.load()]);
		await this.#loadExtensions();
pythongosssss's avatar
pythongosssss committed
1553

1554
		addDomClippingSetting();
Jairo Correa's avatar
Jairo Correa committed
1555
		this.#addProcessMouseHandler();
1556
		this.#addProcessKeyHandler();
1557
		this.#addConfigureHandler();
pythongosssss's avatar
pythongosssss committed
1558
		this.#addApiUpdateHandlers();
1559
		this.#addRestoreWorkflowView();
Jairo Correa's avatar
Jairo Correa committed
1560

pythongosssss's avatar
pythongosssss committed
1561
		this.graph = new LGraph();
1562
1563
1564

		this.#addAfterConfigureHandler();

1565
		this.canvas = new LGraphCanvas(canvasEl, this.graph);
pythongosssss's avatar
pythongosssss committed
1566
1567
		this.ctx = canvasEl.getContext("2d");

1568
1569
1570
		LiteGraph.release_link_on_empty_shows_menu = true;
		LiteGraph.alt_drag_do_clone_nodes = true;

pythongosssss's avatar
pythongosssss committed
1571
1572
1573
		this.graph.start();

		// Ensure the canvas fills the window
1574
1575
1576
1577
1578
1579
1580
		this.resizeCanvas();
		window.addEventListener("resize", () => this.resizeCanvas());
		const ro = new ResizeObserver(() => this.resizeCanvas());
		ro.observe(this.bodyTop);
		ro.observe(this.bodyLeft);
		ro.observe(this.bodyRight);
		ro.observe(this.bodyBottom);
pythongosssss's avatar
pythongosssss committed
1581
1582
1583

		await this.#invokeExtensionsAsync("init");
		await this.registerNodes();
1584
		initWidgets(this);
pythongosssss's avatar
pythongosssss committed
1585
1586
1587
1588

		// Load previous workflow
		let restored = false;
		try {
1589
1590
1591
			const loadWorkflow = async (json) => {
				if (json) {
					const workflow = JSON.parse(json);
1592
1593
					const workflowName = getStorageValue("Comfy.PreviousWorkflow");
					await this.loadGraphData(workflow, true, workflowName);
1594
1595
1596
1597
1598
1599
1600
					return true;
				}
			};
			const clientId = api.initialClientId ?? api.clientId;
			restored =
				(clientId && (await loadWorkflow(sessionStorage.getItem(`workflow:${clientId}`)))) ||
				(await loadWorkflow(localStorage.getItem("workflow")));
1601
1602
1603
		} catch (err) {
			console.error("Error loading previous workflow", err);
		}
pythongosssss's avatar
pythongosssss committed
1604
1605
1606

		// We failed to restore a workflow so load the default
		if (!restored) {
pythongosssss's avatar
pythongosssss committed
1607
			await this.loadGraphData();
pythongosssss's avatar
pythongosssss committed
1608
1609
1610
		}

		// Save current workflow automatically
1611
1612
1613
1614
1615
1616
1617
		setInterval(() => {
			const workflow = JSON.stringify(this.graph.serialize());
			localStorage.setItem("workflow", workflow);
			if (api.clientId) {
				sessionStorage.setItem(`workflow:${api.clientId}`, workflow);
			}
		}, 1000);
pythongosssss's avatar
pythongosssss committed
1618

1619
		this.#addDrawNodeHandler();
Jairo Correa's avatar
Jairo Correa committed
1620
		this.#addDrawGroupsHandler();
pythongosssss's avatar
pythongosssss committed
1621
		this.#addDropHandler();
1622
		this.#addCopyHandler();
pythongosssss's avatar
pythongosssss committed
1623
		this.#addPasteHandler();
1624
		this.#addKeyboardHandler();
pythongosssss's avatar
pythongosssss committed
1625

pythongosssss's avatar
pythongosssss committed
1626
1627
1628
		await this.#invokeExtensionsAsync("setup");
	}

1629
1630
1631
1632
1633
1634
1635
1636
1637
1638
1639
1640
1641
	resizeCanvas() {
		// Limit minimal scale to 1, see https://github.com/comfyanonymous/ComfyUI/pull/845
		const scale = Math.max(window.devicePixelRatio, 1);
		
		// Clear fixed width and height while calculating rect so it uses 100% instead
		this.canvasEl.height = this.canvasEl.width = "";
		const { width, height } = this.canvasEl.getBoundingClientRect();
		this.canvasEl.width = Math.round(width * scale);
		this.canvasEl.height = Math.round(height * scale);
		this.canvasEl.getContext("2d").scale(scale, scale);
		this.canvas?.draw(true, true);
	}

pythongosssss's avatar
pythongosssss committed
1642
1643
1644
	/**
	 * Registers nodes with the graph
	 */
pythongosssss's avatar
pythongosssss committed
1645
1646
1647
1648
	async registerNodes() {
		const app = this;
		// Load node definitions from the backend
		const defs = await api.getNodeDefs();
ltdrdata's avatar
ltdrdata committed
1649
		await this.registerNodesFromDefs(defs);
1650
1651
1652
		await this.#invokeExtensionsAsync("registerCustomNodes");
	}

1653
1654
1655
1656
1657
1658
1659
1660
1661
1662
1663
1664
1665
1666
	getWidgetType(inputData, inputName) {
		const type = inputData[0];

		if (Array.isArray(type)) {
			return "COMBO";
		} else if (`${type}:${inputName}` in this.widgets) {
			return `${type}:${inputName}`;
		} else if (type in this.widgets) {
			return type;
		} else {
			return null;
		}
	}

pythongosssss's avatar
pythongosssss committed
1667
1668
1669
1670
1671
1672
1673
1674
1675
1676
1677
1678
1679
1680
	async registerNodeDef(nodeId, nodeData) {
		const self = this;
		const node = Object.assign(
			function ComfyNode() {
				var inputs = nodeData["input"]["required"];
				if (nodeData["input"]["optional"] != undefined) {
					inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"]);
				}
				const config = { minWidth: 1, minHeight: 1 };
				for (const inputName in inputs) {
					const inputData = inputs[inputName];
					const type = inputData[0];

					let widgetCreated = true;
1681
					const widgetType = self.getWidgetType(inputData, inputName);
pythongosssss's avatar
pythongosssss committed
1682
1683
1684
1685
1686
1687
1688
1689
1690
1691
1692
1693
1694
1695
1696
1697
1698
1699
1700
1701
1702
1703
1704
1705
1706
1707
1708
1709
1710
1711
1712
1713
1714
1715
1716
1717
1718
1719
1720
1721
1722
1723
1724
1725
1726
1727
1728
1729
1730
1731
1732
1733
1734
1735
1736
					if(widgetType) {
						if(widgetType === "COMBO") {
							Object.assign(config, self.widgets.COMBO(this, inputName, inputData, app) || {});
						} else {
							Object.assign(config, self.widgets[widgetType](this, inputName, inputData, app) || {});
						}
					} else {
						// Node connection inputs
						this.addInput(inputName, type);
						widgetCreated = false;
					}

					if(widgetCreated && inputData[1]?.forceInput && config?.widget) {
						if (!config.widget.options) config.widget.options = {};
						config.widget.options.forceInput = inputData[1].forceInput;
					}
					if(widgetCreated && inputData[1]?.defaultInput && config?.widget) {
						if (!config.widget.options) config.widget.options = {};
						config.widget.options.defaultInput = inputData[1].defaultInput;
					}
				}

				for (const o in nodeData["output"]) {
					let output = nodeData["output"][o];
					if(output instanceof Array) output = "COMBO";
					const outputName = nodeData["output_name"][o] || output;
					const outputShape = nodeData["output_is_list"][o] ? LiteGraph.GRID_SHAPE : LiteGraph.CIRCLE_SHAPE ;
					this.addOutput(outputName, output, { shape: outputShape });
				}

				const s = this.computeSize();
				s[0] = Math.max(config.minWidth, s[0] * 1.5);
				s[1] = Math.max(config.minHeight, s[1]);
				this.size = s;
				this.serialize_widgets = true;

				app.#invokeExtensionsAsync("nodeCreated", this);
			},
			{
				title: nodeData.display_name || nodeData.name,
				comfyClass: nodeData.name,
				nodeData
			}
		);
		node.prototype.comfyClass = nodeData.name;

		this.#addNodeContextMenuHandler(node);
		this.#addDrawBackgroundHandler(node, app);
		this.#addNodeKeyHandler(node);

		await this.#invokeExtensionsAsync("beforeRegisterNodeDef", node, nodeData);
		LiteGraph.registerNodeType(nodeId, node);
		node.category = nodeData.category;
	}

1737
    async registerNodesFromDefs(defs) {
pythongosssss's avatar
pythongosssss committed
1738
1739
1740
		await this.#invokeExtensionsAsync("addCustomNodeDefs", defs);

		// Generate list of known widgets
pythongosssss's avatar
pythongosssss committed
1741
		this.widgets = Object.assign(
pythongosssss's avatar
pythongosssss committed
1742
1743
1744
1745
1746
1747
1748
			{},
			ComfyWidgets,
			...(await this.#invokeExtensionsAsync("getCustomWidgets")).filter(Boolean)
		);

		// Register a node for each definition
		for (const nodeId in defs) {
pythongosssss's avatar
pythongosssss committed
1749
			this.registerNodeDef(nodeId, defs[nodeId]);
pythongosssss's avatar
pythongosssss committed
1750
1751
1752
		}
	}

Jairo Correa's avatar
Jairo Correa committed
1753
1754
1755
1756
1757
1758
1759
1760
1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771
1772
1773
1774
1775
1776
1777
1778
1779
1780
1781
1782
1783
1784
1785
1786
1787
1788
1789
	loadTemplateData(templateData) {
		if (!templateData?.templates) {
			return;
		}

		const old = localStorage.getItem("litegrapheditor_clipboard");

		var maxY, nodeBottom, node;

		for (const template of templateData.templates) {
			if (!template?.data) {
				continue;
			}

			localStorage.setItem("litegrapheditor_clipboard", template.data);
			app.canvas.pasteFromClipboard();

			// Move mouse position down to paste the next template below

			maxY = false;

			for (const i in app.canvas.selected_nodes) {
				node = app.canvas.selected_nodes[i];

				nodeBottom = node.pos[1] + node.size[1];

				if (maxY === false || nodeBottom > maxY) {
					maxY = nodeBottom;
				}
			}

			app.canvas.graph_mouse[1] = maxY + 50;
		}

		localStorage.setItem("litegrapheditor_clipboard", old);
	}

pythongosssss's avatar
pythongosssss committed
1790
	showMissingNodesError(missingNodeTypes, hasAddedNodes = true) {
1791
1792
		let seenTypes = new Set();

pythongosssss's avatar
pythongosssss committed
1793
		this.ui.dialog.show(
1794
			$el("div.comfy-missing-nodes", [
pythongosssss's avatar
pythongosssss committed
1795
1796
1797
				$el("span", { textContent: "When loading the graph, the following node types were not found: " }),
				$el(
					"ul",
1798
1799
1800
1801
1802
1803
1804
1805
1806
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
					Array.from(new Set(missingNodeTypes)).map((t) => {
						let children = [];
						if (typeof t === "object") {
							if(seenTypes.has(t.type)) return null;
							seenTypes.add(t.type);
							children.push($el("span", { textContent: t.type }));
							if (t.hint) {
								children.push($el("span", { textContent: t.hint }));
							}
							if (t.action) {
								children.push($el("button", { onclick: t.action.callback, textContent: t.action.text }));
							}
						} else {
							if(seenTypes.has(t)) return null;
							seenTypes.add(t);
							children.push($el("span", { textContent: t }));
						}
						return $el("li", children);
					}).filter(Boolean)
pythongosssss's avatar
pythongosssss committed
1817
				),
1818
1819
1820
				...(hasAddedNodes
					? [$el("span", { textContent: "Nodes that have failed to load will show as red on the graph." })]
					: []),
pythongosssss's avatar
pythongosssss committed
1821
			])
pythongosssss's avatar
pythongosssss committed
1822
1823
1824
1825
1826
1827
		);
		this.logging.addEntry("Comfy.App", "warn", {
			MissingNodes: missingNodeTypes,
		});
	}

1828
1829
1830
1831
1832
1833
1834
1835
1836
1837
1838
1839
1840
1841
1842
	async changeWorkflow(callback, workflow = null) {
		try {
			this.workflowManager.activeWorkflow?.changeTracker?.store()
		} catch (error) {
			console.error(error);
		}
		await callback();
		try {
			this.workflowManager.setWorkflow(workflow);
			this.workflowManager.activeWorkflow?.track()
		} catch (error) {
			console.error(error);
		}
	}

pythongosssss's avatar
pythongosssss committed
1843
1844
1845
	/**
	 * Populates the graph with the specified workflow data
	 * @param {*} graphData A serialized graph object
1846
	 * @param { boolean } clean If the graph state, e.g. images, should be cleared
1847
1848
	 * @param { boolean } restore_view If the graph position should be restored
	 * @param { import("./workflows.js").ComfyWorkflowInstance | null } workflow The workflow
pythongosssss's avatar
pythongosssss committed
1849
	 */
1850
	async loadGraphData(graphData, clean = true, restore_view = true, workflow = null) {
1851
1852
1853
		if (clean !== false) {
			this.clean();
		}
1854

1855
		let reset_invalid_values = false;
pythongosssss's avatar
pythongosssss committed
1856
		if (!graphData) {
1857
			graphData = defaultGraph;
1858
			reset_invalid_values = true;
pythongosssss's avatar
pythongosssss committed
1859
		}
1860

1861
1862
1863
1864
1865
1866
1867
		if (typeof structuredClone === "undefined")
		{
			graphData = JSON.parse(JSON.stringify(graphData));
		}else
		{
			graphData = structuredClone(graphData);
		}
1868
1869
1870
1871
1872
1873
	
		try {
			this.workflowManager.setWorkflow(workflow);
		} catch (error) {
			console.error(error);
		}
1874

pythongosssss's avatar
const  
pythongosssss committed
1875
		const missingNodeTypes = [];
pythongosssss's avatar
pythongosssss committed
1876
		await this.#invokeExtensionsAsync("beforeConfigureGraph", graphData, missingNodeTypes);
1877
		for (let n of graphData.nodes) {
1878
			// Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
1879
			if (n.type == "T2IAdapterLoader") n.type = "ControlNetLoader";
comfyanonymous's avatar
comfyanonymous committed
1880
			if (n.type == "ConditioningAverage ") n.type = "ConditioningAverage"; //typo fix
comfyanonymous's avatar
comfyanonymous committed
1881
			if (n.type == "SDV_img2vid_Conditioning") n.type = "SVD_img2vid_Conditioning"; //typo fix
1882
1883
1884
1885

			// Find missing node types
			if (!(n.type in LiteGraph.registered_node_types)) {
				missingNodeTypes.push(n.type);
pythongosssss's avatar
pythongosssss committed
1886
				n.type = sanitizeNodeName(n.type);
1887
			}
1888
1889
		}

1890
1891
		try {
			this.graph.configure(graphData);
1892
			if (restore_view && this.enableWorkflowViewRestore.value && graphData.extra?.ds) {
1893
1894
1895
				this.canvas.ds.offset = graphData.extra.ds.offset;
				this.canvas.ds.scale = graphData.extra.ds.scale;
			}
1896
1897
1898
1899
1900
			
			try {
				this.workflowManager.activeWorkflow?.track()
			} catch (error) {
			}
1901
		} catch (error) {
pythongosssss's avatar
pythongosssss committed
1902
			let errorHint = [];
pythongosssss's avatar
pythongosssss committed
1903
1904
			// Try extracting filename to see if it was caused by an extension script
			const filename = error.fileName || (error.stack || "").match(/(\/extensions\/.*\.js)/)?.[1];
1905
1906
			const pos = (filename || "").indexOf("/extensions/");
			if (pos > -1) {
pythongosssss's avatar
pythongosssss committed
1907
1908
1909
1910
1911
1912
1913
1914
1915
1916
				errorHint.push(
					$el("span", { textContent: "This may be due to the following script:" }),
					$el("br"),
					$el("span", {
						style: {
							fontWeight: "bold",
						},
						textContent: filename.substring(pos),
					})
				);
1917
1918
1919
1920
1921
1922
1923
1924
1925
1926
1927
1928
1929
1930
1931
1932
1933
			}

			// Show dialog to let the user know something went wrong loading the data
			this.ui.dialog.show(
				$el("div", [
					$el("p", { textContent: "Loading aborted due to error reloading workflow data" }),
					$el("pre", {
						style: { padding: "5px", backgroundColor: "rgba(255,0,0,0.2)" },
						textContent: error.toString(),
					}),
					$el("pre", {
						style: {
							padding: "5px",
							color: "#ccc",
							fontSize: "10px",
							maxHeight: "50vh",
							overflow: "auto",
pythongosssss's avatar
pythongosssss committed
1934
							backgroundColor: "rgba(0,0,0,0.2)",
1935
1936
1937
						},
						textContent: error.stack || "No stacktrace available",
					}),
pythongosssss's avatar
pythongosssss committed
1938
					...errorHint,
1939
1940
				]).outerHTML
			);
pythongosssss's avatar
pythongosssss committed
1941

1942
1943
			return;
		}
pythongosssss's avatar
pythongosssss committed
1944
1945
1946
1947
1948
1949
1950
1951
1952
1953
1954
1955
1956
1957

		for (const node of this.graph._nodes) {
			const size = node.computeSize();
			size[0] = Math.max(node.size[0], size[0]);
			size[1] = Math.max(node.size[1], size[1]);
			node.size = size;

			if (node.widgets) {
				// If you break something in the backend and want to patch workflows in the frontend
				// This is the place to do this
				for (let widget of node.widgets) {
					if (node.type == "KSampler" || node.type == "KSamplerAdvanced") {
						if (widget.name == "sampler_name") {
							if (widget.value.startsWith("sample_")) {
pythongosssss's avatar
pythongosssss committed
1958
								widget.value = widget.value.slice(7);
pythongosssss's avatar
pythongosssss committed
1959
1960
							}
						}
1961
1962
					}
					if (node.type == "KSampler" || node.type == "KSamplerAdvanced" || node.type == "PrimitiveNode") {
1963
						if (widget.name == "control_after_generate") {
1964
							if (widget.value === true) {
1965
								widget.value = "randomize";
1966
1967
							} else if (widget.value === false) {
								widget.value = "fixed";
1968
1969
							}
						}
pythongosssss's avatar
pythongosssss committed
1970
					}
1971
1972
1973
1974
1975
1976
1977
					if (reset_invalid_values) {
						if (widget.type == "combo") {
							if (!widget.options.values.includes(widget.value) && widget.options.values.length > 0) {
								widget.value = widget.options.values[0];
							}
						}
					}
pythongosssss's avatar
pythongosssss committed
1978
1979
1980
1981
1982
				}
			}

			this.#invokeExtensions("loadedGraphNode", node);
		}
1983
1984

		if (missingNodeTypes.length) {
pythongosssss's avatar
pythongosssss committed
1985
			this.showMissingNodesError(missingNodeTypes);
1986
		}
pythongosssss's avatar
pythongosssss committed
1987
		await this.#invokeExtensionsAsync("afterConfigureGraph", missingNodeTypes);
1988
1989
1990
		requestAnimationFrame(() => {
			this.graph.setDirtyCanvas(true, true);
		});
pythongosssss's avatar
pythongosssss committed
1991
1992
	}

pythongosssss's avatar
pythongosssss committed
1993
1994
1995
1996
	/**
	 * Converts the current graph workflow for sending to the API
	 * @returns The workflow and node links
	 */
1997
1998
	async graphToPrompt(graph = this.graph, clean = true) {
		for (const outerNode of graph.computeExecutionOrder(false)) {
1999
2000
2001
2002
2003
2004
2005
2006
			if (outerNode.widgets) {
				for (const widget of outerNode.widgets) {
					// Allow widgets to run callbacks before a prompt has been queued
					// e.g. random seed before every gen
					widget.beforeQueued?.();
				}
			}

pythongosssss's avatar
pythongosssss committed
2007
2008
2009
2010
2011
2012
2013
			const innerNodes = outerNode.getInnerNodes ? outerNode.getInnerNodes() : [outerNode];
			for (const node of innerNodes) {
				if (node.isVirtualNode) {
					// Don't serialize frontend only nodes but let them make changes
					if (node.applyToGraph) {
						node.applyToGraph();
					}
2014
2015
2016
2017
				}
			}
		}

2018
		const workflow = graph.serialize();
pythongosssss's avatar
pythongosssss committed
2019
		const output = {};
2020
		// Process nodes in order of execution
2021
		for (const outerNode of graph.computeExecutionOrder(false)) {
pythongosssss's avatar
pythongosssss committed
2022
2023
			const skipNode = outerNode.mode === 2 || outerNode.mode === 4;
			const innerNodes = (!skipNode && outerNode.getInnerNodes) ? outerNode.getInnerNodes() : [outerNode];
pythongosssss's avatar
pythongosssss committed
2024
2025
2026
2027
			for (const node of innerNodes) {
				if (node.isVirtualNode) {
					continue;
				}
2028

pythongosssss's avatar
pythongosssss committed
2029
2030
2031
2032
				if (node.mode === 2 || node.mode === 4) {
					// Don't serialize muted nodes
					continue;
				}
2033

pythongosssss's avatar
pythongosssss committed
2034
2035
				const inputs = {};
				const widgets = node.widgets;
pythongosssss's avatar
pythongosssss committed
2036

pythongosssss's avatar
pythongosssss committed
2037
2038
2039
2040
2041
2042
2043
				// Store all widget values
				if (widgets) {
					for (const i in widgets) {
						const widget = widgets[i];
						if (!widget.options || widget.options.serialize !== false) {
							inputs[widget.name] = widget.serializeValue ? await widget.serializeValue(node, i) : widget.value;
						}
pythongosssss's avatar
pythongosssss committed
2044
2045
2046
					}
				}

pythongosssss's avatar
pythongosssss committed
2047
2048
2049
2050
2051
2052
2053
2054
2055
2056
2057
2058
2059
2060
				// Store all node links
				for (let i in node.inputs) {
					let parent = node.getInputNode(i);
					if (parent) {
						let link = node.getInputLink(i);
						while (parent.mode === 4 || parent.isVirtualNode) {
							let found = false;
							if (parent.isVirtualNode) {
								link = parent.getInputLink(link.origin_slot);
								if (link) {
									parent = parent.getInputNode(link.target_slot);
									if (parent) {
										found = true;
									}
2061
								}
pythongosssss's avatar
pythongosssss committed
2062
2063
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
							} else if (link && parent.mode === 4) {
								let all_inputs = [link.origin_slot];
								if (parent.inputs) {
									all_inputs = all_inputs.concat(Object.keys(parent.inputs))
									for (let parent_input in all_inputs) {
										parent_input = all_inputs[parent_input];
										if (parent.inputs[parent_input]?.type === node.inputs[i].type) {
											link = parent.getInputLink(parent_input);
											if (link) {
												parent = parent.getInputNode(parent_input);
											}
											found = true;
											break;
2075
										}
2076
2077
2078
									}
								}
							}
2079

pythongosssss's avatar
pythongosssss committed
2080
2081
2082
							if (!found) {
								break;
							}
2083
2084
						}

pythongosssss's avatar
pythongosssss committed
2085
2086
2087
2088
						if (link) {
							if (parent?.updateLink) {
								link = parent.updateLink(link);
							}
pythongosssss's avatar
pythongosssss committed
2089
2090
2091
							if (link) {
								inputs[node.inputs[i].name] = [String(link.origin_id), parseInt(link.origin_slot)];
							}
pythongosssss's avatar
pythongosssss committed
2092
						}
2093
					}
pythongosssss's avatar
pythongosssss committed
2094
2095
				}

2096
				let node_data = {
pythongosssss's avatar
pythongosssss committed
2097
2098
					inputs,
					class_type: node.comfyClass,
2099
2100
2101
				};

				if (this.ui.settings.getSettingValue("Comfy.DevMode")) {
2102
					// Ignored by the backend.
2103
					node_data["_meta"] = {
2104
						title: node.title,
2105
2106
2107
2108
					}
				}

				output[String(node.id)] = node_data;
pythongosssss's avatar
pythongosssss committed
2109
			}
pythongosssss's avatar
pythongosssss committed
2110
2111
		}

2112
		// Remove inputs connected to removed nodes
2113
2114
2115
2116
2117
2118
2119
2120
		if(clean) {
			for (const o in output) {
				for (const i in output[o].inputs) {
					if (Array.isArray(output[o].inputs[i])
						&& output[o].inputs[i].length === 2
						&& !output[output[o].inputs[i][0]]) {
						delete output[o].inputs[i];
					}
2121
2122
2123
2124
				}
			}
		}

pythongosssss's avatar
pythongosssss committed
2125
2126
2127
		return { workflow, output };
	}

2128
	#formatPromptError(error) {
2129
2130
2131
2132
2133
2134
2135
2136
2137
2138
2139
2140
2141
2142
2143
2144
2145
2146
2147
2148
2149
2150
2151
2152
		if (error == null) {
			return "(unknown error)"
		}
		else if (typeof error === "string") {
			return error;
		}
		else if (error.stack && error.message) {
			return error.toString()
		}
		else if (error.response) {
			let message = error.response.error.message;
			if (error.response.error.details)
			message += ": " + error.response.error.details;
			for (const [nodeID, nodeError] of Object.entries(error.response.node_errors)) {
			message += "\n" + nodeError.class_type + ":"
				for (const errorReason of nodeError.errors) {
					message += "\n    - " + errorReason.message + ": " + errorReason.details
				}
			}
			return message
		}
		return "(unknown error)"
	}

2153
2154
2155
2156
2157
2158
2159
2160
2161
	#formatExecutionError(error) {
		if (error == null) {
			return "(unknown error)"
		}

		const traceback = error.traceback.join("")
		const nodeId = error.node_id
		const nodeType = error.node_type

2162
		return `Error occurred when executing ${nodeType}:\n\n${error.exception_message}\n\n${traceback}`
2163
2164
	}

m957ymj75urz's avatar
m957ymj75urz committed
2165
	async queuePrompt(number, batchCount = 1) {
2166
		this.#queueItems.push({ number, batchCount });
pythongosssss's avatar
pythongosssss committed
2167

2168
2169
2170
2171
		// Only have one action process the items so each one gets a unique seed correctly
		if (this.#processingQueue) {
			return;
		}
2172

2173
		this.#processingQueue = true;
2174
		this.lastNodeErrors = null;
2175

2176
2177
2178
		try {
			while (this.#queueItems.length) {
				({ number, batchCount } = this.#queueItems.pop());
pythongosssss's avatar
pythongosssss committed
2179

2180
2181
2182
2183
				for (let i = 0; i < batchCount; i++) {
					const p = await this.graphToPrompt();

					try {
2184
2185
2186
2187
						const res = await api.queuePrompt(number, p);
						this.lastNodeErrors = res.node_errors;
						if (this.lastNodeErrors.length > 0) {
							this.canvas.draw(true, true);
2188
2189
2190
2191
2192
2193
2194
2195
						} else {
							try {
								this.workflowManager.storePrompt({
									id: res.prompt_id,
									nodes: Object.keys(p.output)
								});
							} catch (error) {
							}
2196
						}
2197
					} catch (error) {
2198
						const formattedError = this.#formatPromptError(error)
2199
2200
						this.ui.dialog.show(formattedError);
						if (error.response) {
2201
							this.lastNodeErrors = error.response.node_errors;
2202
2203
							this.canvas.draw(true, true);
						}
2204
2205
2206
2207
2208
2209
2210
2211
2212
2213
2214
2215
2216
						break;
					}

					for (const n of p.workflow.nodes) {
						const node = graph.getNodeById(n.id);
						if (node.widgets) {
							for (const widget of node.widgets) {
								// Allow widgets to run callbacks after a prompt has been queued
								// e.g. random seed after every gen
								if (widget.afterQueued) {
									widget.afterQueued();
								}
							}
m957ymj75urz's avatar
m957ymj75urz committed
2217
						}
pythongosssss's avatar
pythongosssss committed
2218
					}
2219
2220
2221

					this.canvas.draw(true, true);
					await this.ui.queue.update();
pythongosssss's avatar
pythongosssss committed
2222
2223
				}
			}
2224
2225
		} finally {
			this.#processingQueue = false;
m957ymj75urz's avatar
m957ymj75urz committed
2226
		}
pythongosssss's avatar
pythongosssss committed
2227
		api.dispatchEvent(new CustomEvent("promptQueued", { detail: { number, batchCount } }));
2228
		return !this.lastNodeErrors;
pythongosssss's avatar
pythongosssss committed
2229
	}
pythongosssss's avatar
pythongosssss committed
2230

2231
2232
2233
2234
2235
2236
2237
2238
	showErrorOnFileLoad(file) {
		this.ui.dialog.show(
			$el("div", [
				$el("p", {textContent: `Unable to find workflow in ${file.name}`})
			]).outerHTML
		);
	}

pythongosssss's avatar
pythongosssss committed
2239
2240
	/**
	 * Loads workflow data from the specified file
2241
	 * @param {File} file
pythongosssss's avatar
pythongosssss committed
2242
	 */
pythongosssss's avatar
pythongosssss committed
2243
	async handleFile(file) {
2244
2245
2246
2247
2248
2249
2250
2251
		const removeExt = f => {
			if(!f) return f;
			const p = f.lastIndexOf(".");
			if(p === -1) return f;
			return f.substring(0, p);
		};

		const fileName = removeExt(file.name);
pythongosssss's avatar
pythongosssss committed
2252
2253
		if (file.type === "image/png") {
			const pngInfo = await getPngMetadata(file);
2254
			if (pngInfo?.workflow) {
2255
				await this.loadGraphData(JSON.parse(pngInfo.workflow), true, true, fileName);
2256
			} else if (pngInfo?.prompt) {
2257
				this.loadApiJson(JSON.parse(pngInfo.prompt), fileName);
2258
			} else if (pngInfo?.parameters) {
2259
2260
2261
				this.changeWorkflow(() => {
					importA1111(this.graph, pngInfo.parameters);
				}, fileName)
2262
2263
			} else {
				this.showErrorOnFileLoad(file);
pythongosssss's avatar
pythongosssss committed
2264
			}
2265
2266
		} else if (file.type === "image/webp") {
			const pngInfo = await getWebpMetadata(file);
2267
2268
2269
2270
2271
			// Support loading workflows from that webp custom node.
			const workflow = pngInfo?.workflow || pngInfo?.Workflow;
			const prompt = pngInfo?.prompt || pngInfo?.Prompt;

			if (workflow) {
2272
				this.loadGraphData(JSON.parse(workflow), true, true, fileName);
2273
			} else if (prompt) {
2274
				this.loadApiJson(JSON.parse(prompt), fileName);
2275
2276
			} else {
				this.showErrorOnFileLoad(file);
2277
			}
2278
		} else if (file.type === "application/json" || file.name?.endsWith(".json")) {
pythongosssss's avatar
pythongosssss committed
2279
			const reader = new FileReader();
pythongosssss's avatar
pythongosssss committed
2280
			reader.onload = async () => {
pythongosssss's avatar
pythongosssss committed
2281
				const jsonContent = JSON.parse(reader.result);
Jairo Correa's avatar
Jairo Correa committed
2282
2283
				if (jsonContent?.templates) {
					this.loadTemplateData(jsonContent);
pythongosssss's avatar
pythongosssss committed
2284
				} else if(this.isApiJson(jsonContent)) {
2285
					this.loadApiJson(jsonContent, fileName);
Jairo Correa's avatar
Jairo Correa committed
2286
				} else {
2287
					await this.loadGraphData(jsonContent, true, fileName);
Jairo Correa's avatar
Jairo Correa committed
2288
				}
pythongosssss's avatar
pythongosssss committed
2289
2290
			};
			reader.readAsText(file);
2291
		} else if (file.name?.endsWith(".latent") || file.name?.endsWith(".safetensors")) {
2292
2293
			const info = await getLatentMetadata(file);
			if (info.workflow) {
2294
				await this.loadGraphData(JSON.parse(info.workflow), true, fileName);
2295
2296
			} else if (info.prompt) {
				this.loadApiJson(JSON.parse(info.prompt));
2297
2298
			} else {
				this.showErrorOnFileLoad(file);
2299
			}
2300
2301
		} else {
			this.showErrorOnFileLoad(file);
pythongosssss's avatar
pythongosssss committed
2302
2303
		}
	}
2304

pythongosssss's avatar
pythongosssss committed
2305
2306
2307
2308
	isApiJson(data) {
		return Object.values(data).every((v) => v.class_type);
	}

2309
	loadApiJson(apiData, fileName) {
pythongosssss's avatar
pythongosssss committed
2310
2311
2312
2313
2314
2315
2316
2317
2318
2319
2320
		const missingNodeTypes = Object.values(apiData).filter((n) => !LiteGraph.registered_node_types[n.class_type]);
		if (missingNodeTypes.length) {
			this.showMissingNodesError(missingNodeTypes.map(t => t.class_type), false);
			return;
		}

		const ids = Object.keys(apiData);
		app.graph.clear();
		for (const id of ids) {
			const data = apiData[id];
			const node = LiteGraph.createNode(data.class_type);
2321
			node.id = isNaN(+id) ? id : +id;
2322
			node.title = data._meta?.title ?? node.title
Juanjuan's avatar
Juanjuan committed
2323
			app.graph.add(node);
pythongosssss's avatar
pythongosssss committed
2324
2325
		}

2326
2327
2328
2329
2330
2331
2332
2333
2334
2335
2336
2337
2338
2339
2340
2341
2342
2343
2344
2345
2346
2347
2348
2349
2350
2351
2352
2353
		this.changeWorkflow(() => {
			for (const id of ids) {
				const data = apiData[id];
				const node = app.graph.getNodeById(id);
				for (const input in data.inputs ?? {}) {
					const value = data.inputs[input];
					if (value instanceof Array) {
						const [fromId, fromSlot] = value;
						const fromNode = app.graph.getNodeById(fromId);
						let toSlot = node.inputs?.findIndex((inp) => inp.name === input);
						if (toSlot == null || toSlot === -1) {
							try {
								// Target has no matching input, most likely a converted widget
								const widget = node.widgets?.find((w) => w.name === input);
								if (widget && node.convertWidgetToInput?.(widget)) {
									toSlot = node.inputs?.length - 1;
								}
							} catch (error) {}
						}
						if (toSlot != null || toSlot !== -1) {
							fromNode.connect(fromSlot, node, toSlot);
						}
					} else {
						const widget = node.widgets?.find((w) => w.name === input);
						if (widget) {
							widget.value = value;
							widget.callback?.(value);
						}
pythongosssss's avatar
pythongosssss committed
2354
2355
2356
					}
				}
			}
2357
2358
			app.graph.arrange();
		}, fileName);
pythongosssss's avatar
pythongosssss committed
2359
2360
	}

2361
2362
2363
2364
	/**
	 * Registers a Comfy web extension with the app
	 * @param {ComfyExtension} extension
	 */
2365
2366
2367
2368
2369
2370
2371
2372
2373
	registerExtension(extension) {
		if (!extension.name) {
			throw new Error("Extensions must have a 'name' property.");
		}
		if (this.extensions.find((ext) => ext.name === extension.name)) {
			throw new Error(`Extension named '${extension.name}' already registered.`);
		}
		this.extensions.push(extension);
	}
2374
2375
2376
2377
2378
2379
2380

	/**
	 * Refresh combo list on whole nodes
	 */
	async refreshComboInNodes() {
		const defs = await api.getNodeDefs();

2381
2382
		for (const nodeId in defs) {
			this.registerNodeDef(nodeId, defs[nodeId]);
2383
2384
		}

2385
2386
2387
2388
		for(let nodeNum in this.graph._nodes) {
			const node = this.graph._nodes[nodeNum];
			const def = defs[node.type];

2389
2390
2391
			// Allow primitive nodes to handle refresh
			node.refreshComboInNode?.(defs);

2392
2393
2394
			if(!def)
				continue;

2395
2396
2397
			for(const widgetNum in node.widgets) {
				const widget = node.widgets[widgetNum]
				if(widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) {
comfyanonymous's avatar
comfyanonymous committed
2398
					widget.options.values = def["input"]["required"][widget.name][0];
2399

2400
					if(widget.name != 'image' && !widget.options.values.includes(widget.value)) {
2401
						widget.value = widget.options.values[0];
2402
						widget.callback(widget.value);
2403
2404
2405
2406
					}
				}
			}
		}
2407
2408

		await this.#invokeExtensionsAsync("refreshComboInNodes", defs);
2409
	}
2410

2411
2412
2413
2414
2415
2416
	resetView() {
		app.canvas.ds.scale = 1;
		app.canvas.ds.offset = [0, 0]
		app.graph.setDirtyCanvas(true, true);
	}

2417
2418
2419
2420
2421
	/**
	 * Clean current state
	 */
	clean() {
		this.nodeOutputs = {};
space-nuko's avatar
space-nuko committed
2422
		this.nodePreviewImages = {}
2423
		this.lastNodeErrors = null;
2424
		this.lastExecutionError = null;
space-nuko's avatar
space-nuko committed
2425
		this.runningNodeId = null;
2426
	}
pythongosssss's avatar
pythongosssss committed
2427
2428
2429
}

export const app = new ComfyApp();