app.js 66.9 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, getFlacMetadata, 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>}
		 */
Chenlei Hu's avatar
Chenlei Hu 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
	}

Chenlei Hu's avatar
Chenlei Hu committed
89
90
91
92
93
94
95
96
97
	get nodeOutputs() {
		return this._nodeOutputs;
	}

	set nodeOutputs(value) {
		this._nodeOutputs = value;
		this.#invokeExtensions("onNodeOutputsUpdated", value);
	}

98
99
100
101
102
103
104
105
	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
106
107
108
109
	getRandParam() {
		return "&rand=" + Math.random();
	}

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
161
162
163
164
165
166
167
168
169
	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') {
170
						node.images = [ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]];
171
					}
172
173
174
175
176
177
					else {
						node.images = ComfyApp.clipspace.images;
					}

					if(app.nodeOutputs[node.id + ""])
						app.nodeOutputs[node.id + ""].images = node.images;
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
				}

				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) {
204
205
206
207
208
209
						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;
						}
210
211
212
213
214
					}
				}
				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);
215
216
						if (prop && prop.type != 'button') {
							if(prop.type != 'image' && typeof prop.value == "string" && value.filename) {
Dr.Lt.Data's avatar
Dr.Lt.Data committed
217
218
219
220
221
222
223
								prop.value = (value.subfolder?value.subfolder+'/':'') + value.filename + (value.type?` [${value.type}]`:'');
							}
							else {
								prop.value = value;
								prop.callback(value);
							}
						}
224
225
226
227
228
229
230
231
					});
				}
			}

			app.graph.setDirtyCanvas(true);
		}
	}

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

pythongosssss's avatar
pythongosssss committed
257
258
259
260
261
	/**
	 * 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
262
	 * @returns
pythongosssss's avatar
pythongosssss committed
263
	 */
pythongosssss's avatar
pythongosssss committed
264
265
266
267
268
269
270
	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) {
271
						console.error(
pythongosssss's avatar
pythongosssss committed
272
273
274
275
276
277
278
279
280
281
							`Error calling extension '${ext.name}' method '${method}'`,
							{ error },
							{ extension: ext },
							{ args }
						);
					}
				}
			})
		);
	}
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
	
	#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
312

