Fix aspect ratio overlay (2daf98a5) · Commits · github_fork / Stable Diffusion Webui

javascript/aspectRatioOverlay.js

+14 −22

Original line number	Original line	Diff line number	Diff line
			let currentWidth;
	let currentWidth = null;		let currentHeight;
	let currentHeight = null;		let arFrameTimeout;
	let arFrameTimeout = setTimeout(function() {}, 0);

	function dimensionChange(e, is_width, is_height) {		function dimensionChange(e, is_width, is_height) {

	if (is_width) {		if (is_width) {
	currentWidth = e.target.value * 1.0;		currentWidth = e.target.value * 1.0;
	}		}
	@@ -22,18 +20,18 @@ 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] img');		targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] canvas');
	} else if (tabIndex == 1) { //Sketch		} else if (tabIndex == 1) { //Sketch
	targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');		targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] canvas');
	} else if (tabIndex == 2) { // Inpaint		} else if (tabIndex == 2) { // Inpaint
	targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');		targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] canvas');
	} else if (tabIndex == 3) { // Inpaint sketch		} else if (tabIndex == 3) { // Inpaint sketch
	targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');		targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] canvas');
			} else if (tabIndex == 4) { // Inpaint upload
			targetElement = gradioApp().querySelector('#img_inpaint_base div[data-testid=image] img');
	}		}


	if (targetElement) {		if (targetElement) {

	var arPreviewRect = gradioApp().querySelector('#imageARPreview');		var arPreviewRect = gradioApp().querySelector('#imageARPreview');
	if (!arPreviewRect) {		if (!arPreviewRect) {
	arPreviewRect = document.createElement('div');		arPreviewRect = document.createElement('div');
	@@ -41,14 +39,11 @@ function dimensionChange(e, is_width, is_height) {
	gradioApp().appendChild(arPreviewRect);		gradioApp().appendChild(arPreviewRect);
	}		}



	var viewportOffset = targetElement.getBoundingClientRect();		var viewportOffset = targetElement.getBoundingClientRect();
			var viewportscale = Math.min(targetElement.clientWidth / targetElement.width, targetElement.clientHeight / targetElement.height);

	var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);		var scaledx = targetElement.width * viewportscale;
			var scaledy = targetElement.height * viewportscale;
	var scaledx = targetElement.naturalWidth * viewportscale;
	var scaledy = targetElement.naturalHeight * viewportscale;

	var cleintRectTop = (viewportOffset.top + window.scrollY);		var cleintRectTop = (viewportOffset.top + window.scrollY);
	var cleintRectLeft = (viewportOffset.left + window.scrollX);		var cleintRectLeft = (viewportOffset.left + window.scrollX);
	@@ -75,21 +70,18 @@ function dimensionChange(e, is_width, is_height) {
	}, 2000);		}, 2000);

	arPreviewRect.style.display = 'block';		arPreviewRect.style.display = 'block';

	}		}

	}		}


	onAfterUiUpdate(function() {		onAfterUiUpdate(function() {
	var arPreviewRect = gradioApp().querySelector('#imageARPreview');		var arPreviewRect = gradioApp().querySelector('#imageARPreview');
	if (arPreviewRect) {		if (arPreviewRect) {
	arPreviewRect.style.display = 'none';		arPreviewRect.style.display = 'none';
	}		}

	var tabImg2img = gradioApp().querySelector("#tab_img2img");		var tabImg2img = gradioApp().querySelector("#tab_img2img");
	if (tabImg2img) {		if (tabImg2img) {
	var inImg2img = tabImg2img.style.display == "block";		if (tabImg2img.style.display == "block") {
	if (inImg2img) {
	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";

Admin message