Mirrors/stable-diffusion-webui-forge
1
0
Fork 0
mirror of https://github.com/lllyasviel/stable-diffusion-webui-forge.git synced 2025-12-27 21:26:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix img2img aspect ratio preview (#1740)

Browse Source 
* Update aspectRatioOverlay.js

fix finding the right element to draw the box on
add drawing box based on changes to number control, just not slider

* Update style.css

add margin equal to border, to draw the AR box in better position
This commit is contained in:
DenOfEquity 2024-09-07 22:14:15 +01:00 committed by GitHub
parent ae9380bde2
commit ecb396e03f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
javascript/aspectRatioOverlay.js
View File

@ -20,13 +20,13 @@ function dimensionChange(e, is_width, is_height) {
var tabIndex = get_tab_index('mode_img2img');
if (tabIndex == 0) { // img2img
targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] canvas');
targetElement = gradioApp().querySelector('#img2img_image div[class=forge-image-container] img');
} else if (tabIndex == 1) { //Sketch
targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] canvas');
targetElement = gradioApp().querySelector('#img2img_sketch div[class=forge-image-container] img');
} else if (tabIndex == 2) { // Inpaint
targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] canvas');
targetElement = gradioApp().querySelector('#img2maskimg div[class=forge-image-container] img');
} else if (tabIndex == 3) { // Inpaint sketch
targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] canvas');
targetElement = gradioApp().querySelector('#inpaint_sketch div[class=forge-image-container] img');
} else if (tabIndex == 4) { // Inpaint upload
targetElement = gradioApp().querySelector('#img_inpaint_base div[data-testid=image] img');
}
@ -84,8 +84,10 @@ onAfterUiUpdate(function() {
if (tabImg2img.style.display == "block") {
let inputs = gradioApp().querySelectorAll('input');
inputs.forEach(function(e) {
var is_width = e.parentElement.id == "img2img_width";
var is_height = e.parentElement.id == "img2img_height";
var is_width = (e.parentElement.id == "img2img_width" && e.type == "range") ||
(e.parentElement.parentElement.parentElement.id == "img2img_width" && e.type == "number");
var is_height = (e.parentElement.id == "img2img_height" && e.type == "range") ||
(e.parentElement.parentElement.parentElement.id == "img2img_height" && e.type == "number");
if ((is_width || is_height) && !e.classList.contains('scrollwatch')) {
e.addEventListener('input', function(e) {

1
style.css
View File

@ -774,6 +774,7 @@ table.popup-table .link{
top: 0px;
left: 0px;
border: 2px solid red;
margin: -2px;
background: rgba(255, 0, 0, 0.3);
z-index: 900;
pointer-events: none;