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

Update UI manager files for both magnify glass and info panel.

Browse Source
This commit is contained in:
AEmotionStudio
2026-01-01 13:17:29 -08:00
parent 57ffc26158
commit aa1119d5a5
6 changed files with 115 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/info-panel/UIManager.ts
+51 -15
View File
@@ -184,14 +184,30 @@ export class UIManager {
break;
case 'toggle-glass':
this.stateManager.state.isGlassPreviewVisible = !this.stateManager.state.isGlassPreviewVisible;
this.updateControlStates();
// Toggle glass visibility on the magnify glass
if (window.comfyUIMagnifyGlass) {
if (this.stateManager.state.isGlassPreviewVisible) {
window.comfyUIMagnifyGlass.ui.show();
} else {
window.comfyUIMagnifyGlass.ui.hide();
// Link Glass Visibility to Panel Pinning
if (!this.stateManager.state.isGlassPreviewVisible) {
// Glass Hidden -> Enter "Unlocked Mode" (Pinned to Screen, Draggable)
if (this.elements.panel) {
const rect = this.elements.panel.getBoundingClientRect();
this.stateManager.state.pinnedPosition = { x: rect.left, y: rect.top };
}
this.stateManager.state.isPanelPinned = true;
this.stateManager.state.isPanelLocked = false; // Ensure dragging is allowed
} else {
// Glass Shown -> Enter "Locked Position" (Follow Glass)
this.stateManager.state.isPanelPinned = false;
// Note: Dragging is automatically disabled when !isPanelPinned by EventManager logic
}
this.updateControlStates();
this.updatePinnedState(); // Update visual class
// Toggle ONLY the visual visibility (opacity) of the glass preview
// The tool remains active so the inspector can track position
const magnifyGlass = (window as any).comfyUIMagnifyGlass;
if (magnifyGlass && magnifyGlass.ui?.setPreviewVisibility) {
magnifyGlass.ui.setPreviewVisibility(this.stateManager.state.isGlassPreviewVisible);
}
break;
}
@@ -215,19 +231,26 @@ export class UIManager {
const lockBtn = this.elements.controls.querySelector('[data-action="lock"]') as HTMLButtonElement;
const visibilityBtn = this.elements.controls.querySelector('[data-action="toggle-panel"]') as HTMLButtonElement;
const glassBtn = this.elements.controls.querySelector('[data-action="toggle-glass"]') as HTMLButtonElement;
const isPanelVisible = this.stateManager.state.isPanelVisible;
const isGlassVisible = this.stateManager.state.isGlassPreviewVisible;
if (pinBtn) {
pinBtn.classList.toggle('active', this.stateManager.state.isPanelPinned);
pinBtn.title = this.stateManager.state.isPanelPinned ? "Lock Panel" : "Unlock Panel";
pinBtn.innerHTML = this.stateManager.state.isPanelPinned ? Icons.lock : Icons.unlock;
}
// Hide unlock/pin buttons when panel is not visible
const isPanelVisible = this.stateManager.state.isPanelVisible;
if (pinBtn) {
// Hide unlock button when panel is hidden
pinBtn.style.display = isPanelVisible ? 'flex' : 'none';
// Disable unlock (unpin) button if glass is hidden
// This prevents entering "Follow Mouse" mode when glass is invisible
if (!isGlassVisible) {
pinBtn.disabled = true;
pinBtn.style.opacity = '0.5';
pinBtn.title = "Cannot unlock panel from screen when glass preview is hidden";
} else {
pinBtn.disabled = false;
pinBtn.style.opacity = '';
}
}
if (lockBtn) {
@@ -243,11 +266,24 @@ export class UIManager {
// Active means "Panel is Visible"
visibilityBtn.classList.toggle('active', isPanelVisible);
visibilityBtn.title = isPanelVisible ? "Hide Panel" : "Show Panel";
// Disable hide button if glass is hidden (prevent hiding everything)
if (!isGlassVisible) {
visibilityBtn.disabled = true;
visibilityBtn.style.opacity = '0.5';
visibilityBtn.title = "Cannot hide panel when glass preview is hidden";
} else {
visibilityBtn.disabled = false;
visibilityBtn.style.opacity = '';
}
}
if (glassBtn) {
glassBtn.classList.toggle('active', this.stateManager.state.isGlassPreviewVisible);
glassBtn.title = this.stateManager.state.isGlassPreviewVisible ? "Hide Glass Preview" : "Show Glass Preview";
glassBtn.classList.toggle('active', isGlassVisible);
glassBtn.title = isGlassVisible ? "Hide Glass Preview" : "Show Glass Preview";
// Only show glass toggle button if the inspector panel is visible
glassBtn.style.display = isPanelVisible ? 'flex' : 'none';
}
}
src/magnify-glass/UiManager.ts
+16 -2
View File
@@ -116,19 +116,33 @@ export class UiManager {
*/
show(): void {
if (this.glassDiv) {
this.glassDiv.style.display = "block";
this.glassDiv.style.display = 'block';
// We do NOT modify opacity here, allowing it to be controlled independently
}
if (this.config.debugMode && this.debugCanvas) {
this.debugCanvas.style.display = "block";
}
}
/**
* Set the visual visibility of the glass preview (opacity).
* This allows the tool to remain "Active" (tracking mouse) but invisible,
* so that the Inspector Panel can be used in "Inspector Only" mode.
*/
setPreviewVisibility(visible: boolean): void {
if (this.glassDiv) {
this.glassDiv.style.opacity = visible ? '1' : '0';
// Disable pointer events when hidden to be safe, though usually they are none anyway
// this.glassDiv.style.pointerEvents = visible ? 'none' : 'none';
}
}
/**
* Hide the magnifying glass.
*/
hide(): void {
if (this.glassDiv) {
this.glassDiv.style.display = "none";
this.glassDiv.style.display = 'none';
}
if (this.config.debugMode && this.debugCanvas) {
this.debugCanvas.style.display = "none";
web/info-panel/UIManager.js
+36 -11
View File
@@ -90,6 +90,7 @@ class UIManager {
this.elements.controls.style.left = "-9999px";
this.elements.controls.style.top = "-9999px";
this.elements.controls.addEventListener("click", (e) => {
var _a;
const target = e.target;
const button = target.closest("button[data-action]");
if (!button) return;
@@ -118,13 +119,21 @@ class UIManager {
break;
case "toggle-glass":
this.stateManager.state.isGlassPreviewVisible = !this.stateManager.state.isGlassPreviewVisible;
this.updateControlStates();
if (window.comfyUIMagnifyGlass) {
if (this.stateManager.state.isGlassPreviewVisible) {
window.comfyUIMagnifyGlass.ui.show();
} else {
window.comfyUIMagnifyGlass.ui.hide();
if (!this.stateManager.state.isGlassPreviewVisible) {
if (this.elements.panel) {
const rect = this.elements.panel.getBoundingClientRect();
this.stateManager.state.pinnedPosition = { x: rect.left, y: rect.top };
}
this.stateManager.state.isPanelPinned = true;
this.stateManager.state.isPanelLocked = false;
} else {
this.stateManager.state.isPanelPinned = false;
}
this.updateControlStates();
this.updatePinnedState();
const magnifyGlass = window.comfyUIMagnifyGlass;
if (magnifyGlass && ((_a = magnifyGlass.ui) == null ? void 0 : _a.setPreviewVisibility)) {
magnifyGlass.ui.setPreviewVisibility(this.stateManager.state.isGlassPreviewVisible);
}
break;
}
@@ -142,14 +151,21 @@ class UIManager {
const lockBtn = this.elements.controls.querySelector('[data-action="lock"]');
const visibilityBtn = this.elements.controls.querySelector('[data-action="toggle-panel"]');
const glassBtn = this.elements.controls.querySelector('[data-action="toggle-glass"]');
const isPanelVisible = this.stateManager.state.isPanelVisible;
const isGlassVisible = this.stateManager.state.isGlassPreviewVisible;
if (pinBtn) {
pinBtn.classList.toggle("active", this.stateManager.state.isPanelPinned);
pinBtn.title = this.stateManager.state.isPanelPinned ? "Lock Panel" : "Unlock Panel";
pinBtn.innerHTML = this.stateManager.state.isPanelPinned ? Icons.lock : Icons.unlock;
}
const isPanelVisible = this.stateManager.state.isPanelVisible;
if (pinBtn) {
pinBtn.style.display = isPanelVisible ? "flex" : "none";
if (!isGlassVisible) {
pinBtn.disabled = true;
pinBtn.style.opacity = "0.5";
pinBtn.title = "Cannot unlock panel from screen when glass preview is hidden";
} else {
pinBtn.disabled = false;
pinBtn.style.opacity = "";
}
}
if (lockBtn) {
const showLockBtn = isPanelVisible && this.stateManager.state.isPanelPinned;
@@ -161,10 +177,19 @@ class UIManager {
if (visibilityBtn) {
visibilityBtn.classList.toggle("active", isPanelVisible);
visibilityBtn.title = isPanelVisible ? "Hide Panel" : "Show Panel";
if (!isGlassVisible) {
visibilityBtn.disabled = true;
visibilityBtn.style.opacity = "0.5";
visibilityBtn.title = "Cannot hide panel when glass preview is hidden";
} else {
visibilityBtn.disabled = false;
visibilityBtn.style.opacity = "";
}
}
if (glassBtn) {
glassBtn.classList.toggle("active", this.stateManager.state.isGlassPreviewVisible);
glassBtn.title = this.stateManager.state.isGlassPreviewVisible ? "Hide Glass Preview" : "Show Glass Preview";
glassBtn.classList.toggle("active", isGlassVisible);
glassBtn.title = isGlassVisible ? "Hide Glass Preview" : "Show Glass Preview";
glassBtn.style.display = isPanelVisible ? "flex" : "none";
}
}
/**
web/info-panel/UIManager.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
web/magnify-glass/UiManager.js
+10
View File
@@ -98,6 +98,16 @@ class UiManager {
this.debugCanvas.style.display = "block";
}
}
/**
* Set the visual visibility of the glass preview (opacity).
* This allows the tool to remain "Active" (tracking mouse) but invisible,
* so that the Inspector Panel can be used in "Inspector Only" mode.
*/
setPreviewVisibility(visible) {
if (this.glassDiv) {
this.glassDiv.style.opacity = visible ? "1" : "0";
}
}
/**
* Hide the magnifying glass.
*/
web/magnify-glass/UiManager.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long