stable-diffusion-webui
112 строк · 3.9 Кб
1
2let currentWidth = null;3let currentHeight = null;4let arFrameTimeout = setTimeout(function() {}, 0);5
6function dimensionChange(e, is_width, is_height) {7
8if (is_width) {9currentWidth = e.target.value * 1.0;10}11if (is_height) {12currentHeight = e.target.value * 1.0;13}14
15var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";16
17if (!inImg2img) {18return;19}20
21var targetElement = null;22
23var tabIndex = get_tab_index('mode_img2img');24if (tabIndex == 0) { // img2img25targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');26} else if (tabIndex == 1) { //Sketch27targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');28} else if (tabIndex == 2) { // Inpaint29targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');30} else if (tabIndex == 3) { // Inpaint sketch31targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');32}33
34
35if (targetElement) {36
37var arPreviewRect = gradioApp().querySelector('#imageARPreview');38if (!arPreviewRect) {39arPreviewRect = document.createElement('div');40arPreviewRect.id = "imageARPreview";41gradioApp().appendChild(arPreviewRect);42}43
44
45
46var viewportOffset = targetElement.getBoundingClientRect();47
48var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);49
50var scaledx = targetElement.naturalWidth * viewportscale;51var scaledy = targetElement.naturalHeight * viewportscale;52
53var cleintRectTop = (viewportOffset.top + window.scrollY);54var cleintRectLeft = (viewportOffset.left + window.scrollX);55var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight / 2);56var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth / 2);57
58var arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight);59var arscaledx = currentWidth * arscale;60var arscaledy = currentHeight * arscale;61
62var arRectTop = cleintRectCentreY - (arscaledy / 2);63var arRectLeft = cleintRectCentreX - (arscaledx / 2);64var arRectWidth = arscaledx;65var arRectHeight = arscaledy;66
67arPreviewRect.style.top = arRectTop + 'px';68arPreviewRect.style.left = arRectLeft + 'px';69arPreviewRect.style.width = arRectWidth + 'px';70arPreviewRect.style.height = arRectHeight + 'px';71
72clearTimeout(arFrameTimeout);73arFrameTimeout = setTimeout(function() {74arPreviewRect.style.display = 'none';75}, 2000);76
77arPreviewRect.style.display = 'block';78
79}80
81}
82
83
84onAfterUiUpdate(function() {85var arPreviewRect = gradioApp().querySelector('#imageARPreview');86if (arPreviewRect) {87arPreviewRect.style.display = 'none';88}89var tabImg2img = gradioApp().querySelector("#tab_img2img");90if (tabImg2img) {91var inImg2img = tabImg2img.style.display == "block";92if (inImg2img) {93let inputs = gradioApp().querySelectorAll('input');94inputs.forEach(function(e) {95var is_width = e.parentElement.id == "img2img_width";96var is_height = e.parentElement.id == "img2img_height";97
98if ((is_width || is_height) && !e.classList.contains('scrollwatch')) {99e.addEventListener('input', function(e) {100dimensionChange(e, is_width, is_height);101});102e.classList.add('scrollwatch');103}104if (is_width) {105currentWidth = e.value * 1.0;106}107if (is_height) {108currentHeight = e.value * 1.0;109}110});111}112}113});114