From a1854d37343373d83ab25297ab6076a7eeb762c5 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Wed, 16 Aug 2023 06:53:12 +0200
Subject: [PATCH] 'Use for Controlnet', Drag'n'Drop (#1501)

* Drop area for Controlnet

* 'Use for Controlnet', DND
---
 ui/media/js/main.js                           |  5 ++
 .../ui/image-editor-improvements.plugin.js    | 59 +++++++++++--------
 2 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 74119841..ea2af7e3 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -517,6 +517,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
             const imageRedoBuffer = []
             let buttons = [
                 { text: "Use as Input", on_click: onUseAsInputClick },
+                { text: "Use for Controlnet", on_click: onUseForControlnetClick },
                 [
                     {
                         html: '<i class="fa-solid fa-download"></i> Download Image',
@@ -627,6 +628,10 @@ function onUseAsInputClick(req, img) {
     maskSetting.checked = false
 }
 
+function onUseForControlnetClick(req, img) {
+    controlImagePreview.src = img.src
+}
+
 function getDownloadFilename(img, suffix) {
     const imageSeed = img.getAttribute("data-seed")
     const imagePrompt = img.getAttribute("data-prompt")
diff --git a/ui/plugins/ui/image-editor-improvements.plugin.js b/ui/plugins/ui/image-editor-improvements.plugin.js
index fbc7ad80..672ed77b 100644
--- a/ui/plugins/ui/image-editor-improvements.plugin.js
+++ b/ui/plugins/ui/image-editor-improvements.plugin.js
@@ -191,19 +191,32 @@
 
     function createDropAreas(container) {
         // Create two drop areas
-        const dropAreaI2I = document.createElement("div")
-        dropAreaI2I.setAttribute("id", "drop-area-I2I")
-        dropAreaI2I.setAttribute("class", "drop-area")
-        dropAreaI2I.innerHTML = "Use as Image2Image source"
+        const dropAreaI2I = createElement("div", {id: "drop-area-I2I"}, ["drop-area"], "Use as Image2Image source")
         container.appendChild(dropAreaI2I)
         
-        const dropAreaMD = document.createElement("div")
-        dropAreaMD.setAttribute("id", "drop-area-MD")
-        dropAreaMD.setAttribute("class", "drop-area")
-        dropAreaMD.innerHTML = "Extract embedded metadata"
+        const dropAreaMD = createElement("div", {id: "drop-area-MD"}, ["drop-area"], "Extract embedded metadata")
         container.appendChild(dropAreaMD)
         
+        const dropAreaCN = createElement("div", {id: "drop-area-CN"}, ["drop-area"], "Use as Controlnet image")
+        container.appendChild(dropAreaCN)
+        
         // Add event listeners to drop areas
+        dropAreaCN.addEventListener("dragenter", function(event) {
+            event.preventDefault()
+            dropAreaCN.style.backgroundColor = 'darkGreen'
+        })
+        dropAreaCN.addEventListener("dragleave", function(event) {
+            event.preventDefault()
+            dropAreaCN.style.backgroundColor = ''
+        })
+        dropAreaCN.addEventListener("drop", function(event) {
+            event.stopPropagation()
+            event.preventDefault()
+            hideDropAreas()
+
+            getImageFromDropEvent(event, e => controlImagePreview.src=e)
+        })
+
         dropAreaI2I.addEventListener("dragenter", function(event) {
             event.preventDefault()
             dropAreaI2I.style.backgroundColor = 'darkGreen'
@@ -212,16 +225,12 @@
             event.preventDefault()
             dropAreaI2I.style.backgroundColor = ''
         })
-        
-        dropAreaI2I.addEventListener("drop", function(event) {
-            event.stopPropagation();
-            event.preventDefault();
-            hideDropAreas()
-            
+       
+        function getImageFromDropEvent(event, callback) {
             // Find the first image file, uri, or moz-url in the items list
-            let imageItem = null;
+            let imageItem = null
             for (let i = 0; i < event.dataTransfer.items.length; i++) {
-                let item = event.dataTransfer.items[i];
+                let item = event.dataTransfer.items[i]
                 if (item.kind === 'file' && item.type.startsWith('image/')) {
                     imageItem = item;
                     break;
@@ -258,18 +267,22 @@
                     // Create a FileReader object to read the dropped file as a data URL
                     let reader = new FileReader();
                     reader.onload = function(e) {
-                        // Set the src attribute of the img element to the data URL
-                        imageObj.src = e.target.result;
+                        callback(e.target.result)
                     };
                     reader.readAsDataURL(file);
                 } else {
                     // If the item is a URL, retrieve it and use it to load the image
-                    imageItem.getAsString(function(url) {
-                        // Set the src attribute of the img element to the URL
-                        imageObj.src = url;
-                    });
+                    imageItem.getAsString(callback)
                 }
-            }            
+            }
+        }
+
+        dropAreaI2I.addEventListener("drop", function(event) {
+            event.stopPropagation()
+            event.preventDefault()
+            hideDropAreas()
+            
+            getImageFromDropEvent(event, e => imageObj.src=e)
         })
         
         dropAreaMD.addEventListener("dragenter", function(event) {