widgets.js 13.7 KB
Newer Older
1
2
import { api } from "./api.js"

pythongosssss's avatar
pythongosssss committed
3
4
function getNumberDefaults(inputData, defaultStep) {
	let defaultVal = inputData[1]["default"];
5
	let { min, max, step, round} = inputData[1];
pythongosssss's avatar
pythongosssss committed
6
7
8
9
10

	if (defaultVal == undefined) defaultVal = 0;
	if (min == undefined) min = 0;
	if (max == undefined) max = 2048;
	if (step == undefined) step = defaultStep;
11
12
13
14
15
16
17
18
19
20

	// precision is the number of decimal places to show.
	// by default, display the the smallest number of decimal places such that changes of size step are visible.
	let precision = Math.max(-Math.floor(Math.log10(step)),0);

	if (round == undefined || round === true) {
		// by default, round the value to those decimal places shown.
		round = Math.round(1000000*Math.pow(0.1,precision))/1000000;
	}

pythongosssss's avatar
pythongosssss committed
21

22
	return { val: defaultVal, config: { min, max, step: 10.0 * step, round, precision } };
pythongosssss's avatar
pythongosssss committed
23
24
}

25
26
27
28
29
30
31
32
33
export function addValueControlWidget(node, targetWidget, defaultValue = "randomize", values) {
    const valueControl = node.addWidget("combo", "control_after_generate", defaultValue, function (v) { }, {
        values: ["fixed", "increment", "decrement", "randomize"],
        serialize: false, // Don't include this in prompt.
    });
    valueControl.afterQueued = () => {

		var v = valueControl.value;

34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
		if (targetWidget.type == "combo" && v !== "fixed") {
			let current_index = targetWidget.options.values.indexOf(targetWidget.value);
			let current_length = targetWidget.options.values.length;

			switch (v) {
				case "increment":
					current_index += 1;
					break;
				case "decrement":
					current_index -= 1;
					break;
				case "randomize":
					current_index = Math.floor(Math.random() * current_length);
				default:
					break;
			}
			current_index = Math.max(0, current_index);
			current_index = Math.min(current_length - 1, current_index);
			if (current_index >= 0) {
				let value = targetWidget.options.values[current_index];
				targetWidget.value = value;
				targetWidget.callback(value);
			}
		} else { //number
			let min = targetWidget.options.min;
			let max = targetWidget.options.max;
			// limit to something that javascript can handle
			max = Math.min(1125899906842624, max);
			min = Math.max(-1125899906842624, min);
			let range = (max - min) / (targetWidget.options.step / 10);
64

65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
			//adjust values based on valueControl Behaviour
			switch (v) {
				case "fixed":
					break;
				case "increment":
					targetWidget.value += targetWidget.options.step / 10;
					break;
				case "decrement":
					targetWidget.value -= targetWidget.options.step / 10;
					break;
				case "randomize":
					targetWidget.value = Math.floor(Math.random() * range) * (targetWidget.options.step / 10) + min;
				default:
					break;
			}
		/*check if values are over or under their respective
		* ranges and set them to min or max.*/
			if (targetWidget.value < min)
				targetWidget.value = min;

			if (targetWidget.value > max)
				targetWidget.value = max;
		}
88
	}
89
	return valueControl;
90
};
91

92
93
function seedWidget(node, inputName, inputData, app) {
	const seed = ComfyWidgets.INT(node, inputName, inputData, app);
94
	const seedControl = addValueControlWidget(node, seed.widget, "randomize");
pythongosssss's avatar
pythongosssss committed
95

96
97
	seed.widget.linkedWidgets = [seedControl];
	return seed;
pythongosssss's avatar
pythongosssss committed
98
99
}

100
const MultilineSymbol = Symbol();
101
const MultilineResizeSymbol = Symbol();
102
103
104
105

