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

fix bugs. add initial card detail view code

Browse source
This commit is contained in:
Sj-Si 2024-05-22 12:54:00 -04:00
parent 17e17ce7df
commit ee81dadda8
6 changed files with 251 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

53
javascript/extraNetworks.js
View file

@ -112,6 +112,7 @@ class ExtraNetworksTab {
dirs_view_en = false;
tree_view_en = false;
card_view_en = false;
dets_view_en = false;
card_list_splash_state = null;
tree_list_splash_state = null;
directory_filters = {};
@ -149,6 +150,7 @@ class ExtraNetworksTab {
this.dirs_view_en = opts.extra_networks_dirs_view_default_enabled;
this.tree_view_en = opts.extra_networks_tree_view_default_enabled;
this.card_view_en = opts.extra_networks_card_view_default_enabled;
this.dets_view_en = opts.extra_networks_dets_view_default_enabled;
// setup this tab's controls
this.controls_elem.id = `${this.tabname_full}_controls`;
@ -195,6 +197,7 @@ class ExtraNetworksTab {
this.tree_view_en = false;
this.dirs_view_en = false;
this.card_view_en = false;
this.dets_view_en = false;
this.directory_filters = {};
this.list_button_states = {};
this.resize_grid.destroy();
@ -357,16 +360,20 @@ class ExtraNetworksTab {
const btn_dirs_view = this.controls_elem.querySelector(".extra-network-control--dirs-view");
const btn_tree_view = this.controls_elem.querySelector(".extra-network-control--tree-view");
const btn_card_view = this.controls_elem.querySelector(".extra-network-control--card-view");
const btn_dets_view = this.controls_elem.querySelector(".extra-network-control--dets-view");
this.dirs_view_en = "selected" in btn_dirs_view.dataset;
this.tree_view_en = "selected" in btn_tree_view.dataset;
this.card_view_en = "selected" in btn_card_view.dataset;
this.dets_view_en = "selected" in btn_dets_view.dataset;
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");
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);
await Promise.all([this.setupTreeList(), this.setupCardList()]);
this.tree_list.enable(this.tree_view_en);
@ -390,6 +397,31 @@ class ExtraNetworksTab {
this.refresh_in_progress = false;
}
setupResizeGrid() {
const set_size_override = (grid_item, size_px) => {
// Limit dirs_view max height to the max height of its contents.
if (grid_item.elem.id === `${this.tabname_full}_dirs_view_row`) {
const elem = grid_item.elem.querySelector(".extra-network-content--dirs-view");
if (!isElementLogError(elem)) {
return;
}
const max_height = elem.scrollHeight + getComputedBorderDims(elem).height;
return Math.min(size_px, max_height);
}
};
const grid_elem = this.container_elem.querySelector(".resize-grid");
this.resize_grid = resizeGridSetup(
grid_elem,
{
id: `${this.tabname_full}_resize_grid`,
callbacks: {
set_size_override: set_size_override.bind(this),
},
},
);
}
async load(show_prompt, show_neg_prompt) {
this.movePrompt(show_prompt, show_neg_prompt);
this.updateSplashState({
@ -399,16 +431,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`});
this.setupResizeGrid();
}
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");
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.tree_list.enable(this.tree_view_en);
this.card_list.enable(this.card_view_en);
@ -1238,6 +1271,21 @@ async function extraNetworksControlCardViewOnClick(event) {
}
}
function extraNetworksControlDetsViewOnClick(event) {
/** Handles `onclick` events for the Card Details View button.
*
* Toggles the card details view in the extra networks pane.
*/
const btn = event.target.closest(".extra-network-control--dets-view");
const controls = btn.closest(".extra-network-controls");
const tab = extra_networks_tabs[controls.dataset.tabnameFull];
btn.toggleAttribute("data-selected");
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);
}
function extraNetworksControlRefreshOnClick(event) {
/** Handles `onclick` events for the Refresh Page button.
*
@ -1593,6 +1641,7 @@ function extraNetworksSetupEventDelegators() {
".extra-network-control--dirs-view": extraNetworksControlDirsViewOnClick,
".extra-network-control--tree-view": extraNetworksControlTreeViewOnClick,
".extra-network-control--card-view": extraNetworksControlCardViewOnClick,
".extra-network-control--dets-view": extraNetworksControlDetsViewOnClick,
".extra-network-control--refresh": extraNetworksControlRefreshOnClick,
};

122
javascript/resizeGrid.js
View file

@ -123,12 +123,31 @@ class ResizeGridItem {
handle = null;
visible = true;
pad_px = PAD_PX;
constructor({id, parent, elem, axis} = {}) {
callbacks = {
/** Allows user to modify the `size_px` value passed to setSize().
* Default callback just returns null. (no op).
* Args:
* item [ResizeGridItem]: This class instance.
* size_px [int]: The size (in px) to be overridden.
* Returns:
* int: The overridden setSize `size_px` paremeter. If null/undefined,
* then `size_px` does not get modified.
*/
set_size_override: (item, size_px) => { return; },
};
constructor({id, parent, elem, axis, callbacks} = {}) {
this.id = isNullOrUndefined(id) ? _gen_id_string() : id;
this.parent = parent; // the parent class instance
this.elem = elem;
this.axis = _axis_to_int(axis);
// Parse user specified callback overrides.
if (isObject(callbacks)) {
if (isFunction(callbacks.set_size_override)) {
this.callbacks.set_size_override = callbacks.set_size_override;
}
}
this.is_flex_grow = Boolean(parseInt(this.elem.style.flexGrow));
this.default_is_flex_grow = this.is_flex_grow;
let flex_basis = parseInt(cssRelativeUnitToPx(this.elem.style.flexBasis));
@ -227,9 +246,14 @@ class ResizeGridItem {
return new_size - curr_size;
}
setSize(px) {
this.elem.style.flexBasis = parseInt(px) + 'px';
this.render();
setSize(size_px) {
const new_size_px = this.callbacks.set_size_override(this, size_px);
if (isNumber(new_size_px)) {
size_px = new_size_px;
}
this.elem.style.flexBasis = parseInt(size_px) + 'px';
//this.render();
return size_px;
}
getSize() {
@ -281,10 +305,11 @@ class ResizeGridItem {
class ResizeGridContainer {
/** Class defining a collection of ResizeGridItem and ResizeGridHandle instances. */
constructor({id, parent, elem} = {}) {
constructor({id, parent, elem, callbacks} = {}) {
this.id = isNullOrUndefined(id) ? _gen_id_string() : id;
this.parent = parent;
this.elem = elem;
this.callbacks = callbacks;
this.original_css_text = this.elem.style.cssText;
this.grid = [];
@ -312,6 +337,7 @@ class ResizeGridContainer {
id: id,
parent: this,
elem: elem,
callbacks: this.callbacks,
axis: 0,
});
row.genHandle('resize-grid--row-handle');
@ -327,6 +353,7 @@ class ResizeGridContainer {
id: id,
parent: this,
elem: elem,
callbacks: this.callbacks,
axis: 1,
});
col.genHandle('resize-grid--col-handle');
@ -339,7 +366,8 @@ class ResizeGridContainer {
build() {
/** Generates rows/cols based on this instance element's content. */
let row_elems = Array.from(this.elem.querySelectorAll('.resize-grid--row'));
let row_elems = Array.from(this.elem.querySelectorAll(":scope > .resize-grid--row"));
// If we do not have any rows, then we generate a single row to contain the cols.
if (!row_elems.length) {
const elem = document.createElement('div');
@ -363,6 +391,9 @@ class ResizeGridContainer {
row_elems.forEach((row_elem, i) => {
this.addRow(id++, row_elem, i);
const col_elems = row_elem.querySelectorAll('.resize-grid--col');
if (col_elems.length === 1) {
col_elems[0].style.flexGrow = 1;
}
col_elems.forEach((col_elem, j) => {
this.addCol(id++, col_elem, i, j);
});
@ -760,10 +791,11 @@ class ResizeGrid {
prev_dims = null;
resize_observer = null;
resize_observer_timer;
constructor(id, elem) {
constructor(id, elem, {callbacks}={}) {
this.id = id;
this.elem = elem;
this.elem.dataset.gridId = this.id;
this.callbacks = callbacks;
}
destroy() {
@ -786,7 +818,11 @@ class ResizeGrid {
this.container = null;
}
this.container = new ResizeGridContainer(this, null, this.elem);
this.container = new ResizeGridContainer({
parent: this,
elem: this.elem,
callbacks: this.callbacks,
});
this.container.build();
this.prev_dims = this.elem.getBoundingClientRect();
this.setupEvents();
@ -865,6 +901,12 @@ class ResizeGrid {
handle.elem.setPointerCapture(event.pointerId);
// Temporarily set styles for elements. These are cleared on pointerup.
// See `onMove()` comments for more info.
prev.elem.style.flexGrow = 0;
next.elem.style.flexGrow = 1;
next.elem.style.flexShrink = 1;
document.body.classList.add('resizing');
if (handle.axis === 0) {
document.body.classList.add('resizing-col');
@ -925,6 +967,14 @@ class ResizeGrid {
handle.elem.releasePointerCapture(event.pointerId);
// Set the new flexBasis value for the `next` element then revert
// the style changes set in the `pointerup` event.
next.elem.style.flexBasis = next.setSize(next.getSize());
prev.elem.style.flexGrow = Number(prev.is_flex_grow);
next.elem.style.flexGrow = Number(next.is_flex_grow);
next.elem.style.flexShrink = 0;
document.body.classList.remove('resizing');
document.body.classList.remove('resizing-col');
document.body.classList.remove('resizing-row');
@ -995,39 +1045,25 @@ class ResizeGrid {
this.resize_observer_timer = null;
}
onMove(event, prev, handle, next) {
/** Handles pointermove events. */
const par_dims = this.elem.getBoundingClientRect();
const a_dims = prev.elem.getBoundingClientRect();
const b_dims = next.elem.getBoundingClientRect();
let pos = handle.axis === 0 ? parseInt(event.y) : parseInt(event.x);
pos = Math.min(
handle.axis === 0 ? parseInt(par_dims.height) : parseInt(par_dims.width),
pos
);
const a_start =
handle.axis === 0 ? parseInt(a_dims.top) : parseInt(a_dims.left);
const b_end =
handle.axis === 0 ? parseInt(b_dims.bottom) : parseInt(b_dims.right);
let a = pos - Math.floor(handle.pad_px / 2);
let b = pos + Math.floor(handle.pad_px / 2);
let a_lim = a_start + prev.min_size;
let b_lim = b_end - next.min_size;
if (a < a_lim) {
a = a_lim;
b = a + handle.pad_px;
}
if (b > b_lim) {
b = b_lim;
a = b - handle.pad_px;
}
prev.setSize(a - a_start);
next.setSize(b_end - b);
onMove(event, a, handle, b) {
/** Handles pointermove events by calculating and setting new size of elements.
*
* While we are dragging the handle, we only manually set size for the
* item before the handle. During this time, the element after the handle
* should have flexGrow=1 and flexShrink=1 so that it can react to the size
* of the element before the handle. This simplifies calculations since we
* only have to do math for one side of handle.
*/
const a_dims = a.elem.getBoundingClientRect();
const b_dims = b.elem.getBoundingClientRect();
const a_start = Math.ceil(handle.axis === 0 ? a_dims.top : a_dims.left);
const b_end = Math.floor(handle.axis === 0 ? b_dims.bottom : b_dims.right);
const a_lim = a_start + a.min_size;
const b_lim = b_end - b.min_size;
const half_pad = Math.floor(handle.pad_px / 2);
let pos = parseInt(handle.axis === 0 ? event.y : event.x);
pos = Math.min(Math.max(pos, a_lim + half_pad), b_lim - half_pad);
a.setSize((pos - half_pad) - a_start);
}
onResize() {
@ -1155,13 +1191,13 @@ function resizeGridGetGrid(elem) {
return grid;
}
function resizeGridSetup(elem, {id} = {}) {
function resizeGridSetup(elem, {id, callbacks} = {}) {
/** Sets up a new ResizeGrid instance for the provided element. */
isElementThrowError(elem);
if (!isString(id)) {
id = _get_unique_id();
}
const grid = new ResizeGrid(id, elem);
const grid = new ResizeGrid(id, elem, {callbacks: callbacks});
grid.setup();
resize_grids[id] = grid;
return grid;