working v1

README.md

@@ -1,2 +1,3 @@
 # cg-image-filter
  
+WIP

image_filter.py

@@ -42,6 +42,10 @@ class ImageFilter(PreviewImage):
             },
         }
     
+    @classmethod
+    def IS_CHANGED(cls, **kwargs):
+        return float("NaN")
+    
     def func(self, images, timeout, uid, **kwargs):
         urls:list[str] = self.save_images(images=images, **kwargs)['ui']['images']
         PromptServer.instance.send_sync("cg-image-filter-images", {"uid": uid, "urls":urls})

js/filter.css

@@ -16,9 +16,10 @@
 
 .cg_popup .buttons {
     position: absolute;
-    width:80%;
-    left:90%;
+    width:6%;
+    left:92%;
     height:90%;
+    top:5%;
 }
 
 .cg_popup .grid img {
@@ -33,7 +34,10 @@
 }
 
 .cg_popup .buttons button {
-
+    margin:10px;
+    padding: 4px;
+    display: block;
+    width:100%
 }
 
 .cg_popup.hidden {

js/image_filter.js

@@ -23,18 +23,45 @@ function executionInterrupted() {
 const picked = new Set()
 var popup = null
 
-function redraw() {
+function layout() {
     const n = popup.firstChild.children.length
-    const per_row = Math.ceil(Math.sqrt(n))
-    const rows = Math.ceil(n/per_row)
+    const im_w = popup.firstChild.firstChild.naturalWidth
+    const im_h = popup.firstChild.firstChild.naturalHeight
     const box = popup.firstChild.getBoundingClientRect()
+    var per_row
+    if (!im_w || !im_h || !box.width || !box.height) {
+        per_row = Math.ceil(Math.sqrt(n))
+    } else {
+        var best_scale = 0
+        var best_pick
+        for (per_row=1; per_row<=n; per_row++) {
+            const rows = Math.ceil(n/per_row)
+            const scale = Math.min( box.width/(im_w*per_row), box.height/(im_h*rows) )
+            console.log(`${per_row} per row, ${rows} rows, scale ${scale}`)
+            if (scale>best_scale) {
+                best_scale = scale
+                best_pick = per_row
+            }
+        }
+        per_row = best_pick
+    }
+
+    const rows = Math.ceil(n/per_row)    
     const h = box.height / rows
+    const w = box.width / per_row
     Array.from(popup.firstChild.children).forEach((c,i)=>{
         c.style.gridArea = `${Math.floor(i/per_row) + 1} / ${i%per_row + 1} /  auto / auto`; 
         c.style.maxHeight = `${h}px`
+        c.style.maxWidth = `${w}px`
+    })
+    redraw_from_click()
+}
+
+function redraw_from_click() {
+    Array.from(popup.firstChild.children).forEach((c,i)=>{
         if (picked.has(`${i}`)) c.classList.add('selected')
         else c.classList.remove('selected')
-    })
+    }) 
 }
 
 function create_popup() {
@@ -61,12 +88,13 @@ function imageFilterImages(details) {
             console.log(url)
             const full_url = api.apiURL( `/view?filename=${encodeURIComponent(url.filename ?? v)}&type=${url.type ?? "input"}&subfolder=${url.subfolder ?? ""}`)
             const img = create('img', null, popup.firstChild, {src:full_url})
-            img.onload = redraw
+            img.onload = layout
             if (detail.urls.length>1) {
                 img.addEventListener('click', (e)=>{
                     const s = `${i}`
-                    if (picked.has(s)) picked.remove(s)
+                    if (picked.has(s)) picked.delete(s)
                     else picked.add(s)
+                    redraw_from_click()
                 })
             } 
         })