mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2025-01-04 05:45:05 +08:00
Merge pull request #12458 from daswer123/auto-expand
Zoom and pan: Some fixes for the auto-expand
This commit is contained in:
commit
3c00e41ec0
@ -12,6 +12,7 @@ onUiLoaded(async() => {
|
|||||||
"Sketch": elementIDs.sketch
|
"Sketch": elementIDs.sketch
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
// Helper functions
|
// Helper functions
|
||||||
// Get active tab
|
// Get active tab
|
||||||
function getActiveTab(elements, all = false) {
|
function getActiveTab(elements, all = false) {
|
||||||
@ -377,6 +378,11 @@ onUiLoaded(async() => {
|
|||||||
toggleOverlap("off");
|
toggleOverlap("off");
|
||||||
fullScreenMode = false;
|
fullScreenMode = false;
|
||||||
|
|
||||||
|
const closeBtn = targetElement.querySelector("button[aria-label='Remove Image']");
|
||||||
|
if (closeBtn) {
|
||||||
|
closeBtn.addEventListener("click", resetZoom);
|
||||||
|
}
|
||||||
|
|
||||||
if (
|
if (
|
||||||
canvas &&
|
canvas &&
|
||||||
parseFloat(canvas.style.width) > 865 &&
|
parseFloat(canvas.style.width) > 865 &&
|
||||||
@ -657,17 +663,20 @@ onUiLoaded(async() => {
|
|||||||
// Simulation of the function to put a long image into the screen.
|
// Simulation of the function to put a long image into the screen.
|
||||||
// We detect if an image has a scroll bar or not, make a fullscreen to reveal the image, then reduce it to fit into the element.
|
// We detect if an image has a scroll bar or not, make a fullscreen to reveal the image, then reduce it to fit into the element.
|
||||||
// We hide the image and show it to the user when it is ready.
|
// We hide the image and show it to the user when it is ready.
|
||||||
function autoExpand(e) {
|
|
||||||
|
targetElement.isExpanded = false;
|
||||||
|
function autoExpand() {
|
||||||
const canvas = document.querySelector(`${elemId} canvas[key="interface"]`);
|
const canvas = document.querySelector(`${elemId} canvas[key="interface"]`);
|
||||||
const isMainTab = activeElement === elementIDs.inpaint || activeElement === elementIDs.inpaintSketch || activeElement === elementIDs.sketch;
|
const isMainTab = activeElement === elementIDs.inpaint || activeElement === elementIDs.inpaintSketch || activeElement === elementIDs.sketch;
|
||||||
|
|
||||||
if (canvas && isMainTab) {
|
if (canvas && isMainTab) {
|
||||||
if (hasHorizontalScrollbar(targetElement)) {
|
if (hasHorizontalScrollbar(targetElement) && targetElement.isExpanded === false) {
|
||||||
targetElement.style.visibility = "hidden";
|
targetElement.style.visibility = "hidden";
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
fitToScreen();
|
fitToScreen();
|
||||||
resetZoom();
|
resetZoom();
|
||||||
targetElement.style.visibility = "visible";
|
targetElement.style.visibility = "visible";
|
||||||
|
targetElement.isExpanded = true;
|
||||||
}, 10);
|
}, 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -675,9 +684,24 @@ onUiLoaded(async() => {
|
|||||||
|
|
||||||
targetElement.addEventListener("mousemove", getMousePosition);
|
targetElement.addEventListener("mousemove", getMousePosition);
|
||||||
|
|
||||||
|
//observers
|
||||||
|
// Creating an observer with a callback function to handle DOM changes
|
||||||
|
const observer = new MutationObserver((mutationsList, observer) => {
|
||||||
|
for (let mutation of mutationsList) {
|
||||||
|
// If the style attribute of the canvas has changed, by observation it happens only when the picture changes
|
||||||
|
if (mutation.type === 'attributes' && mutation.attributeName === 'style' &&
|
||||||
|
mutation.target.tagName.toLowerCase() === 'canvas') {
|
||||||
|
targetElement.isExpanded = false;
|
||||||
|
setTimeout(resetZoom, 10);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Apply auto expand if enabled
|
// Apply auto expand if enabled
|
||||||
if (hotkeysConfig.canvas_auto_expand) {
|
if (hotkeysConfig.canvas_auto_expand) {
|
||||||
targetElement.addEventListener("mousemove", autoExpand);
|
targetElement.addEventListener("mousemove", autoExpand);
|
||||||
|
// Set up an observer to track attribute changes
|
||||||
|
observer.observe(targetElement, {attributes: true, childList: true, subtree: true});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle events only inside the targetElement
|
// Handle events only inside the targetElement
|
||||||
|
Loading…
Reference in New Issue
Block a user