#64

README.md

@@ -19,9 +19,10 @@ If you prefer trying a workflow to reading docs, use of the nodes is illustrated
 
 <img src="https://github.com/chrisgoringe/cg-image-filter/raw/main/images/seahorse.png" alt="Seahorse" width="200" height="200">
 
-## New in 1.3.1 ##
+## New in 1.3.2 ##
 
 - works with old mask editor as well
+- keyboard shortcuts are back
 - various minor fixes
 
 ## New in 1.3 ##
@@ -63,6 +64,20 @@ an image without user interaction.
 
 ---
 
+## Keyboard shortcuts
+
+In `Image Filter` and `Text Image Filter` (not `Mask Image Filter`)
+
+- `Space` when hovering over an image enlarges it. While enlarged:
+  - `Space` closes the zoom
+  - `ArrowLeft` and `ArrowRight` select the previous/next image
+  - `ArrowUp` clicks this image (select/deselect or send, depending on the value of `ClickSends`)
+- `Escape` to click the cancel button
+- `Enter`to click the send button
+- digits `0`, `1`, etc. to click an image (zero-indexed) (select/deselect or send, depending on the value of `ClickSends`)
+
+---
+
 ## Image Filter
 
 The image filter node pauses execution of the workflow while you choose which, if any, of the images produced, you want to progress.

__init__.py

@@ -9,7 +9,7 @@ from .image_filter import ImageFilter, MaskImageFilter, TextImageFilterWithExtra
 from .list_utility_nodes import PickFromList, BatchFromImageList, ImageListFromBatch
 from .string_utility_nodes import SplitByCommas, StringToFloat, StringToInt
 
-VERSION = "1.3.1"
+VERSION = "1.3.2"
 WEB_DIRECTORY = "./js"
 
 NODE_CLASS_MAPPINGS= {

js/popup.js

@@ -301,14 +301,36 @@ class Popup extends HTMLSpanElement {
     on_key_down(e) {
         var used_keypress = false;
 
-        if (this.state==State.FILTER) {
+        if (this.state==State.FILTER || this.state==State.TEXT) {
+            if (document.activeElement?.type=='text' || document.activeElement?.type=='textarea') {
+                return
+                // don't capture keys when editing text
+            } else {
+                if (e.key=='Enter') {
+                    this.send_current_state()
+                    used_keypress = true
+                }
+                if (e.key=='Escape') {
+                    this.send_cancel()
+                    used_keypress = true
+                }
+                if (`${parseInt(e.key)}`==e.key) {
+                    this.select_unselect(parseInt(e.key))
+                    used_keypress = true
+                }
+            }
+        }
+
+        if (this.state==State.FILTER && !used_keypress) {
             if (e.key==' ' && this.mouse_is_over) {
                 this.state = State.ZOOMED
                 this.zoomed_image_holder = this.mouse_is_over
                 this.on_mouse_out(this.mouse_is_over)
                 used_keypress = true
             }
-        } else if (this.state==State.ZOOMED) {
+        }
+        
+        if (this.state==State.ZOOMED && !used_keypress) {
             if (e.key==' ') {
                 this.state = State.FILTER
                 this.zoomed_image_holder = null
@@ -327,6 +349,8 @@ class Popup extends HTMLSpanElement {
             }
         }
 
+
+
         if (used_keypress) {
             e.stopPropagation()
             e.preventDefault()
@@ -335,16 +359,23 @@ class Popup extends HTMLSpanElement {
         }
     }
 
+    select_unselect(n) {
+        if (n<0 || n>this.n_images) {
+            return
+        }
+        const s = `${n}`
+        if (app.ui.settings.getSettingValue("ImageFilter.ClickSends")) {
+            this._send_response(s)
+        } else {
+            if (this.picked.has(s)) this.picked.delete(s)
+            else this.picked.add(s)
+            this.redraw()
+        }
+    }
+
     on_click(e) {
         if (e.target.image_index != undefined) {
-            const s = `${e.target.image_index}`
-            if (app.ui.settings.getSettingValue("ImageFilter.ClickSends")) {
-                this._send_response(s)
-            } else {
-                if (this.picked.has(s)) this.picked.delete(s)
-                else this.picked.add(s)
-                this.redraw()
-            }
+            this.select_unselect(e.target.image_index)
         }
     }
 

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "cg-image-filter"
 description = "A set of custom nodes that pause a workflow while you select images, add masks, or edit text."
-version = "1.3.1"
+version = "1.3.2"
 license = { file = "LICENSE" }
 
 [project.urls]