mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2026-02-01 21:32:01 -08:00
Fix bugs. clean up. Need to finish code cleanup.
This commit is contained in:
Sj-Si
parent
83e85ad0e9
commit
f490498396
9 changed files with 268 additions and 280 deletions
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 = "";
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue