From 9e4e6189551267f29fb63862d369315e1d1cba66 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sun, 27 Jul 2025 21:39:18 +0200
Subject: [PATCH] Add ESC key support to close fullscreen editor

Implemented an ESC key handler to allow users to close the fullscreen editor mode using the Escape key. Updated the editor button tooltip and the shortcuts documentation to reflect this new shortcut.
---
 js/CanvasView.js                      | 15 ++++++++++++++-
 js/templates/standard_shortcuts.html  |  2 ++
 src/CanvasView.ts                     | 18 +++++++++++++++++-
 src/templates/standard_shortcuts.html |  2 ++
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/js/CanvasView.js b/js/CanvasView.js
index 9e4aaba..f86e79f 100644
--- a/js/CanvasView.js
+++ b/js/CanvasView.js
@@ -742,6 +742,8 @@ async function createCanvasWidget(node, widget, app) {
         isEditorOpen = false;
         openEditorBtn.textContent = "⛶";
         openEditorBtn.title = "Open in Editor";
+        // Remove ESC key listener when editor closes
+        document.removeEventListener('keydown', handleEscKey);
         setTimeout(() => {
             canvas.render();
             if (node.onResize) {
@@ -749,6 +751,15 @@ async function createCanvasWidget(node, widget, app) {
             }
         }, 0);
     };
+    // ESC key handler for closing fullscreen editor
+    const handleEscKey = (e) => {
+        if (e.key === 'Escape' && isEditorOpen) {
+            e.preventDefault();
+            e.stopPropagation();
+            closeEditor();
+            log.info("Fullscreen editor closed via ESC key");
+        }
+    };
     openEditorBtn.onclick = () => {
         if (isEditorOpen) {
             closeEditor();
@@ -766,7 +777,9 @@ async function createCanvasWidget(node, widget, app) {
         document.body.appendChild(backdrop);
         isEditorOpen = true;
         openEditorBtn.textContent = "X";
-        openEditorBtn.title = "Close Editor";
+        openEditorBtn.title = "Close Editor (ESC)";
+        // Add ESC key listener when editor opens
+        document.addEventListener('keydown', handleEscKey);
         setTimeout(() => {
             canvas.render();
             if (node.onResize) {
diff --git a/js/templates/standard_shortcuts.html b/js/templates/standard_shortcuts.html
index ded155e..14bbed9 100644
--- a/js/templates/standard_shortcuts.html
+++ b/js/templates/standard_shortcuts.html
@@ -4,7 +4,9 @@
     <tr><td><kbd>Mouse Wheel</kbd></td><td>Zoom view in/out</td></tr>
     <tr><td><kbd>Shift + Click (background)</kbd></td><td>Start resizing canvas area</td></tr>
     <tr><td><kbd>Shift + Ctrl + Click</kbd></td><td>Start moving entire canvas</td></tr>
+    <tr><td><kbd>Shift + S + Left Click</kbd></td><td>Draw custom shape for output area</td></tr>
     <tr><td><kbd>Single Click (background)</kbd></td><td>Deselect all layers</td></tr>
+    <tr><td><kbd>Esc</kbd></td><td>Close fullscreen editor mode</td></tr>
 </table>
 
 <h4>Clipboard & I/O</h4>
diff --git a/src/CanvasView.ts b/src/CanvasView.ts
index 620516c..22caaaa 100644
--- a/src/CanvasView.ts
+++ b/src/CanvasView.ts
@@ -799,6 +799,9 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
         openEditorBtn.textContent = "⛶";
         openEditorBtn.title = "Open in Editor";
 
+        // Remove ESC key listener when editor closes
+        document.removeEventListener('keydown', handleEscKey);
+
         setTimeout(() => {
             canvas.render();
             if (node.onResize) {
@@ -807,6 +810,16 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
         }, 0);
     };
 
+    // ESC key handler for closing fullscreen editor
+    const handleEscKey = (e: KeyboardEvent) => {
+        if (e.key === 'Escape' && isEditorOpen) {
+            e.preventDefault();
+            e.stopPropagation();
+            closeEditor();
+            log.info("Fullscreen editor closed via ESC key");
+        }
+    };
+
     openEditorBtn.onclick = () => {
         if (isEditorOpen) {
             closeEditor();
@@ -828,7 +841,10 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
 
         isEditorOpen = true;
         openEditorBtn.textContent = "X";
-        openEditorBtn.title = "Close Editor";
+        openEditorBtn.title = "Close Editor (ESC)";
+
+        // Add ESC key listener when editor opens
+        document.addEventListener('keydown', handleEscKey);
 
         setTimeout(() => {
             canvas.render();
diff --git a/src/templates/standard_shortcuts.html b/src/templates/standard_shortcuts.html
index ded155e..14bbed9 100644
--- a/src/templates/standard_shortcuts.html
+++ b/src/templates/standard_shortcuts.html
@@ -4,7 +4,9 @@
     <tr><td><kbd>Mouse Wheel</kbd></td><td>Zoom view in/out</td></tr>
     <tr><td><kbd>Shift + Click (background)</kbd></td><td>Start resizing canvas area</td></tr>
     <tr><td><kbd>Shift + Ctrl + Click</kbd></td><td>Start moving entire canvas</td></tr>
+    <tr><td><kbd>Shift + S + Left Click</kbd></td><td>Draw custom shape for output area</td></tr>
     <tr><td><kbd>Single Click (background)</kbd></td><td>Deselect all layers</td></tr>
+    <tr><td><kbd>Esc</kbd></td><td>Close fullscreen editor mode</td></tr>
 </table>
 
 <h4>Clipboard & I/O</h4>