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_curr_options = {};
let extra_networks_setup_debounce_timer; let extra_networks_setup_debounce_timer;
let extra_networks_event_abort_controller; 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(). */ /** Boolean flags used along with utils.js::waitForBool(). */
// Set true when we first load the UI options. // Set true when we first load the UI options.
@ -1695,6 +1697,12 @@ function extraNetworksBtnCopyPathOnClick(event) {
function extraNetworksOnOptionsChanged() { function extraNetworksOnOptionsChanged() {
initialUiOptionsLoaded.state = true; 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 { try {
const keys = Object.keys(opts).filter(k => k.startsWith("extra_networks_")); const keys = Object.keys(opts).filter(k => k.startsWith("extra_networks_"));
const changes = {}; const changes = {};
@ -1711,6 +1719,11 @@ function extraNetworksOnOptionsChanged() {
extra_networks_curr_options[k] = opts[k]; 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) { } catch (error) {
console.warn("Error parsing options:", error); console.warn("Error parsing options:", error);
} }
@ -1725,15 +1738,21 @@ function extraNetworksSetupEventDelegators() {
* listeners from firing. * 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(); extra_networks_event_abort_controller = new AbortController();
const event_options = {signal: extra_networks_event_abort_controller.signal}; 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; let long_press_time_ms = opts.extra_networks_long_press_time_ms;
if (long_press_time_ms < 0) { if (long_press_time_ms < 0) {
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; let dbl_press_time_ms = opts.extra_networks_dbl_press_time_ms;
if (dbl_press_time_ms < 0) { if (dbl_press_time_ms < 0) {
dbl_press_time_ms = 0; dbl_press_time_ms = 0;
@ -2001,8 +2020,8 @@ function extraNetworksSetupEventDelegators() {
}; };
window.addEventListener("pointerdown", event => { window.addEventListener("pointerdown", event => {
clearTimeout(long_press_timer); clearTimeout(extra_networks_event_long_press_timer);
long_press_timer = null; extra_networks_event_long_press_timer = null;
if (event.target.hasPointerCapture(event.pointerId)) { if (event.target.hasPointerCapture(event.pointerId)) {
event.target.releasePointerCapture(event.pointerId); event.target.releasePointerCapture(event.pointerId);
@ -2022,17 +2041,17 @@ function extraNetworksSetupEventDelegators() {
if (!isNullOrUndefined(long_press_res)) { if (!isNullOrUndefined(long_press_res)) {
event.stopPropagation(); event.stopPropagation();
long_press_res.target.classList.add("pressed"); 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_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); _on_long_press(event, long_press_res.target, long_press_res.handler, long_press_res.modify_classes);
}, long_press_time_ms); }, long_press_time_ms);
} }
}, event_options); }, event_options);
window.addEventListener("pointerup", event => { window.addEventListener("pointerup", event => {
clearTimeout(long_press_timer); clearTimeout(extra_networks_event_long_press_timer);
long_press_timer = null; extra_networks_event_long_press_timer = null;
// Shortcut to avoid lookup of element if no parent is pressed. // Shortcut to avoid lookup of element if no parent is pressed.
if (!isElement(event.target.closest(".pressed"))) { if (!isElement(event.target.closest(".pressed"))) {
@ -2056,16 +2075,16 @@ function extraNetworksSetupEventDelegators() {
const dbl_press_res = _get_dbl_press_event_elem(event); const dbl_press_res = _get_dbl_press_event_elem(event);
if (!isNullOrUndefined(dbl_press_res)) { 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_res.target.dataset.awaitDblClick = "";
dbl_press_timer = setTimeout(() => { extra_networks_event_dbl_press_timer = setTimeout(() => {
dbl_press_timer = null; extra_networks_event_dbl_press_timer = null;
delete dbl_press_res.target.dataset.awaitDblClick; delete dbl_press_res.target.dataset.awaitDblClick;
}, dbl_press_time_ms); }, dbl_press_time_ms);
} else if ("awaitDblClick" in dbl_press_res.target.dataset) { } else if ("awaitDblClick" in dbl_press_res.target.dataset) {
// Only count as dbl click if it is the same element. // Only count as dbl click if it is the same element.
clearTimeout(dbl_press_timer); clearTimeout(extra_networks_event_dbl_press_timer);
dbl_press_timer = null; extra_networks_event_dbl_press_timer = null;
delete dbl_press_res.target.dataset.awaitDblClick; delete dbl_press_res.target.dataset.awaitDblClick;
_on_dbl_press(event, dbl_press_res.target, dbl_press_res.handler); _on_dbl_press(event, dbl_press_res.target, dbl_press_res.handler);
} }
@ -2073,10 +2092,10 @@ function extraNetworksSetupEventDelegators() {
}, event_options); }, event_options);
window.addEventListener("pointerout", event => { window.addEventListener("pointerout", event => {
clearTimeout(long_press_timer); clearTimeout(extra_networks_event_long_press_timer);
long_press_timer = null; extra_networks_event_long_press_timer = null;
clearTimeout(dbl_press_timer); clearTimeout(extra_networks_event_dbl_press_timer);
dbl_press_timer = null; extra_networks_event_dbl_press_timer = null;
// Shortcut to avoid lookup of element if no parent is pressed. // Shortcut to avoid lookup of element if no parent is pressed.
if (!isElement(event.target.closest(".pressed"))) { if (!isElement(event.target.closest(".pressed"))) {
@ -2116,6 +2135,10 @@ function extraNetworksDestroyEventDelegators() {
if (extra_networks_event_abort_controller) { if (extra_networks_event_abort_controller) {
extra_networks_event_abort_controller.abort(); 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) { async function extraNetworksSetupTab(tabname) {

12
style.css
View File

@ -1020,14 +1020,14 @@ footer {
height: 100%; height: 100%;
opacity: 0; opacity: 0;
background: var(--color-accent-soft); 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; z-index: 1;
} }
.card.pressed::after { .card.pressed::after {
width: 100%; width: 100%;
opacity: 0.25; 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{ .extra-network-pane .card:hover{
@ -1795,7 +1795,7 @@ body.resizing.resize-grid-row {
left: 0; left: 0;
width: 0; width: 0;
height: 100%; 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; z-index: -1;
} }
@ -1809,7 +1809,7 @@ body.resizing.resize-grid-row {
.extra-network-dirs-view-button.pressed::after { .extra-network-dirs-view-button.pressed::after {
width: 100%; 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] { .extra-network-dirs-view-button[data-selected] {
@ -1841,13 +1841,13 @@ body.resizing.resize-grid-row {
width: 0; width: 0;
height: 100%; height: 100%;
background: var(--button-secondary-background-fill-hover); 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; z-index: -1;
} }
.tree-list-item.pressed::after { .tree-list-item.pressed::after {
width: 100%; 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 { .tree-list-item.recurse .tree-list-item-action--chevron .chevron-icon-single {