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

fix: improve info panel control button visibility and update logic

Browse Source
This commit is contained in:
AEmotionStudio
2026-01-01 12:04:42 -08:00
parent ed2102f122
commit d16ededfc3
6 changed files with 96 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/info-panel/PositionManager.ts
+32 -14
View File
@@ -131,9 +131,27 @@ export class PositionManager {
* Position the floating controls relative to the panel.
*/
positionFloatingControls(controlsElement: HTMLElement | null): void {
if (!controlsElement || !this.panelElement) return;
if (!controlsElement) return;
const isPanelVisible = this.stateManager.state.isPanelVisible;
const magnifyGlass = window.comfyUIMagnifyGlass;
let referenceRect: DOMRect | null = null;
if (isPanelVisible && this.panelElement) {
// Position relative to panel
referenceRect = this.panelElement.getBoundingClientRect();
} else if (magnifyGlass && magnifyGlass.ui && magnifyGlass.ui.glassDiv) {
// Position relative to magnify glass
referenceRect = magnifyGlass.ui.glassDiv.getBoundingClientRect();
// Don't show controls if glass is hidden/invalid
if (referenceRect.width === 0 || referenceRect.height === 0) {
controlsElement.style.display = 'none';
return;
}
}
if (!referenceRect) return;
const panelRect = this.panelElement.getBoundingClientRect();
const controlsPosition = this.stateManager.state.settings["🔍MagnifyGlass.ControlsPosition"] || "right";
const margin = 8;
@@ -142,28 +160,28 @@ export class PositionManager {
switch (controlsPosition) {
case "left":
left = panelRect.left - controlsElement.offsetWidth - margin;
top = panelRect.top;
left = referenceRect.left - controlsElement.offsetWidth - margin;
top = referenceRect.top;
break;
case "right":
left = panelRect.right + margin;
top = panelRect.top;
left = referenceRect.right + margin;
top = referenceRect.top;
break;
case "top":
left = panelRect.left;
top = panelRect.top - controlsElement.offsetHeight - margin;
left = referenceRect.left;
top = referenceRect.top - controlsElement.offsetHeight - margin;
break;
case "bottom":
left = panelRect.left;
top = panelRect.bottom + margin;
left = referenceRect.left;
top = referenceRect.bottom + margin;
break;
case "top-right":
left = panelRect.right - controlsElement.offsetWidth;
top = panelRect.top - controlsElement.offsetHeight - margin;
left = referenceRect.right - controlsElement.offsetWidth;
top = referenceRect.top - controlsElement.offsetHeight - margin;
break;
default:
left = panelRect.right + margin;
top = panelRect.top;
left = referenceRect.right + margin;
top = referenceRect.top;
}
// Keep controls within viewport
src/info-panel/UIManager.ts
+24 -8
View File
@@ -200,6 +200,9 @@ export class UIManager {
// Set initial layout based on settings
const controlsPosition = this.stateManager.state.settings["🔍MagnifyGlass.ControlsPosition"] || "top-right";
this.updateControlsLayout(controlsPosition);
// Initial state update
this.updateControlStates();
}
/**
@@ -219,17 +222,27 @@ export class UIManager {
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';
}
if (lockBtn) {
// Only show/enable lock button when pinned
lockBtn.style.display = this.stateManager.state.isPanelPinned ? 'flex' : 'none';
// Only show pin button when panel is visible AND unlocked from glass
const showLockBtn = isPanelVisible && this.stateManager.state.isPanelPinned;
lockBtn.style.display = showLockBtn ? 'flex' : 'none';
lockBtn.classList.toggle('active', this.stateManager.state.isPanelLocked);
lockBtn.title = this.stateManager.state.isPanelLocked ? "Upin Panel Position" : "Pin Panel Position";
lockBtn.title = this.stateManager.state.isPanelLocked ? "Unpin Panel Position" : "Pin Panel Position";
lockBtn.disabled = !this.stateManager.state.isPanelPinned;
}
if (visibilityBtn) {
visibilityBtn.classList.toggle('active', this.stateManager.state.isPanelVisible);
visibilityBtn.title = this.stateManager.state.isPanelVisible ? "Show Panel" : "Hide Panel";
// Active means "Panel is Visible"
visibilityBtn.classList.toggle('active', isPanelVisible);
visibilityBtn.title = isPanelVisible ? "Hide Panel" : "Show Panel";
}
if (glassBtn) {
@@ -319,6 +332,7 @@ export class UIManager {
this.elements.panel.offsetHeight;
this.elements.panel.classList.add('visible');
this.stateManager.state.isPanelVisible = true;
this.updateControlStates();
}
}
@@ -332,12 +346,14 @@ export class UIManager {
setTimeout(() => {
if (!this.stateManager.state.isPanelVisible && this.elements.panel) {
this.elements.panel.style.display = "none";
if (this.elements.controls) {
this.elements.controls.style.display = "none";
}
// Do NOT hide controls when panel is hidden - they should remain visible on glass
// if (this.elements.controls) {
// this.elements.controls.style.display = "none";
// }
}
}, this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelAnimations"] ? 300 : 0);
this.stateManager.state.isPanelVisible = false;
this.updateControlStates();
}
/**
web/info-panel/PositionManager.js
+26 -14
View File
@@ -98,36 +98,48 @@ class PositionManager {
* Position the floating controls relative to the panel.
*/
positionFloatingControls(controlsElement) {
if (!controlsElement || !this.panelElement) return;
const panelRect = this.panelElement.getBoundingClientRect();
if (!controlsElement) return;
const isPanelVisible = this.stateManager.state.isPanelVisible;
const magnifyGlass = window.comfyUIMagnifyGlass;
let referenceRect = null;
if (isPanelVisible && this.panelElement) {
referenceRect = this.panelElement.getBoundingClientRect();
} else if (magnifyGlass && magnifyGlass.ui && magnifyGlass.ui.glassDiv) {
referenceRect = magnifyGlass.ui.glassDiv.getBoundingClientRect();
if (referenceRect.width === 0 || referenceRect.height === 0) {
controlsElement.style.display = "none";
return;
}
}
if (!referenceRect) return;
const controlsPosition = this.stateManager.state.settings["🔍MagnifyGlass.ControlsPosition"] || "right";
const margin = 8;
let left;
let top;
switch (controlsPosition) {
case "left":
left = panelRect.left - controlsElement.offsetWidth - margin;
top = panelRect.top;
left = referenceRect.left - controlsElement.offsetWidth - margin;
top = referenceRect.top;
break;
case "right":
left = panelRect.right + margin;
top = panelRect.top;
left = referenceRect.right + margin;
top = referenceRect.top;
break;
case "top":
left = panelRect.left;
top = panelRect.top - controlsElement.offsetHeight - margin;
left = referenceRect.left;
top = referenceRect.top - controlsElement.offsetHeight - margin;
break;
case "bottom":
left = panelRect.left;
top = panelRect.bottom + margin;
left = referenceRect.left;
top = referenceRect.bottom + margin;
break;
case "top-right":
left = panelRect.right - controlsElement.offsetWidth;
top = panelRect.top - controlsElement.offsetHeight - margin;
left = referenceRect.right - controlsElement.offsetWidth;
top = referenceRect.top - controlsElement.offsetHeight - margin;
break;
default:
left = panelRect.right + margin;
top = panelRect.top;
left = referenceRect.right + margin;
top = referenceRect.top;
}
left = Math.max(10, Math.min(left, window.innerWidth - controlsElement.offsetWidth - 10));
top = Math.max(10, Math.min(top, window.innerHeight - controlsElement.offsetHeight - 10));
web/info-panel/PositionManager.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
web/info-panel/UIManager.js
+12 -7
View File
@@ -131,6 +131,7 @@ class UIManager {
});
const controlsPosition = this.stateManager.state.settings["🔍MagnifyGlass.ControlsPosition"] || "top-right";
this.updateControlsLayout(controlsPosition);
this.updateControlStates();
}
/**
* Update control button states.
@@ -146,15 +147,20 @@ class UIManager {
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 (lockBtn) {
lockBtn.style.display = this.stateManager.state.isPanelPinned ? "flex" : "none";
const showLockBtn = isPanelVisible && this.stateManager.state.isPanelPinned;
lockBtn.style.display = showLockBtn ? "flex" : "none";
lockBtn.classList.toggle("active", this.stateManager.state.isPanelLocked);
lockBtn.title = this.stateManager.state.isPanelLocked ? "Upin Panel Position" : "Pin Panel Position";
lockBtn.title = this.stateManager.state.isPanelLocked ? "Unpin Panel Position" : "Pin Panel Position";
lockBtn.disabled = !this.stateManager.state.isPanelPinned;
}
if (visibilityBtn) {
visibilityBtn.classList.toggle("active", this.stateManager.state.isPanelVisible);
visibilityBtn.title = this.stateManager.state.isPanelVisible ? "Show Panel" : "Hide Panel";
visibilityBtn.classList.toggle("active", isPanelVisible);
visibilityBtn.title = isPanelVisible ? "Hide Panel" : "Show Panel";
}
if (glassBtn) {
glassBtn.classList.toggle("active", this.stateManager.state.isGlassPreviewVisible);
@@ -222,6 +228,7 @@ class UIManager {
this.elements.panel.offsetHeight;
this.elements.panel.classList.add("visible");
this.stateManager.state.isPanelVisible = true;
this.updateControlStates();
}
}
/**
@@ -233,12 +240,10 @@ class UIManager {
setTimeout(() => {
if (!this.stateManager.state.isPanelVisible && this.elements.panel) {
this.elements.panel.style.display = "none";
if (this.elements.controls) {
this.elements.controls.style.display = "none";
}
}
}, this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelAnimations"] ? 300 : 0);
this.stateManager.state.isPanelVisible = false;
this.updateControlStates();
}
/**
* Update minimized state.
web/info-panel/UIManager.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long