function addMultilineWidget(node, name, opts, app) {
	const MIN_SIZE = 50;

106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
	function computeSize(size) {
		if (node.widgets[0].last_y == null) return;

		let y = node.widgets[0].last_y;
		let freeSpace = size[1] - y;

		// Compute the height of all non customtext widgets
		let widgetHeight = 0;
		const multi = [];
		for (let i = 0; i < node.widgets.length; i++) {
			const w = node.widgets[i];
			if (w.type === "customtext") {
				multi.push(w);
			} else {
				if (w.computeSize) {
					widgetHeight += w.computeSize()[1] + 4;
				} else {
					widgetHeight += LiteGraph.NODE_WIDGET_HEIGHT + 4;
				}
			}
		}

		// See how large each text input can be
		freeSpace -= widgetHeight;
130
		freeSpace /= multi.length + (!!node.imgs?.length);
131
132
133
134

		if (freeSpace < MIN_SIZE) {
			// There isnt enough space for all the widgets, increase the size of the node
			freeSpace = MIN_SIZE;
135
			node.size[1] = y + widgetHeight + freeSpace * (multi.length + (!!node.imgs?.length));
136
			node.graph.setDirtyCanvas(true);
137
138
139
140
141
142
143
		}

		// Position each of the widgets
		for (const w of node.widgets) {
			w.y = y;
			if (w.type === "customtext") {
				y += freeSpace;
144
				w.computedHeight = freeSpace - multi.length*4;
145
146
147
148
149
150
151
152
153
154
			} else if (w.computeSize) {
				y += w.computeSize()[1] + 4;
			} else {
				y += LiteGraph.NODE_WIDGET_HEIGHT + 4;
			}
		}

		node.inputHeight = freeSpace;
	}

pythongosssss's avatar
pythongosssss committed
155
156
157
158
159
160
161
162
163
164
	const widget = {
		type: "customtext",
		name,
		get value() {
			return this.inputEl.value;
		},
		set value(x) {
			this.inputEl.value = x;
		},
		draw: function (ctx, _, widgetWidth, y, widgetHeight) {
165
166
167
168
169
			if (!this.parent.inputHeight) {
				// If we are initially offscreen when created we wont have received a resize event
				// Calculate it here instead
				computeSize(node.size);
			}
170
			const visible = app.canvas.ds.scale > 0.5 && this.type === "customtext";
pythongosssss's avatar
pythongosssss committed
171
			const margin = 10;
172
173
174
175
176
177
			const elRect = ctx.canvas.getBoundingClientRect();
			const transform = new DOMMatrix()
				.scaleSelf(elRect.width / ctx.canvas.width, elRect.height / ctx.canvas.height)
				.multiplySelf(ctx.getTransform())
				.translateSelf(margin, margin + y);

178
			const scale = new DOMMatrix().scaleSelf(transform.a, transform.d)
pythongosssss's avatar
pythongosssss committed
179
			Object.assign(this.inputEl.style, {
180
				transformOrigin: "0 0",
181
182
183
				transform: scale,
				left: `${transform.a + transform.e}px`,
				top: `${transform.d + transform.f}px`,
184
185
				width: `${widgetWidth - (margin * 2)}px`,
				height: `${this.parent.inputHeight - (margin * 2)}px`,
pythongosssss's avatar
pythongosssss committed
186
				position: "absolute",
187
				background: (!node.color)?'':node.color,
Jake D's avatar
Jake D committed
188
189
				color: (!node.color)?'':'white',
				zIndex: app.graph._nodes.indexOf(node),
pythongosssss's avatar
pythongosssss committed
190
191
192
193
194
195
			});
			this.inputEl.hidden = !visible;
		},
	};
	widget.inputEl = document.createElement("textarea");
	widget.inputEl.className = "comfy-multiline-input";
196
197
	widget.inputEl.value = opts.defaultVal;
	widget.inputEl.placeholder = opts.placeholder || "";
comfyanonymous's avatar
comfyanonymous committed
198
	document.addEventListener("mousedown", function (event) {
pythongosssss's avatar
pythongosssss committed
199
200
201
202
203
204
205
206
207
		if (!widget.inputEl.contains(event.target)) {
			widget.inputEl.blur();
		}
	});
	widget.parent = node;
	document.body.appendChild(widget.inputEl);

	node.addCustomWidget(widget);

208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
	app.canvas.onDrawBackground = function () {
		// Draw node isnt fired once the node is off the screen
		// if it goes off screen quickly, the input may not be removed
		// this shifts it off screen so it can be moved back if the node is visible.
		for (let n in app.graph._nodes) {
			n = graph._nodes[n];
			for (let w in n.widgets) {
				let wid = n.widgets[w];
				if (Object.hasOwn(wid, "inputEl")) {
					wid.inputEl.style.left = -8000 + "px";
					wid.inputEl.style.position = "absolute";
				}
			}
		}
	};

pythongosssss's avatar
pythongosssss committed
224
225
226
227
228
229
230
231
232
	node.onRemoved = function () {
		// When removing this node we need to remove the input from the DOM
		for (let y in this.widgets) {
			if (this.widgets[y].inputEl) {
				this.widgets[y].inputEl.remove();
			}
		}
	};

233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
	widget.onRemove = () => {
		widget.inputEl?.remove();

		// Restore original size handler if we are the last
		if (!--node[MultilineSymbol]) {
			node.onResize = node[MultilineResizeSymbol];
			delete node[MultilineSymbol];
			delete node[MultilineResizeSymbol];
		}
	};

	if (node[MultilineSymbol]) {
		node[MultilineSymbol]++;
	} else {
		node[MultilineSymbol] = 1;
		const onResize = (node[MultilineResizeSymbol] = node.onResize);
pythongosssss's avatar
tidy  
pythongosssss committed
249

250
		node.onResize = function (size) {
251
			computeSize(size);
252
253
254
255
256
257
258
259

			// Call original resizer handler
			if (onResize) {
				onResize.apply(this, arguments);
			}
		};
	}

pythongosssss's avatar
pythongosssss committed
260
261
262
	return { minWidth: 400, minHeight: 200, widget };
}

