mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-22 05:02:11 -03:00
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.
This commit is contained in:
@@ -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(() => {
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user