Restore width/height dropdown (#1445)

ui/index.html

@@ -192,16 +192,62 @@
                         <a href="https://github.com/easydiffusion/easydiffusion/wiki/How-to-Use#samplers" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about samplers</span></i></a>
                     </td></tr>
                     <tr class="pl-5"><td><label>Image Size: </label></td><td id="image-size-options">
-                        <input id="width" name="width" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)">
+                        <select id="width" name="width" value="512">
+                            <option value="128">128</option>
+                            <option value="192">192</option>
+                            <option value="256">256</option>
+                            <option value="320">320</option>
+                            <option value="384">384</option>
+                            <option value="448">448</option>
+                            <option value="512" selected="">512 (*)</option>
+                            <option value="576">576</option>
+                            <option value="640">640</option>
+                            <option value="704">704</option>
+                            <option value="768">768 (*)</option>
+                            <option value="832">832</option>
+                            <option value="896">896</option>
+                            <option value="960">960</option>
+                            <option value="1024">1024 (*)</option>
+                            <option value="1280">1280</option>
+                            <option value="1536">1536</option>
+                            <option value="1792">1792</option>
+                            <option value="2048">2048</option>
+                        </select>
                         <label for="width"><small>(width)</small></label>
                         <span id="swap-width-height" class="clickable smallButton" style="margin-left: 2px; margin-right:2px;"><i class="fa-solid fa-right-left"><span class="simple-tooltip top-left"> Swap width and height </span></i></span>
-                        <input id="height" name="height" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)">
+                        <select id="height" name="height" value="512">
+                            <option value="128">128</option>
+                            <option value="192">192</option>
+                            <option value="256">256</option>
+                            <option value="320">320</option>
+                            <option value="384">384</option>
+                            <option value="448">448</option>
+                            <option value="512" selected="">512 (*)</option>
+                            <option value="576">576</option>
+                            <option value="640">640</option>
+                            <option value="704">704</option>
+                            <option value="768">768 (*)</option>
+                            <option value="832">832</option>
+                            <option value="896">896</option>
+                            <option value="960">960</option>
+                            <option value="1024">1024 (*)</option>
+                            <option value="1280">1280</option>
+                            <option value="1536">1536</option>
+                            <option value="1792">1792</option>
+                            <option value="2048">2048</option>
+                        </select>
                         <label for="height"><small>(height)</small></label>
                         <div id="recent-resolutions-container">
                             <span id="recent-resolutions-button" class="clickable"><i class="fa-solid fa-sliders"><span class="simple-tooltip top-left"> Recent sizes </span></i></span>
                             <div id="recent-resolutions-popup" class="displayNone">
-                                <small>Upscale:</small><br>
+                                <small>Custom size:</small><br>
-                                <button id="upscale15" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button id="upscale2" class="tertiaryButton smallButton">×2</button>&nbsp;<button id="upscale3" class="tertiaryButton smallButton">×3</button><br>
+                                <input id="custom-width" name="custom-width" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)">
+                                &times;
+                                <input id="custom-height" name="custom-height" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)"><br>
+
+                                <small>Enlarge:</small><br>
+                                <div id="enlarge-buttons"><button id="enlarge15" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button id="enlarge2" class="tertiaryButton smallButton">×2</button>&nbsp;<button id="enlarge3" class="tertiaryButton smallButton">×3</button></div>
+
                                 <small>Recently&nbsp;used:</small><br>
                                 <div id="recent-resolution-list">
                                 </div>

ui/media/css/main.css

@@ -1754,7 +1754,7 @@ body.wait-pause {
     font-size: 10pt;
 }
 
-input#width, input#height {
+input#custom-width, input#custom-height {
     width: 47pt;
 }
 
@@ -1782,6 +1782,18 @@ td#image-size-options small {
     margin-right: 0px !important;
 }
 
+td#image-size-options {
+    white-space: nowrap;
+}
+
+div#recent-resolution-list {
+    text-align: center;
+}
+
+div#enlarge-buttons {
+    text-align: center;
+}
+
 .clickable {
     cursor: pointer;
 }

ui/media/js/main.js

@@ -77,12 +77,14 @@ let randomSeedField = document.querySelector("#random_seed")
 let seedField = document.querySelector("#seed")
 let widthField = document.querySelector("#width")
 let heightField = document.querySelector("#height")
