diff options
author | Connum <connum@gmail.com> | 2022-09-17 19:09:47 +0000 |
---|---|---|
committer | Connum <connum@gmail.com> | 2022-09-17 19:09:47 +0000 |
commit | 88e315a8d5a879b5a0c171bcc7ba6a29f87cd664 (patch) | |
tree | dca8c1744e39b7fe08b70fb3fe4dffa5e8c38ac4 | |
parent | 23a0ec04c005957091ab35c26c4c31485e75d146 (diff) | |
download | stable-diffusion-webui-gfx803-88e315a8d5a879b5a0c171bcc7ba6a29f87cd664.tar.gz stable-diffusion-webui-gfx803-88e315a8d5a879b5a0c171bcc7ba6a29f87cd664.tar.bz2 stable-diffusion-webui-gfx803-88e315a8d5a879b5a0c171bcc7ba6a29f87cd664.zip |
Replace existing images when pasting from clipboard or dropping a new one (fixes #573)
-rw-r--r-- | script.js | 49 |
1 files changed, 45 insertions, 4 deletions
@@ -326,12 +326,51 @@ function submit(){ return res } -window.addEventListener('paste', e => { - const files = e.clipboardData.files; - if (!files || files.length !== 1) { +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 ) ) { return; } - if (!['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type)) { + + imgWrap.querySelector('.modify-upload button + button')?.click(); + window.requestAnimationFrame( () => { + const fileInput = imgWrap.querySelector('input[type="file"]'); + if ( fileInput ) { + fileInput.files = files; + fileInput.dispatchEvent(new Event('change')); + } + }); +} + +window.document.addEventListener('dragover', e => { + const target = e.composedPath()[0]; + const imgWrap = target.closest('[data-testid="image"]'); + if ( !imgWrap ) { + return; + } + e.stopPropagation(); + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; +}); + +window.document.addEventListener('drop', e => { + const target = e.composedPath()[0]; + const imgWrap = target.closest('[data-testid="image"]'); + if ( !imgWrap ) { + return; + } + e.stopPropagation(); + e.preventDefault(); + const files = e.dataTransfer.files; + dropReplaceImage( imgWrap, files ); +}); + +window.addEventListener('paste', e => { + const files = e.clipboardData.files; + if ( ! isValidImageList( files ) ) { return; } [...gradioApp().querySelectorAll('input[type=file][accept="image/x-png,image/gif,image/jpeg"]')] @@ -340,6 +379,8 @@ window.addEventListener('paste', e => { input.files = files; input.dispatchEvent(new Event('change')) }); + [...gradioApp().querySelectorAll('[data-testid="image"]')] + .forEach(imgWrap => dropReplaceImage( imgWrap, files )); }); function ask_for_style_name(_, prompt_text, negative_prompt_text) { |