TBNilles/ComfyUI-Model-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor changes

Browse Source
This commit is contained in:
Christian Bastian
2024-01-27 21:07:27 -05:00
parent bc01a19f4c
commit 9e2bfcab03
1 changed files with 50 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
web/model-manager.js
View File

@@ -88,20 +88,19 @@ class DirectoryDropdown {
input.addEventListener( input.addEventListener(
"keydown", "keydown",
(e) => { (e) => {
const children = dropdown.children; const options = dropdown.children;
let iChild; let iSelection;
for (iChild = 0; iChild < children.length; iChild++) { for (iSelection = 0; iSelection < options.length; iSelection++) {
const child = children[iChild]; const selection = options[iSelection];
if (child.classList.contains(DROPDOWN_DIRECTORY_SELECTION_CLASS)) { if (selection.classList.contains(DROPDOWN_DIRECTORY_SELECTION_CLASS)) {
break; break;
} }
} }
if (e.key === "Escape") { if (e.key === "Escape") {
e.stopPropagation(); e.stopPropagation();
if (iChild < children.length) { if (iSelection < options.length) {
// remove select const selection = options[iSelection];
const child = children[iChild]; selection.classList.remove(DROPDOWN_DIRECTORY_SELECTION_CLASS);
child.classList.remove(DROPDOWN_DIRECTORY_SELECTION_CLASS);
} }
else { else {
e.target.blur(); e.target.blur();
@@ -109,43 +108,43 @@ class DirectoryDropdown {
} }
else if (e.key === "Enter") { else if (e.key === "Enter") {
e.stopPropagation(); e.stopPropagation();
submitSearch(e.target, children[iChild]); submitSearch(e.target, options[iSelection]);
} }
else if (e.key === "ArrowDown" || e.key === "ArrowUp") { else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
e.stopPropagation(); e.stopPropagation();
let iNext = children.length; let iNext = options.length;
if (iChild < children.length) { if (iSelection < options.length) {
const child = children[iChild]; const selection = options[iSelection];
child.classList.remove(DROPDOWN_DIRECTORY_SELECTION_CLASS); selection.classList.remove(DROPDOWN_DIRECTORY_SELECTION_CLASS);
const delta = e.key === "ArrowDown" ? 1 : -1; const delta = e.key === "ArrowDown" ? 1 : -1;
iNext = iChild + delta; iNext = iSelection + delta;
if (0 <= iNext && iNext < children.length) { if (0 <= iNext && iNext < options.length) {
const nextChild = children[iNext]; const selectionNext = options[iNext];
nextChild.classList.add(DROPDOWN_DIRECTORY_SELECTION_CLASS); selectionNext.classList.add(DROPDOWN_DIRECTORY_SELECTION_CLASS);
} }
} }
else if (iChild === children.length) { else if (iSelection === options.length) {
iNext = e.key === "ArrowDown" ? 0 : children.length-1; iNext = e.key === "ArrowDown" ? 0 : options.length-1;
const nextChild = children[iNext] const selection = options[iNext]
nextChild.classList.add(DROPDOWN_DIRECTORY_SELECTION_CLASS); selection.classList.add(DROPDOWN_DIRECTORY_SELECTION_CLASS);
} }
if (0 <= iNext && iNext < children.length) { if (0 <= iNext && iNext < options.length) {
let scrollTop = dropdown.scrollTop; let dropdownTop = dropdown.scrollTop;
const dropdownHeight = dropdown.offsetHeight; const dropdownHeight = dropdown.offsetHeight;
const child = children[iNext]; const selection = options[iNext];
const childHeight = child.offsetHeight; const selectionHeight = selection.offsetHeight;
const childTop = child.offsetTop; const selectionTop = selection.offsetTop;
scrollTop = Math.max(scrollTop, childTop - dropdownHeight + childHeight); dropdownTop = Math.max(dropdownTop, selectionTop - dropdownHeight + selectionHeight);
scrollTop = Math.min(scrollTop, childTop); dropdownTop = Math.min(dropdownTop, selectionTop);
dropdown.scrollTop = scrollTop; dropdown.scrollTop = dropdownTop;
} }
else { else {
dropdown.scrollTop = 0; dropdown.scrollTop = 0;
const children = dropdown.children; const options = dropdown.children;
for (iChild = 0; iChild < children.length; iChild++) { for (iSelection = 0; iSelection < options.length; iSelection++) {
const child = children[iChild]; const selection = options[iSelection];
if (child.classList.contains(DROPDOWN_DIRECTORY_SELECTION_CLASS)) { if (selection.classList.contains(DROPDOWN_DIRECTORY_SELECTION_CLASS)) {
child.classList.remove(DROPDOWN_DIRECTORY_SELECTION_CLASS); selection.classList.remove(DROPDOWN_DIRECTORY_SELECTION_CLASS);
} }
} }
} }
@@ -293,6 +292,20 @@ class DirectoryDropdown {
dropdown.append.apply(dropdown, innerHtml); dropdown.append.apply(dropdown, innerHtml);
dropdown.style.display = "block"; dropdown.style.display = "block";
} }
/**
* @param {HTMLParagraphElement} selection
* @param {HTMLInputElement} input
* @param {string} sep
*/
static appendSelectionToInput(selection, input, sep) {
selection.classList.remove(DROPDOWN_DIRECTORY_SELECTION_CLASS);
const selectedText = selection.innerText;
const oldFilterText = input.value;
const iSep = oldFilterText.lastIndexOf(sep);
const previousPath = oldFilterText.substring(0, iSep + 1);
input.value = previousPath + selectedText;
}
} }
/** /**
@@ -793,7 +806,6 @@ class ModelGrid {
draggable: false, draggable: false,
}), }),
$el("div.model-preview-overlay", { $el("div.model-preview-overlay", {
src: imgUrl,
ondragend: (e) => dragAdd(e), ondragend: (e) => dragAdd(e),
draggable: true, draggable: true,
}), }),
@@ -1217,17 +1229,11 @@ class ModelManager extends ComfyDialog {
/** /**
* @param {HTMLInputElement} input * @param {HTMLInputElement} input
* @param {HTMLParagraphElement} selection * @param {HTMLParagraphElement | undefined | null} selection
*/ */
#modelTab_submitSearch = (input, selection) => { #modelTab_submitSearch = (input, selection) => {
if (selection !== undefined && selection !== null) { if (selection !== undefined && selection !== null) {
selection.classList.remove(DROPDOWN_DIRECTORY_SELECTION_CLASS); DirectoryDropdown.appendSelectionToInput(selection, input, this.#sep);
const selectedText = selection.innerText;
const oldFilterText = input.value;
const iSep = oldFilterText.lastIndexOf(this.#sep);
const previousPath = oldFilterText.substring(0, iSep + 1);
const newFilterText = previousPath + selectedText;
input.value = newFilterText;
this.#modelTab_updateDirectoryDropdown(); this.#modelTab_updateDirectoryDropdown();
} }
input.blur(); input.blur();