alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-21 20:52:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

Fix clipboard switch tooltip to update on toggle

Browse Source 
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.
This commit is contained in:
Dariusz L
2025-08-03 14:56:18 +02:00
parent 5da0855a52
commit 82c42f99fe
2 changed files with 35 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
js/CanvasView.js
View File

@@ -98,7 +98,6 @@ async function createCanvasWidget(node, widget, app) {
}), }),
$el("button.painter-button.icon-button", { $el("button.painter-button.icon-button", {
textContent: "?", textContent: "?",
title: "Show shortcuts",
onmouseenter: (e) => { onmouseenter: (e) => {
const content = canvas.maskTool.isActive ? maskShortcuts : standardShortcuts; const content = canvas.maskTool.isActive ? maskShortcuts : standardShortcuts;
showTooltip(e.target, content); showTooltip(e.target, content);
@@ -177,10 +176,22 @@ async function createCanvasWidget(node, widget, app) {
$el("span.switch-icon") $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 // Tooltip logic
switchEl.addEventListener("mouseenter", (e) => { switchEl.addEventListener("mouseenter", (e) => {
const checked = switchEl.querySelector('input[type="checkbox"]').checked; const tooltipContent = getCurrentTooltipContent();
const tooltipContent = checked ? clipspaceClipboardTooltip : systemClipboardTooltip;
showTooltip(switchEl, tooltipContent); showTooltip(switchEl, tooltipContent);
}); });
switchEl.addEventListener("mouseleave", hideTooltip); switchEl.addEventListener("mouseleave", hideTooltip);
@@ -189,6 +200,8 @@ async function createCanvasWidget(node, widget, app) {
const knobIcon = switchEl.querySelector('.switch-knob .switch-icon'); const knobIcon = switchEl.querySelector('.switch-knob .switch-icon');
input.addEventListener('change', () => { input.addEventListener('change', () => {
updateSwitchIcon(knobIcon, input.checked, LAYERFORGE_TOOLS.CLIPSPACE, LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD, "🗂️", "📋"); updateSwitchIcon(knobIcon, input.checked, LAYERFORGE_TOOLS.CLIPSPACE, LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD, "🗂️", "📋");
// Update tooltip content immediately after state change
updateTooltipIfVisible();
}); });
// Initial state // Initial state
iconLoader.preloadToolIcons().then(() => { iconLoader.preloadToolIcons().then(() => {

22
src/CanvasView.ts
View File

@@ -131,7 +131,6 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
}), }),
$el("button.painter-button.icon-button", { $el("button.painter-button.icon-button", {
textContent: "?", textContent: "?",
title: "Show shortcuts",
onmouseenter: (e: MouseEvent) => { onmouseenter: (e: MouseEvent) => {
const content = canvas.maskTool.isActive ? maskShortcuts : standardShortcuts; const content = canvas.maskTool.isActive ? maskShortcuts : standardShortcuts;
showTooltip(e.target as HTMLElement, content); 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 // Tooltip logic
switchEl.addEventListener("mouseenter", (e: MouseEvent) => { switchEl.addEventListener("mouseenter", (e: MouseEvent) => {
const checked = (switchEl.querySelector('input[type="checkbox"]') as HTMLInputElement).checked; const tooltipContent = getCurrentTooltipContent();
const tooltipContent = checked ? clipspaceClipboardTooltip : systemClipboardTooltip;
showTooltip(switchEl, tooltipContent); showTooltip(switchEl, tooltipContent);
}); });
switchEl.addEventListener("mouseleave", hideTooltip); 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 // Initial state