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

Empty directories no longer show search separator to make navigation easier.

Browse Source
This commit is contained in:
Christian Bastian
2024-03-28 23:34:54 -04:00
parent 57348a3c62
commit bb9d2037f1
1 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
web/model-manager.js
View File

@@ -659,8 +659,8 @@ class DirectoryDropdown {
/** @type {() => void} */ /** @type {() => void} */
#updateDropdown = null; #updateDropdown = null;
/** @type {DirectoryItem[]} */ /** @type {ModelData} */
#directories = null; // READ ONLY REFERENCE #modelData = null; // READ ONLY
/** @type {() => void} */ /** @type {() => void} */
#updateCallback = null; #updateCallback = null;
@@ -669,15 +669,14 @@ class DirectoryDropdown {
#submitCallback = null; #submitCallback = null;
/** /**
* @param {DirectoryItem[]} directories * @param {ModelData} modelData
* @param {HTMLInputElement} input * @param {HTMLInputElement} input
* @param {() => void} updateDropdown * @param {() => void} updateDropdown
* @param {() => void} [updateCallback= () => {}] * @param {() => void} [updateCallback= () => {}]
* @param {() => Promise<void>} [submitCallback= () => {}] * @param {() => Promise<void>} [submitCallback= () => {}]
* @param {String} [searchSeparator="/"]
* @param {Boolean} [showDirectoriesOnly=false] * @param {Boolean} [showDirectoriesOnly=false]
*/ */
constructor(directories, input, updateDropdown, updateCallback = () => {}, submitCallback = () => {}, searchSeparator = "/", showDirectoriesOnly = false) { constructor(modelData, input, updateDropdown, updateCallback = () => {}, submitCallback = () => {}, showDirectoriesOnly = false) {
/** @type {HTMLDivElement} */ /** @type {HTMLDivElement} */
const dropdown = $el("div.search-dropdown", { // TODO: change to `search-directory-dropdown` const dropdown = $el("div.search-dropdown", { // TODO: change to `search-directory-dropdown`
style: { style: {
@@ -685,7 +684,7 @@ class DirectoryDropdown {
}, },
}); });
this.element = dropdown; this.element = dropdown;
this.#directories = directories; this.#modelData = modelData;
this.#input = input; this.#input = input;
this.#updateDropdown = updateDropdown; this.#updateDropdown = updateDropdown;
this.#updateCallback = updateCallback; this.#updateCallback = updateCallback;
@@ -722,7 +721,7 @@ class DirectoryDropdown {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); // prevent cursor move e.preventDefault(); // prevent cursor move
const input = e.target; const input = e.target;
DirectoryDropdown.selectionToInput(input, selection, searchSeparator); DirectoryDropdown.selectionToInput(input, selection, modelData.searchSeparator);
updateDropdown(); updateDropdown();
//updateCallback(); //updateCallback();
//submitCallback(); //submitCallback();
@@ -738,11 +737,11 @@ class DirectoryDropdown {
else if (e.key === "ArrowLeft" && dropdown.style.display !== "none") { else if (e.key === "ArrowLeft" && dropdown.style.display !== "none") {
const input = e.target; const input = e.target;
const oldFilterText = input.value; const oldFilterText = input.value;
const iSep = oldFilterText.lastIndexOf(searchSeparator, oldFilterText.length - 2); const iSep = oldFilterText.lastIndexOf(modelData.searchSeparator, oldFilterText.length - 2);
const newFilterText = oldFilterText.substring(0, iSep + 1); const newFilterText = oldFilterText.substring(0, iSep + 1);
if (oldFilterText !== newFilterText) { if (oldFilterText !== newFilterText) {
const delta = oldFilterText.substring(iSep + 1); const delta = oldFilterText.substring(iSep + 1);
let isMatch = delta[delta.length-1] === searchSeparator; let isMatch = delta[delta.length-1] === modelData.searchSeparator;
if (!isMatch) { if (!isMatch) {
const options = dropdown.children; const options = dropdown.children;
for (let i = 0; i < options.length; i++) { for (let i = 0; i < options.length; i++) {
@@ -787,7 +786,7 @@ class DirectoryDropdown {
const input = e.target const input = e.target
const selection = options[iSelection]; const selection = options[iSelection];
if (selection !== undefined && selection !== null) { if (selection !== undefined && selection !== null) {
DirectoryDropdown.selectionToInput(input, selection, searchSeparator); DirectoryDropdown.selectionToInput(input, selection, modelData.searchSeparator);
updateDropdown(); updateDropdown();
updateCallback(); updateCallback();
} }
@@ -853,11 +852,12 @@ class DirectoryDropdown {
} }
/** /**
* @param {string} searchSeparator
* @param {string} [modelType = ""] * @param {string} [modelType = ""]
*/ */
update(searchSeparator, modelType = "") { update(modelType = "") {
const directories = this.#directories; // TODO: create a wrapper around ModelData.directories to make access easier
const directories = this.#modelData.directories;
const searchSeparator = this.#modelData.searchSeparator;
const dropdown = this.element; const dropdown = this.element;
const input = this.#input; const input = this.#input;
const updateDropdown = this.#updateDropdown; const updateDropdown = this.#updateDropdown;
@@ -932,17 +932,36 @@ class DirectoryDropdown {
let options = []; let options = [];
const lastWord = filter.substring(indexLastWord); const lastWord = filter.substring(indexLastWord);
const item = directories[cwd]; const item = directories[cwd];
if (item["childIndex"] !== undefined) { const cwdIsDir = item["childIndex"] !== undefined;
if (cwdIsDir) {
const childIndex = item["childIndex"]; const childIndex = item["childIndex"];
const childCount = item["childCount"]; const childCount = item["childCount"];
const items = directories.slice(childIndex, childIndex + childCount); const children = directories.slice(childIndex, childIndex + childCount);
for (let i = 0; i < items.length; i++) { for (let i = 0; i < children.length; i++) {
const child = items[i]; const child = children[i];
const grandChildCount = child["childCount"]; const grandChildCount = child["childCount"];
const isDir = grandChildCount !== undefined && grandChildCount !== null; const isDir = grandChildCount !== undefined && grandChildCount !== null;
const itemName = child["name"]; const itemName = child["name"];
if (itemName.startsWith(lastWord) && (!showDirectoriesOnly || (showDirectoriesOnly && isDir))) { if (showDirectoriesOnly) {
options.push(itemName + (isDir ? searchSeparator : "")); if (isDir && itemName.startsWith(lastWord)) {
let existsDirectoryGrandchild = false;
const grandChildIndex = child["childIndex"];
const grandChildren = directories.slice(grandChildIndex, grandChildIndex + grandChildCount);
for (let j = 0; j < grandChildren.length; j++) {
const grandChild = grandChildren[j];
const greatGrandChildCount = grandChild["childCount"];
if (greatGrandChildCount !== undefined && greatGrandChildCount !== null) {
existsDirectoryGrandchild = true;
break;
}
}
options.push(itemName + (existsDirectoryGrandchild ? searchSeparator : ""));
}
}
else {
if (itemName.startsWith(lastWord)) {
options.push(itemName + (isDir && grandChildCount > 0 ? searchSeparator : ""));
}
} }
} }
} }
@@ -1423,18 +1442,14 @@ class ModelInfoView {
placeholder: modelData.searchSeparator, placeholder: modelData.searchSeparator,
}); });
/** @type {DirectoryDropdown} */
let searchDropdown = null; let searchDropdown = null;
searchDropdown = new DirectoryDropdown( searchDropdown = new DirectoryDropdown(
modelData.directories, modelData,
moveDestinationInput, moveDestinationInput,
() => { () => searchDropdown.update(),
searchDropdown.update(
modelData.searchSeparator,
);
},
() => {}, () => {},
() => {}, () => {},
modelData.searchSeparator,
true, true,
); );
@@ -2151,21 +2166,18 @@ class DownloadTab {
placeholder: searchSeparator + "0", placeholder: searchSeparator + "0",
value: searchSeparator + "0", value: searchSeparator + "0",
}); });
/** @type {DirectoryDropdown} */
let searchDropdown = null; let searchDropdown = null;
searchDropdown = new DirectoryDropdown( searchDropdown = new DirectoryDropdown(
modelData.directories, modelData,
el_saveDirectoryPath, el_saveDirectoryPath,
() => { () => {
const modelType = el_modelTypeSelect.value; const modelType = el_modelTypeSelect.value;
if (modelType === "") { return; } if (modelType === "") { return; }
searchDropdown.update( searchDropdown.update(modelType);
searchSeparator,
modelType,
);
}, },
() => {}, () => {},
() => {}, () => {},
searchSeparator,
true, true,
); );
@@ -2490,10 +2502,7 @@ class ModelTab {
}; };
const updateDirectoryDropdown = () => { const updateDirectoryDropdown = () => {
this.directoryDropdown.update( this.directoryDropdown.update(this.elements.modelTypeSelect.value);
this.#modelData.searchSeparator,
this.elements.modelTypeSelect.value,
);
updatePreviousModelFilter(); updatePreviousModelFilter();
} }
@@ -2530,12 +2539,11 @@ class ModelTab {
this.updateModelGrid = updateModelGrid; this.updateModelGrid = updateModelGrid;
const searchDropdown = new DirectoryDropdown( const searchDropdown = new DirectoryDropdown(
modelData.directories, modelData,
searchInput, searchInput,
updateDirectoryDropdown, updateDirectoryDropdown,
updatePreviousModelFilter, updatePreviousModelFilter,
updateModelGrid, updateModelGrid,
modelData.searchSeparator,
false, false,
); );
this.directoryDropdown = searchDropdown; this.directoryDropdown = searchDropdown;