263
264
265
266
267
function isSlider(display, app) {
	if (app.ui.settings.getSettingValue("Comfy.DisableSliders")) {
		return "number"
	}

comfyanonymous's avatar
comfyanonymous committed
268
	return (display==="slider") ? "slider" : "number"
Guillaume Faguet's avatar
Guillaume Faguet committed
269
270
}

pythongosssss's avatar
pythongosssss committed
271
272
273
export const ComfyWidgets = {
	"INT:seed": seedWidget,
	"INT:noise_seed": seedWidget,
274
275
	FLOAT(node, inputName, inputData, app) {
		let widgetType = isSlider(inputData[1]["display"], app);
pythongosssss's avatar
pythongosssss committed
276
		const { val, config } = getNumberDefaults(inputData, 0.5);
277
278
		return { widget: node.addWidget(widgetType, inputName, val, 
			function (v) {
279
280
281
282
283
				if (config.round) {
					this.value = Math.round(v/config.round)*config.round;
				} else {
					this.value = v;
				}
284
			}, config) };
pythongosssss's avatar
pythongosssss committed
285
	},
286
287
	INT(node, inputName, inputData, app) {
		let widgetType = isSlider(inputData[1]["display"], app);
pythongosssss's avatar
pythongosssss committed
288
		const { val, config } = getNumberDefaults(inputData, 1);
289
		Object.assign(config, { precision: 0 });
pythongosssss's avatar
pythongosssss committed
290
291
		return {
			widget: node.addWidget(
Guillaume Faguet's avatar
Guillaume Faguet committed
292
				widgetType,
293
294
295
296
297
298
299
				inputName,
				val,
				function (v) {
					const s = this.options.step / 10;
					this.value = Math.round(v / s) * s;
				},
				config
comfyanonymous's avatar
comfyanonymous committed
300
			),
301
302
		};
	},
comfyanonymous's avatar
comfyanonymous committed
303
	BOOLEAN(node, inputName, inputData) {
304
305
306
307
308
309
310
		let defaultVal = inputData[1]["default"];
		return {
			widget: node.addWidget(
				"toggle",
				inputName,
				defaultVal,
				() => {},
comfyanonymous's avatar
comfyanonymous committed
311
				{"on": inputData[1].label_on, "off": inputData[1].label_off}
312
313
314
				)
		};
	},
pythongosssss's avatar
pythongosssss committed
315
316
317
318
	STRING(node, inputName, inputData, app) {
		const defaultVal = inputData[1].default || "";
		const multiline = !!inputData[1].multiline;

319
		let res;
pythongosssss's avatar
pythongosssss committed
320
		if (multiline) {
321
			res = addMultilineWidget(node, inputName, { defaultVal, ...inputData[1] }, app);
pythongosssss's avatar
pythongosssss committed
322
		} else {
323
			res = { widget: node.addWidget("text", inputName, defaultVal, () => {}, {}) };
pythongosssss's avatar
pythongosssss committed
324
		}
325
326
327
328
329

		if(inputData[1].dynamicPrompts != undefined)
			res.widget.dynamicPrompts = inputData[1].dynamicPrompts;

		return res;
pythongosssss's avatar
pythongosssss committed
330
	},
331
332
333
334
335
336
337
338
	COMBO(node, inputName, inputData) {
		const type = inputData[0];
		let defaultValue = type[0];
		if (inputData[1] && inputData[1].default) {
			defaultValue = inputData[1].default;
		}
		return { widget: node.addWidget("combo", inputName, defaultValue, () => {}, { values: type }) };
	},
pythongosssss's avatar
pythongosssss committed
339
340
341
342
343
344
345
346
347
348
	IMAGEUPLOAD(node, inputName, inputData, app) {
		const imageWidget = node.widgets.find((w) => w.name === "image");
		let uploadWidget;

		function showImage(name) {
			const img = new Image();
			img.onload = () => {
				node.imgs = [img];
				app.graph.setDirtyCanvas(true);
			};
comfyanonymous's avatar
comfyanonymous committed
349
350
351
352
353
354
			let folder_separator = name.lastIndexOf("/");
			let subfolder = "";
			if (folder_separator > -1) {
				subfolder = name.substring(0, folder_separator);
				name = name.substring(folder_separator + 1);
			}
355
			img.src = api.apiURL(`/view?filename=${encodeURIComponent(name)}&type=input&subfolder=${subfolder}${app.getPreviewFormatParam()}`);
356
			node.setSizeForImage?.();
pythongosssss's avatar
pythongosssss committed
357
358
		}

comfyanonymous's avatar
comfyanonymous committed
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
384
385
386
387
388
		var default_value = imageWidget.value;
		Object.defineProperty(imageWidget, "value", {
			set : function(value) {
				this._real_value = value;
			},

			get : function() {
				let value = "";
				if (this._real_value) {
					value = this._real_value;
				} else {
					return default_value;
				}

				if (value.filename) {
					let real_value = value;
					value = "";
					if (real_value.subfolder) {
						value = real_value.subfolder + "/";
					}

					value += real_value.filename;

					if(real_value.type && real_value.type !== "input")
						value += ` [${real_value.type}]`;
				}
				return value;
			}
		});

pythongosssss's avatar
pythongosssss committed
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
		// Add our own callback to the combo widget to render an image when it changes
		const cb = node.callback;
		imageWidget.callback = function () {
			showImage(imageWidget.value);
			if (cb) {
				return cb.apply(this, arguments);
			}
		};

		// On load if we have a value then render the image
		// The value isnt set immediately so we need to wait a moment
		// No change callbacks seem to be fired on initial setting of the value
		requestAnimationFrame(() => {
			if (imageWidget.value) {
				showImage(imageWidget.value);
			}
		});

407
		async function uploadFile(file, updateNode, pasted = false) {
408
409
410
411
			try {
				// Wrap file in formdata so it includes filename
				const body = new FormData();
				body.append("image", file);
412
				if (pasted) body.append("subfolder", "pasted");
413
				const resp = await api.fetchApi("/upload/image", {
414
415
416
417
418
419
					method: "POST",
					body,
				});

				if (resp.status === 200) {
					const data = await resp.json();
420
421
422
423
424
425
					// Add the file to the dropdown list and update the widget value
					let path = data.name;
					if (data.subfolder) path = data.subfolder + "/" + path;

					if (!imageWidget.options.values.includes(path)) {
						imageWidget.options.values.push(path);
426
427
428
					}

					if (updateNode) {
429
430
						showImage(path);
						imageWidget.value = path;
431
432
433
434
435
436
437
438
439
					}
				} else {
					alert(resp.status + " - " + resp.statusText);
				}
			} catch (error) {
				alert(error);
			}
		}

pythongosssss's avatar
pythongosssss committed
440
441
442
		const fileInput = document.createElement("input");
		Object.assign(fileInput, {
			type: "file",
443
			accept: "image/jpeg,image/png,image/webp",
pythongosssss's avatar
pythongosssss committed
444
445
446
			style: "display: none",
			onchange: async () => {
				if (fileInput.files.length) {
447
					await uploadFile(fileInput.files[0], true);
pythongosssss's avatar
pythongosssss committed
448
449
450
451
452
453
454
455
456
457
458
				}
			},
		});
		document.body.append(fileInput);

		// Create the button widget for selecting the files
		uploadWidget = node.addWidget("button", "choose file to upload", "image", () => {
			fileInput.click();
		});
		uploadWidget.serialize = false;

459
460
461
		// Add handler to check if an image is being dragged over our node
		node.onDragOver = function (e) {
			if (e.dataTransfer && e.dataTransfer.items) {
462
				const image = [...e.dataTransfer.items].find((f) => f.kind === "file");
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
				return !!image;
			}

			return false;
		};

		// On drop upload files
		node.onDragDrop = function (e) {
			console.log("onDragDrop called");
			let handled = false;
			for (const file of e.dataTransfer.files) {
				if (file.type.startsWith("image/")) {
					uploadFile(file, !handled); // Dont await these, any order is fine, only update on first one
					handled = true;
				}
			}

			return handled;
		};

483
484
485
486
487
488
489
490
491
492
		node.pasteFile = function(file) {
			if (file.type.startsWith("image/")) {
				const is_pasted = (file.name === "image.png") &&
								  (file.lastModified - Date.now() < 2000);
				uploadFile(file, true, is_pasted);
				return true;
			}
			return false;
		}

pythongosssss's avatar
pythongosssss committed
493
494
		return { widget: uploadWidget };
	},
pythongosssss's avatar
pythongosssss committed
495
};