+let customWidthField = document.querySelector("#custom-width")
+let customHeightField = document.querySelector("#custom-height")
 let recentResolutionsButton = document.querySelector("#recent-resolutions-button")
 let recentResolutionsPopup = document.querySelector("#recent-resolutions-popup")
 let recentResolutionList = document.querySelector("#recent-resolution-list")
-let upscale15Button = document.querySelector("#upscale15")
+let enlarge15Button = document.querySelector("#enlarge15")
-let upscale2Button = document.querySelector("#upscale2")
+let enlarge2Button = document.querySelector("#enlarge2")
-let upscale3Button = document.querySelector("#upscale3")
+let enlarge3Button = document.querySelector("#enlarge3")
 let swapWidthHeightButton = document.querySelector("#swap-width-height")
 let smallImageWarning = document.querySelector("#small_image_warning")
 let initImageSelector = document.querySelector("#init_image")
@@ -2585,13 +2587,48 @@ function roundToMultiple(number, n) {
     return Math.round(number / n) * n;
 }
 
-function upscaleImageSize(factor) {
+function addImageSizeOption(size) {
-    let step = width.step
+    let sizes = Object.values(widthField.options).map(o => o.value)
-    width.value  = roundToMultiple(width.value*factor, step)
+    if (!sizes.includes(String(size))) {
-    height.value = roundToMultiple(height.value*factor, step)
+        sizes.push(String(size))
+        sizes.sort( (a,b) => Number(a)-Number(b) )
+
+        let option = document.createElement("option")
+        option.value = size
+        option.text = `${size}`
+        
+        widthField.add(option, sizes.indexOf(String(size)))
+        heightField.add(option.cloneNode(true), sizes.indexOf(String(size)))
     }
 
+}
 
+function setImageWidthHeight(w,h) {
+    let step = customWidthField.step
+    w = roundToMultiple(w, step)
+    h = roundToMultiple(h, step)
+
+    addImageSizeOption(w)
+    addImageSizeOption(h)
+
+    widthField.value=w
+    heightField.value=h
+    widthField.dispatchEvent(new Event("change"))
+    heightField.dispatchEvent(new Event("change"))
+}
+
+function enlargeImageSize(factor) {
+    let step = customWidthField.step
+
+    let w = roundToMultiple(widthField.value*factor, step)
+    let h = roundToMultiple(heightField.value*factor, step)
+    customWidthField.value = w
+    customHeightField.value = h
+}
+
+let recentResolutionsValues = []
+
+;(function() { ///// Init resolutions dropdown
     function makeResolutionButtons() {
         recentResolutionList.innerHTML = ""
         recentResolutionsValues.forEach( el => {
@@ -2600,11 +2637,9 @@ function makeResolutionButtons() {
             button.style.width="8em"
             button.innerHTML = `${el.w}×${el.h}`
             button.addEventListener("click", () => {
-            width.value=el.w
+                customWidthField.value=el.w
-            height.value=el.h
+                customHeightField.value=el.h
-            width.dispatchEvent(new Event("change"))
+                hidePopup()
-            height.dispatchEvent(new Event("change"))
-            recentResolutionsPopup.classList.add("displayNone")
             })
             recentResolutionList.appendChild(button)
             recentResolutionList.appendChild(document.createElement("br"))
@@ -2612,43 +2647,40 @@ function makeResolutionButtons() {
         localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
     }
 
-let recentResolutionsValues = []
+    enlarge15Button.addEventListener("click", () => {
-
+        enlargeImageSize(1.5)
-;(function() { ///// Init resolutions dropdown
+        hidePopup()
-    upscale15Button.addEventListener("click", () => {
-        upscaleImageSize(1.5)
-        recentResolutionsPopup.classList.add("displayNone")
     })
 
-    upscale2Button.addEventListener("click", () => {
+    enlarge2Button.addEventListener("click", () => {
-        upscaleImageSize(2)
+        enlargeImageSize(2)
-        recentResolutionsPopup.classList.add("displayNone")
+        hidePopup()
     })
 
-    upscale3Button.addEventListener("click", () => {
+    enlarge3Button.addEventListener("click", () => {
-        upscaleImageSize(3)
+        enlargeImageSize(3)
-        recentResolutionsPopup.classList.add("displayNone")
+        hidePopup()
     })
 
-    width.addEventListener("change", () => {
+    customWidthField.addEventListener("change", () => {
-        let w = width.value
+        let w = customWidthField.value
-        width.value = roundToMultiple(w, width.step)
+        customWidthField.value = roundToMultiple(w, customWidthField.step)
-        if (w!=width.value) {
+        if (w!=customWidthField.value) {
-            showToast(`Rounded width to the closest multiple of ${width.step}.`)
+            showToast(`Rounded width to the closest multiple of ${customWidthField.step}.`)
         }
     })
 
-    height.addEventListener("change", () => {
+    customHeightField.addEventListener("change", () => {
-        let h = height.value
+        let h = customHeightField.value
-        height.value = roundToMultiple(h, height.step)
+        customHeightField.value = roundToMultiple(h, customHeightField.step)
-        if (h!=height.value) {
+        if (h!=customHeightField.value) {
-            showToast(`Rounded height to the closest multiple of ${height.step}.`)
+            showToast(`Rounded height to the closest multiple of ${customHeightField.step}.`)
         }
     })
 
     makeImageBtn.addEventListener("click", () => {
-        let w = width.value
+        let w = widthField.value
-        let h = height.value
+        let h = heightField.value
 
         recentResolutionsValues = recentResolutionsValues.filter(el => (el.w!=w || el.h!=h))
         recentResolutionsValues.unshift({w: w, h:h})
@@ -2675,23 +2707,43 @@ let recentResolutionsValues = []
     }
     makeResolutionButtons()
 
+    recentResolutionsValues.forEach( val => {
+        addImageSizeOption(val.w)
+        addImageSizeOption(val.h)
+    })
+
     function processClick(e) {
         if (!recentResolutionsPopup.contains(e.target)) {
-            recentResolutionsPopup.classList.add("displayNone")
+            hidePopup()
         }
+    }
+
+    function showPopup() {
+        customWidthField.value = widthField.value
+        customHeightField.value = heightField.value
+        recentResolutionsPopup.classList.remove("displayNone")
+        document.addEventListener("click", processClick)
+    }
+
+    function hidePopup() {
+        recentResolutionsPopup.classList.add("displayNone")
+        setImageWidthHeight(customWidthField.value, customHeightField.value)
         document.removeEventListener("click", processClick)
     }
 
     recentResolutionsButton.addEventListener("click", (event) => {
-        recentResolutionsPopup.classList.toggle("displayNone")
+        if (recentResolutionsPopup.classList.contains("displayNone")) {
+            showPopup()
             event.stopPropagation()
-        document.addEventListener("click", processClick)
+        } else {
+            hidePopup()
+        }
     })
 
     swapWidthHeightButton.addEventListener("click", (event) => {
-        let temp = width.value
+        let temp = widthField.value
-        width.value = height.value
+        widthField.value = heightField.value
-        height.value = temp
+        heightField.value = temp
     })
 })()
 

ui/media/js/parameters.js

@@ -453,8 +453,8 @@ async function getAppConfig() {
             document.querySelectorAll("#sampler_name option.diffusers-only").forEach((option) => {
                 option.style.display = "none"
             })
-            width.step=64
+            customWidthField.step=64
-            height.step=64
+            customHeightField.step=64
         } else {
             document.querySelector("#lora_model_container").style.display = ""
             document.querySelector("#tiling_container").style.display = ""
@@ -465,8 +465,8 @@ async function getAppConfig() {
             document.querySelector("#clip_skip_config").classList.remove("displayNone")
             document.querySelector("#embeddings-button").classList.remove("displayNone")
             document.querySelector("#negative-embeddings-button").classList.remove("displayNone")
-            width.step=8
+            customWidthField.step=8
-            height.step=8
+            customHeightField.step=8
         }
 
         console.log("get config status response", config)

ui/plugins/ui/image-editor-improvements.plugin.js

@@ -109,8 +109,10 @@
 
     imageObj.onload = function() {
         // Calculate the maximum cropped dimensions
-        const maxCroppedWidth = Math.floor(this.width / 64) * 64;
+        const step = customWidthField.step
-        const maxCroppedHeight = Math.floor(this.height / 64) * 64;
+
+        const maxCroppedWidth = Math.floor(this.width / step) * step;
+        const maxCroppedHeight = Math.floor(this.height / step) * step;
 
         canvas.width = maxCroppedWidth;
         canvas.height = maxCroppedHeight;