pythongosssss's avatar
pythongosssss committed
313
314
315
316
317
	/**
	 * 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
318
	#addNodeContextMenuHandler(node) {
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
375
376
377
378
379
380
381
382
383
		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
384
385
386
387
388
389
390
391
392
393
394
395
		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
396
397
398
					options.unshift(
						{
							content: "Open Image",
399
400
							callback: () => {
								let url = new URL(img.src);
401
402
								url.searchParams.delete("preview");
								window.open(url, "_blank");
403
							},
pythongosssss's avatar
pythongosssss committed
404
						},
405
						...getCopyImageOption(img), 
pythongosssss's avatar
pythongosssss committed
406
407
408
409
						{
							content: "Save Image",
							callback: () => {
								const a = document.createElement("a");
410
								let url = new URL(img.src);
411
								url.searchParams.delete("preview");
412
413
								a.href = url;
								a.setAttribute("download", new URLSearchParams(url.search).get("filename"));
pythongosssss's avatar
pythongosssss committed
414
415
416
417
418
419
								document.body.append(a);
								a.click();
								requestAnimationFrame(() => a.remove());
							},
						}
					);
pythongosssss's avatar
pythongosssss committed
420
421
				}
			}
ltdrdata's avatar
ltdrdata committed
422

423
			options.push({
424
425
426
427
428
429
430
				content: "Bypass",
				callback: (obj) => {
					if (this.mode === 4) this.mode = 0;
					else this.mode = 4;
					this.graph.change();
				},
			});
431

432
			// prevent conflict of clipspace content
433
			if (!ComfyApp.clipspace_return_node) {
434
				options.push({
435
436
437
438
439
					content: "Copy (Clipspace)",
					callback: (obj) => {
						ComfyApp.copyToClipspace(this);
					},
				});
ltdrdata's avatar
ltdrdata committed
440

441
				if (ComfyApp.clipspace != null) {
442
					options.push({
443
444
445
446
447
						content: "Paste (Clipspace)",
						callback: () => {
							ComfyApp.pasteFromClipspace(this);
						},
					});
448
				}
449

450
				if (ComfyApp.isImageNode(this)) {
451
					options.push({
452
453
454
455
456
457
458
						content: "Open in MaskEditor",
						callback: (obj) => {
							ComfyApp.copyToClipspace(this);
							ComfyApp.clipspace_return_node = this;
							ComfyApp.open_maskeditor();
						},
					});
459
				}
ltdrdata's avatar
ltdrdata committed
460
			}
pythongosssss's avatar
pythongosssss committed
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
495
496
497
498
499
500
501
502
503
	#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
504
505
506
507
508
	/**
	 * 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
509
510
	#addDrawBackgroundHandler(node) {
		const app = this;
511
512
513
514
515
516
517
518
519
520
521

		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;
522
523
524
525
526
					}
					else if(w.computedHeight) {
						shiftY += w.computedHeight;
					}
					else {
527
528
529
530
531
532
533
534
535
						shiftY += LiteGraph.NODE_WIDGET_HEIGHT + 4;
					}
				} else {
					shiftY = node.computeSize()[1];
				}
			}
			return shiftY;
		}

536
537
538
		node.prototype.setSizeForImage = function (force) {
			if(!force && this.animatedImages) return;

539
			if (this.inputHeight || this.freeWidgetSpace > 210) {
540
541
542
				this.setSize(this.size);
				return;
			}
543
544
545
546
547
548
			const minHeight = getImageTop(this) + 220;
			if (this.size[1] < minHeight) {
				this.setSize([this.size[0], minHeight]);
			}
		};

pythongosssss's avatar
pythongosssss committed
549
550
		node.prototype.onDrawBackground = function (ctx) {
			if (!this.flags.collapsed) {
space-nuko's avatar
space-nuko committed
551
552
553
				let imgURLs = []
				let imagesChanged = false

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

				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
584
						Promise.all(
space-nuko's avatar
space-nuko committed
585
							imgURLs.map((src) => {
pythongosssss's avatar
pythongosssss committed
586
587
588
								return new Promise((r) => {
									const img = new Image();
									img.onload = () => r(img);
comfyanonymous's avatar
comfyanonymous committed
589
									img.onerror = () => r(null);
space-nuko's avatar
space-nuko committed
590
									img.src = src
pythongosssss's avatar
pythongosssss committed
591
592
593
								});
							})
						).then((imgs) => {
space-nuko's avatar
space-nuko committed
594
							if ((!output || this.images === output.images) && (!preview || this.preview === preview)) {
pythongosssss's avatar
pythongosssss committed
595
								this.imgs = imgs.filter(Boolean);
596
								this.setSizeForImage?.();
pythongosssss's avatar
pythongosssss committed
597
598
599
600
								app.graph.setDirtyCanvas(true);
							}
						});
					}
space-nuko's avatar
space-nuko committed
601
602
603
					else {
						this.imgs = null;
					}
pythongosssss's avatar
pythongosssss committed
604
				}
pythongosssss's avatar
pythongosssss committed
605

Dr.Lt.Data's avatar
Dr.Lt.Data committed
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
638
639
640
641
642
643
644
645
646
				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;
				}

647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
				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) {
672
						this.widgets[widgetIdx].onRemove?.();
673
674
675
						this.widgets.splice(widgetIdx, 1);
					}

676
					const canvas = app.graph.list_of_graphcanvas[0];
pythongosssss's avatar
pythongosssss committed
677
678
679
680
					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
681
						}
pythongosssss's avatar
pythongosssss committed
682
683
						this.pointerDown = null;
					}
pythongosssss's avatar
pythongosssss committed
684

pythongosssss's avatar
pythongosssss committed
685
686
687
688
689
					let imageIndex = this.imageIndex;
					const numImages = this.imgs.length;
					if (numImages === 1 && !imageIndex) {
						this.imageIndex = imageIndex = 0;
					}
pythongosssss's avatar
pythongosssss committed
690

Dr.Lt.Data's avatar
Dr.Lt.Data committed
691
692
					const top = getImageTop(this);
					var shiftY = top;
pythongosssss's avatar
pythongosssss committed
693

pythongosssss's avatar
pythongosssss committed
694
695
696
					let dw = this.size[0];
					let dh = this.size[1];
					dh -= shiftY;
pythongosssss's avatar
pythongosssss committed
697

pythongosssss's avatar
pythongosssss committed
698
					if (imageIndex == null) {
Dr.Lt.Data's avatar
Dr.Lt.Data committed
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
						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;
715
							({ cellWidth, cellHeight, cols, shiftX } = calculateImageGrid(this.imgs, dw, dh));
pythongosssss's avatar
pythongosssss committed
716
						}
pythongosssss's avatar
pythongosssss committed
717

pythongosssss's avatar
pythongosssss committed
718
719
720
721
722
723
724
725
						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
726
							if (!anyHovered) {
pythongosssss's avatar
pythongosssss committed
727
								anyHovered = LiteGraph.isInsideRectangle(
pythongosssss's avatar
pythongosssss committed
728
729
730
731
									mouse[0],
									mouse[1],
									x + this.pos[0],
									y + this.pos[1],
pythongosssss's avatar
pythongosssss committed
732
733
									cellWidth,
									cellHeight
pythongosssss's avatar
pythongosssss committed
734
								);
pythongosssss's avatar
pythongosssss committed
735
736
737
								if (anyHovered) {
									this.overIndex = i;
									let value = 110;
pythongosssss's avatar
pythongosssss committed
738
									if (canvas.pointer_is_down) {
pythongosssss's avatar
pythongosssss committed
739
740
741
742
										if (!this.pointerDown || this.pointerDown.index !== i) {
											this.pointerDown = { index: i, pos: [...mouse] };
										}
										value = 125;
pythongosssss's avatar
pythongosssss committed
743
									}
pythongosssss's avatar
pythongosssss committed
744
745
746
747
748
									ctx.filter = `contrast(${value}%) brightness(${value}%)`;
									canvas.canvas.style.cursor = "pointer";
								}
							}
							this.imageRects.push([x, y, cellWidth, cellHeight]);
749

Dr.Lt.Data's avatar
Dr.Lt.Data committed
750
751
752
753
754
755
756
757
							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;
758

Dr.Lt.Data's avatar
Dr.Lt.Data committed
759
760
761
762
763
764
765
766
							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
767
768
769
770
771
772
773
774
775
							ctx.filter = "none";
						}

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

pythongosssss's avatar
pythongosssss committed
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
						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
800
								} else {
pythongosssss's avatar
pythongosssss committed
801
802
									fill = "#eee";
									textFill = "#000";
pythongosssss's avatar
pythongosssss committed
803
								}
pythongosssss's avatar
pythongosssss committed
804
805
806
							} else {
								this.pointerWasDown = null;
							}
pythongosssss's avatar
pythongosssss committed
807

pythongosssss's avatar
pythongosssss committed
808
809
810
811
812
813
814
815
							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
816

pythongosssss's avatar
pythongosssss committed
817
818
							return isClicking;
						};
pythongosssss's avatar
pythongosssss committed
819

pythongosssss's avatar
pythongosssss committed
820
						if (numImages > 1) {
Dr.Lt.Data's avatar
Dr.Lt.Data committed
821
							if (drawButton(dw - 40, dh + top - 40, 30, `${this.imageIndex + 1}/${numImages}`)) {
pythongosssss's avatar
pythongosssss committed
822
823
824
								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
825
								}
pythongosssss's avatar
pythongosssss committed
826
							}
pythongosssss's avatar
pythongosssss committed
827

Dr.Lt.Data's avatar
Dr.Lt.Data committed
828
							if (drawButton(dw - 40, top + 10, 30, `x`)) {
pythongosssss's avatar
pythongosssss committed
829
830
								if (!this.pointerDown || !this.pointerDown.index === null) {
									this.pointerDown = { index: null, pos: [...mouse] };
pythongosssss's avatar
pythongosssss committed
831
832
833
834
835
836
837
838
839
								}
							}
						}
					}
				}
			}
		};
	}

pythongosssss's avatar
pythongosssss committed
840
841
842
	/**
	 * Adds a handler allowing drag+drop of files onto the window to load workflows
	 */
