nodes/AEmotionStudio-ComfyUI-MagnifyGlass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add keyboard shortcut indicators to info panel persist and hold button tooltips

Browse Source
This commit is contained in:
AEmotionStudio
2026-01-06 01:24:25 -08:00
parent c21d1c731b
commit fe48d7ec05
6 changed files with 60 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/info-panel/EventManager.ts
+28 -3
View File
@@ -214,9 +214,17 @@ export class EventManager {
// Toggle Hold Info (Pause/Play)
const holdInfoHotkey = (settings["🔍MagnifyGlass.HoldInfoHotkey"] as string || "p").toLowerCase();
if (key === holdInfoHotkey) {
e.preventDefault();
const isHeld = this.stateManager.toggleHold();
Logger.debug(`Hold Info toggled: ${isHeld ? 'PAUSED' : 'PLAYING'}`);
// Only works when Sticky Info (Persist) is enabled
if (settings["🔍MagnifyGlass.InfoPanelPersist"]) {
e.preventDefault();
const isHeld = this.stateManager.toggleHold();
Logger.debug(`Hold Info toggled: ${isHeld ? 'PAUSED' : 'PLAYING'}`);
// Update the hover controls UI
const infoPanel = (window as any).infoPanelManager;
if (infoPanel?.uiManager) {
infoPanel.uiManager.updateControlStates();
}
}
}
// Toggle Sticky Info (Persist mode)
@@ -224,8 +232,25 @@ export class EventManager {
if (key === stickyInfoHotkey) {
e.preventDefault();
const newValue = !(settings["🔍MagnifyGlass.InfoPanelPersist"] as boolean);
// Update local state
settings["🔍MagnifyGlass.InfoPanelPersist"] = newValue;
// Persist to ComfyUI settings
try {
const app = (window as any).app;
app.ui.settings.setSettingValue("🔍MagnifyGlass.InfoPanelPersist", newValue);
} catch (err) {
Logger.debug('Failed to persist sticky info setting');
}
// If disabling sticky, also disable hold
if (!newValue) {
this.stateManager.state.isInfoHeld = false;
}
Logger.debug(`Sticky Info toggled: ${newValue ? 'ON' : 'OFF'}`);
// Update the hover controls UI
const infoPanel = (window as any).infoPanelManager;
if (infoPanel?.uiManager) {
infoPanel.uiManager.updateControlStates();
}
}
}
src/info-panel/UIManager.ts
+4 -4
View File
@@ -222,8 +222,8 @@ export class UIManager {
this.elements.controls.innerHTML = `
<button class="control-btn unlock-btn" title="Unlock/Lock Panel from Glass" data-action="pin">${Icons.unlock}</button>
<button class="control-btn pin-btn" title="Pin/Unpin Panel Position (Prevent Drag)" data-action="lock">${Icons.pin}</button>
<button class="control-btn persist-btn" title="Toggle Persist Mode (Sticky Info)" data-action="persist">${Icons.magnet}</button>
<button class="control-btn hold-btn" title="Hold Info (Freeze)" data-action="toggle-hold">${Icons.pause}</button>
<button class="control-btn persist-btn" title="Toggle Persist Mode - Sticky Info (S)" data-action="persist">${Icons.magnet}</button>
<button class="control-btn hold-btn" title="Hold Info - Pause/Play (P)" data-action="toggle-hold">${Icons.pause}</button>
<button class="control-btn visibility-btn" title="Toggle Panel Visibility (I)" data-action="toggle-panel">${Icons.eye}</button>
<button class="control-btn glass-btn" title="Toggle Glass Preview (G)" data-action="toggle-glass">${Icons.magnifyGlass}</button>
<button class="control-btn cursor-btn" title="Toggle Cursor Preview" data-action="toggle-cursor">${Icons.cursor}</button>
@@ -432,7 +432,7 @@ export class UIManager {
if (persistBtn) {
const isPersistConfigured = !!this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelPersist"];
persistBtn.classList.toggle('active', isPersistConfigured);
persistBtn.title = isPersistConfigured ? "Disable Sticky Info" : "Enable Sticky Info (Persist)";
persistBtn.title = isPersistConfigured ? "Disable Sticky Info (S)" : "Enable Sticky Info (S)";
persistBtn.style.display = isPanelVisible ? 'flex' : 'none';
}
@@ -447,7 +447,7 @@ export class UIManager {
holdBtn.classList.toggle('active', isHeld);
// Toggle icon: Pause (to hold) vs Play (to resume)
holdBtn.innerHTML = isHeld ? Icons.play : Icons.pause;
holdBtn.title = isHeld ? "Resume Info Update" : "Hold Info (Freeze)";
holdBtn.title = isHeld ? "Resume Info Update (P)" : "Pause Info Update (P)";
}
if (visibilityBtn) {
web/info-panel/EventManager.js
+22 -3
View File
@@ -139,16 +139,35 @@ class EventManager {
}
const holdInfoHotkey = (settings["🔍MagnifyGlass.HoldInfoHotkey"] || "p").toLowerCase();
if (key === holdInfoHotkey) {
e.preventDefault();
const isHeld = this.stateManager.toggleHold();
Logger.debug(`Hold Info toggled: ${isHeld ? "PAUSED" : "PLAYING"}`);
if (settings["🔍MagnifyGlass.InfoPanelPersist"]) {
e.preventDefault();
const isHeld = this.stateManager.toggleHold();
Logger.debug(`Hold Info toggled: ${isHeld ? "PAUSED" : "PLAYING"}`);
const infoPanel = window.infoPanelManager;
if (infoPanel == null ? void 0 : infoPanel.uiManager) {
infoPanel.uiManager.updateControlStates();
}
}
}
const stickyInfoHotkey = (settings["🔍MagnifyGlass.StickyInfoHotkey"] || "s").toLowerCase();
if (key === stickyInfoHotkey) {
e.preventDefault();
const newValue = !settings["🔍MagnifyGlass.InfoPanelPersist"];
settings["🔍MagnifyGlass.InfoPanelPersist"] = newValue;
try {
const app = window.app;
app.ui.settings.setSettingValue("🔍MagnifyGlass.InfoPanelPersist", newValue);
} catch (err) {
Logger.debug("Failed to persist sticky info setting");
}
if (!newValue) {
this.stateManager.state.isInfoHeld = false;
}
Logger.debug(`Sticky Info toggled: ${newValue ? "ON" : "OFF"}`);
const infoPanel = window.infoPanelManager;
if (infoPanel == null ? void 0 : infoPanel.uiManager) {
infoPanel.uiManager.updateControlStates();
}
}
}
handleMouseMove(e) {
web/info-panel/EventManager.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
web/info-panel/UIManager.js
+4 -4
View File
@@ -134,8 +134,8 @@ class UIManager {
this.elements.controls.innerHTML = `
<button class="control-btn unlock-btn" title="Unlock/Lock Panel from Glass" data-action="pin">${Icons.unlock}</button>
<button class="control-btn pin-btn" title="Pin/Unpin Panel Position (Prevent Drag)" data-action="lock">${Icons.pin}</button>
<button class="control-btn persist-btn" title="Toggle Persist Mode (Sticky Info)" data-action="persist">${Icons.magnet}</button>
<button class="control-btn hold-btn" title="Hold Info (Freeze)" data-action="toggle-hold">${Icons.pause}</button>
<button class="control-btn persist-btn" title="Toggle Persist Mode - Sticky Info (S)" data-action="persist">${Icons.magnet}</button>
<button class="control-btn hold-btn" title="Hold Info - Pause/Play (P)" data-action="toggle-hold">${Icons.pause}</button>
<button class="control-btn visibility-btn" title="Toggle Panel Visibility (I)" data-action="toggle-panel">${Icons.eye}</button>
<button class="control-btn glass-btn" title="Toggle Glass Preview (G)" data-action="toggle-glass">${Icons.magnifyGlass}</button>
<button class="control-btn cursor-btn" title="Toggle Cursor Preview" data-action="toggle-cursor">${Icons.cursor}</button>
@@ -301,7 +301,7 @@ class UIManager {
if (persistBtn) {
const isPersistConfigured = !!this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelPersist"];
persistBtn.classList.toggle("active", isPersistConfigured);
persistBtn.title = isPersistConfigured ? "Disable Sticky Info" : "Enable Sticky Info (Persist)";
persistBtn.title = isPersistConfigured ? "Disable Sticky Info (S)" : "Enable Sticky Info (S)";
persistBtn.style.display = isPanelVisible ? "flex" : "none";
}
const holdBtn = this.elements.controls.querySelector('[data-action="toggle-hold"]');
@@ -311,7 +311,7 @@ class UIManager {
holdBtn.style.display = isPanelVisible && isPersistConfigured ? "flex" : "none";
holdBtn.classList.toggle("active", isHeld);
holdBtn.innerHTML = isHeld ? Icons.play : Icons.pause;
holdBtn.title = isHeld ? "Resume Info Update" : "Hold Info (Freeze)";
holdBtn.title = isHeld ? "Resume Info Update (P)" : "Pause Info Update (P)";
}
if (visibilityBtn) {
visibilityBtn.classList.toggle("active", isPanelVisible);
web/info-panel/UIManager.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long