Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-02-02 22:37:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

added multiline support for widgets

Browse Source
This commit is contained in:
tamat
2021-01-05 17:33:26 +01:00
parent 2fe197bb8b
commit a1a51ef056
5 changed files with 517 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
build/litegraph.js
View File

@@ -8624,6 +8624,7 @@ LGraphNode.prototype.executeAction = function(action)
ctx.strokeStyle = outline_color;
ctx.fillStyle = "#222";
ctx.textAlign = "left";
//ctx.lineWidth = 2;
if(w.disabled)
ctx.globalAlpha *= 0.5;
var widget_width = w.width || width;
@@ -8771,13 +8772,15 @@ LGraphNode.prototype.executeAction = function(action)
else
ctx.rect( margin, posY, widget_width - margin * 2, H );
ctx.fill();
if (show_text) {
ctx.save();
if (show_text) {
if(!w.disabled)
ctx.stroke();
ctx.save();
ctx.beginPath();
ctx.rect(margin, posY, widget_width - margin * 2, H);
ctx.clip();
ctx.stroke();
//ctx.stroke();
ctx.fillStyle = secondary_text_color;
if (w.name != null) {
ctx.fillText(w.name, margin * 2, y + H * 0.7);
@@ -8852,10 +8855,8 @@ LGraphNode.prototype.executeAction = function(action)
break;
case "slider":
var range = w.options.max - w.options.min;
var nvalue = Math.clamp((x - 10) / (widget_width - 20), 0, 1);
w.value =
w.options.min +
(w.options.max - w.options.min) * nvalue;
var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1);
w.value = w.options.min + (w.options.max - w.options.min) * nvalue;
if (w.callback) {
setTimeout(function() {
inner_value_change(w, w.value);
@@ -8965,7 +8966,7 @@ LGraphNode.prototype.executeAction = function(action)
this.value = v;
inner_value_change(this, v);
}.bind(w),
event);
event,w.options ? w.options.multiline : false );
}
break;
default:
@@ -9552,18 +9553,18 @@ LGraphNode.prototype.executeAction = function(action)
var dialog = document.createElement("div");
dialog.className = "graphdialog";
dialog.innerHTML =
"<span class='name'></span><input autofocus type='text' class='value'/><button>OK</button>";
dialog.innerHTML = "<span class='name'></span><input autofocus type='text' class='value'/><button>OK</button>";
//dialog.innerHTML = "<span class='name'></span><textarea autofocus class='value'></textarea><button>OK</button>";
var title = dialog.querySelector(".name");
title.innerText = property;
var input = dialog.querySelector("input");
var input = dialog.querySelector(".value");
if (input) {
input.value = value;
input.addEventListener("blur", function(e) {
this.focus();
});
input.addEventListener("keydown", function(e) {
if (e.keyCode != 13) {
if (e.keyCode != 13 && e.target.localName != "textarea") {
return;
}
inner();
@@ -9613,7 +9614,7 @@ LGraphNode.prototype.executeAction = function(action)
}
};
LGraphCanvas.prototype.prompt = function(title, value, callback, event) {
LGraphCanvas.prototype.prompt = function(title, value, callback, event, multiline) {
var that = this;
var input_html = "";
title = title || "";
@@ -9622,8 +9623,10 @@ LGraphNode.prototype.executeAction = function(action)
var dialog = document.createElement("div");
dialog.className = "graphdialog rounded";
dialog.innerHTML =
"<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>";
if(multiline)
dialog.innerHTML = "<span class='name'></span> <textarea autofocus class='value'></textarea><button class='rounded'>OK</button>";
else
dialog.innerHTML = "<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>";
dialog.close = function() {
that.prompt_box = null;
if (dialog.parentNode) {
@@ -9655,13 +9658,13 @@ LGraphNode.prototype.executeAction = function(action)
var value_element = dialog.querySelector(".value");
value_element.value = value;
var input = dialog.querySelector("input");
var input = value_element;
input.addEventListener("keydown", function(e) {
modified = true;
if (e.keyCode == 27) {
//ESC
dialog.close();
} else if (e.keyCode == 13) {
} else if (e.keyCode == 13 && e.target.localName != "textarea") {
if (callback) {
callback(this.value);
}

935
build/litegraph.min.js vendored
View File

File diff suppressed because it is too large Load Diff

9
css/litegraph.css
View File

@@ -509,7 +509,7 @@
position: absolute;
top: 10px;
left: 10px;
min-height: 2em;
/*min-height: 2em;*/
background-color: #333;
font-size: 1.2em;
box-shadow: 0 0 10px black !important;
@@ -529,6 +529,7 @@
}
.graphdialog input,
.graphdialog textarea,
.graphdialog select {
margin: 3px;
min-width: 60px;
@@ -540,9 +541,15 @@
outline: none;
}
.graphdialog textarea {
min-height: 150px;
}
.graphdialog button {
margin-top: 3px;
vertical-align: top;
background-color: #999;
border: 0;
}
.graphdialog button.rounded,

1
editor/js/demos.js
View File

@@ -89,6 +89,7 @@ function TestWidgetsNode()
this.number = this.addWidget("number","Number", 0.5, function(v){}, { min: 0, max: 100} );
this.combo = this.addWidget("combo","Combo", "red", function(v){}, { values:["red","green","blue"]} );
this.text = this.addWidget("text","Text", "edit me", function(v){}, {} );
this.text2 = this.addWidget("text","Text", "multiline", function(v){}, { multiline:true } );
this.toggle = this.addWidget("toggle","Toggle", true, function(v){}, { on: "enabled", off:"disabled"} );
this.button = this.addWidget("button","Button", null, function(v){}, {} );
this.toggle2 = this.addWidget("toggle","Disabled", true, function(v){}, { on: "enabled", off:"disabled"} );

37
src/litegraph.js
View File

@@ -8622,6 +8622,7 @@ LGraphNode.prototype.executeAction = function(action)
ctx.strokeStyle = outline_color;
ctx.fillStyle = "#222";
ctx.textAlign = "left";
//ctx.lineWidth = 2;
if(w.disabled)
ctx.globalAlpha *= 0.5;
var widget_width = w.width || width;
@@ -8769,13 +8770,15 @@ LGraphNode.prototype.executeAction = function(action)
else
ctx.rect( margin, posY, widget_width - margin * 2, H );
ctx.fill();
if (show_text) {
ctx.save();
if (show_text) {
if(!w.disabled)
ctx.stroke();
ctx.save();
ctx.beginPath();
ctx.rect(margin, posY, widget_width - margin * 2, H);
ctx.clip();
ctx.stroke();
//ctx.stroke();
ctx.fillStyle = secondary_text_color;
if (w.name != null) {
ctx.fillText(w.name, margin * 2, y + H * 0.7);
@@ -8850,10 +8853,8 @@ LGraphNode.prototype.executeAction = function(action)
break;
case "slider":
var range = w.options.max - w.options.min;
var nvalue = Math.clamp((x - 10) / (widget_width - 20), 0, 1);
w.value =
w.options.min +
(w.options.max - w.options.min) * nvalue;
var nvalue = Math.clamp((x - 15) / (widget_width - 30), 0, 1);
w.value = w.options.min + (w.options.max - w.options.min) * nvalue;
if (w.callback) {
setTimeout(function() {
inner_value_change(w, w.value);
@@ -8963,7 +8964,7 @@ LGraphNode.prototype.executeAction = function(action)
this.value = v;
inner_value_change(this, v);
}.bind(w),
event);
event,w.options ? w.options.multiline : false );
}
break;
default:
@@ -9550,18 +9551,18 @@ LGraphNode.prototype.executeAction = function(action)
var dialog = document.createElement("div");
dialog.className = "graphdialog";
dialog.innerHTML =
"<span class='name'></span><input autofocus type='text' class='value'/><button>OK</button>";
dialog.innerHTML = "<span class='name'></span><input autofocus type='text' class='value'/><button>OK</button>";
//dialog.innerHTML = "<span class='name'></span><textarea autofocus class='value'></textarea><button>OK</button>";
var title = dialog.querySelector(".name");
title.innerText = property;
var input = dialog.querySelector("input");
var input = dialog.querySelector(".value");
if (input) {
input.value = value;
input.addEventListener("blur", function(e) {
this.focus();
});
input.addEventListener("keydown", function(e) {
if (e.keyCode != 13) {
if (e.keyCode != 13 && e.target.localName != "textarea") {
return;
}
inner();
@@ -9611,7 +9612,7 @@ LGraphNode.prototype.executeAction = function(action)
}
};
LGraphCanvas.prototype.prompt = function(title, value, callback, event) {
LGraphCanvas.prototype.prompt = function(title, value, callback, event, multiline) {
var that = this;
var input_html = "";
title = title || "";
@@ -9620,8 +9621,10 @@ LGraphNode.prototype.executeAction = function(action)
var dialog = document.createElement("div");
dialog.className = "graphdialog rounded";
dialog.innerHTML =
"<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>";
if(multiline)
dialog.innerHTML = "<span class='name'></span> <textarea autofocus class='value'></textarea><button class='rounded'>OK</button>";
else
dialog.innerHTML = "<span class='name'></span> <input autofocus type='text' class='value'/><button class='rounded'>OK</button>";
dialog.close = function() {
that.prompt_box = null;
if (dialog.parentNode) {
@@ -9653,13 +9656,13 @@ LGraphNode.prototype.executeAction = function(action)
var value_element = dialog.querySelector(".value");
value_element.value = value;
var input = dialog.querySelector("input");
var input = value_element;
input.addEventListener("keydown", function(e) {
modified = true;
if (e.keyCode == 27) {
//ESC
dialog.close();
} else if (e.keyCode == 13) {
} else if (e.keyCode == 13 && e.target.localName != "textarea") {
if (callback) {
callback(this.value);
}