mirrors/stable-diffusion-webui
1
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2026-02-03 06:13:06 -08:00
Code Issues Projects Releases Packages Wiki Activity

Add a resizable grid component and apply to extra networks tabs.

Browse source
This commit is contained in:
Sj-Si 2024-05-20 16:34:53 -04:00
parent 4e9760c49f
commit 50a5ad88d7
7 changed files with 1352 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

76
javascript/extraNetworks.js
View file

@ -15,6 +15,7 @@
debounce,
waitForBool,
copyToClipboard,
resizeGridSetup,
*/
/*eslint no-undef: "error"*/
@ -115,6 +116,7 @@ class ExtraNetworksTab {
tree_list_splash_state = null;
directory_filters = {};
list_button_states = {};
resize_grid = null;
constructor({tabname, extra_networks_tabname}) {
this.tabname = tabname;
this.extra_networks_tabname = extra_networks_tabname;
@ -195,6 +197,8 @@ class ExtraNetworksTab {
this.card_view_en = false;
this.directory_filters = {};
this.list_button_states = {};
this.resize_grid.destroy();
this.resize_grid = null;
}
async registerPrompt() {
@ -360,19 +364,9 @@ class ExtraNetworksTab {
const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view");
const div_tree = this.container_elem.querySelector(".extra-network-content--tree-view");
const div_card = this.container_elem.querySelector(".extra-network-content--card-view");
// Remove "hidden" class if button is enabled, otherwise add it.
div_dirs.classList.toggle("hidden", !this.dirs_view_en);
div_tree.classList.toggle("hidden", !this.tree_view_en);
div_card.classList.toggle("hidden", !this.card_view_en);
// Apply the current resize handle classes.
const resize_handle_row = div_tree.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", !this.tree_view_en || !this.card_view_en);
if (this.tree_view_en && !this.card_view_en) {
div_tree.style.flexGrow = 1;
} else {
div_tree.style.flexGrow = null;
}
this.resize_grid.toggleElem(div_dirs, this.dirs_view_en);
this.resize_grid.toggleElem(div_tree, this.tree_view_en);
this.resize_grid.toggleElem(div_card, this.card_view_en);
await Promise.all([this.setupTreeList(), this.setupCardList()]);
this.tree_list.enable(this.tree_view_en);
@ -404,21 +398,17 @@ class ExtraNetworksTab {
});
this.showControls();
if (isNullOrUndefined(this.resize_grid)) {
const elem = this.container_elem.querySelector(".resize-grid");
this.resize_grid = resizeGridSetup(elem, {id: `${this.tabname_full}_resize_grid`});
}
const div_dirs = this.container_elem.querySelector(".extra-network-content--dirs-view");
const div_tree = this.container_elem.querySelector(".extra-network-content--tree-view");
const div_card = this.container_elem.querySelector(".extra-network-content--card-view");
div_dirs.classList.toggle("hidden", !this.dirs_view_en);
div_tree.classList.toggle("hidden", !this.tree_view_en);
div_card.classList.toggle("hidden", !this.card_view_en);
// Apply the current resize handle classes.
const resize_handle_row = div_tree.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", !this.tree_view_en || !this.card_view_en);
if (this.tree_view_en && !this.card_view_en) {
div_tree.style.flexGrow = 1;
} else {
div_tree.style.flexGrow = null;
}
this.resize_grid.toggleElem(div_dirs, this.dirs_view_en);
this.resize_grid.toggleElem(div_tree, this.tree_view_en);
this.resize_grid.toggleElem(div_card, this.card_view_en);
this.tree_list.enable(this.tree_view_en);
this.card_list.enable(this.card_view_en);
@ -1195,22 +1185,9 @@ async function extraNetworksControlTreeViewOnClick(event) {
tab.tree_view_en = "selected" in btn.dataset;
const div_tree = tab.container_elem.querySelector(".extra-network-content--tree-view");
div_tree.classList.toggle("hidden", !tab.tree_view_en);
tab.resize_grid.toggleElem(div_tree, tab.tree_view_en);
tab.tree_list.enable(tab.tree_view_en);
// Apply the resize-handle-hidden class to the resize-handle-row.
// NOTE: This can be simplified using only css with the ":has" selector however
// this is only recently supported in firefox. So for now we just add a class
// to the resize-handle-row instead.
const resize_handle_row = div_tree.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", !tab.card_view_en || !tab.tree_view_en);
if (tab.tree_view_en && !tab.card_view_en) {
div_tree.style.flexGrow = 1;
} else {
div_tree.style.flexGrow = null;
}
// If the tree list hasn't loaded yet, we need to force it to load.
// This can happen if tree view is disabled by default or before refresh.
// Then after refresh, enabling the tree view will require a load.
@ -1232,9 +1209,8 @@ function extraNetworksControlDirsViewOnClick(event) {
btn.toggleAttribute("data-selected");
tab.dirs_view_en = "selected" in btn.dataset;
tab.container_elem.querySelector(
".extra-network-content--dirs-view"
).classList.toggle("hidden", !tab.dirs_view_en);
const div_dirs = tab.container_elem.querySelector(".extra-network-content--dirs-view");
tab.resize_grid.toggleElem(div_dirs, tab.dirs_view_en);
tab.applyListButtonStates();
}
@ -1250,24 +1226,10 @@ async function extraNetworksControlCardViewOnClick(event) {
btn.toggleAttribute("data-selected");
tab.card_view_en = "selected" in btn.dataset;
const div_tree = tab.container_elem.querySelector(".extra-network-content--tree-view");
const div_card = tab.container_elem.querySelector(".extra-network-content--card-view");
div_card.classList.toggle("hidden", !tab.card_view_en);
tab.resize_grid.toggleElem(div_card, tab.card_view_en);
tab.card_list.enable(tab.card_view_en);
// Apply the resize-handle-hidden class to the resize-handle-row.
// NOTE: This can be simplified using only css with the ":has" selector however
// this is only recently supported in firefox. So for now we just add a class
// to the resize-handle-row instead.
const resize_handle_row = div_card.closest(".resize-handle-row");
resize_handle_row.classList.toggle("resize-handle-hidden", !tab.card_view_en || !tab.tree_view_en);
if (tab.tree_view_en && !tab.card_view_en) {
div_tree.style.flexGrow = 1;
} else {
div_tree.style.flexGrow = null;
}
// If the tree list hasn't loaded yet, we need to force it to load.
// This can happen if tree view is disabled by default or before refresh.
// Then after refresh, enabling the tree view will require a load.

1165
javascript/resizeGrid.js Normal file
View file

File diff suppressed because it is too large Load diff

24
javascript/utils.js
View file

@ -665,3 +665,27 @@ function waitForVisible(elem, callback) {
}).observe(elem);
if (!callback) return new Promise(resolve => callback = resolve);
}
function cssRelativeUnitToPx(css_value, target) {
// https://stackoverflow.com/a/66569574
// doesnt work on `%` unit.
target = target || document.body;
const units = {
px: x => x, // no conversion needed here
rem: x => x * parseFloat(getComputedStyle(document.documentElement).fontSize),
em: x => x * parseFloat(getComputedStyle(target).fontSize),
vw: x => x / 100 * window.innerWidth,
vh: x => x / 100 * window.innerHeight,
};
const re = new RegExp(`^([-+]?(?:\\d+(?:\\.\\d+)?))(${Object.keys(units).join('|')})$`, 'i');
const matches = css_value.toString().trim().match(re);
if (matches) {
const value = Number(matches[1]);
const unit = matches[2].toLocaleLowerCase();
if (unit in units) {
return units[unit](value);
}
}
return css_value;
}