pythongosssss's avatar
pythongosssss committed
843
844
845
846
847
	#addDropHandler() {
		// Get prompt from dropped PNG or json
		document.addEventListener("drop", async (event) => {
			event.preventDefault();
			event.stopPropagation();
848
849
850
851
852

			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
853
			if (n && n.onDragDrop && (await n.onDragDrop(event))) {
854
855
				return;
			}
856
857
			// 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") {
858
			await this.handleFile(event.dataTransfer.files[0]);
859
860
861
862
863
864
865
866
867
868
869
			} 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
870
		});
871

872
873
874
875
876
877
		// 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
878
		});
879

880
881
882
883
884
885
886
887
888
		// 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;
889
890

						// dragover event is fired very frequently, run this on an animation frame
891
892
893
894
895
896
897
898
899
900
						requestAnimationFrame(() => {
							this.graph.setDirtyCanvas(false, true);
						});
						return;
					}
				}
				this.dragOverNode = null;
			},
			false
		);
pythongosssss's avatar
pythongosssss committed
901
902
	}

pythongosssss's avatar
pythongosssss committed
903
	/**
904
	 * Adds a handler on paste that extracts and loads images or workflows from pasted JSON data
pythongosssss's avatar
pythongosssss committed
905
	 */
pythongosssss's avatar
pythongosssss committed
906
	#addPasteHandler() {
pythongosssss's avatar
pythongosssss committed
907
		document.addEventListener("paste", async (e) => {
908
909
910
911
			// ctrl+shift+v is used to paste nodes with connections
			// this is handled by litegraph
			if(this.shiftDown) return;

912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
			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
942
943
944
945
946
947
948
949
950
951
952
			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
953

pythongosssss's avatar
pythongosssss committed
954
			if (workflow && workflow.version && workflow.nodes && workflow.extra) {
pythongosssss's avatar
pythongosssss committed
955
				await this.loadGraphData(workflow);
pythongosssss's avatar
pythongosssss committed
956
			}
957
			else {
958
959
960
961
				if (e.target.type === "text" || e.target.type === "textarea") {
					return;
				}

962
				// Litegraph default paste
963
				this.canvas.pasteFromClipboard();
964
965
966
967
968
969
970
971
972
973
974
975
			}


		});
	}


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

Michael Abrahams's avatar
Michael Abrahams committed
981
			// copy nodes and clear clipboard
982
			if (e.target.className === "litegraph" && this.canvas.selected_nodes) {
Michael Abrahams's avatar
Michael Abrahams committed
983
				this.canvas.copyToClipboard();
comfyanonymous's avatar
comfyanonymous committed
984
				e.clipboardData.setData('text', ' '); //clearData doesn't remove images from clipboard
Michael Abrahams's avatar
Michael Abrahams committed
985
986
987
				e.preventDefault();
				e.stopImmediatePropagation();
				return false;
988
			}
pythongosssss's avatar
pythongosssss committed
989
990
991
		});
	}

992

Jairo Correa's avatar
Jairo Correa committed
993
994
995
996
997
998
999
1000
1001
1002
	/**
	 * Handle mouse
	 *
	 * Move group by header
	 */
	#addProcessMouseHandler() {
		const self = this;

		const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown;
		LGraphCanvas.prototype.processMouseDown = function(e) {
1003
1004
1005
1006
1007
1008
			// 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
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
			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) {
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
			// 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
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
			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;
		};
	}

1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
	/**
	 * 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;
			}

1084
1085
			if (e.type == "keydown" && !e.repeat) {

1086
				// Ctrl + M mute/unmute
1087
				if (e.key === 'm' && (e.metaKey || e.ctrlKey)) {
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
					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;
				}
1099

1100
				// Ctrl + B bypass
1101
				if (e.key === 'b' && (e.metaKey || e.ctrlKey)) {
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
					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;
				}
1113

1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
				// 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;
				}

1124
1125
				// Ctrl+C Copy
				if ((e.key === 'c') && (e.metaKey || e.ctrlKey)) {
comfyanonymous's avatar
comfyanonymous committed
1126
1127
					// Trigger onCopy
					return true;
1128
1129
1130
				}

				// Ctrl+V Paste
1131
				if ((e.key === 'v' || e.key == 'V') && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
comfyanonymous's avatar
comfyanonymous committed
1132
1133
					// Trigger onPaste
					return true;
1134
				}
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148

				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();
				}
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
			}

			this.graph.change();

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

1159
1160
			// Fall through to Litegraph defaults
			return origProcessKey.apply(this, arguments);
1161
1162
1163
		};
	}

Jairo Correa's avatar
Jairo Correa committed
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
1199
1200
1201
1202
1203
1204
1205
1206
1207
	/**
	 * 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
1208
	/**
pythongosssss's avatar
pythongosssss committed
1209
	 * Draws node highlights (executing, drag drop) and progress bar
pythongosssss's avatar
pythongosssss committed
1210
	 */
1211
	#addDrawNodeHandler() {
1212
		const origDrawNodeShape = LGraphCanvas.prototype.drawNodeShape;
pythongosssss's avatar
pythongosssss committed
1213
		const self = this;
1214

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

1218
			const nodeErrors = self.lastNodeErrors?.[node.id];
1219

1220
			let color = null;
1221
			let lineWidth = 1;
1222
1223
1224
1225
1226
			if (node.id === +self.runningNodeId) {
				color = "#0f0";
			} else if (self.dragOverNode && node.id === self.dragOverNode.id) {
				color = "dodgerblue";
			}
1227
			else if (nodeErrors?.errors) {
1228
1229
1230
				color = "red";
				lineWidth = 2;
			}
1231
1232
1233
1234
			else if (self.lastExecutionError && +self.lastExecutionError.node_id === node.id) {
				color = "#f0f";
				lineWidth = 2;
			}
1235
1236

			if (color) {
pythongosssss's avatar
pythongosssss committed
1237
				const shape = node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE;
1238
				ctx.lineWidth = lineWidth;
pythongosssss's avatar
pythongosssss committed
1239
1240
1241
				ctx.globalAlpha = 0.8;
				ctx.beginPath();
				if (shape == LiteGraph.BOX_SHAPE)
pythongosssss's avatar
pythongosssss committed
1242
					ctx.rect(-6, -6 - LiteGraph.NODE_TITLE_HEIGHT, 12 + size[0] + 1, 12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT);
pythongosssss's avatar
pythongosssss committed
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
				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
1254
						-6 - LiteGraph.NODE_TITLE_HEIGHT,
pythongosssss's avatar
pythongosssss committed
1255
1256
						12 + size[0] + 1,
						12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT,
pythongosssss's avatar
pythongosssss committed
1257
						[this.round_radius * 2, this.round_radius * 2, 2, 2]
pythongosssss's avatar
pythongosssss committed
1258
				);
pythongosssss's avatar
pythongosssss committed
1259
1260
				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);
1261
				ctx.strokeStyle = color;
pythongosssss's avatar
pythongosssss committed
1262
1263
1264
				ctx.stroke();
				ctx.strokeStyle = fgcolor;
				ctx.globalAlpha = 1;
1265
1266
1267
1268
1269
1270
1271
			}

			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
1272

1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
1284
1285
1286
			// 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
1287
1288
1289
1290
1291
				}
			}

			return res;
		};
1292
1293
1294
1295

		const origDrawNode = LGraphCanvas.prototype.drawNode;
		LGraphCanvas.prototype.drawNode = function (node, ctx) {
			var editor_alpha = this.editor_alpha;
1296
			var old_color = node.bgcolor;
1297
1298
1299
1300
1301

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

1302
1303
1304
1305
1306
			if (node.mode === 4) { // never
				node.bgcolor = "#FF00FF";
				this.editor_alpha = 0.2;
			}

1307
1308
1309
			const res = origDrawNode.apply(this, arguments);

			this.editor_alpha = editor_alpha;
1310
			node.bgcolor = old_color;
1311
1312
1313

			return res;
		};
pythongosssss's avatar
pythongosssss committed
1314
1315
	}

pythongosssss's avatar
pythongosssss committed
1316
1317
1318
	/**
	 * Handles updates from the API socket
	 */
pythongosssss's avatar
pythongosssss committed
1319
	#addApiUpdateHandlers() {
pythongosssss's avatar
pythongosssss committed
1320
1321
		api.addEventListener("status", ({ detail }) => {
			this.ui.setStatus(detail);
pythongosssss's avatar
pythongosssss committed
1322
1323
		});

pythongosssss's avatar
pythongosssss committed
1324
1325
1326
		api.addEventListener("reconnecting", () => {
			this.ui.dialog.show("Reconnecting...");
		});
pythongosssss's avatar
pythongosssss committed
1327

pythongosssss's avatar
pythongosssss committed
1328
1329
1330
		api.addEventListener("reconnected", () => {
			this.ui.dialog.close();
		});
pythongosssss's avatar
pythongosssss committed
1331
1332

		api.addEventListener("progress", ({ detail }) => {
1333
1334
			if (this.workflowManager.activePrompt?.workflow 
				&& this.workflowManager.activePrompt.workflow !== this.workflowManager.activeWorkflow) return;
pythongosssss's avatar
pythongosssss committed
1335
1336
1337
1338
1339
			this.progress = detail;
			this.graph.setDirtyCanvas(true, false);
		});

		api.addEventListener("executing", ({ detail }) => {
1340
1341
			if (this.workflowManager.activePrompt ?.workflow
				&& this.workflowManager.activePrompt.workflow !== this.workflowManager.activeWorkflow) return;
pythongosssss's avatar
pythongosssss committed
1342
1343
1344
			this.progress = null;
			this.runningNodeId = detail;
			this.graph.setDirtyCanvas(true, false);
space-nuko's avatar
space-nuko committed
1345
			delete this.nodePreviewImages[this.runningNodeId]
pythongosssss's avatar
pythongosssss committed
1346
1347
		});

pythongosssss's avatar
pythongosssss committed
1348
		api.addEventListener("executed", ({ detail }) => {
1349
1350
			if (this.workflowManager.activePrompt ?.workflow
				&& this.workflowManager.activePrompt.workflow !== this.workflowManager.activeWorkflow) return;
pythongosssss's avatar
pythongosssss committed
1351
1352
1353
1354
1355
1356
1357
1358
1359
1360
1361
1362
1363
			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;
			}
1364
			const node = this.graph.getNodeById(detail.node);
space-nuko's avatar
space-nuko committed
1365
1366
1367
			if (node) {
				if (node.onExecuted)
					node.onExecuted(detail.output);
1368
			}
pythongosssss's avatar
pythongosssss committed
1369
		});
pythongosssss's avatar
pythongosssss committed
1370

1371
		api.addEventListener("execution_start", ({ detail }) => {
space-nuko's avatar
space-nuko committed
1372
			this.runningNodeId = null;
1373
			this.lastExecutionError = null
Chris's avatar
Chris committed
1374
1375
1376
1377
			this.graph._nodes.forEach((node) => {
				if (node.onExecutionStart)
					node.onExecutionStart()
			})
1378
1379
1380
1381
1382
1383
1384
1385
1386
		});

		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
1387
1388
1389
1390
1391
1392
1393
1394
1395
1396
		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
1397
1398
1399
		api.init();
	}

1400
1401
	#addKeyboardHandler() {
		window.addEventListener("keydown", (e) => {
pythongosssss's avatar
pythongosssss committed
1402
			this.shiftDown = e.shiftKey;
1403
		});
pythongosssss's avatar
pythongosssss committed
1404
1405
1406
		window.addEventListener("keyup", (e) => {
			this.shiftDown = e.shiftKey;
		});
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
1434
1435
1436
1437
1438
1439
1440
1441
1442
	#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;
		};
	}

1443
	/**
1444
	 * Loads all extensions from the API into the window in parallel
1445
1446
	 */
	async #loadExtensions() {
1447
1448
1449
1450
1451
1452
1453
1454
1455
1456
1457
1458
	    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);
1459
1460
1461
1462
1463
		try {
			this.menu.workflows.registerExtension(this);
		} catch (error) {
			console.error(error);
		}
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
1537
1538
1539
1540
1541
1542
1543
1544
1545
	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
