From 83e85ad0e96ca65b7ae667feb24c20f424ef9080 Mon Sep 17 00:00:00 2001 From: Sj-Si Date: Wed, 13 Mar 2024 17:11:44 -0400 Subject: [PATCH 001/143] add clusterize lists. need to debug. --- .../Lora/ui_extra_networks_lora.py | 4 +- html/extra-networks-card.html | 2 +- html/extra-networks-copy-path-button.html | 2 +- html/extra-networks-dirs-view-button.html | 5 + html/extra-networks-pane-tree.html | 11 +- html/extra-networks-pane.html | 39 +- html/extra-networks-tree-button.html | 23 - html/extra-networks-tree-row.html | 20 + javascript/extraNetworks.js | 563 +++++++++++------- javascript/extraNetworksClusterizeList.js | 479 +++++++++++++++ javascript/resizeHandle.js | 7 + modules/ui_extra_networks.py | 403 ++++++++----- modules/ui_gradio_extensions.py | 6 + style.css | 295 +++++---- 14 files changed, 1263 insertions(+), 596 deletions(-) create mode 100644 html/extra-networks-dirs-view-button.html delete mode 100644 html/extra-networks-tree-button.html create mode 100644 html/extra-networks-tree-row.html create mode 100644 javascript/extraNetworksClusterizeList.js diff --git a/extensions-builtin/Lora/ui_extra_networks_lora.py b/extensions-builtin/Lora/ui_extra_networks_lora.py index 66d15dd05..3cb84170f 100644 --- a/extensions-builtin/Lora/ui_extra_networks_lora.py +++ b/extensions-builtin/Lora/ui_extra_networks_lora.py @@ -43,8 +43,8 @@ class ExtraNetworksPageLora(ui_extra_networks.ExtraNetworksPage): self.read_user_metadata(item) activation_text = item["user_metadata"].get("activation text") preferred_weight = item["user_metadata"].get("preferred weight", 0.0) - item["prompt"] = quote_js(f"") - + item["prompt"] = quote_js(f"") + if activation_text: item["prompt"] += " + " + quote_js(" " + activation_text) diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html index f1d959a67..f50a69501 100644 --- a/html/extra-networks-card.html +++ b/html/extra-networks-card.html @@ -1,4 +1,4 @@ -
+
{background_image}
{copy_path_button}{metadata_button}{edit_button}
diff --git a/html/extra-networks-copy-path-button.html b/html/extra-networks-copy-path-button.html index 8083bb033..c0c44f1e3 100644 --- a/html/extra-networks-copy-path-button.html +++ b/html/extra-networks-copy-path-button.html @@ -1,5 +1,5 @@
\ No newline at end of file diff --git a/html/extra-networks-dirs-view-button.html b/html/extra-networks-dirs-view-button.html new file mode 100644 index 000000000..bce066de4 --- /dev/null +++ b/html/extra-networks-dirs-view-button.html @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/html/extra-networks-pane-tree.html b/html/extra-networks-pane-tree.html index 88561fcdc..1722a90b4 100644 --- a/html/extra-networks-pane-tree.html +++ b/html/extra-networks-pane-tree.html @@ -1,8 +1,11 @@
-
- {tree_html} +
+
-
- {items_html} +
+
\ No newline at end of file diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html index 9a67baea9..d486c117d 100644 --- a/html/extra-networks-pane.html +++ b/html/extra-networks-pane.html @@ -1,48 +1,57 @@
- diff --git a/html/extra-networks-tree-button.html b/html/extra-networks-tree-button.html deleted file mode 100644 index 9dc2e2a40..000000000 --- a/html/extra-networks-tree-button.html +++ /dev/null @@ -1,23 +0,0 @@ - -
- - {action_list_item_action_leading} - - - {action_list_item_visual_leading} - - - {action_list_item_label} - - - {action_list_item_visual_trailing} - - - {action_list_item_action_trailing} - -
\ No newline at end of file diff --git a/html/extra-networks-tree-row.html b/html/extra-networks-tree-row.html new file mode 100644 index 000000000..dede487ec --- /dev/null +++ b/html/extra-networks-tree-row.html @@ -0,0 +1,20 @@ +
+ +
+ + {action_list_item_action_leading} + + + {action_list_item_visual_leading} + + + {action_list_item_label} + + + {action_list_item_visual_trailing} + + + {action_list_item_action_trailing} + +
+
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index be5f0f304..ba75fba64 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -1,3 +1,72 @@ +const re_extranet = /<([^:^>]+:[^:]+):[\d.]+>(.*)/; +const re_extranet_g = /<([^:^>]+:[^:]+):[\d.]+>/g; +const re_extranet_neg = /\(([^:^>]+:[\d.]+)\)/; +const re_extranet_g_neg = /\(([^:^>]+:[\d.]+)\)/g; +const extraNetworksApplyFilter = {}; +const extraNetworksApplySort = {}; +const activePromptTextarea = {}; +const clusterizers = {}; +const extra_networks_json_proxy = {}; +const extra_networks_proxy_listener = setupProxyListener( + extra_networks_json_proxy, + function() {}, + proxyJsonUpdated, +); +var globalPopup = null; +var globalPopupInner = null; +const storedPopupIds = {}; +const extraPageUserMetadataEditors = {}; +const uiAfterScriptsCallbacks = []; +var uiAfterScriptsTimeout = null; +var executedAfterScripts = false; + +function waitForElement(selector) { + /** Promise that waits for an element to exist in DOM. */ + return new Promise(resolve => { + if (document.querySelector(selector)) { + return resolve(document.querySelector(selector)); + } + + const observer = new MutationObserver(mutations => { + if (document.querySelector(selector)) { + observer.disconnect(); + resolve(document.querySelector(selector)); + } + }); + + // If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336 + observer.observe(document.documentElement, { + childList: true, + subtree: true + }); + }); +} + +function setupProxyListener(target, pre_handler, post_handler) { + /** Sets up a listener for variable changes. */ + var proxy = new Proxy(target, { + set: function (t, k, v) { + pre_handler.call(t, k, v); + t[k] = v; + post_handler.call(t, k, v); + return true; + } + }); + return proxy +} + +function proxyJsonUpdated(k, v) { + /** Callback triggered when JSON data is updated by the proxy listener. */ + // use `this` for current object + // We don't do error handling here because we want to fail gracefully if data is + // not yet present. + if (!(v.dataset.tabnameFull in clusterizers)) { + // Clusterizers not yet initialized. + return; + } + clusterizers[v.dataset.tabnameFull][v.dataset.proxyName].parseJson(v.dataset.json); +} + function toggleCss(key, css, enable) { var style = document.getElementById(key); if (enable && !style) { @@ -15,9 +84,35 @@ function toggleCss(key, css, enable) { } } +function extraNetworksRefreshTab(tabname_full) { + if (!(tabname_full in clusterizers)) { + return; + } + + for (_tabname_full of Object.keys(clusterizers)) { + + if (_tabname_full === tabname_full) { + // Set the selected tab as active since it is now visible on page. + clusterizers[_tabname_full].tree_list.enable(); + clusterizers[_tabname_full].cards_list.enable(); + } else { + // Deactivate all other tabs since they are no longer visible. + clusterizers[_tabname_full].tree_list.disable(); + clusterizers[_tabname_full].cards_list.disable(); + } + } + + clusterizers[tabname_full].tree_list.rebuild(); + clusterizers[tabname_full].cards_list.rebuild(); + + for (var elem of gradioApp().querySelectorAll('.extra-networks-script-data')) { + extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem; + } +} + function setupExtraNetworksForTab(tabname) { function registerPrompt(tabname, id) { - var textarea = gradioApp().querySelector("#" + id + " > label > textarea"); + var textarea = gradioApp().querySelector(`#${id} > label > textarea`); if (!activePromptTextarea[tabname]) { activePromptTextarea[tabname] = textarea; @@ -28,112 +123,124 @@ function setupExtraNetworksForTab(tabname) { }); } - var tabnav = gradioApp().querySelector('#' + tabname + '_extra_tabs > div.tab-nav'); - var controlsDiv = document.createElement('DIV'); - controlsDiv.classList.add('extra-networks-controls-div'); + var tabnav = gradioApp().querySelector(`#${tabname}_extra_tabs > div.tab-nav`); + var controlsDiv = document.createElement("div"); + controlsDiv.classList.add("extra-networks-controls-div"); tabnav.appendChild(controlsDiv); tabnav.insertBefore(controlsDiv, null); - var this_tab = gradioApp().querySelector('#' + tabname + '_extra_tabs'); - this_tab.querySelectorAll(":scope > [id^='" + tabname + "_']").forEach(function(elem) { - // tabname_full = {tabname}_{extra_networks_tabname} - var tabname_full = elem.id; - var search = gradioApp().querySelector("#" + tabname_full + "_extra_search"); - var sort_dir = gradioApp().querySelector("#" + tabname_full + "_extra_sort_dir"); - var refresh = gradioApp().querySelector("#" + tabname_full + "_extra_refresh"); - var currentSort = ''; + var this_tab = gradioApp().querySelector(`#${tabname}_extra_tabs`); + this_tab.querySelectorAll(`:scope > [id^="${tabname}_"]`).forEach(function(elem) { + let tabname_full = elem.id; + let txt_search; + let btn_sort_mode; + let btn_sort_dir; + let btn_refresh; - // If any of the buttons above don't exist, we want to skip this iteration of the loop. - if (!search || !sort_dir || !refresh) { - return; // `return` is equivalent of `continue` but for forEach loops. - } - - var applyFilter = function(force) { - var searchTerm = search.value.toLowerCase(); - gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) { - var searchOnly = elem.querySelector('.search_only'); - var text = Array.prototype.map.call(elem.querySelectorAll('.search_terms, .description'), function(t) { - return t.textContent.toLowerCase(); - }).join(" "); - - var visible = text.indexOf(searchTerm) != -1; - if (searchOnly && searchTerm.length < 4) { - visible = false; - } - if (visible) { - elem.classList.remove("hidden"); - } else { - elem.classList.add("hidden"); - } - }); - - applySort(force); - }; - - var applySort = function(force) { - var cards = gradioApp().querySelectorAll('#' + tabname_full + ' div.card'); - var parent = gradioApp().querySelector('#' + tabname_full + "_cards"); - var reverse = sort_dir.dataset.sortdir == "Descending"; - var activeSearchElem = gradioApp().querySelector('#' + tabname_full + "_controls .extra-network-control--sort.extra-network-control--enabled"); - var sortKey = activeSearchElem ? activeSearchElem.dataset.sortkey : "default"; - var sortKeyDataField = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1); - var sortKeyStore = sortKey + "-" + sort_dir.dataset.sortdir + "-" + cards.length; - - if (sortKeyStore == currentSort && !force) { + var applyFilter = function() { + if (!(tabname_full in clusterizers)) { + console.error(`applyFilter: ${tabname_full} not in clusterizers:`); return; } - currentSort = sortKeyStore; - - var sortedCards = Array.from(cards); - sortedCards.sort(function(cardA, cardB) { - var a = cardA.dataset[sortKeyDataField]; - var b = cardB.dataset[sortKeyDataField]; - if (!isNaN(a) && !isNaN(b)) { - return parseInt(a) - parseInt(b); - } - - return (a < b ? -1 : (a > b ? 1 : 0)); - }); - - if (reverse) { - sortedCards.reverse(); - } - - parent.innerHTML = ''; - - var frag = document.createDocumentFragment(); - sortedCards.forEach(function(card) { - frag.appendChild(card); - }); - parent.appendChild(frag); + // Only touch cards_list. tree_list remains static. + clusterizers[tabname_full].cards_list.setSortMode(btn_sort_mode); + clusterizers[tabname_full].cards_list.setSortDir(btn_sort_dir); + clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); }; - - search.addEventListener("input", function() { - applyFilter(); - }); - applySort(); - applyFilter(); - extraNetworksApplySort[tabname_full] = applySort; extraNetworksApplyFilter[tabname_full] = applyFilter; - var controls = gradioApp().querySelector("#" + tabname_full + "_controls"); - controlsDiv.insertBefore(controls, null); + var applySort = function() { + if (!(tabname_full in clusterizers)) { + console.error(`applySort: ${tabname_full} not in clusterizers:`); + return; + } + // Only touch cards_list. tree_list remains static. + clusterizers[tabname_full].cards_list.setSortMode(btn_sort_mode); + clusterizers[tabname_full].cards_list.setSortDir(btn_sort_dir); + clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); // filter also sorts + }; + extraNetworksApplySort[tabname_full] = applySort; + /** #TODO + * Figure out if we can use the following in the clusterize setup: + * var frag = document.createDocumentFragment(); + * sortedCards.forEach(function(card) { + * frag.appendChild(card); + * }); + * parent.appendChild(frag); + */ - if (elem.style.display != "none") { - extraNetworksShowControlsForPage(tabname, tabname_full); - } + // Wait for all required elements before setting up the tab. + waitForElement(`#${tabname_full}_extra_search`) + .then((el) => { + txt_search = el; + }) + .then(() => { + waitForElement(`#${tabname_full}_extra_sort_mode`) + .then((el) => { btn_sort_mode = el; }); + }) + .then(() => { + waitForElement(`#${tabname_full}_extra_sort_dir`) + .then((el) => { btn_sort_dir = el; }); + }) + .then(() => { + waitForElement(`#${tabname_full}_extra_refresh`) + .then((el) => { btn_refresh = el; }); + }) + .then(() => { + waitForElement(`#${tabname_full}_tree_list_scroll_area > #${tabname_full}_tree_list_content_area`) + .then(() => { return; }); + }) + .then(() => { + waitForElement(`#${tabname_full}_cards_list_scroll_area > #${tabname_full}_cards_list_content_area`) + .then(() => { return; }); + }) + .then(() => { + console.log("LOADING TAB:", tabname_full, clusterizers[tabname_full]); + // Now that we have our elements in DOM, we create the clusterize lists. + clusterizers[tabname_full] = { + tree_list: new ExtraNetworksClusterizeTreeList({ + scroll_id: `${tabname_full}_tree_list_scroll_area`, + content_id: `${tabname_full}_tree_list_content_area`, + }), + cards_list: new ExtraNetworksClusterizeCardsList({ + scroll_id: `${tabname_full}_cards_list_scroll_area`, + content_id: `${tabname_full}_cards_list_content_area`, + }), + }; + + applyFilter(); + + // Debounce search text input. This way we only search after user is done typing. + let typing_timer; + let done_typing_interval_ms = 250; + txt_search.addEventListener("keyup", () => { + clearTimeout(typing_timer); + if (txt_search.value) { + typing_timer = setTimeout(applyFilter, done_typing_interval_ms); + } + }); + // Triggered on "enter" key or when "x" is clicked to clear search. + txt_search.addEventListener("extra-network-control--search-clear", applyFilter); + + // Insert the controls into the page. + var controls = gradioApp().querySelector(`#${tabname_full}_controls`); + controlsDiv.insertBefore(controls, null); + if (elem.style.display != "none") { + extraNetworksShowControlsForPage(tabname, tabname_full); + } + }); }); - registerPrompt(tabname, tabname + "_prompt"); - registerPrompt(tabname, tabname + "_neg_prompt"); + registerPrompt(tabname, `${tabname}_prompt`); + registerPrompt(tabname, `${tabname}_neg_prompt`); } function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt) { if (!gradioApp().querySelector('.toprow-compact-tools')) return; // only applicable for compact prompt layout - var promptContainer = gradioApp().getElementById(tabname + '_prompt_container'); - var prompt = gradioApp().getElementById(tabname + '_prompt_row'); - var negPrompt = gradioApp().getElementById(tabname + '_neg_prompt_row'); + var promptContainer = gradioApp().getElementById(`${tabname}_prompt_container`); + var prompt = gradioApp().getElementById(`${tabname}_prompt_row`); + var negPrompt = gradioApp().getElementById(`${tabname}_neg_prompt_row`); var elem = id ? gradioApp().getElementById(id) : null; if (showNegativePrompt && elem) { @@ -155,8 +262,8 @@ function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePromp function extraNetworksShowControlsForPage(tabname, tabname_full) { - gradioApp().querySelectorAll('#' + tabname + '_extra_tabs .extra-networks-controls-div > div').forEach(function(elem) { - var targetId = tabname_full + "_controls"; + gradioApp().querySelectorAll(`#${tabname}_extra_tabs .extra-networks-controls-div > div`).forEach(function(elem) { + var targetId = `${tabname_full}_controls`; elem.style.display = elem.id == targetId ? "" : "none"; }); } @@ -172,40 +279,70 @@ function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt, t extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePrompt); extraNetworksShowControlsForPage(tabname, tabname_full); + + for (_tabname_full of Object.keys(clusterizers)) { + if (_tabname_full === tabname_full) { + // Set the selected tab as active since it is now visible on page. + clusterizers[_tabname_full].tree_list.enable(); + clusterizers[_tabname_full].cards_list.enable(); + } else { + // Deactivate all other tabs since they are no longer visible. + clusterizers[_tabname_full].tree_list.disable(); + clusterizers[_tabname_full].cards_list.disable(); + } + } + + if (!document.body.contains(clusterizers[tabname_full].tree_list.scroll_elem)) { + clusterizers[tabname_full].tree_list.rebuild(); + } + if (!document.body.contains(clusterizers[tabname_full].cards_list.scroll_elem)) { + clusterizers[tabname_full].cards_list.rebuild(); + } } function applyExtraNetworkFilter(tabname_full) { - var doFilter = function() { - var applyFunction = extraNetworksApplyFilter[tabname_full]; - - if (applyFunction) { - applyFunction(true); - } - }; - setTimeout(doFilter, 1); + setTimeout(extraNetworksApplyFilter[tabname_full], 1); } function applyExtraNetworkSort(tabname_full) { - var doSort = function() { - extraNetworksApplySort[tabname_full](true); - }; - setTimeout(doSort, 1); + setTimeout(extraNetworksApplySort[tabname_full], 1); } -var extraNetworksApplyFilter = {}; -var extraNetworksApplySort = {}; -var activePromptTextarea = {}; +function setupExtraNetworksData() { + // Manually force read the json data. + for (var elem of gradioApp().querySelectorAll('.extra-networks-script-data')) { + extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem; + } +} function setupExtraNetworks() { setupExtraNetworksForTab('txt2img'); setupExtraNetworksForTab('img2img'); + + // Handle window resizes. Delay of 500ms after resize before firing an event + // as a way of "debouncing" resizes. + var resize_timer; + window.addEventListener("resize", () => { + clearTimeout(resize_timer); + resize_timer = setTimeout(function() { + // Update rows for each list. + for (_tabname_full of Object.keys(clusterizers)) { + clusterizers[_tabname_full].tree_list.updateRows(); + clusterizers[_tabname_full].cards_list.updateRows(); + } + }, 500); // ms + }); + + // Handle resizeHandle resizes. Only fires on mouseup after resizing. + window.addEventListener("resizeHandleResized", (e) => { + for (_tabname_full of Object.keys(clusterizers)) { + // Update rows for each list. + clusterizers[_tabname_full].tree_list.updateRows(); + clusterizers[_tabname_full].cards_list.updateRows(); + } + }); } -var re_extranet = /<([^:^>]+:[^:]+):[\d.]+>(.*)/; -var re_extranet_g = /<([^:^>]+:[^:]+):[\d.]+>/g; - -var re_extranet_neg = /\(([^:^>]+:[\d.]+)\)/; -var re_extranet_g_neg = /\(([^:^>]+:[\d.]+)\)/g; function tryToRemoveExtraNetworkFromPrompt(textarea, text, isNeg) { var m = text.match(isNeg ? re_extranet_neg : re_extranet); var replaced = false; @@ -255,17 +392,17 @@ function updatePromptArea(text, textArea, isNeg) { function cardClicked(tabname, textToAdd, textToAddNegative, allowNegativePrompt) { if (textToAddNegative.length > 0) { - updatePromptArea(textToAdd, gradioApp().querySelector("#" + tabname + "_prompt > label > textarea")); - updatePromptArea(textToAddNegative, gradioApp().querySelector("#" + tabname + "_neg_prompt > label > textarea"), true); + updatePromptArea(textToAdd, gradioApp().querySelector(`#${tabname}_prompt > label > textarea`)); + updatePromptArea(textToAddNegative, gradioApp().querySelector(`#${tabname}_neg_prompt > label > textarea`), true); } else { - var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea"); + var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector(`#${tabname}_prompt > label > textarea`); updatePromptArea(textToAdd, textarea); } } function saveCardPreview(event, tabname, filename) { - var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea'); - var button = gradioApp().getElementById(tabname + '_save_preview'); + var textarea = gradioApp().querySelector(`#${tabname}_preview_filename > label > textarea`); + var button = gradioApp().getElementById(`${tabname}_save_preview`); textarea.value = filename; updateInput(textarea); @@ -276,8 +413,8 @@ function saveCardPreview(event, tabname, filename) { event.preventDefault(); } -function extraNetworksSearchButton(tabname, extra_networks_tabname, event) { - var searchTextarea = gradioApp().querySelector("#" + tabname + "_" + extra_networks_tabname + "_extra_search"); +function extraNetworksSearchButton(event, tabname_full) { + var searchTextarea = gradioApp().querySelector("#" + tabname_full + "_extra_search"); var button = event.target; var text = button.classList.contains("search-all") ? "" : button.textContent.trim(); @@ -285,20 +422,20 @@ function extraNetworksSearchButton(tabname, extra_networks_tabname, event) { updateInput(searchTextarea); } -function extraNetworksTreeProcessFileClick(event, btn, tabname, extra_networks_tabname) { +function extraNetworksTreeProcessFileClick(event, btn, tabname_full) { /** * Processes `onclick` events when user clicks on files in tree. * - * @param event The generated event. - * @param btn The clicked `tree-list-item` button. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param btn The clicked `tree-list-item` button. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ // NOTE: Currently unused. return; } -function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_networks_tabname) { +function extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full) { /** * Processes `onclick` events when user clicks on directories in tree. * @@ -308,94 +445,100 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_netwo * selected opened directory: Directory is collapsed and deselected. * chevron is clicked: Directory is expanded or collapsed. Selected state unchanged. * - * @param event The generated event. - * @param btn The clicked `tree-list-item` button. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param btn The clicked `tree-list-item` button. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ - var ul = btn.nextElementSibling; // This is the actual target that the user clicked on within the target button. // We use this to detect if the chevron was clicked. var true_targ = event.target; + const div_id = btn.dataset.divId; - function _expand_or_collapse(_ul, _btn) { - // Expands
    if it is collapsed, collapses otherwise. Updates button attributes. - if (_ul.hasAttribute("hidden")) { - _ul.removeAttribute("hidden"); - _btn.dataset.expanded = ""; - } else { - _ul.setAttribute("hidden", ""); + function _expandOrCollapse(_btn) { + // Expands/Collapses all children of the button. + if ("expanded" in _btn.dataset) { delete _btn.dataset.expanded; + clusterizers[tabname_full].tree_list.removeChildRows(div_id); + } else { + _btn.dataset.expanded = ""; + clusterizers[tabname_full].tree_list.addChildRows(div_id); } + // update html after changing attr. + clusterizers[tabname_full].tree_list.updateDivContent(div_id, _btn.outerHTML); + clusterizers[tabname_full].tree_list.updateRows(); } - function _remove_selected_from_all() { + function _removeSelectedFromAll() { // Removes the `selected` attribute from all buttons. - var sels = document.querySelectorAll("div.tree-list-content"); + var sels = document.querySelectorAll(".tree-list-item"); [...sels].forEach(el => { delete el.dataset.selected; }); } - function _select_button(_btn) { + function _selectButton(_btn) { // Removes `data-selected` attribute from all buttons then adds to passed button. - _remove_selected_from_all(); + _removeSelectedFromAll(); _btn.dataset.selected = ""; } - function _update_search(_tabname, _extra_networks_tabname, _search_text) { + function _updateSearch(_search_text) { // Update search input with select button's path. - var search_input_elem = gradioApp().querySelector("#" + tabname + "_" + extra_networks_tabname + "_extra_search"); + var search_input_elem = gradioApp().querySelector("#" + tabname_full + "_extra_search"); search_input_elem.value = _search_text; updateInput(search_input_elem); + applyExtraNetworksFilter(tabname_full); } // If user clicks on the chevron, then we do not select the folder. if (true_targ.matches(".tree-list-item-action--leading, .tree-list-item-action-chevron")) { - _expand_or_collapse(ul, btn); + _expandOrCollapse(btn); } else { // User clicked anywhere else on the button. - if ("selected" in btn.dataset && !(ul.hasAttribute("hidden"))) { - // If folder is select and open, collapse and deselect button. - _expand_or_collapse(ul, btn); + if ("selected" in btn.dataset) { + // If folder is selected, deselect button. delete btn.dataset.selected; - _update_search(tabname, extra_networks_tabname, ""); - } else if (!(!("selected" in btn.dataset) && !(ul.hasAttribute("hidden")))) { - // If folder is open and not selected, then we don't collapse; just select. - // NOTE: Double inversion sucks but it is the clearest way to show the branching here. - _expand_or_collapse(ul, btn); - _select_button(btn, tabname, extra_networks_tabname); - _update_search(tabname, extra_networks_tabname, btn.dataset.path); + _expandOrCollapse(ul, btn); + _updateSearch(""); } else { - // All other cases, just select the button. - _select_button(btn, tabname, extra_networks_tabname); - _update_search(tabname, extra_networks_tabname, btn.dataset.path); + // If folder is not selected, select it. + _selectButton(btn); + _updateSearch(btn.dataset.path); } } } -function extraNetworksTreeOnClick(event, tabname, extra_networks_tabname) { +function extraNetworksTreeOnClick(event, tabname_full) { /** * Handles `onclick` events for buttons within an `extra-network-tree .tree-list--tree`. * * Determines whether the clicked button in the tree is for a file entry or a directory * then calls the appropriate function. * - * @param event The generated event. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ - var btn = event.currentTarget; - var par = btn.parentElement; - if (par.dataset.treeEntryType === "file") { - extraNetworksTreeProcessFileClick(event, btn, tabname, extra_networks_tabname); - } else { - extraNetworksTreeProcessDirectoryClick(event, btn, tabname, extra_networks_tabname); - } + let btn = event.target.closest(".tree-list-item"); + if (btn.dataset.treeEntryType === "file") { + extraNetworksTreeProcessFileClick(event, btn, tabname_full); + } else { + extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full); + } + event.stopPropagation(); } -function extraNetworksControlSortOnClick(event, tabname, extra_networks_tabname) { +function extraNetworksControlSearchClearOnClick(event, tabname_full) { + /** Clears the search text. */ + let clear_btn = event.target.closest(".extra-network-control--search-clear"); + let txt_search = clear_btn.previousElementSibling; + txt_search.value = ""; + txt_search.dispatchEvent(new CustomEvent("extra-network-control--search-clear", {})); +} + +function extraNetworksControlSortModeOnClick(event, tabname_full) { /** Handles `onclick` events for Sort Mode buttons. */ var self = event.currentTarget; @@ -407,49 +550,49 @@ function extraNetworksControlSortOnClick(event, tabname, extra_networks_tabname) self.classList.add('extra-network-control--enabled'); - applyExtraNetworkSort(tabname + "_" + extra_networks_tabname); + applyExtraNetworkSort(tabname_full); } -function extraNetworksControlSortDirOnClick(event, tabname, extra_networks_tabname) { +function extraNetworksControlSortDirOnClick(event, tabname_full) { /** * Handles `onclick` events for the Sort Direction button. * * Modifies the data attributes of the Sort Direction button to cycle between * ascending and descending sort directions. * - * @param event The generated event. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ - if (event.currentTarget.dataset.sortdir == "Ascending") { - event.currentTarget.dataset.sortdir = "Descending"; + if (event.currentTarget.dataset.sortDir.toLowerCase() == "ascending") { + event.currentTarget.dataset.sortDir = "descending"; event.currentTarget.setAttribute("title", "Sort descending"); } else { - event.currentTarget.dataset.sortdir = "Ascending"; + event.currentTarget.dataset.sortDir = "ascending"; event.currentTarget.setAttribute("title", "Sort ascending"); } - applyExtraNetworkSort(tabname + "_" + extra_networks_tabname); + applyExtraNetworkSort(tabname_full); } -function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabname) { +function extraNetworksControlTreeViewOnClick(event, tabname_full) { /** * Handles `onclick` events for the Tree View button. * * Toggles the tree view in the extra networks pane. * - * @param event The generated event. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ var button = event.currentTarget; button.classList.toggle("extra-network-control--enabled"); var show = !button.classList.contains("extra-network-control--enabled"); - var pane = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_pane"); + var pane = gradioApp().getElementById(`${tabname_full}_pane`); pane.classList.toggle("extra-network-dirs-hidden", show); } -function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabname) { +function extraNetworksControlRefreshOnClick(event, tabname_full) { /** * Handles `onclick` events for the Refresh Page button. * @@ -458,17 +601,14 @@ function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabna * event handler that refreshes the page. So what this function here does * is it manually raises a `click` event on that button. * - * @param event The generated event. - * @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc. - * @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc. + * @param event The generated event. + * @param tabname_full The full active tabname. + * i.e. txt2img_lora, img2img_checkpoints, etc. */ - var btn_refresh_internal = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_extra_refresh_internal"); + var btn_refresh_internal = gradioApp().getElementById(`${tabname_full}_extra_refresh_internal`); btn_refresh_internal.dispatchEvent(new Event("click")); } -var globalPopup = null; -var globalPopupInner = null; - function closePopup() { if (!globalPopup) return; globalPopup.style.display = "none"; @@ -498,7 +638,6 @@ function popup(contents) { globalPopup.style.display = "flex"; } -var storedPopupIds = {}; function popupId(id) { if (!storedPopupIds[id]) { storedPopupIds[id] = gradioApp().getElementById(id); @@ -605,7 +744,7 @@ function requestGet(url, data, handler, errorHandler) { xhr.send(js); } -function extraNetworksCopyCardPath(event, path) { +function extraNetworksCopyCardPathToClipboard(event, path) { navigator.clipboard.writeText(path); event.stopPropagation(); } @@ -626,8 +765,6 @@ function extraNetworksRequestMetadata(event, extraPage, cardName) { event.stopPropagation(); } -var extraPageUserMetadataEditors = {}; - function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) { var id = tabname + '_' + extraPage + '_edit_user_metadata'; @@ -672,38 +809,4 @@ window.addEventListener("keydown", function(event) { } }); -/** - * Setup custom loading for this script. - * We need to wait for all of our HTML to be generated in the extra networks tabs - * before we can actually run the `setupExtraNetworks` function. - * The `onUiLoaded` function actually runs before all of our extra network tabs are - * finished generating. Thus we needed this new method. - * - */ - -var uiAfterScriptsCallbacks = []; -var uiAfterScriptsTimeout = null; -var executedAfterScripts = false; - -function scheduleAfterScriptsCallbacks() { - clearTimeout(uiAfterScriptsTimeout); - uiAfterScriptsTimeout = setTimeout(function() { - executeCallbacks(uiAfterScriptsCallbacks); - }, 200); -} - -onUiLoaded(function() { - var mutationObserver = new MutationObserver(function(m) { - let existingSearchfields = gradioApp().querySelectorAll("[id$='_extra_search']").length; - let neededSearchfields = gradioApp().querySelectorAll("[id$='_extra_tabs'] > .tab-nav > button").length - 2; - - if (!executedAfterScripts && existingSearchfields >= neededSearchfields) { - mutationObserver.disconnect(); - executedAfterScripts = true; - scheduleAfterScriptsCallbacks(); - } - }); - mutationObserver.observe(gradioApp(), {childList: true, subtree: true}); -}); - -uiAfterScriptsCallbacks.push(setupExtraNetworks); +onUiLoaded(setupExtraNetworks); diff --git a/javascript/extraNetworksClusterizeList.js b/javascript/extraNetworksClusterizeList.js new file mode 100644 index 000000000..fe6cbbb3b --- /dev/null +++ b/javascript/extraNetworksClusterizeList.js @@ -0,0 +1,479 @@ +// Collators used for sorting. +const INT_COLLATOR = new Intl.Collator([], {numeric: true}); +const STR_COLLATOR = new Intl.Collator("en", {numeric: true, sensitivity: "base"}); + +function compress(string) { + /** Compresses a string into a base64 encoded GZipped string. */ + const cs = new CompressionStream('gzip'); + const writer = cs.writable.getWriter(); + + const blobToBase64 = blob => new Promise((resolve, _) => { + const reader = new FileReader(); + reader.onloadend = () => resolve(reader.result.split(',')[1]); + reader.readAsDataURL(blob); + }); + const byteArray = new TextEncoder().encode(string); + writer.write(byteArray); + writer.close(); + return new Response(cs.readable).blob().then(blobToBase64); +}; + +function decompress(base64string) { + /** Decompresses a base64 encoded GZipped string. */ + const ds = new DecompressionStream('gzip'); + const writer = ds.writable.getWriter(); + const bytes = Uint8Array.from(atob(base64string), c => c.charCodeAt(0)); + writer.write(bytes); + writer.close(); + return new Response(ds.readable).arrayBuffer().then(function (arrayBuffer) { + return new TextDecoder().decode(arrayBuffer); + }); +} + +const parseHtml = function(str) { + const tmp = document.implementation.createHTMLDocument(''); + tmp.body.innerHTML = str; + return [...tmp.body.childNodes]; +} + +const getComputedValue = function(container, css_property) { + return parseInt( + window.getComputedStyle(container, null) + .getPropertyValue(css_property) + .split("px")[0] + ); +}; + +const calcColsPerRow = function(parent) { + // Returns the number of columns in a row of a flexbox. + //const parent = document.querySelector(selector); + const parent_width = getComputedValue(parent, "width"); + const parent_padding_left = getComputedValue(parent,"padding-left"); + const parent_padding_right = getComputedValue(parent,"padding-right"); + + const child = parent.firstElementChild; + const child_width = getComputedValue(child,"width"); + const child_margin_left = getComputedValue(child,"margin-left"); + const child_margin_right = getComputedValue(child,"margin-right"); + + var parent_width_no_padding = parent_width - parent_padding_left - parent_padding_right; + const child_width_with_margin = child_width + child_margin_left + child_margin_right; + parent_width_no_padding += child_margin_left + child_margin_right; + + return parseInt(parent_width_no_padding / child_width_with_margin); +} + +const calcRowsPerCol = function(container, parent) { + // Returns the number of columns in a row of a flexbox. + //const parent = document.querySelector(selector); + const parent_height = getComputedValue(container, "height"); + const parent_padding_top = getComputedValue(container,"padding-top"); + const parent_padding_bottom = getComputedValue(container,"padding-bottom"); + + const child = parent.firstElementChild; + const child_height = getComputedValue(child,"height"); + const child_margin_top = getComputedValue(child,"margin-top"); + const child_margin_bottom = getComputedValue(child,"margin-bottom"); + + var parent_height_no_padding = parent_height - parent_padding_top - parent_padding_bottom; + const child_height_with_margin = child_height + child_margin_top + child_margin_bottom; + parent_height_no_padding += child_margin_top + child_margin_bottom; + + return parseInt(parent_height_no_padding / child_height_with_margin); +} + +class ExtraNetworksClusterize { + constructor( + { + scroll_id, + content_id, + rows_in_block = 10, + blocks_in_cluster = 4, + show_no_data_row = true, + callbacks = {}, + } = { + rows_in_block: 10, + blocks_in_cluster: 4, + show_no_data_row: true, + callbacks: {}, + } + ) { + if (scroll_id === undefined) { + console.error("scroll_id is undefined!"); + } + if (content_id === undefined) { + console.error("content_id is undefined!"); + } + + this.scroll_id = scroll_id; + this.content_id = content_id; + this.rows_in_block = rows_in_block; + this.blocks_in_cluster = blocks_in_cluster; + this.show_no_data_row = show_no_data_row; + this.callbacks = callbacks; + + this.enabled = false; + + this.encoded_str = ""; + + this.no_data_text = "Directory is empty."; + this.no_data_class = "nocards"; + + this.scroll_elem = document.getElementById(this.scroll_id); + this.content_elem = document.getElementById(this.content_id); + + this.n_rows = 1; + this.n_cols = 1; + + this.sort_fn = this.sortByDivId; + this.sort_reverse = false; + + this.data_obj = {}; + this.data_obj_keys_sorted = []; + + this.clusterize = new Clusterize( + { + rows: [], + scrollId: this.scroll_id, + contentId: this.content_id, + rows_in_block: this.rows_in_block, + blocks_in_cluster: this.blocks_in_cluster, + show_no_data_row: this.show_no_data_row, + callbacks: this.callbacks, + } + ); + } + + enable() { + this.enabled = true; + } + + disable() { + this.enabled = false; + } + + parseJson(encoded_str) { + if (this.encoded_str === encoded_str) { + return; + } + + Promise.resolve(encoded_str) + .then(v => decompress(v)) + .then(v => JSON.parse(v)) + .then(v => this.updateJson(v)) + .then(() => this.encoded_str = encoded_str); + } + + sortByDivId() { + // Sort data_obj keys (div_id) as numbers. + this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => INT_COLLATOR.compare(a, b)); + } + + applySort() { + this.sort_fn() + if (this.sort_reverse) { + this.data_obj_keys_sorted = this.data_obj_keys_sorted.reverse(); + } + this.updateRows(); + } + + applyFilter() { + // the base class filter just sorts the values and updates the rows. + this.applySort(); + this.updateRows(); + } + + filterRows(obj) { + var results = []; + for (const div_id of this.data_obj_keys_sorted) { + if (obj[div_id].active) { + results.push(obj[div_id].element.outerHTML); + } + } + return results; + } + + updateDivContent(div_id, content) { + /** Updates an element in the dataset. Does not call update_rows(). */ + if (!(div_id in this.data_obj)) { + console.error("div_id not in data_obj:", div_id); + } else if (typeof content === "object") { + this.data_obj[div_id].element = parseHtml(content.outerHTML)[0]; + return true; + } else if (typeof content === "string") { + this.data_obj[div_id].element = parseHtml(content)[0]; + return true; + } else { + console.error("Invalid content:", div_id, content); + } + + return false; + } + + updateRows() { + this.clusterize.update(this.filterRows(this.data_obj)); + this.clusterize.refresh(); + } + + nrows() { + return this.clusterize.getRowsAmount(); + } + + updateItemDims() { + if (!this.enabled) { + // Inactive list is not displayed on screen. Would error if trying to resize. + return; + } + if (this.nrows() <= 0) { + // If there is no data then just skip. + return; + } + // Calculate the visible rows and colums for the clusterize-content area. + let n_cols = calcColsPerRow(this.content_elem); + let n_rows = calcRowsPerCol(this.content_elem.parentElement, this.content_elem); + + n_cols = isNaN(n_cols) || n_cols <= 0 ? 1 : n_cols; + n_rows = isNaN(n_rows) || n_rows <= 0 ? 1 : n_rows; + + if (n_cols != this.n_cols || n_rows != this.n_rows) { + // Sizes have changed. Update the instance values. + this.n_cols = n_cols; + this.n_rows = n_rows; + this.rows_in_block = this.n_rows; + } + } + + rebuild() { + this.clusterize.destroy(); + + // Get new references to elements since they may have changed. + this.scroll_elem = document.getElementById(this.scroll_id); + this.content_elem = document.getElementById(this.content_id); + this.clusterize = new Clusterize( + { + rows: this.filterRows(this.data_obj), + scrollId: this.scroll_id, + contentId: this.content_id, + rows_in_block: this.rows_in_block, + blocks_in_cluster: this.blocks_in_cluster, + show_no_data_row: this.show_no_data_row, + no_data_text: this.no_data_text, + no_data_class: this.no_data_class, + callbacks: this.callbacks, + } + ); + + // Apply existing sort mode. + this.applyFilter(); + + this.updateItemDims(); + this.updateRows(); + } +} + +class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize { + constructor(...args) { + super(...args); + } + + getBoxShadow(depth) { + // Generates style for a multi-level box shadow for vertical indentation lines. + let res = ""; + var style = getComputedStyle(document.body); + let bg = style.getPropertyValue("--body-background-fill"); + let fg = style.getPropertyValue("--neutral-800"); + for (let i = 1; i <= depth; i++) { + res += `${i - 0.6}rem 0 0 ${bg} inset,`; + res += `${i - 0.4}rem 0 0 ${fg} inset`; + res += (i+1 > depth) ? "" : ", "; + } + return res; + } + + updateJson(json) { + for (const [k, v] of Object.entries(json)) { + let div_id = k; + let parsed_html = parseHtml(v)[0]; + // parent_id = -1 if item is at root level + let parent_id = "parentId" in parsed_html.dataset ? parsed_html.dataset.parentId : -1; + let expanded = "expanded" in parsed_html.dataset; + let depth = Number(parsed_html.dataset.depth); + parsed_html.style.paddingLeft = `${depth}em`; + parsed_html.style.boxShadow = this.getBoxShadow(depth); + // Add the updated html to the data object. + this.data_obj[div_id] = { + element: parsed_html, + active: parent_id === -1, // always show root + expanded: expanded || (parent_id === -1), // always expand root + parent: parent_id, + children: [], // populated later + }; + } + + // Build list of children for each element in dataset. + for (const [k, v] of Object.entries(this.data_obj)) { + if (v.parent === -1) { + continue; + } else if (!(v.parent in this.data_obj)) { + console.error("parent not in data:", v.parent); + } else { + this.data_obj[v.parent].children.push(k); + } + } + + // Handle expanding of rows on initial load + for (const [k, v] of Object.entries(this.data_obj)) { + if (v.parent === -1) { + // Always show root level. + this.data_obj[k].active = true; + } else if (this.data_obj[v.parent].expanded && this.data_obj[v.parent].active) { + // Parent is both active and expanded. show child + this.data_obj[k].active = true; + } else { + this.data_obj[k].active = false; + } + } + + this.applyFilter(); + } + + removeChildRows(div_id) { + for (const child_id of this.data_obj[div_id].children) { + this.data_obj[child_id].active = false; + this.data_obj[child_id].expanded = false; + delete this.data_obj[child_id].element.dataset.expanded; + this.removeChildRows(child_id); + } + } + + addChildRows(div_id) { + for (const child_id of this.data_obj[div_id].children) { + this.data_obj[child_id].active = true; + if (this.data_obj[child_id].expanded) { + this.addChildRows(child_id); + } + } + } +} + +class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize { + constructor(...args) { + super(...args); + + this.sort_mode_str = "default"; + this.sort_dir_str = "ascending"; + this.filter_str = ""; + } + + updateJson(json) { + for (const [k, v] of Object.entries(json)) { + let div_id = k; + let parsed_html = parseHtml(v)[0]; + // Add the updated html to the data object. + this.data_obj[div_id] = { + element: parsed_html, + active: true, + }; + } + + this.applyFilter(); + } + + filterRows(obj) { + let filtered_rows = super.filterRows(obj); + let res = []; + for (let i = 0; i < filtered_rows.length; i += this.n_cols) { + res.push(filtered_rows.slice(i, i + this.n_cols).join("")); + } + return res; + } + + sortByName() { + this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => { + return STR_COLLATOR.compare( + this.data_obj[a].element.dataset.sortName, + this.data_obj[b].element.dataset.sortName, + ); + }); + } + + sortByPath() { + this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => { + return STR_COLLATOR.compare( + this.data_obj[a].element.dataset.sortPath, + this.data_obj[b].element.dataset.sortPath, + ); + }); + } + + sortByCreated() { + this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => { + return INT_COLLATOR.compare( + this.data_obj[a].element.dataset.sortCreated, + this.data_obj[b].element.dataset.sortCreated, + ); + }); + } + + sortByModified() { + this.data_obj_keys_sorted = Object.keys(this.data_obj).sort((a, b) => { + return INT_COLLATOR.compare( + this.data_obj[a].element.dataset.sortModified, + this.data_obj[b].element.dataset.sortModified, + ); + }); + } + + setSortMode(btn_sort_mode) { + this.sort_mode_str = btn_sort_mode.dataset.sortMode.toLowerCase(); + } + + setSortDir(btn_sort_dir) { + this.sort_dir_str = btn_sort_dir.dataset.sortDir.toLowerCase(); + } + + applySort() { + this.sort_reverse = this.sort_dir_str === "descending"; + + switch(this.sort_mode_str) { + case "name": + this.sort_fn = this.sortByName; + break; + case "path": + this.sort_fn = this.sortByPath; + break; + case "created": + this.sort_fn = this.sortByCreated; + break; + case "modified": + this.sort_fn = this.sortByModified; + break; + default: + this.sort_fn = this.sortByDivId; + break; + } + super.applySort(); + } + + applyFilter(filter_str) { + if (filter_str !== undefined) { + this.filter_str = filter_str.toLowerCase(); + } + + for (const [k, v] of Object.entries(this.data_obj)) { + let search_only = v.element.querySelector(".search_only"); + let text = Array.prototype.map.call(v.element.querySelectorAll(".search_terms"), function(t) { + return t.textContent.toLowerCase(); + }).join(" "); + + let visible = text.indexOf(this.filter_str) != -1; + if (search_only && this.filter_str.length < 4) { + visible = false; + } + this.data_obj[k].active = visible; + } + + this.applySort(); + this.updateRows(); + } +} \ No newline at end of file diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 4aeb14b41..8a233e710 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -173,6 +173,13 @@ R.tracking = false; document.body.classList.remove('resizing'); + + // Fire a custom event at end of resizing. + R.parent.dispatchEvent( + new CustomEvent("resizeHandleResized", { + bubbles: true, + }), + ); } }); }); diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index f4627ce8d..31ab4357f 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -4,6 +4,9 @@ import urllib.parse from pathlib import Path from typing import Optional, Union from dataclasses import dataclass +import gzip +import base64 +import re from modules import shared, ui_extra_networks_user_metadata, errors, extra_networks, util from modules.images import read_info_from_image, save_image_with_geninfo @@ -32,6 +35,182 @@ class ExtraNetworksItem: """Wrapper for dictionaries representing ExtraNetworks items.""" item: dict +def build_row( + div_id: int, + tabname: str, + extra_networks_tabname: str, + label: str, + btn_type: str, + btn_copy_path_tpl: str, + btn_edit_item_tpl: str, + btn_metadata_tpl: str, + tree_row_tpl: str, + parent_id: Optional[int] = None, + data_depth: Optional[int] = None, + data_path: Optional[str] = None, + data_hash: Optional[str] = None, + data_prompt: Optional[str] = None, + data_neg_prompt: Optional[str] = None, + data_allow_neg: Optional[str] = None, + onclick_extra: Optional[str] = None, +) -> str: + if btn_type not in ["file", "dir"]: + raise ValueError("Invalid button type:", btn_type) + + subitem = "has-subitem" + action_list_item_action_leading = "" + action_list_item_visual_leading = "🗀" + action_list_item_action_trailing = "" + action_list_item_visual_trailing = "" + + if btn_type == "file": + subitem = "subitem" + action_list_item_visual_leading = "🗎" + # Action buttons + action_list_item_visual_trailing += '
    ' + action_list_item_visual_trailing += btn_copy_path_tpl.format( + **{"filename": data_path} + ) + action_list_item_visual_trailing += btn_edit_item_tpl.format( + **{ + "tabname": tabname, + "extra_networks_tabname": extra_networks_tabname, + "name": label, + } + ) + action_list_item_visual_trailing += btn_metadata_tpl.format( + **{"extra_networks_tabname": extra_networks_tabname, "name": label} + ) + action_list_item_visual_trailing += "
    " + + data_attributes = "" + data_attributes += f"data-path={data_path} " if data_path is not None else "" + data_attributes += f"data-hash={data_hash} " if data_hash is not None else "" + data_attributes += f"data-prompt={data_prompt} " if data_prompt else "" + data_attributes += f"data-neg-prompt={data_neg_prompt} " if data_neg_prompt else "" + data_attributes += f"data-allow-neg={data_allow_neg} " if data_allow_neg else "" + data_attributes += ( + f"data-tree-entry-type={btn_type} " if btn_type is not None else "" + ) + data_attributes += f"data-div-id={div_id} " if div_id is not None else "" + data_attributes += f"data-parent-id={parent_id} " if parent_id is not None else "" + data_attributes += f"data-depth={data_depth} " if data_depth is not None else "" + data_attributes += ( + "data-expanded " if parent_id is None else "" + ) # inverted to expand root + + res = tree_row_tpl.format( + **{ + "data_attributes": data_attributes, + "subitem": subitem, + "search_terms": "", + "btn_type": btn_type, + "tabname": tabname, + "onclick_extra": onclick_extra if onclick_extra else "", + "extra_networks_tabname": extra_networks_tabname, + "action_list_item_action_leading": action_list_item_action_leading, + "action_list_item_visual_leading": action_list_item_visual_leading, + "action_list_item_label": label, + "action_list_item_visual_trailing": action_list_item_visual_trailing, + "action_list_item_action_trailing": action_list_item_action_trailing, + } + ) + res = res.strip() + res = re.sub(" +", " ", res.replace("\n", "")) + return res + + +def build_tree( + tree: dict, + res: dict, + tabname: str, + extra_networks_tabname: str, + div_id: int, + depth: int, + btn_copy_path_tpl: str, + btn_edit_item_tpl: str, + btn_metadata_tpl: str, + tree_row_tpl: str, + allow_negative_prompt: Optional[bool] = None, + parent_id: Optional[int] = None, +) -> int: + for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])): + if not isinstance(v, (ExtraNetworksItem,)): + # dir + if div_id in res: + raise KeyError("div_id already in res:", div_id) + + res[div_id] = build_row( + div_id=div_id, + parent_id=parent_id, + tabname=tabname, + extra_networks_tabname=extra_networks_tabname, + label=k, + data_depth=depth, + data_path=k, + btn_type="dir", + btn_copy_path_tpl=btn_copy_path_tpl, + btn_edit_item_tpl=btn_edit_item_tpl, + btn_metadata_tpl=btn_metadata_tpl, + tree_row_tpl=tree_row_tpl, + ) + last_div_id = build_tree( + tree=v, + res=res, + depth=depth + 1, + div_id=div_id + 1, + parent_id=div_id, + tabname=tabname, + extra_networks_tabname=extra_networks_tabname, + allow_negative_prompt=allow_negative_prompt, + btn_copy_path_tpl=btn_copy_path_tpl, + btn_edit_item_tpl=btn_edit_item_tpl, + btn_metadata_tpl=btn_metadata_tpl, + tree_row_tpl=tree_row_tpl, + ) + div_id = last_div_id + else: + # file + if div_id in res: + raise KeyError("div_id already in res:", div_id) + + onclick = v.item.get("onclick", None) + if onclick is None: + # Don't quote prompt/neg_prompt since they are stored as js strings already. + onclick_js_tpl = ( + "cardClicked('{tabname}', {prompt}, {neg_prompt}, {allow_neg});" + ) + onclick = onclick_js_tpl.format( + **{ + "tabname": tabname, + "prompt": v.item["prompt"], + "neg_prompt": v.item.get("negative_prompt", "''"), + "allow_neg": str(allow_negative_prompt).lower(), + } + ) + onclick = html.escape(onclick) + + res[div_id] = build_row( + div_id=div_id, + parent_id=parent_id, + tabname=tabname, + extra_networks_tabname=extra_networks_tabname, + label=v.item["name"], + data_depth=depth, + data_path=v.item["filename"], + data_hash=v.item["shorthash"], + data_prompt=html.escape(v.item.get("prompt", "''")), + data_neg_prompt=html.escape(v.item.get("negative_prompt", "''")), + data_allow_neg=str(allow_negative_prompt).lower(), + onclick_extra=onclick, + btn_type="file", + btn_copy_path_tpl=btn_copy_path_tpl, + btn_edit_item_tpl=btn_edit_item_tpl, + btn_metadata_tpl=btn_metadata_tpl, + tree_row_tpl=tree_row_tpl, + ) + div_id += 1 + return div_id def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem]) -> dict: """Recursively builds a directory tree. @@ -167,10 +346,11 @@ class ExtraNetworksPage: self.pane_content_tree_tpl = shared.html("extra-networks-pane-tree.html") self.pane_content_dirs_tpl = shared.html("extra-networks-pane-dirs.html") self.card_tpl = shared.html("extra-networks-card.html") - self.btn_tree_tpl = shared.html("extra-networks-tree-button.html") + self.tree_row_tpl = shared.html("extra-networks-tree-row.html") self.btn_copy_path_tpl = shared.html("extra-networks-copy-path-button.html") self.btn_metadata_tpl = shared.html("extra-networks-metadata-button.html") self.btn_edit_item_tpl = shared.html("extra-networks-edit-item-button.html") + self.btn_dirs_view_tpl = shared.html("extra-networks-dirs-view-button.html") def refresh(self): pass @@ -204,6 +384,7 @@ class ExtraNetworksPage: tabname: str, item: dict, template: Optional[str] = None, + div_id: Optional[int] = None, ) -> Union[str, dict]: """Generates HTML for a single ExtraNetworks Item. @@ -297,6 +478,7 @@ class ExtraNetworksPage: # Some items here might not be used depending on HTML template used. args = { + "div_id": "" if div_id is None else div_id, "background_image": background_image, "card_clicked": onclick, "copy_path_button": btn_copy_path, @@ -305,7 +487,6 @@ class ExtraNetworksPage: "local_preview": quote_js(item["local_preview"]), "metadata_button": btn_metadata, "name": html.escape(item["name"]), - "prompt": item.get("prompt", None), "save_card_preview": html.escape(f"return saveCardPreview(event, '{tabname}', '{item['local_preview']}');"), "search_only": " search_only" if search_only else "", "search_terms": search_terms_html, @@ -313,6 +494,9 @@ class ExtraNetworksPage: "style": card_style, "tabname": tabname, "extra_networks_tabname": self.extra_networks_tabname, + "data_prompt": item.get("prompt", "''"), + "data_neg_prompt": item.get("negative_prompt", "''"), + "data_allow_neg": str(self.allow_negative_prompt).lower(), } if template: @@ -320,108 +504,6 @@ class ExtraNetworksPage: else: return args - def create_tree_dir_item_html( - self, - tabname: str, - dir_path: str, - content: Optional[str] = None, - ) -> Optional[str]: - """Generates HTML for a directory item in the tree. - - The generated HTML is of the format: - ```html -
  • -
    -
      - {content} -
    -
    • - ``` - - Args: - tabname: The name of the active tab. - dir_path: Path to the directory for this item. - content: Optional HTML string that will be wrapped by this
      . - - Returns: - HTML formatted string. - """ - if not content: - return None - - btn = self.btn_tree_tpl.format( - **{ - "search_terms": "", - "subclass": "tree-list-content-dir", - "tabname": tabname, - "extra_networks_tabname": self.extra_networks_tabname, - "onclick_extra": "", - "data_path": dir_path, - "data_hash": "", - "action_list_item_action_leading": "", - "action_list_item_visual_leading": "🗀", - "action_list_item_label": os.path.basename(dir_path), - "action_list_item_visual_trailing": "", - "action_list_item_action_trailing": "", - } - ) - ul = f"" - return ( - "
    • " - f"{btn}{ul}" - "
      • " - ) - - def create_tree_file_item_html(self, tabname: str, file_path: str, item: dict) -> str: - """Generates HTML for a file item in the tree. - - The generated HTML is of the format: - ```html -
    • - -
      -
      • - ``` - - Args: - tabname: The name of the active tab. - file_path: The path to the file for this item. - item: Dictionary containing the item information. - - Returns: - HTML formatted string. - """ - item_html_args = self.create_item_html(tabname, item) - action_buttons = "".join( - [ - item_html_args["copy_path_button"], - item_html_args["metadata_button"], - item_html_args["edit_button"], - ] - ) - action_buttons = f"
      {action_buttons}
      " - btn = self.btn_tree_tpl.format( - **{ - "search_terms": "", - "subclass": "tree-list-content-file", - "tabname": tabname, - "extra_networks_tabname": self.extra_networks_tabname, - "onclick_extra": item_html_args["card_clicked"], - "data_path": file_path, - "data_hash": item["shorthash"], - "action_list_item_action_leading": "", - "action_list_item_visual_leading": "🗎", - "action_list_item_label": item["name"], - "action_list_item_visual_trailing": "", - "action_list_item_action_trailing": action_buttons, - } - ) - return ( - "
    • " - f"{btn}" - "
      • " - ) - def create_tree_view_html(self, tabname: str) -> str: """Generates HTML for displaying folders in a tree view. @@ -431,7 +513,7 @@ class ExtraNetworksPage: Returns: HTML string generated for this tree view. """ - res = "" + res = {} # Setup the tree dictionary. roots = self.allowed_directories_for_previews() @@ -441,43 +523,24 @@ class ExtraNetworksPage: if not tree: return res - def _build_tree(data: Optional[dict[str, ExtraNetworksItem]] = None) -> Optional[str]: - """Recursively builds HTML for a tree. - - Args: - data: Dictionary representing a directory tree. Can be NoneType. - Data keys should be absolute paths from the root and values - should be subdirectory trees or an ExtraNetworksItem. - - Returns: - If data is not None: HTML string - Else: None - """ - if not data: - return None - - # Lists for storing
    • items html for directories and files separately. - _dir_li = [] - _file_li = [] - - for k, v in sorted(data.items(), key=lambda x: shared.natural_sort_key(x[0])): - if isinstance(v, (ExtraNetworksItem,)): - _file_li.append(self.create_tree_file_item_html(tabname, k, v.item)) - else: - _dir_li.append(self.create_tree_dir_item_html(tabname, k, _build_tree(v))) - - # Directories should always be displayed before files so we order them here. - return "".join(_dir_li) + "".join(_file_li) - - # Add each root directory to the tree. - for k, v in sorted(tree.items(), key=lambda x: shared.natural_sort_key(x[0])): - item_html = self.create_tree_dir_item_html(tabname, k, _build_tree(v)) - # Only add non-empty entries to the tree. - if item_html is not None: - res += item_html - - return f"
        {res}
      " + build_tree( + tree=tree, + res=res, + depth=0, + div_id=0, + parent_id=None, + tabname=tabname, + extra_networks_tabname=self.extra_networks_tabname, + allow_negative_prompt=self.allow_negative_prompt, + btn_copy_path_tpl=self.btn_copy_path_tpl, + btn_edit_item_tpl=self.btn_edit_item_tpl, + btn_metadata_tpl=self.btn_metadata_tpl, + tree_row_tpl=self.tree_row_tpl, + ) + res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8") + return f'' + # FIXME def create_dirs_view_html(self, tabname: str) -> str: """Generates HTML for displaying folders.""" @@ -511,12 +574,12 @@ class ExtraNetworksPage: if subdirs: subdirs = {"": 1, **subdirs} - subdirs_html = "".join([f""" - - """ for subdir in subdirs]) - + subdirs_html = "".join([ + self.btn_dirs_view_tpl.format(**{ + "extra_class": "search-all" if subdir == "" else "", + "tabname_full": f"{tabname}_{self.extra_networks_tabname}", + }) for subdir in subdirs + ]) return subdirs_html def create_card_view_html(self, tabname: str, *, none_message) -> str: @@ -532,15 +595,12 @@ class ExtraNetworksPage: Returns: HTML formatted string. """ - res = [] - for item in self.items.values(): - res.append(self.create_item_html(tabname, item, self.card_tpl)) + res = {} + for i, item in self.items.values(): + res[i] = self.create_item_html(tabname, item, self.card_tpl, div_id=i) - if not res: - dirs = "".join([f"
    • {x}
      • " for x in self.allowed_directories_for_previews()]) - res = [none_message or shared.html("extra-networks-no-cards.html").format(dirs=dirs)] - - return "".join(res) + res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8") + return f'' def create_html(self, tabname, *, empty=False): """Generates an HTML string for the current pane. @@ -574,13 +634,14 @@ class ExtraNetworksPage: page_params = { "tabname": tabname, "extra_networks_tabname": self.extra_networks_tabname, - "data_sortdir": shared.opts.extra_networks_card_order, + "data_sort_dir": shared.opts.extra_networks_card_order.lower().strip(), + "data_sort_mode": shared.opts.extra_networks_card_order_field.lower().strip(), "sort_path_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Path' else '', "sort_name_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Name' else '', "sort_date_created_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Created' else '', "sort_date_modified_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Modified' else '', "tree_view_btn_extra_class": "extra-network-control--enabled" if show_tree else "", - "items_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None), + "cards_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None), "extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width, "tree_view_div_default_display_class": "" if show_tree else "extra-network-dirs-hidden", } @@ -722,10 +783,10 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): for page, tab in zip(ui.stored_extra_pages, related_tabs): jscode = ( - "function(){{" + "function(){" f"extraNetworksTabSelected('{tabname}', '{tabname}_{page.extra_networks_tabname}_prompts', {str(page.allow_prompt).lower()}, {str(page.allow_negative_prompt).lower()}, '{tabname}_{page.extra_networks_tabname}');" f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');" - "}}" + "}" ) tab.select(fn=None, _js=jscode, inputs=[], outputs=[], show_progress=False) @@ -736,7 +797,17 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): return ui.pages_contents button_refresh = gr.Button("Refresh", elem_id=f"{tabname}_{page.extra_networks_tabname}_extra_refresh_internal", visible=False) - button_refresh.click(fn=refresh, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js="function(){ " + f"applyExtraNetworkFilter('{tabname}_{page.extra_networks_tabname}');" + " }").then(fn=lambda: None, _js='setupAllResizeHandles') + button_refresh.click( + fn=refresh, + inputs=[], + outputs=ui.pages, + ).then( + fn=lambda: None, + _js='setupAllResizeHandles' + ).then( + fn=lambda: None, + _js=f"function(){{ extraNetworksRefreshTab('{tabname}_{page.extra_networks_tabname}'); }}", + ) def create_html(): ui.pages_contents = [pg.create_html(ui.tabname) for pg in ui.stored_extra_pages] @@ -746,7 +817,17 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname): create_html() return ui.pages_contents - interface.load(fn=pages_html, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js='setupAllResizeHandles') + interface.load( + fn=pages_html, + inputs=[], + outputs=ui.pages, + ).then( + fn=lambda: None, + _js="setupAllResizeHandles", + ).then( + fn=lambda: None, + _js="setupExtraNetworksData", + ) return ui diff --git a/modules/ui_gradio_extensions.py b/modules/ui_gradio_extensions.py index f5278d22f..9b83c76a9 100644 --- a/modules/ui_gradio_extensions.py +++ b/modules/ui_gradio_extensions.py @@ -25,6 +25,9 @@ def javascript_html(): if shared.cmd_opts.theme: head += f'\n' + # Allows for very large scrollable regions without bloating DOM. + head += '\n' + return head @@ -37,6 +40,9 @@ def css_html(): for cssfile in scripts.list_files_with_name("style.css"): head += stylesheet(cssfile) + # Used by clusterize.js + head += '' + user_css = os.path.join(data_path, "user.css") if os.path.exists(user_css): head += stylesheet(user_css) diff --git a/style.css b/style.css index 29eae4127..a30355bd6 100644 --- a/style.css +++ b/style.css @@ -949,9 +949,6 @@ footer { display: inline-flex; visibility: hidden; color: white; -} - -.extra-network-pane .card .button-row { position: absolute; right: 0; z-index: 1; @@ -963,6 +960,11 @@ footer { .extra-network-pane .card-button{ color: white; + width: 1.5em; + text-shadow: 2px 2px 3px black; + color: white; + padding: 0.25em 0.1em; + font-size: 2rem; } .extra-network-pane .copy-path-button::before { @@ -977,25 +979,10 @@ footer { content: "🛠"; } -.extra-network-pane .card-button { - width: 1.5em; - text-shadow: 2px 2px 3px black; - color: white; - padding: 0.25em 0.1em; -} - .extra-network-pane .card-button:hover{ color: red; } -.extra-network-pane .card .card-button { - font-size: 2rem; -} - -.extra-network-pane .card-minimal .card-button { - font-size: 1rem; -} - .standalone-card-preview.card .preview{ position: absolute; object-fit: cover; @@ -1196,6 +1183,26 @@ body.resizing .resize-handle { } /* ========================= */ +.clusterize-scroll::-webkit-scrollbar { + background-color: transparent; + width: 16px; +} + +.clusterize-scroll::-webkit-scrollbar-track { + background-color: transparent; + background-clip: content-box; +} + +.clusterize-scroll::-webkit-scrollbar-thumb { + background-color: var(--border-color-primary); + border-radius: 16px; + border: 4px solid var(--background-fill-primary); +} + +.clusterize-scroll::-webkit-scrollbar-button { + display: none; +} + .extra-network-pane { display: flex; height: calc(100vh - 24rem); @@ -1295,53 +1302,6 @@ body.resizing .resize-handle { margin: 0 0.5rem 0 0.75rem; } -.extra-network-tree .tree-list--tree {} - -/* Remove auto indentation from tree. Will be overridden later. */ -.extra-network-tree .tree-list--subgroup { - margin: 0 !important; - padding: 0 !important; - box-shadow: 0.5rem 0 0 var(--body-background-fill) inset, - 0.7rem 0 0 var(--neutral-800) inset; -} - -/* Set indentation for each depth of tree. */ -.extra-network-tree .tree-list--subgroup > .tree-list-item { - margin-left: 0.4rem !important; - padding-left: 0.4rem !important; -} - -/* Styles for tree
    • elements. */ -.extra-network-tree .tree-list-item { - list-style: none; - position: relative; - background-color: transparent; -} - -/* Directory
        visibility based on data-expanded attribute. */ -.extra-network-tree .tree-list-content+.tree-list--subgroup { - height: 0; - visibility: hidden; - opacity: 0; -} - -.extra-network-tree .tree-list-content[data-expanded]+.tree-list--subgroup { - height: auto; - visibility: visible; - opacity: 1; -} - -/* File
      • */ -.extra-network-tree .tree-list-item--subitem { - padding-top: 0 !important; - padding-bottom: 0 !important; - margin-top: 0 !important; - margin-bottom: 0 !important; -} - -/*
      • containing
          */ -.extra-network-tree .tree-list-item--has-subitem {} - /* BUTTON ELEMENTS */ /* @@ -21,50 +21,50 @@ Sort:
          - +
          - +
          - +
          - +
          - +
          diff --git a/html/extra-networks-tree-row.html b/html/extra-networks-tree-row.html index dede487ec..bcfe2cda9 100644 --- a/html/extra-networks-tree-row.html +++ b/html/extra-networks-tree-row.html @@ -1,20 +1,21 @@ -
          +
          diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index ba75fba64..32ddf2dc9 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -85,12 +85,22 @@ function toggleCss(key, css, enable) { } function extraNetworksRefreshTab(tabname_full) { + // Reapply controls since they don't change on refresh. + let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`); + let div_tree_list = gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`); + + if (btn_tree_view.classList.contains("extra-network-control--enabled")) { + div_tree_list.classList.toggle("hidden", false); // unhide + } else { + div_tree_list.classList.toggle("hidden", true); // hide + } + + // Don't do anything else if clusterizers isnt initialized. if (!(tabname_full in clusterizers)) { return; } for (_tabname_full of Object.keys(clusterizers)) { - if (_tabname_full === tabname_full) { // Set the selected tab as active since it is now visible on page. clusterizers[_tabname_full].tree_list.enable(); @@ -102,12 +112,14 @@ function extraNetworksRefreshTab(tabname_full) { } } - clusterizers[tabname_full].tree_list.rebuild(); - clusterizers[tabname_full].cards_list.rebuild(); - + // Force check update of data. for (var elem of gradioApp().querySelectorAll('.extra-networks-script-data')) { extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem; } + + // Rebuild to both update the data and to refresh the sizes of rows. + clusterizers[tabname_full].tree_list.rebuild(); + clusterizers[tabname_full].cards_list.rebuild(); } function setupExtraNetworksForTab(tabname) { @@ -133,9 +145,6 @@ function setupExtraNetworksForTab(tabname) { this_tab.querySelectorAll(`:scope > [id^="${tabname}_"]`).forEach(function(elem) { let tabname_full = elem.id; let txt_search; - let btn_sort_mode; - let btn_sort_dir; - let btn_refresh; var applyFilter = function() { if (!(tabname_full in clusterizers)) { @@ -143,8 +152,6 @@ function setupExtraNetworksForTab(tabname) { return; } // Only touch cards_list. tree_list remains static. - clusterizers[tabname_full].cards_list.setSortMode(btn_sort_mode); - clusterizers[tabname_full].cards_list.setSortDir(btn_sort_dir); clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); }; extraNetworksApplyFilter[tabname_full] = applyFilter; @@ -155,8 +162,6 @@ function setupExtraNetworksForTab(tabname) { return; } // Only touch cards_list. tree_list remains static. - clusterizers[tabname_full].cards_list.setSortMode(btn_sort_mode); - clusterizers[tabname_full].cards_list.setSortDir(btn_sort_dir); clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); // filter also sorts }; extraNetworksApplySort[tabname_full] = applySort; @@ -174,18 +179,6 @@ function setupExtraNetworksForTab(tabname) { .then((el) => { txt_search = el; }) - .then(() => { - waitForElement(`#${tabname_full}_extra_sort_mode`) - .then((el) => { btn_sort_mode = el; }); - }) - .then(() => { - waitForElement(`#${tabname_full}_extra_sort_dir`) - .then((el) => { btn_sort_dir = el; }); - }) - .then(() => { - waitForElement(`#${tabname_full}_extra_refresh`) - .then((el) => { btn_refresh = el; }); - }) .then(() => { waitForElement(`#${tabname_full}_tree_list_scroll_area > #${tabname_full}_tree_list_content_area`) .then(() => { return; }); @@ -195,7 +188,6 @@ function setupExtraNetworksForTab(tabname) { .then(() => { return; }); }) .then(() => { - console.log("LOADING TAB:", tabname_full, clusterizers[tabname_full]); // Now that we have our elements in DOM, we create the clusterize lists. clusterizers[tabname_full] = { tree_list: new ExtraNetworksClusterizeTreeList({ @@ -208,8 +200,6 @@ function setupExtraNetworksForTab(tabname) { }), }; - applyFilter(); - // Debounce search text input. This way we only search after user is done typing. let typing_timer; let done_typing_interval_ms = 250; @@ -219,7 +209,7 @@ function setupExtraNetworksForTab(tabname) { typing_timer = setTimeout(applyFilter, done_typing_interval_ms); } }); - // Triggered on "enter" key or when "x" is clicked to clear search. + txt_search.addEventListener("extra-network-control--search-clear", applyFilter); // Insert the controls into the page. @@ -488,7 +478,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full) { var search_input_elem = gradioApp().querySelector("#" + tabname_full + "_extra_search"); search_input_elem.value = _search_text; updateInput(search_input_elem); - applyExtraNetworksFilter(tabname_full); + applyExtraNetworkFilter(tabname_full); } @@ -544,13 +534,16 @@ function extraNetworksControlSortModeOnClick(event, tabname_full) { var self = event.currentTarget; var parent = event.currentTarget.parentElement; - parent.querySelectorAll('.extra-network-control--sort').forEach(function(x) { + parent.querySelectorAll('.extra-network-control--sort-mode').forEach(function(x) { x.classList.remove('extra-network-control--enabled'); }); self.classList.add('extra-network-control--enabled'); - applyExtraNetworkSort(tabname_full); + if (tabname_full in clusterizers) { + clusterizers[tabname_full].cards_list.setSortMode(self); + applyExtraNetworkSort(tabname_full); + } } function extraNetworksControlSortDirOnClick(event, tabname_full) { @@ -571,7 +564,11 @@ function extraNetworksControlSortDirOnClick(event, tabname_full) { event.currentTarget.dataset.sortDir = "ascending"; event.currentTarget.setAttribute("title", "Sort ascending"); } - applyExtraNetworkSort(tabname_full); + + if (tabname_full in clusterizers) { + clusterizers[tabname_full].cards_list.setSortDir(event.currentTarget); + applyExtraNetworkSort(tabname_full); + } } function extraNetworksControlTreeViewOnClick(event, tabname_full) { @@ -588,8 +585,11 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) { button.classList.toggle("extra-network-control--enabled"); var show = !button.classList.contains("extra-network-control--enabled"); - var pane = gradioApp().getElementById(`${tabname_full}_pane`); - pane.classList.toggle("extra-network-dirs-hidden", show); + gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).classList.toggle("hidden", show); + + // The pane sizes have changed. We need to recalc the sizes for our clusterizers. + clusterizers[tabname_full].tree_list.updateRows(); + clusterizers[tabname_full].cards_list.updateRows(); } function extraNetworksControlRefreshOnClick(event, tabname_full) { @@ -707,7 +707,7 @@ function extraNetworksShowMetadata(text) { return; } } catch (error) { - console.eror(error); + console.error(error); } var elem = document.createElement('pre'); @@ -744,7 +744,7 @@ function requestGet(url, data, handler, errorHandler) { xhr.send(js); } -function extraNetworksCopyCardPathToClipboard(event, path) { +function extraNetworksCopyPathToClipboard(event, path) { navigator.clipboard.writeText(path); event.stopPropagation(); } diff --git a/javascript/extraNetworksClusterizeList.js b/javascript/extraNetworksClusterizeList.js index fe6cbbb3b..095b12700 100644 --- a/javascript/extraNetworksClusterizeList.js +++ b/javascript/extraNetworksClusterizeList.js @@ -98,6 +98,7 @@ class ExtraNetworksClusterize { callbacks: {}, } ) { + console.log(`scroll_id: ${scroll_id}, content_id: ${content_id}`); if (scroll_id === undefined) { console.error("scroll_id is undefined!"); } @@ -281,16 +282,20 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize { let res = ""; var style = getComputedStyle(document.body); let bg = style.getPropertyValue("--body-background-fill"); - let fg = style.getPropertyValue("--neutral-800"); + let fg = style.getPropertyValue("--border-color-primary"); + let text_size = style.getPropertyValue("--button-large-text-size"); for (let i = 1; i <= depth; i++) { - res += `${i - 0.6}rem 0 0 ${bg} inset,`; - res += `${i - 0.4}rem 0 0 ${fg} inset`; + res += `calc((${i} * ${text_size}) - (${text_size} * 0.6)) 0 0 ${bg} inset,`; + res += `calc((${i} * ${text_size}) - (${text_size} * 0.4)) 0 0 ${fg} inset`; res += (i+1 > depth) ? "" : ", "; } return res; } updateJson(json) { + var style = getComputedStyle(document.body); + //let spacing_sm = style.getPropertyValue("--spacing-sm"); + let text_size = style.getPropertyValue("--button-large-text-size"); for (const [k, v] of Object.entries(json)) { let div_id = k; let parsed_html = parseHtml(v)[0]; @@ -298,8 +303,9 @@ class ExtraNetworksClusterizeTreeList extends ExtraNetworksClusterize { let parent_id = "parentId" in parsed_html.dataset ? parsed_html.dataset.parentId : -1; let expanded = "expanded" in parsed_html.dataset; let depth = Number(parsed_html.dataset.depth); - parsed_html.style.paddingLeft = `${depth}em`; + parsed_html.style.paddingLeft = `calc(${depth} * ${text_size})`; parsed_html.style.boxShadow = this.getBoxShadow(depth); + // Add the updated html to the data object. this.data_obj[div_id] = { element: parsed_html, @@ -360,7 +366,7 @@ class ExtraNetworksClusterizeCardsList extends ExtraNetworksClusterize { constructor(...args) { super(...args); - this.sort_mode_str = "default"; + this.sort_mode_str = "path"; this.sort_dir_str = "ascending"; this.filter_str = ""; } diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 31ab4357f..f0f288460 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -57,31 +57,29 @@ def build_row( if btn_type not in ["file", "dir"]: raise ValueError("Invalid button type:", btn_type) - subitem = "has-subitem" action_list_item_action_leading = "" action_list_item_visual_leading = "🗀" - action_list_item_action_trailing = "" action_list_item_visual_trailing = "" + action_list_item_action_trailing = "" if btn_type == "file": - subitem = "subitem" action_list_item_visual_leading = "🗎" # Action buttons - action_list_item_visual_trailing += '
          ' - action_list_item_visual_trailing += btn_copy_path_tpl.format( + action_list_item_action_trailing += '
          ' + action_list_item_action_trailing += btn_copy_path_tpl.format( **{"filename": data_path} ) - action_list_item_visual_trailing += btn_edit_item_tpl.format( + action_list_item_action_trailing += btn_edit_item_tpl.format( **{ "tabname": tabname, "extra_networks_tabname": extra_networks_tabname, "name": label, } ) - action_list_item_visual_trailing += btn_metadata_tpl.format( + action_list_item_action_trailing += btn_metadata_tpl.format( **{"extra_networks_tabname": extra_networks_tabname, "name": label} ) - action_list_item_visual_trailing += "
          " + action_list_item_action_trailing += "
          " data_attributes = "" data_attributes += f"data-path={data_path} " if data_path is not None else "" @@ -102,7 +100,6 @@ def build_row( res = tree_row_tpl.format( **{ "data_attributes": data_attributes, - "subitem": subitem, "search_terms": "", "btn_type": btn_type, "tabname": tabname, @@ -504,7 +501,7 @@ class ExtraNetworksPage: else: return args - def create_tree_view_html(self, tabname: str) -> str: + def generate_tree_view_data_div(self, tabname: str) -> str: """Generates HTML for displaying folders in a tree view. Args: @@ -578,11 +575,12 @@ class ExtraNetworksPage: self.btn_dirs_view_tpl.format(**{ "extra_class": "search-all" if subdir == "" else "", "tabname_full": f"{tabname}_{self.extra_networks_tabname}", + "path": html.escape(subdir), }) for subdir in subdirs ]) return subdirs_html - def create_card_view_html(self, tabname: str, *, none_message) -> str: + def generate_cards_view_data_div(self, tabname: str, *, none_message) -> str: """Generates HTML for the network Card View section for a tab. This HTML goes into the `extra-networks-pane.html`
          with @@ -596,7 +594,7 @@ class ExtraNetworksPage: HTML formatted string. """ res = {} - for i, item in self.items.values(): + for i, item in enumerate(self.items.values()): res[i] = self.create_item_html(tabname, item, self.card_tpl, div_id=i) res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8") @@ -636,18 +634,19 @@ class ExtraNetworksPage: "extra_networks_tabname": self.extra_networks_tabname, "data_sort_dir": shared.opts.extra_networks_card_order.lower().strip(), "data_sort_mode": shared.opts.extra_networks_card_order_field.lower().strip(), - "sort_path_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Path' else '', - "sort_name_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Name' else '', - "sort_date_created_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Created' else '', - "sort_date_modified_active": ' extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Modified' else '', + "sort_path_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Path' else '', + "sort_name_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Name' else '', + "sort_date_created_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Created' else '', + "sort_date_modified_active": 'extra-network-control--enabled' if shared.opts.extra_networks_card_order_field == 'Date Modified' else '', "tree_view_btn_extra_class": "extra-network-control--enabled" if show_tree else "", - "cards_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None), + "tree_list_scroll_area_div_extra_class": "", + "cards_data_div": self.generate_cards_view_data_div(tabname, none_message="Loading..." if empty else None), "extra_networks_tree_view_default_width": shared.opts.extra_networks_tree_view_default_width, - "tree_view_div_default_display_class": "" if show_tree else "extra-network-dirs-hidden", + "tree_view_div_default_display_class": "" if show_tree else "hidden", } if shared.opts.extra_networks_tree_view_style == "Tree": - pane_content = self.pane_content_tree_tpl.format(**page_params, tree_html=self.create_tree_view_html(tabname)) + pane_content = self.pane_content_tree_tpl.format(**page_params, tree_data_div=self.generate_tree_view_data_div(tabname)) else: pane_content = self.pane_content_dirs_tpl.format(**page_params, dirs_html=self.create_dirs_view_html(tabname)) diff --git a/modules/ui_gradio_extensions.py b/modules/ui_gradio_extensions.py index 9b83c76a9..2a8a99dc5 100644 --- a/modules/ui_gradio_extensions.py +++ b/modules/ui_gradio_extensions.py @@ -40,9 +40,6 @@ def css_html(): for cssfile in scripts.list_files_with_name("style.css"): head += stylesheet(cssfile) - # Used by clusterize.js - head += '' - user_css = os.path.join(data_path, "user.css") if os.path.exists(user_css): head += stylesheet(user_css) diff --git a/style.css b/style.css index a30355bd6..789c638d2 100644 --- a/style.css +++ b/style.css @@ -1183,6 +1183,30 @@ body.resizing .resize-handle { } /* ========================= */ +.clusterize-scroll { + width: 100%; + height: 100%; + overflow: auto; +} + +.clusterize-content { + outline: 0; + counter-reset: clusterize-counter; +} + +.clusterize-extra-row { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.clusterize-extra-row.clusterize-keep-parity { + display: none; +} + +.clusterize-no-data { + text-align: center; +} + .clusterize-scroll::-webkit-scrollbar { background-color: transparent; width: 16px; @@ -1205,95 +1229,58 @@ body.resizing .resize-handle { .extra-network-pane { display: flex; + flex-direction: column; + flex-wrap: nowrap; height: calc(100vh - 24rem); resize: vertical; min-height: 52rem; - flex-direction: column; overflow: hidden; } .extra-network-pane .extra-network-pane-content-dirs { display: flex; - flex: 1; flex-direction: column; - overflow: hidden; + flex-wrap: nowrap; + width: 100%; + height: 100%; } .extra-network-pane .extra-network-pane-content-tree { display: flex; - flex: 1; - overflow: hidden; -} - -.extra-network-dirs-hidden .extra-network-dirs{ display: none; } -.extra-network-dirs-hidden .extra-network-tree{ display: none; } -.extra-network-dirs-hidden .resize-handle { display: none; } -.extra-network-dirs-hidden .resize-handle-row { display: flex !important; } - -.extra-network-pane .extra-network-tree { - flex: 1; - font-size: 1rem; - border: 1px solid var(--block-border-color); - overflow: clip auto !important; -} - -.extra-network-pane .extra-network-cards { - flex: 3; - overflow: clip auto !important; - border: 1px solid var(--block-border-color); -} - -.extra-network-pane .extra-network-tree .tree-list { - flex: 1; - display: flex; - flex-direction: column; - padding: 0; + flex-direction: row; + flex-wrap: nowrap; width: 100%; - overflow: hidden; + height: 100%; } - -.extra-network-pane .extra-network-cards::-webkit-scrollbar, -.extra-network-pane .extra-network-tree::-webkit-scrollbar { - background-color: transparent; - width: 16px; +.resize-handle-row:has(> .extra-network-tree.hidden) { + display: flex !important; } -.extra-network-pane .extra-network-cards::-webkit-scrollbar-track, -.extra-network-pane .extra-network-tree::-webkit-scrollbar-track { - background-color: transparent; - background-clip: content-box; -} - -.extra-network-pane .extra-network-cards::-webkit-scrollbar-thumb, -.extra-network-pane .extra-network-tree::-webkit-scrollbar-thumb { - background-color: var(--border-color-primary); - border-radius: 16px; - border: 4px solid var(--background-fill-primary); -} - -.extra-network-pane .extra-network-cards::-webkit-scrollbar-button, -.extra-network-pane .extra-network-tree::-webkit-scrollbar-button { +.resize-handle-row:has(> .extra-network-tree.hidden) > .resize-handle { display: none; } -.extra-network-control { - position: relative; +.extra-network-tree { display: flex; - width: 100%; - padding: 0 !important; - margin-top: 0 !important; - margin-bottom: 0 !important; - font-size: 1rem; + border: 1px solid var(--block-border-color); +} + +.extra-network-cards { + display: flex; + border: 1px solid var(--block-border-color); +} + +.extra-network-control { + display: flex; + font-size: var(--body-text-size); text-align: left; user-select: none; background-color: transparent; border: none; - transition: background 33.333ms linear; - grid-template-rows: min-content; - grid-template-columns: minmax(0, auto) repeat(4, min-content); - grid-gap: 0.1rem; + gap: var(--spacing-sm); align-items: start; + padding: var(--spacing-sm); } .extra-network-control small{ @@ -1302,79 +1289,6 @@ body.resizing .resize-handle { margin: 0 0.5rem 0 0.75rem; } -/* BUTTON ELEMENTS */ -/* \ No newline at end of file diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 32ddf2dc9..c355b9906 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -42,6 +42,15 @@ function waitForElement(selector) { }); } +function waitForInitialUiOptionsLoaded() { + return new Promise(resolve => { + (function _wait_for_bool() { + if (initialUiOptionsLoaded) return resolve(); + setTimeout(_wait_for_bool, 100); + })(); + }); +} + function setupProxyListener(target, pre_handler, post_handler) { /** Sets up a listener for variable changes. */ var proxy = new Proxy(target, { @@ -85,41 +94,32 @@ function toggleCss(key, css, enable) { } function extraNetworksRefreshTab(tabname_full) { - // Reapply controls since they don't change on refresh. - let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`); - let div_tree_list = gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`); + if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) { + // Reapply controls since they don't change on refresh. + let btn_tree_view = gradioApp().querySelector(`#${tabname_full}_extra_tree_view`); + let div_tree_list = gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`); - if (btn_tree_view.classList.contains("extra-network-control--enabled")) { - div_tree_list.classList.toggle("hidden", false); // unhide - } else { - div_tree_list.classList.toggle("hidden", true); // hide + if (btn_tree_view.classList.contains("extra-network-control--enabled")) { + div_tree_list.classList.toggle("hidden", false); // unhide + } else { + div_tree_list.classList.toggle("hidden", true); // hide + } } - // Don't do anything else if clusterizers isnt initialized. + // If clusterizer isnt initialized for tab, just return. if (!(tabname_full in clusterizers)) { return; } - for (_tabname_full of Object.keys(clusterizers)) { - if (_tabname_full === tabname_full) { - // Set the selected tab as active since it is now visible on page. - clusterizers[_tabname_full].tree_list.enable(); - clusterizers[_tabname_full].cards_list.enable(); - } else { - // Deactivate all other tabs since they are no longer visible. - clusterizers[_tabname_full].tree_list.disable(); - clusterizers[_tabname_full].cards_list.disable(); - } - } + extraNetworksEnableClusterizer(tabname_full); // Force check update of data. - for (var elem of gradioApp().querySelectorAll('.extra-networks-script-data')) { + for (var elem of gradioApp().querySelectorAll(".extra-network-script-data")) { extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem; } // Rebuild to both update the data and to refresh the sizes of rows. - clusterizers[tabname_full].tree_list.rebuild(); - clusterizers[tabname_full].cards_list.rebuild(); + extraNetworksRebuildClusterizers(tabname_full); } function setupExtraNetworksForTab(tabname) { @@ -142,7 +142,8 @@ function setupExtraNetworksForTab(tabname) { tabnav.insertBefore(controlsDiv, null); var this_tab = gradioApp().querySelector(`#${tabname}_extra_tabs`); - this_tab.querySelectorAll(`:scope > [id^="${tabname}_"]`).forEach(function(elem) { + this_tab.querySelectorAll(`:scope > .tabitem[id^="${tabname}_"]`).forEach(function(elem) { + console.log("SETTING UP TAB:", elem.id); let tabname_full = elem.id; let txt_search; @@ -151,7 +152,7 @@ function setupExtraNetworksForTab(tabname) { console.error(`applyFilter: ${tabname_full} not in clusterizers:`); return; } - // Only touch cards_list. tree_list remains static. + // We only want to sort/filter cards lists clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); }; extraNetworksApplyFilter[tabname_full] = applyFilter; @@ -161,7 +162,7 @@ function setupExtraNetworksForTab(tabname) { console.error(`applySort: ${tabname_full} not in clusterizers:`); return; } - // Only touch cards_list. tree_list remains static. + // We only want to sort/filter cards lists clusterizers[tabname_full].cards_list.applyFilter(txt_search.value); // filter also sorts }; extraNetworksApplySort[tabname_full] = applySort; @@ -175,13 +176,19 @@ function setupExtraNetworksForTab(tabname) { */ // Wait for all required elements before setting up the tab. - waitForElement(`#${tabname_full}_extra_search`) - .then((el) => { - txt_search = el; + waitForInitialUiOptionsLoaded() + .then(() => { + waitForElement(`#${tabname_full}_extra_search`) + .then((el) => { txt_search = el; return; }); }) .then(() => { - waitForElement(`#${tabname_full}_tree_list_scroll_area > #${tabname_full}_tree_list_content_area`) - .then(() => { return; }); + if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) { + waitForElement(`#${tabname_full}_tree_list_scroll_area > #${tabname_full}_tree_list_content_area`) + .then(() => { return; }); + } else { + waitForElement(`#${tabname_full}_dirs`) + .then(() => { return; }); + } }) .then(() => { waitForElement(`#${tabname_full}_cards_list_scroll_area > #${tabname_full}_cards_list_content_area`) @@ -190,16 +197,19 @@ function setupExtraNetworksForTab(tabname) { .then(() => { // Now that we have our elements in DOM, we create the clusterize lists. clusterizers[tabname_full] = { - tree_list: new ExtraNetworksClusterizeTreeList({ - scroll_id: `${tabname_full}_tree_list_scroll_area`, - content_id: `${tabname_full}_tree_list_content_area`, - }), cards_list: new ExtraNetworksClusterizeCardsList({ scroll_id: `${tabname_full}_cards_list_scroll_area`, content_id: `${tabname_full}_cards_list_content_area`, }), }; + if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) { + clusterizers[tabname_full].tree_list = new ExtraNetworksClusterizeTreeList({ + scroll_id: `${tabname_full}_tree_list_scroll_area`, + content_id: `${tabname_full}_tree_list_content_area`, + }); + } + // Debounce search text input. This way we only search after user is done typing. let typing_timer; let done_typing_interval_ms = 250; @@ -271,22 +281,21 @@ function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt, t extraNetworksShowControlsForPage(tabname, tabname_full); for (_tabname_full of Object.keys(clusterizers)) { - if (_tabname_full === tabname_full) { - // Set the selected tab as active since it is now visible on page. - clusterizers[_tabname_full].tree_list.enable(); - clusterizers[_tabname_full].cards_list.enable(); - } else { - // Deactivate all other tabs since they are no longer visible. - clusterizers[_tabname_full].tree_list.disable(); - clusterizers[_tabname_full].cards_list.disable(); + for (const k of Object.keys(clusterizers[_tabname_full])) { + if (_tabname_full === tabname_full) { + // Set the selected tab as active since it is now visible on page. + clusterizers[_tabname_full][k].enable(); + } else { + // Deactivate all other tabs since they are no longer visible. + clusterizers[_tabname_full][k].disable(); + } } } - if (!document.body.contains(clusterizers[tabname_full].tree_list.scroll_elem)) { - clusterizers[tabname_full].tree_list.rebuild(); - } - if (!document.body.contains(clusterizers[tabname_full].cards_list.scroll_elem)) { - clusterizers[tabname_full].cards_list.rebuild(); + for (const v of Object.values(clusterizers[tabname_full])) { + if (!document.body.contains(v.scroll_elem)) { + v.rebuild(); + } } } @@ -300,15 +309,59 @@ function applyExtraNetworkSort(tabname_full) { function setupExtraNetworksData() { // Manually force read the json data. - for (var elem of gradioApp().querySelectorAll('.extra-networks-script-data')) { + for (var elem of gradioApp().querySelectorAll(".extra-network-script-data")) { extra_networks_proxy_listener[`${elem.dataset.tabnameFull}_${elem.dataset.proxyName}`] = elem; } } -function setupExtraNetworks() { - setupExtraNetworksForTab('txt2img'); - setupExtraNetworksForTab('img2img'); +function extraNetworksUpdateClusterizersRows(tabname_full) { + if (tabname_full !== undefined && tabname_full in clusterizers) { + for (const v of Object.values(clusterizers[tabname_full])) { + v.updateRows(); + } + return; + } + // iterate over tabnames + for (const [_tabname_full, tab_clusterizers] of Object.entries(clusterizers)) { + // iterate over clusterizers in tab + for (const v of Object.values(tab_clusterizers)) { + v.updateRows(); + } + } +} +function extraNetworksEnableClusterizer(tabname_full) { + // iterate over tabnames + for (const [_tabname_full, tab_clusterizers] of Object.entries(clusterizers)) { + // iterate over clusterizers in tab + for (const v of Object.values(tab_clusterizers)) { + if (_tabname_full === tabname_full) { + // Set the selected tab as active since it is now visible on page. + v.enable(); + } else { + // Deactivate all other tabs since they are no longer visible. + v.disable(); + } + } + } +} + +function extraNetworksRebuildClusterizers(tabname_full) { + // iterate over tabnames + for (const [_tabname_full, tab_clusterizers] of Object.entries(clusterizers)) { + // iterate over clusterizers in tab + for (const v of Object.values(tab_clusterizers)) { + // If `tabname_full` isn't passed in, then rebuild all. + // If passed `tabname_full` is this tab, then rebuild. + // All other cases, we do not rebuild the tab. + if (tabname_full === undefined || _tabname_full === tabname_full) { + v.rebuild(); + } + } + } +} + +function extraNetworksSetupEventHandlers() { // Handle window resizes. Delay of 500ms after resize before firing an event // as a way of "debouncing" resizes. var resize_timer; @@ -316,21 +369,64 @@ function setupExtraNetworks() { clearTimeout(resize_timer); resize_timer = setTimeout(function() { // Update rows for each list. - for (_tabname_full of Object.keys(clusterizers)) { - clusterizers[_tabname_full].tree_list.updateRows(); - clusterizers[_tabname_full].cards_list.updateRows(); - } + extraNetworksUpdateClusterizersRows(); }, 500); // ms }); // Handle resizeHandle resizes. Only fires on mouseup after resizing. window.addEventListener("resizeHandleResized", (e) => { - for (_tabname_full of Object.keys(clusterizers)) { - // Update rows for each list. - clusterizers[_tabname_full].tree_list.updateRows(); - clusterizers[_tabname_full].cards_list.updateRows(); - } + const tabname_full = e.target.closest(".extra-network-pane").id.replace("_pane", ""); + // Force update rows after resizing. + extraNetworksUpdateClusterizersRows(tabname_full); }); + + window.addEventListener("resizeHandleDblClick", (e) => { + const tabname_full = e.target.closest(".extra-network-pane").id.replace("_pane", ""); + // This event is only applied to the currently selected tab if has clusterize list. + if (!(tabname_full in clusterizers)) { + return; + } + + let max_width = 0; + const scroll_area = e.target.querySelector(".extra-network-tree"); + const content = e.target.querySelector(".extra-network-tree-content"); + const style = window.getComputedStyle(content, null); + const content_lpad = parseInt(style.getPropertyValue("padding-left")); + const content_rpad = parseInt(style.getPropertyValue("padding-right")); + content.querySelectorAll(".tree-list-item").forEach((row) => { + // Temporarily set the grid columns to maximize column width + // so we can calculate the full width of the row. + const prev_grid_template_columns = row.style.gridTemplateColumns; + row.style.gridTemplateColumns = "repeat(5, max-content)"; + if (row.scrollWidth > max_width) { + max_width = row.scrollWidth; + } + row.style.gridTemplateColumns = prev_grid_template_columns; + }); + if (max_width <= 0) { + return; + } + + // Add the container's padding to the result. + max_width += content_lpad + content_rpad; + + // Add the scrollbar's width to the result. Will add 0 if scrollbar isnt present. + max_width += scroll_area.offsetWidth - scroll_area.clientWidth; + + // Add the resize handle's padding to the result and default to minLeftColWidth if necessary. + max_width = Math.max(max_width + e.detail.pad, e.detail.minLeftColWidth); + + e.detail.setLeftColGridTemplate(e.target, max_width); + + extraNetworksUpdateClusterizersRows(tabname_full); + }); +} + +function setupExtraNetworks() { + setupExtraNetworksForTab('txt2img'); + setupExtraNetworksForTab('img2img'); + + extraNetworksSetupEventHandlers(); } function tryToRemoveExtraNetworkFromPrompt(textarea, text, isNeg) { @@ -475,7 +571,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full) { function _updateSearch(_search_text) { // Update search input with select button's path. - var search_input_elem = gradioApp().querySelector("#" + tabname_full + "_extra_search"); + var search_input_elem = gradioApp().querySelector(`#${tabname_full}_extra_search`); search_input_elem.value = _search_text; updateInput(search_input_elem); applyExtraNetworkFilter(tabname_full); @@ -490,7 +586,7 @@ function extraNetworksTreeProcessDirectoryClick(event, btn, tabname_full) { if ("selected" in btn.dataset) { // If folder is selected, deselect button. delete btn.dataset.selected; - _expandOrCollapse(ul, btn); + _expandOrCollapse(btn); _updateSearch(""); } else { // If folder is not selected, select it. @@ -520,6 +616,14 @@ function extraNetworksTreeOnClick(event, tabname_full) { event.stopPropagation(); } +function extraNetworkDirsOnClick(event, tabname_full) { + // Update search input with select button's path. + var search_input_elem = gradioApp().querySelector(`#${tabname_full}_extra_search`); + search_input_elem.value = event.target.textContent.trim(); + updateInput(search_input_elem); + applyExtraNetworkFilter(tabname_full); +} + function extraNetworksControlSearchClearOnClick(event, tabname_full) { /** Clears the search text. */ let clear_btn = event.target.closest(".extra-network-control--search-clear"); @@ -585,11 +689,13 @@ function extraNetworksControlTreeViewOnClick(event, tabname_full) { button.classList.toggle("extra-network-control--enabled"); var show = !button.classList.contains("extra-network-control--enabled"); - gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).classList.toggle("hidden", show); + if ("tree" === opts.extra_networks_tree_view_style.toLowerCase()) { + gradioApp().getElementById(`${tabname_full}_tree_list_scroll_area`).classList.toggle("hidden", show); + } else { + gradioApp().getElementById(`${tabname_full}_dirs`).classList.toggle("hidden", show); + } - // The pane sizes have changed. We need to recalc the sizes for our clusterizers. - clusterizers[tabname_full].tree_list.updateRows(); - clusterizers[tabname_full].cards_list.updateRows(); + extraNetworksUpdateClusterizersRows(tabname_full); } function extraNetworksControlRefreshOnClick(event, tabname_full) { @@ -605,6 +711,7 @@ function extraNetworksControlRefreshOnClick(event, tabname_full) { * @param tabname_full The full active tabname. * i.e. txt2img_lora, img2img_checkpoints, etc. */ + initialUiOptionsLoaded = false; var btn_refresh_internal = gradioApp().getElementById(`${tabname_full}_extra_refresh_internal`); btn_refresh_internal.dispatchEvent(new Event("click")); } @@ -809,4 +916,7 @@ window.addEventListener("keydown", function(event) { } }); +var initialUiOptionsLoaded = false; + onUiLoaded(setupExtraNetworks); +onOptionsChanged(function() { initialUiOptionsLoaded = true; }); \ No newline at end of file diff --git a/javascript/extraNetworksClusterizeList.js b/javascript/extraNetworksClusterizeList.js index 095b12700..8369337f3 100644 --- a/javascript/extraNetworksClusterizeList.js +++ b/javascript/extraNetworksClusterizeList.js @@ -98,7 +98,6 @@ class ExtraNetworksClusterize { callbacks: {}, } ) { - console.log(`scroll_id: ${scroll_id}, content_id: ${content_id}`); if (scroll_id === undefined) { console.error("scroll_id is undefined!"); } diff --git a/javascript/resizeHandle.js b/javascript/resizeHandle.js index 8a233e710..bb1d61a9f 100644 --- a/javascript/resizeHandle.js +++ b/javascript/resizeHandle.js @@ -18,7 +18,7 @@ let parents = []; function setLeftColGridTemplate(el, width) { - el.style.gridTemplateColumns = `${width}px 16px 1fr`; + el.style.gridTemplateColumns = `${width}px ${PAD}px 1fr`; } function displayResizeHandle(parent) { @@ -58,6 +58,18 @@ evt.stopPropagation(); parent.style.gridTemplateColumns = parent.style.originalGridTemplateColumns; + + // Fire custom event to modify left column width externally. + parent.dispatchEvent( + new CustomEvent("resizeHandleDblClick", { + bubbles: true, + detail: { + setLeftColGridTemplate: setLeftColGridTemplate, + pad: PAD, + minLeftColWidth: parent.minLeftColWidth, + }, + }), + ); } const leftCol = parent.firstElementChild; diff --git a/modules/shared_options.py b/modules/shared_options.py index 21643afe0..8be7e8edc 100644 --- a/modules/shared_options.py +++ b/modules/shared_options.py @@ -259,6 +259,7 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s "extra_networks_card_order_field": OptionInfo("Path", "Default order field for Extra Networks cards", gr.Dropdown, {"choices": ['Path', 'Name', 'Date Created', 'Date Modified']}).needs_reload_ui(), "extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(), "extra_networks_tree_view_style": OptionInfo("Dirs", "Extra Networks directory view style", gr.Radio, {"choices": ["Tree", "Dirs"]}).needs_reload_ui(), + "extra_networks_tree_view_show_files": OptionInfo(True, "Show files in tree view.").info("Disabling this option will remove file entries from the tree view and only show directories.").needs_reload_ui(), "extra_networks_tree_view_default_enabled": OptionInfo(True, "Show the Extra Networks directory view by default").needs_reload_ui(), "extra_networks_tree_view_default_width": OptionInfo(180, "Default width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(), "extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"), diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index f0f288460..d62aa2a14 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -45,6 +45,7 @@ def build_row( btn_edit_item_tpl: str, btn_metadata_tpl: str, tree_row_tpl: str, + dir_is_empty: bool = False, parent_id: Optional[int] = None, data_depth: Optional[int] = None, data_path: Optional[str] = None, @@ -62,6 +63,9 @@ def build_row( action_list_item_visual_trailing = "" action_list_item_action_trailing = "" + if dir_is_empty: + action_list_item_action_leading = "" + if btn_type == "file": action_list_item_visual_leading = "🗎" # Action buttons @@ -137,6 +141,17 @@ def build_tree( if div_id in res: raise KeyError("div_id already in res:", div_id) + dir_is_empty = True + for _v in v.values(): + if shared.opts.extra_networks_tree_view_show_files: + dir_is_empty = False + break + elif not isinstance(_v, (ExtraNetworksItem,)): + dir_is_empty = False + break + else: + dir_is_empty = True + res[div_id] = build_row( div_id=div_id, parent_id=parent_id, @@ -146,6 +161,7 @@ def build_tree( data_depth=depth, data_path=k, btn_type="dir", + dir_is_empty=dir_is_empty, btn_copy_path_tpl=btn_copy_path_tpl, btn_edit_item_tpl=btn_edit_item_tpl, btn_metadata_tpl=btn_metadata_tpl, @@ -168,6 +184,10 @@ def build_tree( div_id = last_div_id else: # file + if not shared.opts.extra_networks_tree_view_show_files: + # Don't add file if showing files is disabled in options. + continue + if div_id in res: raise KeyError("div_id already in res:", div_id) @@ -261,7 +281,6 @@ def get_tree(paths: Union[str, list[str]], items: dict[str, ExtraNetworksItem]) def register_page(page): """registers extra networks page for the UI; recommend doing it in on_before_ui() callback for extensions""" - extra_pages.append(page) allowed_dirs.clear() allowed_dirs.update(set(sum([x.allowed_directories_for_previews() for x in extra_pages], []))) @@ -535,7 +554,7 @@ class ExtraNetworksPage: tree_row_tpl=self.tree_row_tpl, ) res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8") - return f'' + return f'' # FIXME def create_dirs_view_html(self, tabname: str) -> str: @@ -598,7 +617,7 @@ class ExtraNetworksPage: res[i] = self.create_item_html(tabname, item, self.card_tpl, div_id=i) res = base64.b64encode(gzip.compress(json.dumps(res).encode("utf-8"))).decode("utf-8") - return f'' + return f'' def create_html(self, tabname, *, empty=False): """Generates an HTML string for the current pane. diff --git a/style.css b/style.css index 789c638d2..a3d010827 100644 --- a/style.css +++ b/style.css @@ -1209,7 +1209,7 @@ body.resizing .resize-handle { .clusterize-scroll::-webkit-scrollbar { background-color: transparent; - width: 16px; + width: var(--text-lg); } .clusterize-scroll::-webkit-scrollbar-track { @@ -1219,8 +1219,8 @@ body.resizing .resize-handle { .clusterize-scroll::-webkit-scrollbar-thumb { background-color: var(--border-color-primary); - border-radius: 16px; - border: 4px solid var(--background-fill-primary); + border-radius: var(--radius-xl); + border: calc(var(--button-border-width) * 4) solid var(--background-fill-primary); } .clusterize-scroll::-webkit-scrollbar-button { @@ -1495,7 +1495,7 @@ body.resizing .resize-handle { transition: background 33.333ms linear; grid-template-rows: min-content; grid-template-areas: "leading-action leading-visual label trailing-visual trailing-action"; - grid-template-columns: min-content min-content minmax(calc(var(--body-text-size) * 4), auto) min-content min-content; + grid-template-columns: min-content min-content minmax(calc(var(--body-text-size) * 1), auto) min-content min-content; grid-gap: var(--spacing-sm); place-items: center stretch; text-align: center; From fb07a6069003bebe06d708bbf26276cd0a6b7e76 Mon Sep 17 00:00:00 2001 From: Sj-Si Date: Fri, 15 Mar 2024 19:11:30 -0400 Subject: [PATCH 004/143] clean up presentation of dirs view. need to resolve issue with initial load of tree view. --- html/extra-networks-dirs-view-button.html | 2 +- html/extra-networks-pane-dirs.html | 4 +- html/extra-networks-pane-tree.html | 2 +- javascript/extraNetworks.js | 43 +++++++++++++++++++-- modules/ui_extra_networks.py | 2 +- style.css | 47 +++++++++++++++-------- 6 files changed, 75 insertions(+), 25 deletions(-) diff --git a/html/extra-networks-dirs-view-button.html b/html/extra-networks-dirs-view-button.html index 3ea116297..8e05e4854 100644 --- a/html/extra-networks-dirs-view-button.html +++ b/html/extra-networks-dirs-view-button.html @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/html/extra-networks-pane-dirs.html b/html/extra-networks-pane-dirs.html index 74f00d1a5..3ded6f12a 100644 --- a/html/extra-networks-pane-dirs.html +++ b/html/extra-networks-pane-dirs.html @@ -1,5 +1,5 @@ -
          -
          +
          +
          {dirs_html}
          diff --git a/html/extra-networks-pane-tree.html b/html/extra-networks-pane-tree.html index 134fa1ea8..2ee0d3c0b 100644 --- a/html/extra-networks-pane-tree.html +++ b/html/extra-networks-pane-tree.html @@ -1,4 +1,4 @@ -
          +
          { + delete elem.dataset.selected; + }); + } + + function _select_button(elem) { + _deselect_all(); + // Update search input with select button's path. + elem.dataset.selected = ""; + txt_search.value = elem.textContent.trim(); + } + + function _deselect_button(elem) { + delete elem.dataset.selected; + txt_search.value = ""; + } + + + if ("selected" in event.target.dataset) { + _deselect_button(event.target); + } else { + _select_button(event.target); + } + + updateInput(txt_search); applyExtraNetworkFilter(tabname_full); } function extraNetworksControlSearchClearOnClick(event, tabname_full) { /** Clears the search text. */ let clear_btn = event.target.closest(".extra-network-control--search-clear"); + + // Deselect all buttons from both dirs view and tree view + gradioApp().querySelectorAll(".extra-network-dirs-view-button").forEach((elem) => { + delete elem.dataset.selected; + }); + + gradioApp().querySelectorAll(".tree-list-item").forEach((elem) => { + delete elem.dataset.selected; + }); + let txt_search = clear_btn.previousElementSibling; txt_search.value = ""; txt_search.dispatchEvent(new CustomEvent("extra-network-control--search-clear", {})); diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index d62aa2a14..00d3eb318 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -588,7 +588,7 @@ class ExtraNetworksPage: subdirs[subdir] = 1 if subdirs: - subdirs = {"": 1, **subdirs} + subdirs = {**subdirs} subdirs_html = "".join([ self.btn_dirs_view_tpl.format(**{ diff --git a/style.css b/style.css index a3d010827..f4ae11339 100644 --- a/style.css +++ b/style.css @@ -1208,17 +1208,17 @@ body.resizing .resize-handle { } .clusterize-scroll::-webkit-scrollbar { - background-color: transparent; + background: transparent; width: var(--text-lg); } .clusterize-scroll::-webkit-scrollbar-track { - background-color: transparent; + background: transparent; background-clip: content-box; } .clusterize-scroll::-webkit-scrollbar-thumb { - background-color: var(--border-color-primary); + background: var(--border-color-primary); border-radius: var(--radius-xl); border: calc(var(--button-border-width) * 4) solid var(--background-fill-primary); } @@ -1237,20 +1237,19 @@ body.resizing .resize-handle { overflow: hidden; } -.extra-network-pane .extra-network-pane-content-dirs { +.extra-network-content { display: flex; - flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; } -.extra-network-pane .extra-network-pane-content-tree { - display: flex; +.extra-network-content--tree { flex-direction: row; - flex-wrap: nowrap; - width: 100%; - height: 100%; +} + +.extra-network-content--dirs { + flex-direction: column; } .resize-handle-row:has(> .extra-network-tree.hidden) { @@ -1276,7 +1275,7 @@ body.resizing .resize-handle { font-size: var(--body-text-size); text-align: left; user-select: none; - background-color: transparent; + background: transparent; border: none; gap: var(--spacing-sm); align-items: start; @@ -1424,20 +1423,20 @@ body.resizing .resize-handle { mask-repeat: no-repeat; mask-position: center center; mask-size: 100%; - background-color: var(--input-placeholder-color); + background: var(--input-placeholder-color); } .extra-network-control .extra-network-control--enabled { - background-color: rgba(0, 0, 0, 0.1); + background: rgba(0, 0, 0, 0.1); border-radius: 0.25rem; } .dark .extra-network-control .extra-network-control--enabled { - background-color: rgba(255, 255, 255, 0.15); + background: rgba(255, 255, 255, 0.15); } .extra-network-control .extra-network-control--enabled .extra-network-control--icon{ - background-color: var(--button-secondary-text-color); + background: var(--button-secondary-text-color); } /* ==== REFRESH ICON ACTIONS ==== */ @@ -1508,7 +1507,7 @@ body.resizing .resize-handle { } .tree-list-item[data-selected] { - background-color: var(--button-secondary-background-fill); + background: var(--button-secondary-background-fill); } .tree-list-item > span { @@ -1610,3 +1609,19 @@ body.resizing .resize-handle { padding: 0; margin: 0; } + +.extra-network-dirs-view { + display: flex; + flex-direction: row; + gap: var(--spacing-sm); +} + +.extra-network-dirs-view-button:hover { + -webkit-transition: all 0.05s ease-in-out; + transition: all 0.05s ease-in-out; + background: var(--button-secondary-background-fill-hover); +} + +.extra-network-dirs-view-button[data-selected] { + background: var(--button-primary-background-fill); +} \ No newline at end of file From 9194c0b8b2f249e639ffa720016574398b343d95 Mon Sep 17 00:00:00 2001 From: Sj-Si Date: Mon, 18 Mar 2024 21:59:41 -0400 Subject: [PATCH 005/143] fix more bugs. clean up more. --- html/extra-networks-pane-dirs.html | 9 - html/extra-networks-pane-tree.html | 13 - html/extra-networks-pane.html | 57 ++- javascript/extraNetworks.js | 407 ++++++++++----------- javascript/extraNetworksClusterizeList.js | 87 +++-- modules/shared_options.py | 4 +- modules/ui_extra_networks.py | 410 ++++++++++------------ style.css | 164 ++++----- 8 files changed, 561 insertions(+), 590 deletions(-) delete mode 100644 html/extra-networks-pane-dirs.html delete mode 100644 html/extra-networks-pane-tree.html diff --git a/html/extra-networks-pane-dirs.html b/html/extra-networks-pane-dirs.html deleted file mode 100644 index 3ded6f12a..000000000 --- a/html/extra-networks-pane-dirs.html +++ /dev/null @@ -1,9 +0,0 @@ -
          -
          - {dirs_html} -
          -
          -
          -
          -
          -{cards_data_div} diff --git a/html/extra-networks-pane-tree.html b/html/extra-networks-pane-tree.html deleted file mode 100644 index 2ee0d3c0b..000000000 --- a/html/extra-networks-pane-tree.html +++ /dev/null @@ -1,13 +0,0 @@ -
          -
          -
          -
          -
          -
          -
          -
          -{tree_data_div} -{cards_data_div} \ No newline at end of file diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html index fab128471..7b7de80f1 100644 --- a/html/extra-networks-pane.html +++ b/html/extra-networks-pane.html @@ -1,5 +1,5 @@ -
          -