mirror of
https://github.com/comfyanonymous/ComfyUI.git
synced 2026-01-10 06:10:50 +08:00
262 lines
8.4 KiB
JavaScript
262 lines
8.4 KiB
JavaScript
var COMFY_WIDGETS = [];
|
|
|
|
|
|
class BaseWidget {
|
|
addWidget(node) {
|
|
}
|
|
}
|
|
|
|
|
|
class IntWidget extends BaseWidget {
|
|
constructor(opts, config) {
|
|
super();
|
|
this.default_val = opts['default'] || 0;
|
|
this.min_val = opts['min'] || 0;
|
|
this.max_val = opts['max'] || 2048;
|
|
this.step_val = opts['step'] || 1;
|
|
}
|
|
|
|
addWidget(node, x) {
|
|
let onSet = function(v) {
|
|
let s = this.options.step / 10;
|
|
this.value = Math.round( v / s ) * s;
|
|
};
|
|
let w = node.addWidget("number", x, this.default_val, onSet, { min: this.min_val, max: this.max_val, step: this.step_val});
|
|
node._widgets += [w]
|
|
if (x == "seed" || x == "noise_seed") {
|
|
let w1 = node.addWidget("toggle", "Random seed after every gen", true, function(v){}, { on: "enabled", off: "disabled" } );
|
|
w1.to_randomize = w;
|
|
node._widgets += [w1]
|
|
}
|
|
}
|
|
}
|
|
COMFY_WIDGETS["INT"] = IntWidget;
|
|
|
|
|
|
class FloatWidget extends BaseWidget {
|
|
constructor(opts, config) {
|
|
super();
|
|
this.default_val = opts['default'] || 0;
|
|
this.min_val = opts['min'] || 0;
|
|
this.max_val = opts['max'] || 2048;
|
|
this.step_val = opts['step'] || 0.5;
|
|
}
|
|
|
|
addWidget(node, x) {
|
|
// if (min_val == 0.0 && max_val == 1.0) {
|
|
// w = this.slider = this.addWidget("slider", x, default_val, function(v){}, { min: min_val, max: max_val} );
|
|
// } else {
|
|
let w = node.addWidget("number", x, this.default_val, function(v){}, { min: this.min_val, max: this.max_val, step: this.step_val} );
|
|
// }
|
|
node._widgets += [w];
|
|
}
|
|
}
|
|
COMFY_WIDGETS["FLOAT"] = FloatWidget;
|
|
|
|
|
|
class StringWidget extends BaseWidget {
|
|
constructor(opts, config) {
|
|
super();
|
|
this.default_val = opts['default'] || "";
|
|
this.multiline = opts['multiline'] || false;
|
|
this.fontFamily = config["textArea"]["fontFamily"];
|
|
this.fontSize = config["textArea"]["fontSize"] || 10.0;
|
|
}
|
|
|
|
addWidget(node, x) {
|
|
if (this.multiline) {
|
|
var w = {
|
|
type: "customtext",
|
|
name: x,
|
|
get value() { return this.input_div.innerText;},
|
|
set value(x) { this.input_div.innerText = x;},
|
|
callback: function(v){console.log(v);},
|
|
options: {},
|
|
draw: function(ctx, node, widget_width, y, H){
|
|
var show_text = canvas.ds.scale > 0.5;
|
|
// this.input_div.style.top = `${y}px`;
|
|
let t = ctx.getTransform();
|
|
let margin = 10;
|
|
let x_div = t.a * margin * 2 + t.e;
|
|
let y_div = t.d * (y + H) + t.f;
|
|
let width_div = (widget_width - margin * 2 - 3) * t.a;
|
|
let height_div = (this.parent.size[1] - (y + H) - 3)* t.d;
|
|
this.input_div.style.left = `${x_div}px`;
|
|
this.input_div.style.top = `${y_div}px`;
|
|
this.input_div.style.width = width_div;
|
|
this.input_div.style.height = height_div;
|
|
this.input_div.style.position = 'absolute';
|
|
this.input_div.style.zIndex = 1;
|
|
this.input_div.style.fontSize = t.d * this.fontSize;
|
|
|
|
if (show_text) {
|
|
this.input_div.hidden = false;
|
|
} else {
|
|
this.input_div.hidden = true;
|
|
}
|
|
|
|
ctx.save();
|
|
// ctx.fillText(String(this.value).substr(0,30), 0, y + H * 0.7);
|
|
ctx.restore();
|
|
},
|
|
};
|
|
w.input_div = document.createElement('div');
|
|
w.input_div.contentEditable = true;
|
|
w.input_div.style.backgroundColor = "#FFFFFF";
|
|
w.input_div.style.overflow = 'hidden';
|
|
w.input_div.style.overflowY = 'auto';
|
|
w.input_div.style.padding = 2;
|
|
if (this.fontFamily) {
|
|
w.input_div.style.fontFamily = this.fontFamily;
|
|
}
|
|
w.input_div.innerText = this.default_val;
|
|
document.addEventListener('click', function(event) {
|
|
if (!w.input_div.contains(event.target)) {
|
|
w.input_div.blur();
|
|
}
|
|
});
|
|
w.parent = node;
|
|
min_height = Math.max(min_height, 200);
|
|
min_width = Math.max(min_width, 400);
|
|
ccc.parentNode.appendChild(w.input_div);
|
|
|
|
w = node.addCustomWidget(w);
|
|
canvas.onDrawBackground = function() {
|
|
for (let n in graph._nodes) {
|
|
n = graph._nodes[n];
|
|
for (let w in n.widgets) {
|
|
let wid = n.widgets[w];
|
|
if (Object.hasOwn(wid, 'input_div')) {
|
|
wid.input_div.style.left = -8000;
|
|
wid.input_div.style.position = 'absolute';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// w = node.addWidget("text", x, "", function(v){}, { multiline:true } );
|
|
console.log(w, node);
|
|
node._widgets += [w]
|
|
node.onRemoved = function() {
|
|
for (let y in node.widgets) {
|
|
if (node.widgets[y].input_div) {
|
|
node.widgets[y].input_div.remove();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else {
|
|
w = node.addWidget("text", x, this.default_val, function(v){}, { multiline:false } );
|
|
node._widgets += [w];
|
|
}
|
|
}
|
|
}
|
|
COMFY_WIDGETS["STRING"] = StringWidget;
|
|
|
|
|
|
class ComboWidget extends BaseWidget {
|
|
constructor(opts, config) {
|
|
super();
|
|
this.choices = opts['choices'] || [];
|
|
}
|
|
|
|
addWidget(node, x) {
|
|
let w = node.addWidget("combo", x, this.choices[0], function(v){}, { values: this.choices } );
|
|
node._widgets += [w]
|
|
}
|
|
}
|
|
COMFY_WIDGETS["COMBO"] = ComboWidget;
|
|
|
|
|
|
class RegionWidget extends BaseWidget {
|
|
constructor(opts, config) {
|
|
super();
|
|
}
|
|
|
|
addWidget(node, x) {
|
|
var w = {
|
|
type: "region",
|
|
name: x,
|
|
region: { x: 0, y: 0, width: 2048, height: 2048 },
|
|
get value() {
|
|
return this.region;
|
|
},
|
|
set value(x) {
|
|
this.region = x;
|
|
},
|
|
callback: function(v){console.log("CB!", v);},
|
|
options: {},
|
|
draw: function(ctx, node, widget_width, y, H){
|
|
ctx.save();
|
|
|
|
var size = this.size[1] * 0.5;
|
|
var margin = 0.25;
|
|
var h = this.size[1] * 0.8;
|
|
// ctx.font = this.properties.font || (size * 0.8).toFixed(0) + "px Arial";
|
|
var w = ctx.measureText(this.title).width;
|
|
var x = margin * this.size[0] * 0.25;
|
|
|
|
var latentParams = node.getInputData(1, true);
|
|
if (latentParams) {
|
|
var latentWidth = latentParams[0];
|
|
var latentHeight = latentParams[1];
|
|
|
|
var widgetWidth = node.widgets[1]
|
|
var widgetHeight = node.widgets[2]
|
|
var widgetX = node.widgets[3]
|
|
var widgetY = node.widgets[4]
|
|
widgetWidth.options.max = latentWidth;
|
|
widgetWidth.value = Math.min(widgetWidth.value, latentWidth);
|
|
this.region.width = widgetWidth.value;
|
|
|
|
widgetHeight.options.max = latentHeight;
|
|
widgetHeight.value = Math.min(widgetHeight.value, latentHeight);
|
|
this.region.height = widgetHeight.value;
|
|
|
|
widgetX.options.max = latentWidth;
|
|
widgetX.value = Math.min(widgetX.value, latentWidth - widgetWidth.value);
|
|
this.region.x = widgetX.value;
|
|
|
|
widgetY.options.max = latentHeight;
|
|
widgetY.value = Math.min(widgetY.value, latentHeight - widgetHeight.value);
|
|
this.region.y = widgetY.value;
|
|
|
|
ctx.fillStyle = "#FFF";
|
|
ctx.strokeRect(x, y, this.size[0], this.size[1]);
|
|
|
|
ctx.fillStyle = "#AAF";
|
|
ctx.fillRect(
|
|
x + (this.region.x / latentWidth) * this.size[0],
|
|
y + (this.region.y / latentHeight) * this.size[1],
|
|
(this.region.width / latentWidth) * this.size[0],
|
|
(this.region.height / latentHeight) * this.size[1]
|
|
);
|
|
}
|
|
|
|
// ctx.textAlign = "left";
|
|
// ctx.fillStyle = "#AAA";
|
|
// ctx.fillText(this.title, size * 1.2 + x, h * 0.85);
|
|
// ctx.textAlign = "left";
|
|
|
|
ctx.restore();
|
|
},
|
|
mouse: function(event, pos, node) {
|
|
return true;
|
|
},
|
|
computeSize() {
|
|
return this.size;
|
|
}
|
|
};
|
|
w.size = [150, 150];
|
|
w.parent = node;
|
|
w = node.addCustomWidget(w);
|
|
node.addWidget("number", "width", 512, (v) => w.region.width = v, { property: "region_width", min: 64, max: 2048, step: 64 });
|
|
node.addWidget("number", "height", 512, (v) => w.region.height = v, { property: "region_height", min: 64, max: 2048, step: 64 });
|
|
node.addWidget("number", "x", 0, (v) => w.region.x = v, { property: "region_x", min: 0, max: 2048, step: 64 });
|
|
node.addWidget("number", "y", 0, (v) => w.region.y = v, { property: "region_y", min: 0, max: 2048, step: 64 });
|
|
// console.log(node.getInputData("Width"))
|
|
node._widgets += [w]
|
|
console.log(node);
|
|
}
|
|
}
|
|
COMFY_WIDGETS["REGION"] = RegionWidget;
|