1546
1547
1548
1549
	/**
	 * Set up the app on the page
	 */
	async setup() {
1550
		await this.#setUser();
1551

pythongosssss's avatar
pythongosssss committed
1552
		// Create and mount the LiteGraph in the DOM
ltdrdata's avatar
ltdrdata committed
1553
1554
1555
		const mainCanvas = document.createElement("canvas")
		mainCanvas.style.touchAction = "none"
		const canvasEl = (this.canvasEl = Object.assign(mainCanvas, { id: "graph-canvas" }));
1556
		canvasEl.tabIndex = "1";
1557
1558
1559
1560
1561
		document.body.append(canvasEl);
		this.resizeCanvas();

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

1563
		addDomClippingSetting();
Jairo Correa's avatar
Jairo Correa committed
1564
		this.#addProcessMouseHandler();
1565
		this.#addProcessKeyHandler();
1566
		this.#addConfigureHandler();
pythongosssss's avatar
pythongosssss committed
1567
		this.#addApiUpdateHandlers();
1568
		this.#addRestoreWorkflowView();
Jairo Correa's avatar
Jairo Correa committed
1569

pythongosssss's avatar
pythongosssss committed
1570
		this.graph = new LGraph();
1571
1572
1573

		this.#addAfterConfigureHandler();

1574
		this.canvas = new LGraphCanvas(canvasEl, this.graph);
pythongosssss's avatar
pythongosssss committed
1575
1576
		this.ctx = canvasEl.getContext("2d");

1577
1578
1579
		LiteGraph.release_link_on_empty_shows_menu = true;
		LiteGraph.alt_drag_do_clone_nodes = true;

pythongosssss's avatar
pythongosssss committed
1580
1581
1582
		this.graph.start();

		// Ensure the canvas fills the window
1583
1584
1585
1586
1587
1588
1589
		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
1590
1591
1592

		await this.#invokeExtensionsAsync("init");
		await this.registerNodes();
1593
		initWidgets(this);
pythongosssss's avatar
pythongosssss committed
1594
1595
1596
1597

		// Load previous workflow
		let restored = false;
		try {
1598
1599
1600
			const loadWorkflow = async (json) => {
				if (json) {
					const workflow = JSON.parse(json);
1601
1602
					const workflowName = getStorageValue("Comfy.PreviousWorkflow");
					await this.loadGraphData(workflow, true, workflowName);
1603
1604
1605
1606
1607
1608
1609
					return true;
				}
			};
			const clientId = api.initialClientId ?? api.clientId;
			restored =
				(clientId && (await loadWorkflow(sessionStorage.getItem(`workflow:${clientId}`)))) ||
				(await loadWorkflow(localStorage.getItem("workflow")));
1610
1611
1612
		} catch (err) {
			console.error("Error loading previous workflow", err);
		}
pythongosssss's avatar
pythongosssss committed
1613
1614
1615

		// We failed to restore a workflow so load the default
		if (!restored) {
pythongosssss's avatar
pythongosssss committed
1616
			await this.loadGraphData();
pythongosssss's avatar
pythongosssss committed
1617
1618
1619
		}

		// Save current workflow automatically
1620
1621
1622
1623
1624
1625
1626
		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
1627

1628
		this.#addDrawNodeHandler();
Jairo Correa's avatar
Jairo Correa committed
1629
		this.#addDrawGroupsHandler();
pythongosssss's avatar
pythongosssss committed
1630
		this.#addDropHandler();
1631
		this.#addCopyHandler();
pythongosssss's avatar
pythongosssss committed
1632
		this.#addPasteHandler();
1633
		this.#addKeyboardHandler();
pythongosssss's avatar
pythongosssss committed
1634

pythongosssss's avatar
pythongosssss committed
1635
1636
1637
		await this.#invokeExtensionsAsync("setup");
	}

1638
1639
1640
1641
1642
1643
1644
1645
1646
1647
1648
1649
1650
	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
1651
1652
1653
	/**
	 * Registers nodes with the graph
	 */
pythongosssss's avatar
pythongosssss committed
1654
1655
1656
1657
	async registerNodes() {
		const app = this;
		// Load node definitions from the backend
		const defs = await api.getNodeDefs();
ltdrdata's avatar
ltdrdata committed
1658
		await this.registerNodesFromDefs(defs);
1659
1660
1661
		await this.#invokeExtensionsAsync("registerCustomNodes");
	}

1662
1663
1664
1665
1666
1667
1668
1669
1670
1671
1672
1673
1674
1675
	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
1676
1677
1678
1679
1680
1681
1682
1683
1684
1685
1686
1687
1688
1689
	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;
1690
					const widgetType = self.getWidgetType(inputData, inputName);
pythongosssss's avatar
pythongosssss committed
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
1737
1738
1739
1740
1741
1742
1743
1744
1745
					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;
	}

