From 9c54b78d9dde5601e916f308d9a9d6953ec39430 Mon Sep 17 00:00:00 2001 From: Aarni Koskela Date: Wed, 17 May 2023 15:46:58 +0300 Subject: Run `eslint --fix` (and normalize tabs to spaces) --- javascript/dragdrop.js | 47 ++++++++++++++++++++++++----------------------- 1 file changed, 24 insertions(+), 23 deletions(-) (limited to 'javascript/dragdrop.js') diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index fe008924..e316a365 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -1,11 +1,11 @@ // allows drag-dropping files into gradio image elements, and also pasting images from clipboard -function isValidImageList( files ) { +function isValidImageList(files) { return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type); } -function dropReplaceImage( imgWrap, files ) { - if ( ! isValidImageList( files ) ) { +function dropReplaceImage(imgWrap, files) { + if (!isValidImageList(files)) { return; } @@ -14,44 +14,44 @@ function dropReplaceImage( imgWrap, files ) { imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click(); const callback = () => { const fileInput = imgWrap.querySelector('input[type="file"]'); - if ( fileInput ) { - if ( files.length === 0 ) { + if (fileInput) { + if (files.length === 0) { files = new DataTransfer(); files.items.add(tmpFile); fileInput.files = files.files; } else { fileInput.files = files; } - fileInput.dispatchEvent(new Event('change')); + fileInput.dispatchEvent(new Event('change')); } }; - - if ( imgWrap.closest('#pnginfo_image') ) { + + if (imgWrap.closest('#pnginfo_image')) { // special treatment for PNG Info tab, wait for fetch request to finish const oldFetch = window.fetch; - window.fetch = async (input, options) => { + window.fetch = async(input, options) => { const response = await oldFetch(input, options); - if ( 'api/predict/' === input ) { + if ('api/predict/' === input) { const content = await response.text(); window.fetch = oldFetch; - window.requestAnimationFrame( () => callback() ); + window.requestAnimationFrame(() => callback()); return new Response(content, { status: response.status, statusText: response.statusText, headers: response.headers - }) + }); } return response; - }; + }; } else { - window.requestAnimationFrame( () => callback() ); + window.requestAnimationFrame(() => callback()); } } window.document.addEventListener('dragover', e => { const target = e.composedPath()[0]; const imgWrap = target.closest('[data-testid="image"]'); - if ( !imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) { + if (!imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) { return; } e.stopPropagation(); @@ -65,33 +65,34 @@ window.document.addEventListener('drop', e => { return; } const imgWrap = target.closest('[data-testid="image"]'); - if ( !imgWrap ) { + if (!imgWrap) { return; } e.stopPropagation(); e.preventDefault(); const files = e.dataTransfer.files; - dropReplaceImage( imgWrap, files ); + dropReplaceImage(imgWrap, files); }); window.addEventListener('paste', e => { const files = e.clipboardData.files; - if ( ! isValidImageList( files ) ) { + if (!isValidImageList(files)) { return; } const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')] .filter(el => uiElementIsVisible(el)); - if ( ! visibleImageFields.length ) { + if (!visibleImageFields.length) { return; } - + const firstFreeImageField = visibleImageFields .filter(el => el.querySelector('input[type=file]'))?.[0]; dropReplaceImage( firstFreeImageField ? - firstFreeImageField : - visibleImageFields[visibleImageFields.length - 1] - , files ); + firstFreeImageField : + visibleImageFields[visibleImageFields.length - 1] + , files + ); }); -- cgit v1.2.3 From 7b61acbd35e9db43a5279a42afad3f3dc68462c9 Mon Sep 17 00:00:00 2001 From: Thottyottyotty Date: Thu, 18 May 2023 23:43:01 -0700 Subject: 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 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'javascript/dragdrop.js') 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; } -- cgit v1.2.3 From 994f56c3f930a4f130f34ad7c8e2ec86db3db3e7 Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Fri, 19 May 2023 09:54:55 +0300 Subject: linter fixes --- javascript/dragdrop.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript/dragdrop.js') diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index 398a33f9..77a24a07 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -82,7 +82,7 @@ window.addEventListener('paste', e => { const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')] .filter(el => uiElementIsVisible(el)) - .sort((a,b) => uiElementInSight(b) - uiElementInSight(a)); + .sort((a, b) => uiElementInSight(b) - uiElementInSight(a)); if (!visibleImageFields.length) { -- cgit v1.2.3 From a862428902c4aecde8852761c3a4d95c196885cb Mon Sep 17 00:00:00 2001 From: missionfloyd Date: Sun, 21 May 2023 18:17:32 -0600 Subject: Fix dragging text to prompt --- javascript/dragdrop.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'javascript/dragdrop.js') diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index fe008924..90cdd507 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -51,7 +51,7 @@ function dropReplaceImage( imgWrap, files ) { window.document.addEventListener('dragover', e => { const target = e.composedPath()[0]; const imgWrap = target.closest('[data-testid="image"]'); - if ( !imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) { + if (e.dataTransfer.files.length == 0 || (!imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1)) { return; } e.stopPropagation(); @@ -61,7 +61,7 @@ window.document.addEventListener('dragover', e => { window.document.addEventListener('drop', e => { const target = e.composedPath()[0]; - if (target.placeholder.indexOf("Prompt") == -1) { + if (e.dataTransfer.files.length == 0 || target.placeholder.indexOf("Prompt") == -1) { return; } const imgWrap = target.closest('[data-testid="image"]'); -- cgit v1.2.3 From ee65e729319e4184fc0d49552657e98aa0e28f17 Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Mon, 22 May 2023 09:49:51 +0300 Subject: repair file paste for Firefox from #10615 remove animation when pasting files into prompt rework two dragdrop js files into one --- javascript/dragdrop.js | 53 ++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 41 insertions(+), 12 deletions(-) (limited to 'javascript/dragdrop.js') diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index fd6b3154..aa79871a 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -48,12 +48,27 @@ function dropReplaceImage(imgWrap, files) { } } +function eventHasFiles(e) { + if (!e.dataTransfer || !e.dataTransfer.files) return false; + if (e.dataTransfer.files.length > 0) return true; + if (e.dataTransfer.items.length > 0 && e.dataTransfer.items[0].kind == "file") return true; + + return false; +} + +function dragDropTargetIsPrompt(target) { + if (!(target?.placeholder?.indexOf("Prompt") >= 0)) return true; + if (target?.parentNode?.parentNode) return true; + return false; +} + window.document.addEventListener('dragover', e => { const target = e.composedPath()[0]; - const imgWrap = target.closest('[data-testid="image"]'); - if (e.dataTransfer.files.length == 0 || (!imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1)) { - return; - } + if (!eventHasFiles(e)) return; + + var targetImage = target.closest('[data-testid="image"]'); + if (!dragDropTargetIsPrompt(target) && !targetImage) return; + e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; @@ -61,17 +76,31 @@ window.document.addEventListener('dragover', e => { window.document.addEventListener('drop', e => { const target = e.composedPath()[0]; - if (e.dataTransfer.files.length == 0 || target.placeholder.indexOf("Prompt") == -1) { - return; + if (!eventHasFiles(e)) return; + + if (dragDropTargetIsPrompt(target)) { + e.stopPropagation(); + e.preventDefault(); + + let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image"; + + const imgParent = gradioApp().getElementById(prompt_target); + const files = e.dataTransfer.files; + const fileInput = imgParent.querySelector('input[type="file"]'); + if (fileInput) { + fileInput.files = files; + fileInput.dispatchEvent(new Event('change')); + } } - const imgWrap = target.closest('[data-testid="image"]'); - if (!imgWrap) { + + var targetImage = target.closest('[data-testid="image"]'); + if (targetImage) { + e.stopPropagation(); + e.preventDefault(); + const files = e.dataTransfer.files; + dropReplaceImage(targetImage, files); return; } - e.stopPropagation(); - e.preventDefault(); - const files = e.dataTransfer.files; - dropReplaceImage(imgWrap, files); }); window.addEventListener('paste', e => { -- cgit v1.2.3 From cc2f6e3b7b8d720a8e0fb2732751e34b7f41c2e9 Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Mon, 22 May 2023 15:40:10 +0300 Subject: fix error in dragdrop logic --- javascript/dragdrop.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'javascript/dragdrop.js') diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index aa79871a..5803daea 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -57,8 +57,8 @@ function eventHasFiles(e) { } function dragDropTargetIsPrompt(target) { - if (!(target?.placeholder?.indexOf("Prompt") >= 0)) return true; - if (target?.parentNode?.parentNode) return true; + if (target?.placeholder && target?.placeholder.indexOf("Prompt") >= 0) return true; + if (target?.parentNode?.parentNode?.className?.indexOf("prompt") > 0) return true; return false; } -- cgit v1.2.3