321 lines
13 KiB
JavaScript
321 lines
13 KiB
JavaScript
import { app } from "../../scripts/app.js"
|
|
import { api } from "../../scripts/api.js";
|
|
import { ComfyWidgets } from "../../scripts/widgets.js";
|
|
|
|
|
|
|
|
app.registerExtension({
|
|
name: "hetima.SLPSingleLinePicker",
|
|
commands: [
|
|
{
|
|
id: "hetima-slpsinglelinepicker-get-loras",
|
|
label: "Get Lora List",
|
|
icon: "pi pi-file-plus",
|
|
tooltip: "Get Lora List",
|
|
function: () => {
|
|
const slp = Array.from(app.canvas.selectedItems)[0];
|
|
slp?.listLoraFiles?.();
|
|
}
|
|
}
|
|
],
|
|
getSelectionToolboxCommands: (selectedItem) => {
|
|
// Return array of command IDs to show in the toolbox
|
|
if (selectedItem.type == "HetimaSingleLinePicker") {
|
|
return ["hetima-slpsinglelinepicker-get-loras"];
|
|
}
|
|
return [];
|
|
},
|
|
async beforeRegisterNodeDef(nodeType, nodeData, app) {
|
|
if (nodeData.name === "HetimaSingleLinePicker") {
|
|
const style = document.createElement("style");
|
|
style.innerText = `
|
|
.single-line-picker-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
white-space: nowrap;
|
|
|
|
background-color: var(--bg-color);
|
|
color: var(--fg-color);
|
|
}
|
|
.single-line-picker-list-item {
|
|
cursor: default;
|
|
user-select: none;
|
|
padding: 3px;
|
|
font-size: 12px;
|
|
}
|
|
.single-line-picker-list-item-selected {
|
|
background-color: var(--fg-color);
|
|
color: var(--bg-color);
|
|
}
|
|
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
const addListItem = function (container) {
|
|
const itm = document.createElement("div");
|
|
itm.className = "single-line-picker-list-item";
|
|
container.appendChild(itm);
|
|
};
|
|
|
|
const setItemData = function (itm, label, realText) {
|
|
itm.innerText = label;
|
|
itm.dataset.realText = realText;
|
|
}
|
|
|
|
const selectItem = function (itm) {
|
|
if (!itm.classList.contains("single-line-picker-list-item-selected")) {
|
|
itm.classList.add("single-line-picker-list-item-selected");
|
|
}
|
|
};
|
|
|
|
const deselectItem = function (itm) {
|
|
if (itm.classList.contains("single-line-picker-list-item-selected")){
|
|
itm.classList.remove("single-line-picker-list-item-selected");
|
|
}
|
|
};
|
|
|
|
const selectedText = function (container) {
|
|
var result = "";
|
|
const lineCount = container.childElementCount;
|
|
for (let index = 0; index < lineCount; index++) {
|
|
const div = container.children[index];
|
|
if (div.classList.contains("single-line-picker-list-item-selected")) {
|
|
if (result != "") {
|
|
result += "\n";
|
|
}
|
|
result += div.dataset.realText;
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
const selectedIndexes = function (container) {
|
|
var result = "";
|
|
const lineCount = container.childElementCount;
|
|
for (let index = 0; index < lineCount; index++) {
|
|
const div = container.children[index];
|
|
if (div.classList.contains("single-line-picker-list-item-selected")) {
|
|
if (result != "") {
|
|
result += ",";
|
|
}
|
|
result += index.toString();
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
|
|
const onNodeCreated = nodeType.prototype.onNodeCreated;
|
|
nodeType.prototype.onNodeCreated = function () {
|
|
const ret = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
|
|
const node = this;
|
|
|
|
node.properties = node.properties || {};
|
|
node.properties.selected_indexes = node.properties.selected_indexes || "";
|
|
|
|
|
|
this.textListWidget = ComfyWidgets["STRING"](this, "source_text", ["STRING", { multiline: true }], app).widget;
|
|
this.textListWidget.inputEl.readOnly = true;
|
|
this.textListWidget.callback = async (v) => {
|
|
this.textListChanged();
|
|
}
|
|
this.textListWidget.hidden = true;
|
|
|
|
this.selectedTextWidget = ComfyWidgets["STRING"](this, "selected_text", ["STRING", { multiline: true }], app).widget;
|
|
this.selectedTextWidget.inputEl.readOnly = true;
|
|
this.selectedTextWidget.hidden = true;
|
|
|
|
// this.stemTextWidget = ComfyWidgets["STRING"](this, "stem", ["STRING", { multiline: false }], app).widget;
|
|
// this.stemTextWidget.hidden = true;
|
|
|
|
const container = document.createElement("div");
|
|
container.className = "single-line-picker-container";
|
|
// container.style.width = "100%";
|
|
// container.style.height = "100%";
|
|
// container.style.position = "relative";
|
|
// container.style.display = "flex";
|
|
// container.style.flexDirection = "column";
|
|
// container.style.overflowX = "hidden";
|
|
// container.style.overflowY = "auto";
|
|
// container.style.whiteSpace = "nowrap";
|
|
// container.style.background = "transparent";
|
|
|
|
node.container = container;
|
|
node.container.addEventListener('click', (e) => {
|
|
const lists = Array.from(e.currentTarget.children);
|
|
const clicked_index = lists.findIndex(list => list === e.target);
|
|
// -1 is deselect all
|
|
const lineCount = this.container.childElementCount;
|
|
for (let index = 0; index < lineCount; index++) {
|
|
const div = this.container.children[index];
|
|
if (index == clicked_index) {
|
|
selectItem(div);
|
|
}else{
|
|
deselectItem(div);
|
|
}
|
|
}
|
|
if (clicked_index > 0) {
|
|
}
|
|
node.selectionChanged(null);
|
|
e.stopPropagation();
|
|
});
|
|
|
|
node.listWidget = node.addDOMWidget("list", "TEXTLIST", container, {
|
|
serialize: false,
|
|
computeSize: () => {
|
|
const width = Math.max(node.size[0] || 200, 200);
|
|
const height = Math.max(node.size[1] || 200, 200);
|
|
return [width, height];
|
|
},
|
|
});
|
|
|
|
node.textListChanged();
|
|
return ret;
|
|
};
|
|
|
|
const onExecuted = nodeType.prototype.onExecuted;
|
|
nodeType.prototype.onExecuted = function (message) {
|
|
onExecuted?.apply(this, arguments);
|
|
this.setTextList(message?.text);
|
|
};
|
|
|
|
nodeType.prototype.selectionChanged = function (forceValue = null) {
|
|
if (forceValue === null) {
|
|
forceValue = selectedIndexes(this.container);
|
|
} else {
|
|
const idxs = forceValue.split(",").map(str => parseInt(str, 10));
|
|
const lineCount = this.container.childElementCount;
|
|
for (let index = 0; index < lineCount; index++) {
|
|
const div = this.container.children[index];
|
|
if (idxs.includes(index)) {
|
|
selectItem(div);
|
|
} else {
|
|
deselectItem(div);
|
|
}
|
|
}
|
|
}
|
|
this.properties.selected_indexes = forceValue;
|
|
const text = selectedText(this.container);
|
|
this.selectedTextWidget.value = text;
|
|
|
|
// const firstLine = text.split('\n')[0];
|
|
// const stem = firstLine.substring(
|
|
// Math.max(firstLine.lastIndexOf("/"), firstLine.lastIndexOf("\\")) + 1,
|
|
// firstLine.lastIndexOf("."));
|
|
// this.stemTextWidget.value = stem || firstLine;
|
|
}
|
|
|
|
nodeType.prototype.textListChanged = function () {
|
|
if (!this.container) {
|
|
return;
|
|
}
|
|
|
|
const text = this.textListWidget.value;
|
|
const texts = text.split('\n');
|
|
let lineCount = texts.length;
|
|
let dictMode = false;
|
|
|
|
if (lineCount > 1 && texts[0].toUpperCase().startsWith("#DICT")) {
|
|
texts.shift();
|
|
lineCount--;
|
|
dictMode = true;
|
|
}
|
|
|
|
|
|
const needs = lineCount - this.container.childElementCount;
|
|
if (needs > 0){
|
|
for (let index = 0; index < needs; index++) {
|
|
addListItem(this.container);
|
|
}
|
|
} else if (needs < 0) {
|
|
for (let index = 0; index > needs; index--) {
|
|
this.container.lastElementChild.remove();
|
|
}
|
|
}
|
|
|
|
for (let index = 0; index < lineCount; index++) {
|
|
const div = this.container.children[index];
|
|
let realText = texts[index];
|
|
let label = texts[index];
|
|
if (dictMode) {
|
|
const items = texts[index].split(':');
|
|
if (items.length > 1) {
|
|
label = items.shift().trim();
|
|
realText = items.join(':').trim();
|
|
}
|
|
}
|
|
|
|
setItemData(div, label, realText);
|
|
deselectItem(div);
|
|
}
|
|
|
|
this.properties.selected_indexes = "";
|
|
this.selectedTextWidget.value = "";
|
|
// this.stemTextWidget.value = "";
|
|
this.setDirtyCanvas(true);
|
|
};
|
|
|
|
nodeType.prototype.setTextList = function (texts) {
|
|
var text = '';
|
|
if (typeof texts === 'string') {
|
|
text = texts;
|
|
} else {
|
|
for (let i = 0; i < texts.length; i++) {
|
|
text += texts[i];
|
|
}
|
|
}
|
|
if (this.textListWidget) {
|
|
if (this.textListWidget.value != text) {
|
|
this.textListWidget.value = text;
|
|
}
|
|
}
|
|
};
|
|
|
|
nodeType.prototype.listLoraFiles = function () {
|
|
async function fetchCheckpoints() {
|
|
try {
|
|
const response = await api.fetchApi("/models/loras");
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
return await response.json();
|
|
} catch (error) {
|
|
console.error("Failed to retrieve the model:", error);
|
|
}
|
|
}
|
|
|
|
fetchCheckpoints().then((value) => {
|
|
this.setTextList(value?.join?.("\n"));
|
|
});
|
|
};
|
|
|
|
|
|
nodeType.prototype.onSerialize = function (info) {
|
|
info.properties = {
|
|
source_text: this.textListWidget.value || "",
|
|
selected_indexes: this.properties.selected_indexes || ""
|
|
};
|
|
//info.widgets_values = [""];
|
|
};
|
|
|
|
nodeType.prototype.onConfigure = function (info) {
|
|
this.properties = this.properties || {};
|
|
|
|
if (info.properties) {
|
|
this.textListWidget.value = info.properties.source_text || ""; //call textListChanged()
|
|
this.properties.selected_indexes = info.properties.selected_indexes || "";
|
|
}
|
|
this.selectionChanged(this.properties.selected_indexes);
|
|
};
|
|
}
|
|
},
|
|
});
|
|
|
|
|