Nodes now support single line string properties.
Resize nodes automatically if they are too small because of added properties.
This commit is contained in:
comfyanonymous
parent
a37261bb4b
commit
a34cde08cb
2
nodes.py
2
nodes.py
|
|
@ -28,7 +28,7 @@ def filter_files_extensions(files, extensions):
|
|||
class CLIPTextEncode:
|
||||
@classmethod
|
||||
def INPUT_TYPES(s):
|
||||
return {"required": {"text": ("STRING", ), "clip": ("CLIP", )}}
|
||||
return {"required": {"text": ("STRING", {"multiline": True}), "clip": ("CLIP", )}}
|
||||
RETURN_TYPES = ("CONDITIONING",)
|
||||
FUNCTION = "encode"
|
||||
|
||||
|
|
|
|||
|
|
@ -65,17 +65,29 @@ window.addEventListener("resize", resizeCanvas);
|
|||
|
||||
var default_graph = {"last_node_id":9,"last_link_id":9,"nodes":[{"id":7,"type":"CLIPTextEncode","pos":[413,389],"size":{"0":425.27801513671875,"1":180.6060791015625},"flags":{},"order":3,"mode":0,"inputs":[{"name":"clip","type":"CLIP","link":5}],"outputs":[{"name":"CONDITIONING","type":"CONDITIONING","links":[6],"slot_index":0}],"properties":{},"widgets_values":["bad hands"]},{"id":6,"type":"CLIPTextEncode","pos":[415,186],"size":{"0":422.84503173828125,"1":164.31304931640625},"flags":{},"order":2,"mode":0,"inputs":[{"name":"clip","type":"CLIP","link":3}],"outputs":[{"name":"CONDITIONING","type":"CONDITIONING","links":[4],"slot_index":0}],"properties":{},"widgets_values":["masterpiece best quality girl"]},{"id":5,"type":"EmptyLatentImage","pos":[473,609],"size":{"0":315,"1":106},"flags":{},"order":1,"mode":0,"outputs":[{"name":"LATENT","type":"LATENT","links":[2],"slot_index":0}],"properties":{},"widgets_values":[512,512,1]},{"id":3,"type":"KSampler","pos":[863,186],"size":{"0":315,"1":262},"flags":{},"order":4,"mode":0,"inputs":[{"name":"model","type":"MODEL","link":1},{"name":"positive","type":"CONDITIONING","link":4},{"name":"negative","type":"CONDITIONING","link":6},{"name":"latent_image","type":"LATENT","link":2}],"outputs":[{"name":"LATENT","type":"LATENT","links":[7],"slot_index":0}],"properties":{},"widgets_values":[8566257,true,20,8,"sample_euler","normal",1]},{"id":8,"type":"VAEDecode","pos":[1209,188],"size":{"0":210,"1":46},"flags":{},"order":5,"mode":0,"inputs":[{"name":"samples","type":"LATENT","link":7},{"name":"vae","type":"VAE","link":8}],"outputs":[{"name":"IMAGE","type":"IMAGE","links":[9],"slot_index":0}],"properties":{}},{"id":9,"type":"SaveImage","pos":[1451,189],"size":{"0":210,"1":26},"flags":{},"order":6,"mode":0,"inputs":[{"name":"images","type":"IMAGE","link":9}],"properties":{}},{"id":4,"type":"CheckpointLoader","pos":[26,474],"size":{"0":315,"1":122},"flags":{},"order":0,"mode":0,"outputs":[{"name":"MODEL","type":"MODEL","links":[1],"slot_index":0},{"name":"CLIP","type":"CLIP","links":[3,5],"slot_index":1},{"name":"VAE","type":"VAE","links":[8],"slot_index":2}],"properties":{},"widgets_values":["v1-inference.yaml","v1-5-pruned-emaonly.ckpt"]}],"links":[[1,4,0,3,0,"MODEL"],[2,5,0,3,3,"LATENT"],[3,4,1,6,0,"CLIP"],[4,6,0,3,1,"CONDITIONING"],[5,4,1,7,0,"CLIP"],[6,7,0,3,2,"CONDITIONING"],[7,3,0,8,0,"LATENT"],[8,4,2,8,1,"VAE"],[9,8,0,9,0,"IMAGE"]],"groups":[],"config":{},"extra":{},"version":0.4}
|
||||
|
||||
function loadGraphData(graph, graph_data)
|
||||
{
|
||||
graph.configure( graph_data);
|
||||
for (let n in graph._nodes) {
|
||||
n = graph._nodes[n];
|
||||
s = n.computeSize();
|
||||
s[0] = Math.max(n.size[0], s[0]);
|
||||
s[1] = Math.max(n.size[1], s[1]);
|
||||
n.size = s;
|
||||
}
|
||||
}
|
||||
|
||||
function afterLoadGraph()
|
||||
{
|
||||
let workflow = null;
|
||||
try {
|
||||
workflow = JSON.parse(localStorage.getItem("workflow"));
|
||||
graph.configure(workflow);
|
||||
loadGraphData(graph, workflow);
|
||||
} catch(err) {
|
||||
}
|
||||
|
||||
if (!workflow) {
|
||||
graph.configure(default_graph);
|
||||
loadGraphData(graph, default_graph);
|
||||
}
|
||||
|
||||
function saveGraph() {
|
||||
|
|
@ -97,12 +109,13 @@ function onObjectInfo(json) {
|
|||
min_height = 1;
|
||||
min_width = 1;
|
||||
for (let x in inp) {
|
||||
let default_val = min_val = max_val = step_val = undefined;
|
||||
let default_val = min_val = max_val = step_val = multiline = undefined;
|
||||
if (inp[x].length > 1) {
|
||||
default_val = inp[x][1]['default'];
|
||||
min_val = inp[x][1]['min'];
|
||||
max_val = inp[x][1]['max'];
|
||||
step_val = inp[x][1]['step'];
|
||||
multiline = inp[x][1]['multiline'];
|
||||
}
|
||||
|
||||
let type = inp[x][0];
|
||||
|
|
@ -134,66 +147,75 @@ function onObjectInfo(json) {
|
|||
// }
|
||||
this._widgets += [w]
|
||||
} else if (type == "STRING") {
|
||||
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 = 15;
|
||||
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) * t.a;
|
||||
let height_div = (this.parent.size[1] - (y + H))* 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 * 10.0;
|
||||
if (default_val == undefined) default_val = "";
|
||||
if (multiline == undefined) multiline = false;
|
||||
|
||||
if (show_text) {
|
||||
this.input_div.hidden = false;
|
||||
} else {
|
||||
this.input_div.hidden = true;
|
||||
if (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 = 15;
|
||||
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) * t.a;
|
||||
let height_div = (this.parent.size[1] - (y + H))* 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 * 10.0;
|
||||
|
||||
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.innerText = default_val;
|
||||
document.addEventListener('click', function(event) {
|
||||
if (!w.input_div.contains(event.target)) {
|
||||
w.input_div.blur();
|
||||
}
|
||||
});
|
||||
w.parent = this;
|
||||
min_height = Math.max(min_height, 200);
|
||||
min_width = Math.max(min_width, 400);
|
||||
ccc.parentNode.appendChild(w.input_div);
|
||||
|
||||
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';
|
||||
document.addEventListener('click', function(event) {
|
||||
if (!w.input_div.contains(event.target)) {
|
||||
w.input_div.blur();
|
||||
}
|
||||
});
|
||||
w.parent = this;
|
||||
min_height = Math.max(min_height, 200);
|
||||
min_width = Math.max(min_width, 400);
|
||||
ccc.parentNode.appendChild(w.input_div);
|
||||
|
||||
w = this.addCustomWidget(w);
|
||||
// w = this.addWidget("text", x, "", function(v){}, { multiline:true } );
|
||||
console.log(w, this);
|
||||
this._widgets += [w]
|
||||
this.onRemoved = function() {
|
||||
for (let y in this.widgets) {
|
||||
if (this.widgets[y].input_div) {
|
||||
this.widgets[y].input_div.remove();
|
||||
w = this.addCustomWidget(w);
|
||||
// w = this.addWidget("text", x, "", function(v){}, { multiline:true } );
|
||||
console.log(w, this);
|
||||
this._widgets += [w]
|
||||
this.onRemoved = function() {
|
||||
for (let y in this.widgets) {
|
||||
if (this.widgets[y].input_div) {
|
||||
this.widgets[y].input_div.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
w = this.addWidget("text", x, default_val, function(v){}, { multiline:false } );
|
||||
this._widgets += [w];
|
||||
}
|
||||
} else {
|
||||
this.addInput(x, type);
|
||||
}
|
||||
|
|
@ -219,7 +241,7 @@ function onObjectInfo(json) {
|
|||
};
|
||||
|
||||
afterLoadGraph();
|
||||
// graph.configure(JSON.parse(base_txt2img_graph));
|
||||
// loadGraphData(graph, JSON.parse(base_txt2img_graph));
|
||||
}
|
||||
|
||||
fetch("object_info", {cache: "no-store"})
|
||||
|
|
@ -376,7 +398,7 @@ function prompt_file_load(file)
|
|||
}
|
||||
console.log(txt_chunks);
|
||||
console.log(JSON.parse(txt_chunks["prompt"]));
|
||||
graph.configure(JSON.parse(txt_chunks["workflow"]));
|
||||
loadGraphData(graph, JSON.parse(txt_chunks["workflow"]));
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
} else if (file.type === "application/json" || file.name.endsWith(".json")) {
|
||||
|
|
@ -384,7 +406,7 @@ function prompt_file_load(file)
|
|||
reader.onload = function() {
|
||||
console.log(reader.result);
|
||||
var jsonData = JSON.parse(reader.result);
|
||||
graph.configure(jsonData);
|
||||
loadGraphData(graph, jsonData);
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
|
@ -413,7 +435,7 @@ function clearGraph() {
|
|||
}
|
||||
|
||||
function loadTxt2Img() {
|
||||
graph.configure(default_graph);
|
||||
loadGraphData(graph, default_graph);
|
||||
}
|
||||
|
||||
function saveGraph() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue