From 2daf98a5b698a5b2ade560707baa41bec2bb2f3e Mon Sep 17 00:00:00 2001
From: missionfloyd <missionfloyd@users.noreply.github.com>
Date: Fri, 8 Dec 2023 23:06:59 -0700
Subject: [PATCH] Fix aspect ratio overlay

Make it work on inpaint upload tab
---
 javascript/aspectRatioOverlay.js | 36 +++++++++++++-------------------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
index 2cf2d571f..3a19de117 100644
--- a/javascript/aspectRatioOverlay.js
+++ b/javascript/aspectRatioOverlay.js
@@ -1,10 +1,8 @@
-
-let currentWidth = null;
-let currentHeight = null;
-let arFrameTimeout = setTimeout(function() {}, 0);
+let currentWidth;
+let currentHeight;
+let arFrameTimeout;
 
 function dimensionChange(e, is_width, is_height) {
-
     if (is_width) {
         currentWidth = e.target.value * 1.0;
     }
@@ -22,18 +20,18 @@ 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] img');
+        targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] canvas');
     } 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
-        targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
+        targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] canvas');
     } 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) {
-
         var arPreviewRect = gradioApp().querySelector('#imageARPreview');
         if (!arPreviewRect) {
             arPreviewRect = document.createElement('div');
@@ -41,14 +39,11 @@ function dimensionChange(e, is_width, is_height) {
             gradioApp().appendChild(arPreviewRect);
         }
 
-
-
         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.naturalWidth * viewportscale;
-        var scaledy = targetElement.naturalHeight * viewportscale;
+        var scaledx = targetElement.width * viewportscale;
+        var scaledy = targetElement.height * viewportscale;
 
         var cleintRectTop = (viewportOffset.top + window.scrollY);
         var cleintRectLeft = (viewportOffset.left + window.scrollX);
@@ -75,21 +70,18 @@ function dimensionChange(e, is_width, is_height) {
         }, 2000);
 
         arPreviewRect.style.display = 'block';
-
     }
-
 }
 
-
 onAfterUiUpdate(function() {
     var arPreviewRect = gradioApp().querySelector('#imageARPreview');
     if (arPreviewRect) {
         arPreviewRect.style.display = 'none';
     }
+
     var tabImg2img = gradioApp().querySelector("#tab_img2img");
     if (tabImg2img) {
-        var inImg2img = tabImg2img.style.display == "block";
-        if (inImg2img) {
+        if (tabImg2img.style.display == "block") {
             let inputs = gradioApp().querySelectorAll('input');
             inputs.forEach(function(e) {
                 var is_width = e.parentElement.id == "img2img_width";