From 0d3a41cf03e4965116bb9cefa5c457b66bbff329 Mon Sep 17 00:00:00 2001
From: Chris <chris.goringe@gmail.com>
Date: Sat, 26 Apr 2025 09:18:26 +1000
Subject: [PATCH] #64

---
 README.md      | 17 ++++++++++++++++-
 __init__.py    |  2 +-
 js/popup.js    | 51 ++++++++++++++++++++++++++++++++++++++++----------
 pyproject.toml |  2 +-
 4 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index f0e7412..ed1119a 100644
--- a/README.md
+++ b/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.
diff --git a/__init__.py b/__init__.py
index 2198d11..1e32ada 100644
--- a/__init__.py
+++ b/__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= {
diff --git a/js/popup.js b/js/popup.js
index 3b3856e..28e0020 100644
--- a/js/popup.js
+++ b/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)
         }
     }
 
diff --git a/pyproject.toml b/pyproject.toml
index 37b1d89..c330c33 100644
--- a/pyproject.toml
+++ b/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]