Mirror/stable-diffusion-webui
1
0
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2024-06-07 21:20:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix css animation times to reflect user settings.

Browse Source
This commit is contained in:
Sj-Si 2024-06-04 12:55:01 -04:00
parent 5b8ed5412f
commit 26f77b93cd
2 changed files with 46 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
javascript/extraNetworks.js
View File

@ -42,6 +42,8 @@ var extra_networks_refresh_internal_debounce_timer;
let extra_networks_curr_options = {};
let extra_networks_setup_debounce_timer;
let extra_networks_event_abort_controller;
let extra_networks_event_long_press_timer;
let extra_networks_event_dbl_press_timer;
/** Boolean flags used along with utils.js::waitForBool(). */
// Set true when we first load the UI options.
@ -1695,6 +1697,12 @@ function extraNetworksBtnCopyPathOnClick(event) {
function extraNetworksOnOptionsChanged() {
initialUiOptionsLoaded.state = true;
// Settings which require event delegators to be rebuilt.
const settings_requiring_event_setup = [
"extra_networks_long_press_time_ms",
"extra_networks_dbl_press_time_ms",
];
try {
const keys = Object.keys(opts).filter(k => k.startsWith("extra_networks_"));
const changes = {};
@ -1711,6 +1719,11 @@ function extraNetworksOnOptionsChanged() {
extra_networks_curr_options[k] = opts[k];
}
}
// If any of the specified settings change, we need to rebuild event delegators.
if (settings_requiring_event_setup.some(x => x in changes)) {
extraNetworksSetupEventDelegators();
}
} catch (error) {
console.warn("Error parsing options:", error);
}
@ -1725,15 +1738,21 @@ function extraNetworksSetupEventDelegators() {
* listeners from firing.
*/
// Always destroy before attempting to setup delegators. This prevents us
// generating duplicate listeners for the same objects.
extraNetworksDestroyEventDelegators();
extra_networks_event_abort_controller = new AbortController();
const event_options = {signal: extra_networks_event_abort_controller.signal};
let long_press_timer;
let long_press_time_ms = opts.extra_networks_long_press_time_ms;
if (long_press_time_ms < 0) {
long_press_time_ms = 0;
}
let dbl_press_timer;
// Set the animation times for the long press animations.
gradioApp().style.setProperty("--wipe-transition-time-ms", `${long_press_time_ms}ms`);
gradioApp().style.setProperty("--wipe-reset-transition-time-ms", `${parseInt(long_press_time_ms / 2)}ms`);
let dbl_press_time_ms = opts.extra_networks_dbl_press_time_ms;
if (dbl_press_time_ms < 0) {
dbl_press_time_ms = 0;
@ -2001,8 +2020,8 @@ function extraNetworksSetupEventDelegators() {
};
window.addEventListener("pointerdown", event => {
clearTimeout(long_press_timer);
long_press_timer = null;
clearTimeout(extra_networks_event_long_press_timer);
extra_networks_event_long_press_timer = null;
if (event.target.hasPointerCapture(event.pointerId)) {
event.target.releasePointerCapture(event.pointerId);
@ -2022,17 +2041,17 @@ function extraNetworksSetupEventDelegators() {
if (!isNullOrUndefined(long_press_res)) {
event.stopPropagation();
long_press_res.target.classList.add("pressed");
long_press_timer = setTimeout(() => {
extra_networks_event_long_press_timer = setTimeout(() => {
long_press_res.target.classList.remove("pressed");
long_press_timer = null;
extra_networks_event_long_press_timer = null;
_on_long_press(event, long_press_res.target, long_press_res.handler, long_press_res.modify_classes);
}, long_press_time_ms);
}
}, event_options);
window.addEventListener("pointerup", event => {
clearTimeout(long_press_timer);
long_press_timer = null;
clearTimeout(extra_networks_event_long_press_timer);
extra_networks_event_long_press_timer = null;
// Shortcut to avoid lookup of element if no parent is pressed.
if (!isElement(event.target.closest(".pressed"))) {
@ -2056,16 +2075,16 @@ function extraNetworksSetupEventDelegators() {
const dbl_press_res = _get_dbl_press_event_elem(event);
if (!isNullOrUndefined(dbl_press_res)) {
if (isNullOrUndefined(dbl_press_timer)) {
if (isNullOrUndefined(extra_networks_event_dbl_press_timer)) {
dbl_press_res.target.dataset.awaitDblClick = "";
dbl_press_timer = setTimeout(() => {
dbl_press_timer = null;
extra_networks_event_dbl_press_timer = setTimeout(() => {
extra_networks_event_dbl_press_timer = null;
delete dbl_press_res.target.dataset.awaitDblClick;
}, dbl_press_time_ms);
} else if ("awaitDblClick" in dbl_press_res.target.dataset) {
// Only count as dbl click if it is the same element.
clearTimeout(dbl_press_timer);
dbl_press_timer = null;
clearTimeout(extra_networks_event_dbl_press_timer);
extra_networks_event_dbl_press_timer = null;
delete dbl_press_res.target.dataset.awaitDblClick;
_on_dbl_press(event, dbl_press_res.target, dbl_press_res.handler);
}
@ -2073,10 +2092,10 @@ function extraNetworksSetupEventDelegators() {
}, event_options);
window.addEventListener("pointerout", event => {
clearTimeout(long_press_timer);
long_press_timer = null;
clearTimeout(dbl_press_timer);
dbl_press_timer = null;
clearTimeout(extra_networks_event_long_press_timer);
extra_networks_event_long_press_timer = null;
clearTimeout(extra_networks_event_dbl_press_timer);
extra_networks_event_dbl_press_timer = null;
// Shortcut to avoid lookup of element if no parent is pressed.
if (!isElement(event.target.closest(".pressed"))) {
@ -2116,6 +2135,10 @@ function extraNetworksDestroyEventDelegators() {
if (extra_networks_event_abort_controller) {
extra_networks_event_abort_controller.abort();
}
clearTimeout(extra_networks_event_long_press_timer);
clearTimeout(extra_networks_event_dbl_press_timer);
extra_networks_event_long_press_timer = null;
extra_networks_event_dbl_press_timer = null;
}
async function extraNetworksSetupTab(tabname) {

12
style.css
View File

@ -1020,14 +1020,14 @@ footer {
height: 100%;
opacity: 0;
background: var(--color-accent-soft);
transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all var(--wipe-reset-transition-time-ms, 350ms) cubic-bezier(0.215, 0.61, 0.355, 1);
z-index: 1;
}
.card.pressed::after {
width: 100%;
opacity: 0.25;
transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all var(--wipe-transition-time-ms, 800ms) cubic-bezier(0.215, 0.61, 0.355, 1);
}
.extra-network-pane .card:hover{
@ -1795,7 +1795,7 @@ body.resizing.resize-grid-row {
left: 0;
width: 0;
height: 100%;
transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all var(--wipe-reset-transition-time-ms, 350ms) cubic-bezier(0.215, 0.61, 0.355, 1);
z-index: -1;
}
@ -1809,7 +1809,7 @@ body.resizing.resize-grid-row {
.extra-network-dirs-view-button.pressed::after {
width: 100%;
transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all var(--wipe-transition-time-ms, 800ms) cubic-bezier(0.215, 0.61, 0.355, 1);
}
.extra-network-dirs-view-button[data-selected] {
@ -1841,13 +1841,13 @@ body.resizing.resize-grid-row {
width: 0;
height: 100%;
background: var(--button-secondary-background-fill-hover);
transition: all 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all var(--wipe-reset-transition-time-ms, 350ms) cubic-bezier(0.215, 0.61, 0.355, 1);
z-index: -1;
}
.tree-list-item.pressed::after {
width: 100%;
transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: all var(--wipe-transition-time-ms, 800ms) cubic-bezier(0.215, 0.61, 0.355, 1);
}
.tree-list-item.recurse .tree-list-item-action--chevron .chevron-icon-single {