From 82c42f99fe62f190e1badcdd4a251ab28123cd3d Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sun, 3 Aug 2025 14:56:18 +0200
Subject: [PATCH] Fix clipboard switch tooltip to update on toggle

Refactored tooltip logic for the clipboard switch so it now updates immediately when toggled, showing the correct template without requiring mouse movement. Added helper functions and improved event handling for better UX.
---
 js/CanvasView.js  | 19 ++++++++++++++++---
 src/CanvasView.ts | 22 +++++++++++++++++++---
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/js/CanvasView.js b/js/CanvasView.js
index f298131..6ed769f 100644
--- a/js/CanvasView.js
+++ b/js/CanvasView.js
@@ -98,7 +98,6 @@ async function createCanvasWidget(node, widget, app) {
                 }),
                 $el("button.painter-button.icon-button", {
                     textContent: "?",
-                    title: "Show shortcuts",
                     onmouseenter: (e) => {
                         const content = canvas.maskTool.isActive ? maskShortcuts : standardShortcuts;
                         showTooltip(e.target, content);
@@ -177,10 +176,22 @@ async function createCanvasWidget(node, widget, app) {
                                 $el("span.switch-icon")
                             ])
                         ]);
+                        // Helper function to get current tooltip content based on switch state
+                        const getCurrentTooltipContent = () => {
+                            const checked = switchEl.querySelector('input[type="checkbox"]').checked;
+                            return checked ? clipspaceClipboardTooltip : systemClipboardTooltip;
+                        };
+                        // Helper function to update tooltip content if it's currently visible
+                        const updateTooltipIfVisible = () => {
+                            // Only update if tooltip is currently visible
+                            if (helpTooltip.style.display === 'block') {
+                                const tooltipContent = getCurrentTooltipContent();
+                                showTooltip(switchEl, tooltipContent);
+                            }
+                        };
                         // Tooltip logic
                         switchEl.addEventListener("mouseenter", (e) => {
-                            const checked = switchEl.querySelector('input[type="checkbox"]').checked;
-                            const tooltipContent = checked ? clipspaceClipboardTooltip : systemClipboardTooltip;
+                            const tooltipContent = getCurrentTooltipContent();
                             showTooltip(switchEl, tooltipContent);
                         });
                         switchEl.addEventListener("mouseleave", hideTooltip);
@@ -189,6 +200,8 @@ async function createCanvasWidget(node, widget, app) {
                         const knobIcon = switchEl.querySelector('.switch-knob .switch-icon');
                         input.addEventListener('change', () => {
                             updateSwitchIcon(knobIcon, input.checked, LAYERFORGE_TOOLS.CLIPSPACE, LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD, "🗂️", "📋");
+                            // Update tooltip content immediately after state change
+                            updateTooltipIfVisible();
                         });
                         // Initial state
                         iconLoader.preloadToolIcons().then(() => {
diff --git a/src/CanvasView.ts b/src/CanvasView.ts
index 42f3532..7aea28d 100644
--- a/src/CanvasView.ts
+++ b/src/CanvasView.ts
@@ -131,7 +131,6 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
                 }),
                 $el("button.painter-button.icon-button", {
                     textContent: "?",
-                    title: "Show shortcuts",
                     onmouseenter: (e: MouseEvent) => {
                         const content = canvas.maskTool.isActive ? maskShortcuts : standardShortcuts;
                         showTooltip(e.target as HTMLElement, content);
@@ -210,10 +209,24 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
         ])
     ]);
 
+    // Helper function to get current tooltip content based on switch state
+    const getCurrentTooltipContent = () => {
+        const checked = (switchEl.querySelector('input[type="checkbox"]') as HTMLInputElement).checked;
+        return checked ? clipspaceClipboardTooltip : systemClipboardTooltip;
+    };
+
+    // Helper function to update tooltip content if it's currently visible
+    const updateTooltipIfVisible = () => {
+        // Only update if tooltip is currently visible
+        if (helpTooltip.style.display === 'block') {
+            const tooltipContent = getCurrentTooltipContent();
+            showTooltip(switchEl, tooltipContent);
+        }
+    };
+
     // Tooltip logic
     switchEl.addEventListener("mouseenter", (e: MouseEvent) => {
-        const checked = (switchEl.querySelector('input[type="checkbox"]') as HTMLInputElement).checked;
-        const tooltipContent = checked ? clipspaceClipboardTooltip : systemClipboardTooltip;
+        const tooltipContent = getCurrentTooltipContent();
         showTooltip(switchEl, tooltipContent);
     });
     switchEl.addEventListener("mouseleave", hideTooltip);
@@ -231,6 +244,9 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
             "🗂️",
             "📋"
         );
+        
+        // Update tooltip content immediately after state change
+        updateTooltipIfVisible();
     });
     
     // Initial state