mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2026-02-01 05:11:19 -08:00
Fix bugs with resize grid. Add documentation. Add example code.
This commit is contained in:
Sj-Si
parent
ee81dadda8
commit
4a2c806448
7 changed files with 865 additions and 641 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue