diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index e316a3650..398a33f9e 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 53390be32..f76127799 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; +}