lllyasviel/stable-diffusion-webui-forge
1
0
Fork 0
mirror of https://github.com/lllyasviel/stable-diffusion-webui-forge.git synced 2026-01-26 19:09:45 +00:00
Code Issues 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
2 changed files with 9 additions and 6 deletions
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'); var tabIndex = get_tab_index('mode_img2img');
if (tabIndex == 0) { // 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 } 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 } 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 } 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 } else if (tabIndex == 4) { // Inpaint upload
targetElement = gradioApp().querySelector('#img_inpaint_base div[data-testid=image] img'); targetElement = gradioApp().querySelector('#img_inpaint_base div[data-testid=image] img');
} }
@@ -84,8 +84,10 @@ onAfterUiUpdate(function() {
if (tabImg2img.style.display == "block") { if (tabImg2img.style.display == "block") {
let inputs = gradioApp().querySelectorAll('input'); let inputs = gradioApp().querySelectorAll('input');
inputs.forEach(function(e) { inputs.forEach(function(e) {
var is_width = e.parentElement.id == "img2img_width"; var is_width = (e.parentElement.id == "img2img_width" && e.type == "range") ||
var is_height = e.parentElement.id == "img2img_height"; (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')) { if ((is_width || is_height) && !e.classList.contains('scrollwatch')) {
e.addEventListener('input', function(e) { e.addEventListener('input', function(e) {

1
style.css
View File

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