From e373fd0c009beed4cd78af78583bf71b425b118e Mon Sep 17 00:00:00 2001
From: Thottyottyotty <thot@thiic.cc>
Date: Thu, 18 May 2023 16:09:09 -0700
Subject: [PATCH 1/2] rewrite uiElementIsVisible

rewrite visibility checking to be more generic/cleaner as well as add functionality to check if the element is scrolled on screen for more intuitive paste-target selection
---
 script.js | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/script.js b/script.js
index db4d9157..53390be3 100644
--- a/script.js
+++ b/script.js
@@ -92,19 +92,17 @@ document.addEventListener('keydown', function(e) {
  * checks that a UI element is not in another hidden element or tab content
  */
 function uiElementIsVisible(el) {
-    let isVisible = !el.closest('.\\!hidden');
-    if (!isVisible) {
-        return false;
+    if (el === document) {
+        return true;
     }
 
-    while ((isVisible = el.closest('.tabitem')?.style.display) !== 'none') {
-        if (!isVisible) {
-            return false;
-        } else if (el.parentElement) {
-            el = el.parentElement;
-        } else {
-            break;
-        }
-    }
-    return isVisible;
+    const computedStyle = getComputedStyle(el);
+    const isVisible = computedStyle.display !== 'none';
+
+    const clRect = el.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    const onScreen = clRect.bottom > 0 && clRect.top < windowHeight;
+
+    if (!isVisible || !onScreen) return false;
+    return uiElementIsVisible(el.parentNode);
 }

From 7b61acbd35e9db43a5279a42afad3f3dc68462c9 Mon Sep 17 00:00:00 2001
From: Thottyottyotty <thot@thiic.cc>
Date: Thu, 18 May 2023 23:43:01 -0700
Subject: [PATCH 2/2] split visibility method and sort instead

split out the visibility method for pasting and use a sort inside the paste handler to prioritize on-screen fields rather than targeting ONLY on screen fields
---
 javascript/dragdrop.js |  5 ++++-
 script.js              | 14 +++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js
index e316a365..398a33f9 100644
--- a/javascript/dragdrop.js
+++ b/javascript/dragdrop.js
@@ -81,7 +81,10 @@ window.addEventListener('paste', e => {
     }
 
     const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
-        .filter(el => uiElementIsVisible(el));
+        .filter(el => uiElementIsVisible(el))
+        .sort((a,b) => uiElementInSight(b) - uiElementInSight(a));
+
+
     if (!visibleImageFields.length) {
         return;
     }
diff --git a/script.js b/script.js
index 53390be3..f7612779 100644
--- a/script.js
+++ b/script.js
@@ -99,10 +99,14 @@ function uiElementIsVisible(el) {
     const computedStyle = getComputedStyle(el);
     const isVisible = computedStyle.display !== 'none';
 
-    const clRect = el.getBoundingClientRect();
-    const windowHeight = window.innerHeight;
-    const onScreen = clRect.bottom > 0 && clRect.top < windowHeight;
-
-    if (!isVisible || !onScreen) return false;
+    if (!isVisible) return false;
     return uiElementIsVisible(el.parentNode);
 }
+
+function uiElementInSight(el) {
+    const clRect = el.getBoundingClientRect();
+    const windowHeight = window.innerHeight;
+    const isOnScreen = clRect.bottom > 0 && clRect.top < windowHeight;
+
+    return isOnScreen;
+}