1746
    async registerNodesFromDefs(defs) {
pythongosssss's avatar
pythongosssss committed
1747
1748
1749
		await this.#invokeExtensionsAsync("addCustomNodeDefs", defs);

		// Generate list of known widgets
pythongosssss's avatar
pythongosssss committed
1750
		this.widgets = Object.assign(
pythongosssss's avatar
pythongosssss committed
1751
1752
1753
1754
1755
1756
1757
			{},
			ComfyWidgets,
			...(await this.#invokeExtensionsAsync("getCustomWidgets")).filter(Boolean)
		);

		// Register a node for each definition
		for (const nodeId in defs) {
pythongosssss's avatar
pythongosssss committed
1758
			this.registerNodeDef(nodeId, defs[nodeId]);
pythongosssss's avatar
pythongosssss committed
1759
1760
1761
		}
	}

Jairo Correa's avatar
Jairo Correa committed
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
1790
1791
1792
1793
1794
1795
1796
1797
1798
	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
1799
	showMissingNodesError(missingNodeTypes, hasAddedNodes = true) {
1800
1801
		let seenTypes = new Set();

pythongosssss's avatar
pythongosssss committed
1802
		this.ui.dialog.show(
1803
			$el("div.comfy-missing-nodes", [
pythongosssss's avatar
pythongosssss committed
1804
1805
1806
				$el("span", { textContent: "When loading the graph, the following node types were not found: " }),
				$el(
					"ul",
1807
1808
1809
1810
1811
1812
1813
1814
1815
1816
1817
1818
1819
1820
1821
1822
1823
1824
1825
					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
1826
				),
1827
1828
1829
				...(hasAddedNodes
					? [$el("span", { textContent: "Nodes that have failed to load will show as red on the graph." })]
					: []),
pythongosssss's avatar
pythongosssss committed
1830
			])
pythongosssss's avatar
pythongosssss committed
1831
1832
1833
1834
1835
1836
		);
		this.logging.addEntry("Comfy.App", "warn", {
			MissingNodes: missingNodeTypes,
		});
	}

1837
1838
1839
1840
1841
1842
1843
1844
1845
1846
1847
1848
1849
1850
1851
	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
1852
1853
1854
	/**
	 * Populates the graph with the specified workflow data
	 * @param {*} graphData A serialized graph object
1855
	 * @param { boolean } clean If the graph state, e.g. images, should be cleared
1856
1857
	 * @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
1858
	 */
1859
	async loadGraphData(graphData, clean = true, restore_view = true, workflow = null) {
1860
1861
1862
		if (clean !== false) {
			this.clean();
		}
1863

1864
		let reset_invalid_values = false;
pythongosssss's avatar
pythongosssss committed
1865
		if (!graphData) {
1866
			graphData = defaultGraph;
1867
			reset_invalid_values = true;
pythongosssss's avatar
pythongosssss committed
1868
		}
1869

1870
1871
1872
1873
1874
1875
1876
		if (typeof structuredClone === "undefined")
		{
			graphData = JSON.parse(JSON.stringify(graphData));
		}else
		{
			graphData = structuredClone(graphData);
		}
1877
1878
1879
1880
1881
1882
	
		try {
			this.workflowManager.setWorkflow(workflow);
		} catch (error) {
			console.error(error);
		}
1883

pythongosssss's avatar
const  
pythongosssss committed
1884
		const missingNodeTypes = [];
pythongosssss's avatar
pythongosssss committed
1885
		await this.#invokeExtensionsAsync("beforeConfigureGraph", graphData, missingNodeTypes);
1886
		for (let n of graphData.nodes) {
1887
			// Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
1888
			if (n.type == "T2IAdapterLoader") n.type = "ControlNetLoader";
comfyanonymous's avatar
comfyanonymous committed
1889
			if (n.type == "ConditioningAverage ") n.type = "ConditioningAverage"; //typo fix
comfyanonymous's avatar
comfyanonymous committed
1890
			if (n.type == "SDV_img2vid_Conditioning") n.type = "SVD_img2vid_Conditioning"; //typo fix
1891
1892
1893
1894

			// Find missing node types
			if (!(n.type in LiteGraph.registered_node_types)) {
				missingNodeTypes.push(n.type);
pythongosssss's avatar
pythongosssss committed
1895
				n.type = sanitizeNodeName(n.type);
1896
			}
1897
1898
		}

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

			// 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
1943
							backgroundColor: "rgba(0,0,0,0.2)",
1944
1945
1946
						},
						textContent: error.stack || "No stacktrace available",
					}),
pythongosssss's avatar
pythongosssss committed
1947
					...errorHint,
1948
1949
				]).outerHTML
			);
pythongosssss's avatar
pythongosssss committed
1950

1951
1952
			return;
		}
pythongosssss's avatar
pythongosssss committed
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966

		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
1967
								widget.value = widget.value.slice(7);
pythongosssss's avatar
pythongosssss committed
1968
							}
1969
1970
1971
1972
1973
1974
1975
1976
							if (widget.value === "euler_pp" || widget.value === "euler_ancestral_pp") {
								widget.value = widget.value.slice(0, -3);
								for (let w of node.widgets) {
									if (w.name == "cfg") {
										w.value *= 2.0;
									}
								}
							}
pythongosssss's avatar
pythongosssss committed
1977
						}
1978
1979
					}
					if (node.type == "KSampler" || node.type == "KSamplerAdvanced" || node.type == "PrimitiveNode") {
1980
						if (widget.name == "control_after_generate") {
1981
							if (widget.value === true) {
1982
								widget.value = "randomize";
1983
1984
							} else if (widget.value === false) {
								widget.value = "fixed";
1985
1986
							}
						}
pythongosssss's avatar
pythongosssss committed
1987
					}
1988
1989
1990
1991
1992
1993
1994
					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
1995
1996
1997
1998
1999
				}
			}

			this.#invokeExtensions("loadedGraphNode", node);
		}
2000
2001

		if (missingNodeTypes.length) {
pythongosssss's avatar
pythongosssss committed
2002
			this.showMissingNodesError(missingNodeTypes);
2003
		}
pythongosssss's avatar
pythongosssss committed
2004
		await this.#invokeExtensionsAsync("afterConfigureGraph", missingNodeTypes);
2005
2006
2007
		requestAnimationFrame(() => {
			this.graph.setDirtyCanvas(true, true);
		});
pythongosssss's avatar
pythongosssss committed
2008
2009
	}

pythongosssss's avatar
pythongosssss committed
2010
2011
2012
2013
	/**
	 * Converts the current graph workflow for sending to the API
	 * @returns The workflow and node links
	 */
2014
2015
	async graphToPrompt(graph = this.graph, clean = true) {
		for (const outerNode of graph.computeExecutionOrder(false)) {
2016
2017
2018
2019
2020
2021
2022
2023
			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
2024
2025
2026
2027
2028
2029
2030
			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();
					}
2031
2032
2033
2034
				}
			}
		}

2035
		const workflow = graph.serialize();
pythongosssss's avatar
pythongosssss committed
2036
		const output = {};
2037
		// Process nodes in order of execution
2038
		for (const outerNode of graph.computeExecutionOrder(false)) {
pythongosssss's avatar
pythongosssss committed
2039
2040
			const skipNode = outerNode.mode === 2 || outerNode.mode === 4;
			const innerNodes = (!skipNode && outerNode.getInnerNodes) ? outerNode.getInnerNodes() : [outerNode];
pythongosssss's avatar
pythongosssss committed
2041
2042
2043
2044
			for (const node of innerNodes) {
				if (node.isVirtualNode) {
					continue;
				}
2045

pythongosssss's avatar
pythongosssss committed
2046
2047
2048
2049
				if (node.mode === 2 || node.mode === 4) {
					// Don't serialize muted nodes
					continue;
				}
2050

pythongosssss's avatar
pythongosssss committed
2051
2052
				const inputs = {};
				const widgets = node.widgets;
pythongosssss's avatar
pythongosssss committed
2053

pythongosssss's avatar
pythongosssss committed
2054
2055
2056
2057
2058
2059
2060
				// 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
2061
2062
2063
					}
				}

