mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2024-06-07 21:20:49 +00:00
Fix bugs with resize grid. Add documentation. Add example code.
This commit is contained in:
Sj-Si
parent
ee81dadda8
commit
4a2c806448
@ -163,7 +163,7 @@
|
||||
<div class="extra-network-content extra-network-content--container resize-grid">
|
||||
<div id="{tabname}_{extra_networks_tabname}_dirs_view_row" class="resize-grid--row"
|
||||
style="{dirs_view_row_style}" {dirs_view_row_data_attributes}>
|
||||
<div id="{tabname}_{extra_networks_tabname}_dirs_view_col" class="resize-grid--col">
|
||||
<div id="{tabname}_{extra_networks_tabname}_dirs_view_cell" class="resize-grid--cell" data-min-size="0px" style="flex: 1 1 0px;">
|
||||
<div class="extra-network-content extra-network-content--dirs-view styled-scrollbar">
|
||||
{dirs_html}
|
||||
</div>
|
||||
@ -171,8 +171,8 @@
|
||||
</div>
|
||||
<div id="{tabname}_{extra_networks_tabname}_main_row" class="resize-grid--row" style="{main_row_style}"
|
||||
{main_row_data_attributes}>
|
||||
<div id="{tabname}_{extra_networks_tabname}_tree_view_col" class="resize-grid--col"
|
||||
style="{tree_view_col_style}" {tree_view_col_data_attributes}>
|
||||
<div id="{tabname}_{extra_networks_tabname}_tree_view_cell" class="resize-grid--cell"
|
||||
style="{tree_view_cell_style}" {tree_view_cell_data_attributes}>
|
||||
<div class="extra-network-content extra-network-content--tree-view">
|
||||
<div id='{tabname}_{extra_networks_tabname}_tree_list_loading_splash'
|
||||
class='extra-network-list-splash'>
|
||||
@ -186,8 +186,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="{tabname}_{extra_networks_tabname}_card_view_col" class="resize-grid--col"
|
||||
style="{card_view_col_style}" {card_view_col_data_attributes}>
|
||||
<div id="{tabname}_{extra_networks_tabname}_card_view_cell" class="resize-grid--cell"
|
||||
style="{card_view_cell_style}" {card_view_cell_data_attributes}>
|
||||
<div class="extra-network-content extra-network-content--card-view extra-network-cards">
|
||||
<div id='{tabname}_{extra_networks_tabname}_card_list_loading_splash'
|
||||
class='extra-network-list-splash'>
|
||||
@ -202,8 +202,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="{tabname}_{extra_networks_tabname}_dets_view_col" class="resize-grid--col"
|
||||
style="{dets_view_col_style}" {dets_view_col_data_attributes}>
|
||||
<div id="{tabname}_{extra_networks_tabname}_dets_view_cell" class="resize-grid--cell"
|
||||
style="{dets_view_cell_style}" {dets_view_cell_data_attributes}>
|
||||
<div class="extra-network-content extra-network-content--dets-view"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
fetchWithRetryAndBackoff,
|
||||
isElementLogError,
|
||||
isNumber,
|
||||
getComputedBorderDims,
|
||||
waitForKeyInObject,
|
||||
isNullOrUndefined,
|
||||
debounce,
|
||||
@ -370,10 +371,10 @@ class ExtraNetworksTab {
|
||||
const div_tree = this.container_elem.querySelector(".extra-network-content--tree-view");
|
||||
const div_card = this.container_elem.querySelector(".extra-network-content--card-view");
|
||||
const div_dets = this.container_elem.querySelector(".extra-network-content--dets-view");
|
||||
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.resize_grid.toggleElem(div_dets, this.dets_view_en);
|
||||
this.resize_grid.toggle({elem: div_dirs, override: this.dirs_view_en});
|
||||
this.resize_grid.toggle({elem: div_tree, override: this.tree_view_en});
|
||||
this.resize_grid.toggle({elem: div_card, override: this.card_view_en});
|
||||
this.resize_grid.toggle({elem: div_dets, override: this.dets_view_en});
|
||||
|
||||
await Promise.all([this.setupTreeList(), this.setupCardList()]);
|
||||
this.tree_list.enable(this.tree_view_en);
|
||||
@ -438,10 +439,10 @@ class ExtraNetworksTab {
|
||||
const div_tree = this.container_elem.querySelector(".extra-network-content--tree-view");
|
||||
const div_card = this.container_elem.querySelector(".extra-network-content--card-view");
|
||||
const div_dets = this.container_elem.querySelector(".extra-network-content--dets-view");
|
||||
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.resize_grid.toggleElem(div_dets, this.dets_view_en);
|
||||
this.resize_grid.toggle({elem: div_dirs, override: this.dirs_view_en});
|
||||
this.resize_grid.toggle({elem: div_tree, override: this.tree_view_en});
|
||||
this.resize_grid.toggle({elem: div_card, override: this.card_view_en});
|
||||
this.resize_grid.toggle({elem: div_dets, override: this.dets_view_en});
|
||||
|
||||
this.tree_list.enable(this.tree_view_en);
|
||||
this.card_list.enable(this.card_view_en);
|
||||
@ -1218,7 +1219,7 @@ async function extraNetworksControlTreeViewOnClick(event) {
|
||||
tab.tree_view_en = "selected" in btn.dataset;
|
||||
|
||||
const div_tree = tab.container_elem.querySelector(".extra-network-content--tree-view");
|
||||
tab.resize_grid.toggleElem(div_tree, tab.tree_view_en);
|
||||
tab.resize_grid.toggle({elem: div_tree, override: tab.tree_view_en});
|
||||
tab.tree_list.enable(tab.tree_view_en);
|
||||
|
||||
// If the tree list hasn't loaded yet, we need to force it to load.
|
||||
@ -1243,7 +1244,7 @@ function extraNetworksControlDirsViewOnClick(event) {
|
||||
tab.dirs_view_en = "selected" in btn.dataset;
|
||||
|
||||
const div_dirs = tab.container_elem.querySelector(".extra-network-content--dirs-view");
|
||||
tab.resize_grid.toggleElem(div_dirs, tab.dirs_view_en);
|
||||
tab.resize_grid.toggle({elem: div_dirs, override: tab.dirs_view_en});
|
||||
|
||||
tab.applyListButtonStates();
|
||||
}
|
||||
@ -1260,7 +1261,7 @@ async function extraNetworksControlCardViewOnClick(event) {
|
||||
tab.card_view_en = "selected" in btn.dataset;
|
||||
|
||||
const div_card = tab.container_elem.querySelector(".extra-network-content--card-view");
|
||||
tab.resize_grid.toggleElem(div_card, tab.card_view_en);
|
||||
tab.resize_grid.toggle({elem: div_card, override: tab.card_view_en});
|
||||
tab.card_list.enable(tab.card_view_en);
|
||||
|
||||
// If the tree list hasn't loaded yet, we need to force it to load.
|
||||
@ -1283,7 +1284,7 @@ function extraNetworksControlDetsViewOnClick(event) {
|
||||
tab.dets_view_en = "selected" in btn.dataset;
|
||||
|
||||
const div_dets = tab.container_elem.querySelector(".extra-network-content--dets-view");
|
||||
tab.resize_grid.toggleElem(div_dets, tab.dets_view_en);
|
||||
tab.resize_grid.toggle({elem: div_dets, override: tab.dets_view_en});
|
||||
}
|
||||
|
||||
function extraNetworksControlRefreshOnClick(event) {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
178
javascript/resizeGridExample.html
Normal file
178
javascript/resizeGridExample.html
Normal file
@ -0,0 +1,178 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
background: #333333;
|
||||
margin: 50px;
|
||||
}
|
||||
|
||||
.my-content {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#cell_0_0 {
|
||||
background: #ffb3ba;
|
||||
}
|
||||
|
||||
#cell_0_1 {
|
||||
background: #ffdfba;
|
||||
}
|
||||
|
||||
#cell_1_0 {
|
||||
background: #baffc9;
|
||||
}
|
||||
|
||||
#cell_1_1 {
|
||||
background: #bae1ff;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.resizing {
|
||||
cursor: col-resize !important;
|
||||
}
|
||||
|
||||
body.resizing * {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
body.resizing .resize-grid--handle {
|
||||
pointer-events: initial !important;
|
||||
}
|
||||
|
||||
body.resizing.resize-grid-col {
|
||||
cursor: col-resize !important;
|
||||
}
|
||||
|
||||
body.resizing.resize-grid-row {
|
||||
cursor: row-resize !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 50vw;
|
||||
height: 70vh;
|
||||
overflow: hidden;
|
||||
border: 1px solid white;
|
||||
padding: 10px;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.resize-grid,
|
||||
.resize-grid--row,
|
||||
.resize-grid--col,
|
||||
.resize-grid--cell {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
gap: 0 !important;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.resize-grid {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.resize-grid--row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.resize-grid--col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.resize-grid--handle {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.resize-grid--handle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.resize-grid--row-handle {
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.resize-grid--row-handle::after {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-top: 1px dashed white;
|
||||
}
|
||||
|
||||
.resize-grid--col-handle {
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.resize-grid--col-handle::after {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-left: 1px dashed white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="resize-grid">
|
||||
<div class="resize-grid--row" style="flex: 1 0 50px;" data-min-size="25px">
|
||||
<div class="resize-grid--cell" style="flex: 0 0 50px;" data-min-size="25px">
|
||||
<div id="cell_0_0" class="my-content">0</div>
|
||||
</div>
|
||||
<div class="resize-grid--cell" style="flex: 1 0 50px;" data-min-size="25px">
|
||||
<div id="cell_0_1" class="my-content">1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resize-grid--row" style="flex: 0 0 50px;" data-min-size="25px">
|
||||
<div class="resize-grid--cell" style="flex: 1 0 50px;" data-min-size="25px">
|
||||
<div id="cell_1_0" class="my-content">2</div>
|
||||
</div>
|
||||
<div class="resize-grid--cell" style="flex: 0 0 50px;" data-min-size="25px">
|
||||
<div id="cell_1_1" class="my-content">3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="toggle-button" data-grid-elem-id="cell_0_0">HIDE cell_0_0</button>
|
||||
<button class="toggle-button" data-grid-elem-id="cell_0_1">HIDE cell_0_1</button>
|
||||
<button class="toggle-button" data-grid-elem-id="cell_1_0">HIDE cell_1_0</button>
|
||||
<button class="toggle-button" data-grid-elem-id="cell_1_1">HIDE cell_1_1</button>
|
||||
<script type="text/javascript" src="utils.js"></script>
|
||||
<script type="text/javascript" src="resizeGrid.js"></script>
|
||||
<script type="text/javascript">
|
||||
const grid_elem = document.querySelector(".resize-grid");
|
||||
const grid = resizeGridSetup(grid_elem);
|
||||
const btns = document.querySelectorAll(".toggle-button");
|
||||
btns.forEach(btn => {
|
||||
btn.addEventListener("click", onToggleButton);
|
||||
});
|
||||
function onToggleButton(event) {
|
||||
const btn = event.target.closest("button");
|
||||
const id = btn.dataset.gridElemId;
|
||||
const grid_elem = document.querySelector(`#${id}`);
|
||||
grid.toggle({ elem: grid_elem });
|
||||
btn.textContent = btn.textContent === `HIDE ${id}` ? `SHOW ${id}` : `HIDE ${id}`;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -169,6 +169,25 @@ function querySelectorThrowError(selector) {
|
||||
return elem;
|
||||
}
|
||||
|
||||
const validateArrayType = (arr, type_check_fn) => {
|
||||
/** Validates that a variable is an array with members of a specified type.
|
||||
* `type_check_fn` must accept array elements as arguments and return whether
|
||||
* they match the expected type.
|
||||
* `arr` will be wrapped in an array if it is not already an array.
|
||||
*/
|
||||
isNullOrUndefinedThrowError(type_check_fn);
|
||||
if (isNullOrUndefined(arr)) {
|
||||
return [];
|
||||
}
|
||||
if (!Array.isArray(arr) && type_check_fn(arr)) {
|
||||
return [arr];
|
||||
} else if (Array.isArray(arr) && arr.every((x) => type_check_fn(x))) {
|
||||
return arr;
|
||||
} else {
|
||||
throw new Error('Invalid array types:', arr);
|
||||
}
|
||||
};
|
||||
|
||||
/** Functions for getting dimensions of elements. */
|
||||
function getStyle(elem) {
|
||||
return window.getComputedStyle ? window.getComputedStyle(elem) : elem.currentStyle;
|
||||
|
||||
@ -862,17 +862,17 @@ class ExtraNetworksPage:
|
||||
if not tree_view_en and not card_view_en and not dets_view_en:
|
||||
main_row_data_attributes += ""
|
||||
|
||||
tree_view_col_data_attributes = "data-min-size=\"10vw\""
|
||||
tree_view_cell_data_attributes = "data-min-size=\"10vw\""
|
||||
if not tree_view_en:
|
||||
tree_view_col_data_attributes += ""
|
||||
tree_view_cell_data_attributes += ""
|
||||
|
||||
card_view_col_data_attributes = "data-min-size=\"10vw\""
|
||||
card_view_cell_data_attributes = "data-min-size=\"10vw\""
|
||||
if not card_view_en:
|
||||
card_view_col_data_attributes += ""
|
||||
card_view_cell_data_attributes += ""
|
||||
|
||||
dets_view_col_data_attributes = "data-min-size=\"10vw\""
|
||||
dets_view_cell_data_attributes = "data-min-size=\"10vw\""
|
||||
if not dets_view_en:
|
||||
dets_view_col_data_attributes += ""
|
||||
dets_view_cell_data_attributes += ""
|
||||
|
||||
dirs_view_row_size = shared.opts.extra_networks_dirs_view_default_height
|
||||
tree_view_size = shared.opts.extra_networks_tree_view_default_width
|
||||
@ -884,9 +884,9 @@ class ExtraNetworksPage:
|
||||
|
||||
dirs_view_row_style = f"flex: 0 0 {dirs_view_row_size}px;"
|
||||
main_row_style = "flex: 1 0 0px;" # expand to fill
|
||||
tree_view_col_style = f"flex: 0 0 {tree_view_size}px;"
|
||||
card_view_col_style = f"flex: 1 0 {card_view_size}px;"
|
||||
dets_view_col_style = f"flex: 0 0 {dets_view_size}px;"
|
||||
tree_view_cell_style = f"flex: 0 0 {tree_view_size}px;"
|
||||
card_view_cell_style = f"flex: 1 0 {card_view_size}px;"
|
||||
dets_view_cell_style = f"flex: 0 0 {dets_view_size}px;"
|
||||
|
||||
return self.pane_tpl.format(
|
||||
tabname=tabname,
|
||||
@ -903,14 +903,14 @@ class ExtraNetworksPage:
|
||||
btn_dets_view_data_attributes=btn_dets_view_data_attributes,
|
||||
dirs_view_row_style=dirs_view_row_style,
|
||||
main_row_style=main_row_style,
|
||||
tree_view_col_style=tree_view_col_style,
|
||||
card_view_col_style=card_view_col_style,
|
||||
dets_view_col_style=dets_view_col_style,
|
||||
tree_view_cell_style=tree_view_cell_style,
|
||||
card_view_cell_style=card_view_cell_style,
|
||||
dets_view_cell_style=dets_view_cell_style,
|
||||
dirs_view_row_data_attributes=dirs_view_row_data_attributes,
|
||||
main_row_data_attributes=main_row_data_attributes,
|
||||
tree_view_col_data_attributes=tree_view_col_data_attributes,
|
||||
card_view_col_data_attributes=card_view_col_data_attributes,
|
||||
dets_view_col_data_attributes=dets_view_col_data_attributes,
|
||||
tree_view_cell_data_attributes=tree_view_cell_data_attributes,
|
||||
card_view_cell_data_attributes=card_view_cell_data_attributes,
|
||||
dets_view_cell_data_attributes=dets_view_cell_data_attributes,
|
||||
dirs_html=dirs_html,
|
||||
card_list_loading_splash_content=card_list_loading_splash_content,
|
||||
card_list_no_data_splash_content=card_list_no_data_splash_content,
|
||||
|
||||
@ -1201,7 +1201,7 @@ body.resizing.resize-grid-row {
|
||||
|
||||
/* ==== RESIZE HANDLE GRID ==== */
|
||||
|
||||
.resize-grid, .resize-grid--row, .resize-grid--col {
|
||||
.resize-grid, .resize-grid--row, .resize-grid--col, .resize-grid--cell {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
@ -1225,11 +1225,6 @@ body.resizing.resize-grid-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.resize-grid--cell {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.resize-grid--handle {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user