pythongosssss's avatar
pythongosssss committed
2064
2065
2066
2067
2068
2069
2070
2071
2072
2073
2074
2075
2076
2077
				// 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;
									}
2078
								}
pythongosssss's avatar
pythongosssss committed
2079
2080
2081
2082
2083
2084
2085
2086
2087
2088
2089
2090
2091
							} 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;
2092
										}
2093
2094
2095
									}
								}
							}
2096

pythongosssss's avatar
pythongosssss committed
2097
2098
2099
							if (!found) {
								break;
							}
2100
2101
						}

pythongosssss's avatar
pythongosssss committed
2102
2103
2104
2105
						if (link) {
							if (parent?.updateLink) {
								link = parent.updateLink(link);
							}
pythongosssss's avatar
pythongosssss committed
2106
2107
2108
							if (link) {
								inputs[node.inputs[i].name] = [String(link.origin_id), parseInt(link.origin_slot)];
							}
pythongosssss's avatar
pythongosssss committed
2109
						}
2110
					}
pythongosssss's avatar
pythongosssss committed
2111
2112
				}

2113
				let node_data = {
pythongosssss's avatar
pythongosssss committed
2114
2115
					inputs,
					class_type: node.comfyClass,
2116
2117
2118
				};

				if (this.ui.settings.getSettingValue("Comfy.DevMode")) {
2119
					// Ignored by the backend.
2120
					node_data["_meta"] = {
2121
						title: node.title,
2122
2123
2124
2125
					}
				}

				output[String(node.id)] = node_data;
pythongosssss's avatar
pythongosssss committed
2126
			}
pythongosssss's avatar
pythongosssss committed
2127
2128
		}

2129
		// Remove inputs connected to removed nodes
2130
2131
2132
2133
2134
2135
2136
2137
		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];
					}
2138
2139
2140
2141
				}
			}
		}

pythongosssss's avatar
pythongosssss committed
2142
2143
2144
		return { workflow, output };
	}

2145
	#formatPromptError(error) {
2146
2147
2148
2149
2150
2151
2152
2153
2154
2155
2156
2157
2158
2159
2160
2161
2162
2163
2164
2165
2166
2167
2168
2169
		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)"
	}

2170
2171
2172
2173
2174
2175
2176
2177
2178
	#formatExecutionError(error) {
		if (error == null) {
			return "(unknown error)"
		}

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

2179
		return `Error occurred when executing ${nodeType}:\n\n${error.exception_message}\n\n${traceback}`
2180
2181
	}

m957ymj75urz's avatar
m957ymj75urz committed
2182
	async queuePrompt(number, batchCount = 1) {
2183
		this.#queueItems.push({ number, batchCount });
pythongosssss's avatar
pythongosssss committed
2184

2185
2186
2187
2188
		// Only have one action process the items so each one gets a unique seed correctly
		if (this.#processingQueue) {
			return;
		}
2189

2190
		this.#processingQueue = true;
2191
		this.lastNodeErrors = null;
2192

2193
2194
2195
		try {
			while (this.#queueItems.length) {
				({ number, batchCount } = this.#queueItems.pop());
pythongosssss's avatar
pythongosssss committed
2196

2197
2198
2199
2200
				for (let i = 0; i < batchCount; i++) {
					const p = await this.graphToPrompt();

					try {
2201
2202
2203
2204
						const res = await api.queuePrompt(number, p);
						this.lastNodeErrors = res.node_errors;
						if (this.lastNodeErrors.length > 0) {
							this.canvas.draw(true, true);
2205
2206
2207
2208
2209
2210
2211
2212
						} else {
							try {
								this.workflowManager.storePrompt({
									id: res.prompt_id,
									nodes: Object.keys(p.output)
								});
							} catch (error) {
							}
2213
						}
2214
					} catch (error) {
2215
						const formattedError = this.#formatPromptError(error)
2216
2217
						this.ui.dialog.show(formattedError);
						if (error.response) {
2218
							this.lastNodeErrors = error.response.node_errors;
2219
2220
							this.canvas.draw(true, true);
						}
2221
2222
2223
2224
2225
2226
2227
2228
2229
2230
2231
2232
2233
						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
2234
						}
pythongosssss's avatar
pythongosssss committed
2235
					}
2236
2237
2238

					this.canvas.draw(true, true);
					await this.ui.queue.update();
pythongosssss's avatar
pythongosssss committed
2239
2240
				}
			}
2241
2242
		} finally {
			this.#processingQueue = false;
m957ymj75urz's avatar
m957ymj75urz committed
2243
		}
pythongosssss's avatar
pythongosssss committed
2244
		api.dispatchEvent(new CustomEvent("promptQueued", { detail: { number, batchCount } }));
2245
		return !this.lastNodeErrors;
pythongosssss's avatar
pythongosssss committed
2246
	}
pythongosssss's avatar
pythongosssss committed
2247

2248
2249
2250
2251
2252
2253
2254
2255
	showErrorOnFileLoad(file) {
		this.ui.dialog.show(
			$el("div", [
				$el("p", {textContent: `Unable to find workflow in ${file.name}`})
			]).outerHTML
		);
	}

pythongosssss's avatar
pythongosssss committed
2256
2257
	/**
	 * Loads workflow data from the specified file
2258
	 * @param {File} file
pythongosssss's avatar
pythongosssss committed
2259
	 */
pythongosssss's avatar
pythongosssss committed
2260
	async handleFile(file) {
2261
2262
2263
2264
2265
2266
2267
2268
		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
2269
2270
		if (file.type === "image/png") {
			const pngInfo = await getPngMetadata(file);
2271
			if (pngInfo?.workflow) {
2272
				await this.loadGraphData(JSON.parse(pngInfo.workflow), true, true, fileName);
2273
			} else if (pngInfo?.prompt) {
2274
				this.loadApiJson(JSON.parse(pngInfo.prompt), fileName);
2275
			} else if (pngInfo?.parameters) {
2276
2277
2278
				this.changeWorkflow(() => {
					importA1111(this.graph, pngInfo.parameters);
				}, fileName)
2279
2280
			} else {
				this.showErrorOnFileLoad(file);
pythongosssss's avatar
pythongosssss committed
2281
			}
2282
2283
		} else if (file.type === "image/webp") {
			const pngInfo = await getWebpMetadata(file);
2284
2285
2286
2287
			// Support loading workflows from that webp custom node.
			const workflow = pngInfo?.workflow || pngInfo?.Workflow;
			const prompt = pngInfo?.prompt || pngInfo?.Prompt;

2288
2289
2290
2291
2292
2293
2294
			if (workflow) {
				this.loadGraphData(JSON.parse(workflow), true, true, fileName);
			} else if (prompt) {
				this.loadApiJson(JSON.parse(prompt), fileName);
			} else {
				this.showErrorOnFileLoad(file);
			}
2295
		} else if (file.type === "audio/flac" || file.type === "audio/x-flac") {
2296
2297
2298
2299
2300
			const pngInfo = await getFlacMetadata(file);
			// Support loading workflows from that webp custom node.
			const workflow = pngInfo?.workflow;
			const prompt = pngInfo?.prompt;

2301
			if (workflow) {
2302
				this.loadGraphData(JSON.parse(workflow), true, true, fileName);
2303
			} else if (prompt) {
2304
				this.loadApiJson(JSON.parse(prompt), fileName);
2305
2306
			} else {
				this.showErrorOnFileLoad(file);
2307
			}
2308
		} else if (file.type === "application/json" || file.name?.endsWith(".json")) {
pythongosssss's avatar
pythongosssss committed
2309
			const reader = new FileReader();
pythongosssss's avatar
pythongosssss committed
2310
			reader.onload = async () => {
pythongosssss's avatar
pythongosssss committed
2311
				const jsonContent = JSON.parse(reader.result);
Jairo Correa's avatar
Jairo Correa committed
2312
2313
				if (jsonContent?.templates) {
					this.loadTemplateData(jsonContent);
pythongosssss's avatar
pythongosssss committed
2314
				} else if(this.isApiJson(jsonContent)) {
2315
					this.loadApiJson(jsonContent, fileName);
Jairo Correa's avatar
Jairo Correa committed
2316
				} else {
2317
					await this.loadGraphData(jsonContent, true, true, fileName);
Jairo Correa's avatar
Jairo Correa committed
2318
				}
pythongosssss's avatar
pythongosssss committed
2319
2320
			};
			reader.readAsText(file);
2321
		} else if (file.name?.endsWith(".latent") || file.name?.endsWith(".safetensors")) {
2322
2323
			const info = await getLatentMetadata(file);
			if (info.workflow) {
2324
				await this.loadGraphData(JSON.parse(info.workflow), true, true, fileName);
2325
2326
			} else if (info.prompt) {
				this.loadApiJson(JSON.parse(info.prompt));
2327
2328
			} else {
				this.showErrorOnFileLoad(file);
2329
			}
2330
2331
		} else {
			this.showErrorOnFileLoad(file);
pythongosssss's avatar
pythongosssss committed
2332
2333
		}
	}
2334

pythongosssss's avatar
pythongosssss committed
2335
2336
2337
2338
	isApiJson(data) {
		return Object.values(data).every((v) => v.class_type);
	}

2339
	loadApiJson(apiData, fileName) {
pythongosssss's avatar
pythongosssss committed
2340
2341
2342
2343
2344
2345
2346
2347
2348
2349
2350
		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);
2351
			node.id = isNaN(+id) ? id : +id;
2352
			node.title = data._meta?.title ?? node.title
Juanjuan's avatar
Juanjuan committed
2353
			app.graph.add(node);
pythongosssss's avatar
pythongosssss committed
2354
2355
		}

2356
2357
2358
2359
2360
2361
2362
2363
2364
2365
2366
2367
2368
2369
2370
2371
2372
2373
2374
2375
2376
2377
2378
2379
2380
2381
2382
2383
		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
2384
2385
2386
					}
				}
			}
2387
2388
			app.graph.arrange();
		}, fileName);
pythongosssss's avatar
pythongosssss committed
2389
2390
	}

2391
2392
2393
2394
	/**
	 * Registers a Comfy web extension with the app
	 * @param {ComfyExtension} extension
	 */
2395
2396
2397
2398
2399
2400
2401
2402
2403
	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);
	}
2404
2405
2406
2407
2408
2409
2410

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

2411
2412
		for (const nodeId in defs) {
			this.registerNodeDef(nodeId, defs[nodeId]);
2413
2414
		}

2415
2416
2417
2418
		for(let nodeNum in this.graph._nodes) {
			const node = this.graph._nodes[nodeNum];
			const def = defs[node.type];

2419
2420
2421
			// Allow primitive nodes to handle refresh
			node.refreshComboInNode?.(defs);

2422
2423
2424
			if(!def)
				continue;

2425
2426
2427
			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
2428
					widget.options.values = def["input"]["required"][widget.name][0];
2429

2430
					if(widget.name != 'image' && !widget.options.values.includes(widget.value)) {
2431
						widget.value = widget.options.values[0];
2432
						widget.callback(widget.value);
2433
2434
2435
2436
					}
				}
			}
		}
2437
2438

		await this.#invokeExtensionsAsync("refreshComboInNodes", defs);
2439
	}
2440

2441
2442
2443
2444
2445
2446
	resetView() {
		app.canvas.ds.scale = 1;
		app.canvas.ds.offset = [0, 0]
		app.graph.setDirtyCanvas(true, true);
	}

2447
2448
2449
2450
2451
	/**
	 * Clean current state
	 */
	clean() {
		this.nodeOutputs = {};
space-nuko's avatar
space-nuko committed
2452
		this.nodePreviewImages = {}
2453
		this.lastNodeErrors = null;
2454
		this.lastExecutionError = null;
space-nuko's avatar
space-nuko committed
2455
		this.runningNodeId = null;
2456
	}
pythongosssss's avatar
pythongosssss committed
2457
2458
2459
}

export const app = new ComfyApp();