From fe8df50f48cf019eea1c5227a2c0fbf42a26b01c Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 14 Jan 2026 04:37:02 +0000 Subject: [PATCH] feat: add aria labels and state attributes to icon buttons - Added `aria-label` to all icon-only buttons in the Info Panel and Magnify Glass toggle. - Implemented dynamic `aria-pressed` state updates for toggle buttons (pin, lock, persist, etc.). - Added `aria-expanded` state for the minimize/maximize button. - Added `aria-label` to the copy-to-clipboard button. - Ensures better screen reader compatibility and accessibility compliance. --- src/info-panel/UIManager.ts | 34 +++++++++++++++++++----------- src/magnify-glass/UiManager.ts | 5 ++++- web/info-panel/UIManager.js | 34 +++++++++++++++++++----------- web/info-panel/UIManager.js.map | 2 +- web/magnify-glass/UiManager.js | 5 ++++- web/magnify-glass/UiManager.js.map | 2 +- 6 files changed, 54 insertions(+), 28 deletions(-) diff --git a/src/info-panel/UIManager.ts b/src/info-panel/UIManager.ts index 46c67a4..10afb60 100644 --- a/src/info-panel/UIManager.ts +++ b/src/info-panel/UIManager.ts @@ -69,7 +69,7 @@ export class UIManager {
Real-time analysis
- +
`; @@ -220,16 +220,16 @@ export class UIManager { * - Pin icon = pin position (prevent drag) */ this.elements.controls.innerHTML = ` - - - - - - - - - - + + + + + + + + + + `; // Insert before the panel in the document body, not as a child @@ -402,6 +402,7 @@ export class UIManager { if (pinBtn) { pinBtn.classList.toggle('active', this.stateManager.state.isPanelPinned); + pinBtn.setAttribute('aria-pressed', String(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 button when panel is hidden @@ -424,6 +425,7 @@ export class UIManager { const showLockBtn = isPanelVisible && this.stateManager.state.isPanelPinned; lockBtn.style.display = showLockBtn ? 'flex' : 'none'; lockBtn.classList.toggle('active', this.stateManager.state.isPanelLocked); + lockBtn.setAttribute('aria-pressed', String(this.stateManager.state.isPanelLocked)); lockBtn.title = this.stateManager.state.isPanelLocked ? "Unpin Panel Position" : "Pin Panel Position"; lockBtn.disabled = !this.stateManager.state.isPanelPinned; } @@ -432,6 +434,7 @@ export class UIManager { if (persistBtn) { const isPersistConfigured = !!this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelPersist"]; persistBtn.classList.toggle('active', isPersistConfigured); + persistBtn.setAttribute('aria-pressed', String(isPersistConfigured)); persistBtn.title = isPersistConfigured ? "Disable Sticky Info (S)" : "Enable Sticky Info (S)"; persistBtn.style.display = isPanelVisible ? 'flex' : 'none'; } @@ -445,6 +448,7 @@ export class UIManager { holdBtn.style.display = (isPanelVisible && isPersistConfigured) ? 'flex' : 'none'; holdBtn.classList.toggle('active', isHeld); + holdBtn.setAttribute('aria-pressed', String(isHeld)); // Toggle icon: Pause (to hold) vs Play (to resume) holdBtn.innerHTML = isHeld ? Icons.play : Icons.pause; holdBtn.title = isHeld ? "Resume Info Update (P)" : "Pause Info Update (P)"; @@ -453,6 +457,7 @@ export class UIManager { if (visibilityBtn) { // Active means "Panel is Visible" visibilityBtn.classList.toggle('active', isPanelVisible); + visibilityBtn.setAttribute('aria-pressed', String(isPanelVisible)); visibilityBtn.title = isPanelVisible ? "Hide Panel" : "Show Panel"; // Disable hide button if glass is hidden (prevent hiding everything) @@ -468,6 +473,7 @@ export class UIManager { if (glassBtn) { glassBtn.classList.toggle('active', isGlassVisible); + glassBtn.setAttribute('aria-pressed', String(isGlassVisible)); glassBtn.title = isGlassVisible ? "Hide Glass Preview" : "Show Glass Preview"; // Only show glass toggle button if the inspector panel is visible @@ -479,6 +485,7 @@ export class UIManager { const cglass = (window as any).comfyUIMagnifyGlass; const showCursor = cglass?.config?.showCursorPreview || false; cursorBtn.classList.toggle('active', showCursor); + cursorBtn.setAttribute('aria-pressed', String(showCursor)); cursorBtn.title = showCursor ? "Hide Cursor Preview" : "Show Cursor Preview"; // Logic: Visible when glass is visible AND: @@ -494,6 +501,7 @@ export class UIManager { const mglass = (window as any).comfyUIMagnifyGlass; const isDragMode = mglass?.state?.isDragModeEnabled || false; dragGlassBtn.classList.toggle('active', isDragMode); + dragGlassBtn.setAttribute('aria-pressed', String(isDragMode)); dragGlassBtn.title = isDragMode ? "Cancel Move Mode (H)" : "Move Glass Position (H)"; // Only show drag button when glass is visible (even if panel is hidden) dragGlassBtn.style.display = isGlassVisible ? 'flex' : 'none'; @@ -511,6 +519,7 @@ export class UIManager { const isOpen = glass?.popOutManager?.isPopOutOpen() || false; // Logger.debug(`[UIManager] Popout button update - Glass: ${!!glass}, IsOpen: ${isOpen}`); popoutBtn.classList.toggle('active', isOpen); + popoutBtn.setAttribute('aria-pressed', String(isOpen)); popoutBtn.title = isOpen ? "Close Pop-out Viewer" : "Open Pop-out Viewer"; } } @@ -675,6 +684,7 @@ export class UIManager { if (minimizeBtn) { minimizeBtn.textContent = this.stateManager.state.isPanelMinimized ? '+' : '−'; (minimizeBtn as HTMLElement).title = this.stateManager.state.isPanelMinimized ? 'Expand Panel' : 'Minimize Panel'; + minimizeBtn.setAttribute('aria-expanded', String(!this.stateManager.state.isPanelMinimized)); } } @@ -894,7 +904,7 @@ export class UIManager { const rawValue = String(item.value || ''); const showCopyBtn = !item.clickable && rawValue.length > 3 && typeof item.value === 'string'; const copyBtnHtml = showCopyBtn ? ` - + `; this.elements.content = document.createElement("div"); @@ -132,16 +132,16 @@ class UIManager { this.elements.controls = document.createElement("div"); this.elements.controls.className = `floating-controls vertical-layout theme-${this.stateManager.state.currentTheme}`; this.elements.controls.innerHTML = ` - - - - - - - - - - + + + + + + + + + + `; document.body.appendChild(this.elements.controls); this.elements.controls.style.display = "none"; @@ -277,6 +277,7 @@ class UIManager { const isGlassVisible = this.stateManager.state.isGlassPreviewVisible; if (pinBtn) { pinBtn.classList.toggle("active", this.stateManager.state.isPanelPinned); + pinBtn.setAttribute("aria-pressed", String(this.stateManager.state.isPanelPinned)); pinBtn.title = this.stateManager.state.isPanelPinned ? "Lock Panel" : "Unlock Panel"; pinBtn.innerHTML = this.stateManager.state.isPanelPinned ? Icons.lock : Icons.unlock; pinBtn.style.display = isPanelVisible ? "flex" : "none"; @@ -294,6 +295,7 @@ class UIManager { const showLockBtn = isPanelVisible && this.stateManager.state.isPanelPinned; lockBtn.style.display = showLockBtn ? "flex" : "none"; lockBtn.classList.toggle("active", this.stateManager.state.isPanelLocked); + lockBtn.setAttribute("aria-pressed", String(this.stateManager.state.isPanelLocked)); lockBtn.title = this.stateManager.state.isPanelLocked ? "Unpin Panel Position" : "Pin Panel Position"; lockBtn.disabled = !this.stateManager.state.isPanelPinned; } @@ -301,6 +303,7 @@ class UIManager { if (persistBtn) { const isPersistConfigured = !!this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelPersist"]; persistBtn.classList.toggle("active", isPersistConfigured); + persistBtn.setAttribute("aria-pressed", String(isPersistConfigured)); persistBtn.title = isPersistConfigured ? "Disable Sticky Info (S)" : "Enable Sticky Info (S)"; persistBtn.style.display = isPanelVisible ? "flex" : "none"; } @@ -310,11 +313,13 @@ class UIManager { const isHeld = this.stateManager.state.isInfoHeld; holdBtn.style.display = isPanelVisible && isPersistConfigured ? "flex" : "none"; holdBtn.classList.toggle("active", isHeld); + holdBtn.setAttribute("aria-pressed", String(isHeld)); holdBtn.innerHTML = isHeld ? Icons.play : Icons.pause; holdBtn.title = isHeld ? "Resume Info Update (P)" : "Pause Info Update (P)"; } if (visibilityBtn) { visibilityBtn.classList.toggle("active", isPanelVisible); + visibilityBtn.setAttribute("aria-pressed", String(isPanelVisible)); visibilityBtn.title = isPanelVisible ? "Hide Panel" : "Show Panel"; if (!isGlassVisible) { visibilityBtn.disabled = true; @@ -327,6 +332,7 @@ class UIManager { } if (glassBtn) { glassBtn.classList.toggle("active", isGlassVisible); + glassBtn.setAttribute("aria-pressed", String(isGlassVisible)); glassBtn.title = isGlassVisible ? "Hide Glass Preview" : "Show Glass Preview"; glassBtn.style.display = isPanelVisible ? "flex" : "none"; } @@ -335,6 +341,7 @@ class UIManager { const cglass = window.comfyUIMagnifyGlass; const showCursor = ((_a = cglass == null ? void 0 : cglass.config) == null ? void 0 : _a.showCursorPreview) || false; cursorBtn.classList.toggle("active", showCursor); + cursorBtn.setAttribute("aria-pressed", String(showCursor)); cursorBtn.title = showCursor ? "Hide Cursor Preview" : "Show Cursor Preview"; const isPersistConfigured = !!this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelPersist"]; cursorBtn.style.display = isGlassVisible && !this.stateManager.state.isPanelPinned && !isPersistConfigured ? "flex" : "none"; @@ -344,6 +351,7 @@ class UIManager { const mglass = window.comfyUIMagnifyGlass; const isDragMode = ((_b = mglass == null ? void 0 : mglass.state) == null ? void 0 : _b.isDragModeEnabled) || false; dragGlassBtn.classList.toggle("active", isDragMode); + dragGlassBtn.setAttribute("aria-pressed", String(isDragMode)); dragGlassBtn.title = isDragMode ? "Cancel Move Mode (H)" : "Move Glass Position (H)"; dragGlassBtn.style.display = isGlassVisible ? "flex" : "none"; } @@ -356,6 +364,7 @@ class UIManager { const glass = window.comfyUIMagnifyGlass; const isOpen = ((_c = glass == null ? void 0 : glass.popOutManager) == null ? void 0 : _c.isPopOutOpen()) || false; popoutBtn.classList.toggle("active", isOpen); + popoutBtn.setAttribute("aria-pressed", String(isOpen)); popoutBtn.title = isOpen ? "Close Pop-out Viewer" : "Open Pop-out Viewer"; } } @@ -475,6 +484,7 @@ class UIManager { if (minimizeBtn) { minimizeBtn.textContent = this.stateManager.state.isPanelMinimized ? "+" : "−"; minimizeBtn.title = this.stateManager.state.isPanelMinimized ? "Expand Panel" : "Minimize Panel"; + minimizeBtn.setAttribute("aria-expanded", String(!this.stateManager.state.isPanelMinimized)); } } /** @@ -641,7 +651,7 @@ class UIManager { const rawValue = String(item.value || ""); const showCopyBtn = !item.clickable && rawValue.length > 3 && typeof item.value === "string"; const copyBtnHtml = showCopyBtn ? ` - \n \n `;\n\n // Content container\n this.elements.content = document.createElement(\"div\");\n this.elements.content.className = \"panel-content\";\n\n this.elements.panel.appendChild(this.elements.header);\n this.elements.panel.appendChild(this.elements.content);\n\n this.applyStyles();\n // Apply initial minimized state if set\n if (this.stateManager.state.isPanelMinimized) {\n this.elements.panel.classList.add('panel-minimized');\n }\n document.body.appendChild(this.elements.panel);\n\n // Hover-expand: Add/remove 'is-expanded' class, reposition, and resize font if needed\n let originalTop: number | null = null;\n let originalFontSize: number | null = null;\n const MIN_FONT_SIZE = 10; // Minimum font size in pixels\n const MARGIN = 20; // Minimum margin from viewport edges\n\n this.elements.panel.addEventListener('mouseenter', () => {\n // Sticky Mode (Persist): disable this behavior to prevent bouncing\n if (this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"]) {\n return;\n }\n\n if (!this.stateManager.state.isPanelMinimized && this.elements.panel) {\n // Save original position\n originalTop = this.elements.panel.offsetTop;\n // Save original font size just in case, though we won't change it\n originalFontSize = parseFloat(getComputedStyle(this.elements.panel).fontSize);\n\n // Add expanded class\n this.elements.panel.classList.add('is-expanded');\n\n // Simple repositioning logic only (no font scaling)\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (!this.elements.panel) return;\n\n const viewportHeight = window.innerHeight;\n const rect = this.elements.panel.getBoundingClientRect();\n\n // Position the panel to fit (move up if needed)\n if (rect.bottom > viewportHeight - MARGIN) {\n const newTop = Math.max(MARGIN, originalTop! - (rect.bottom - viewportHeight + MARGIN));\n this.elements.panel.style.top = `${newTop}px`;\n }\n });\n });\n }\n });\n\n this.elements.panel.addEventListener('mouseleave', () => {\n // Sticky Mode (Persist): disable this behavior to prevent bouncing\n if (this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"]) {\n return;\n }\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-expanded');\n\n // Restore original position\n if (originalTop !== null) {\n this.elements.panel.style.top = `${originalTop}px`;\n originalTop = null;\n }\n\n // Restore original font size (if it was somehow changed)\n if (originalFontSize !== null) {\n this.elements.panel.style.fontSize = `${originalFontSize}px`;\n originalFontSize = null;\n }\n\n // Clear any inline styles that might have been set\n this.elements.panel.style.transform = '';\n this.elements.panel.style.transformOrigin = '';\n }\n });\n\n // Add click event delegation for panel elements\n this.elements.panel.addEventListener('click', (e: MouseEvent) => {\n const target = e.target as HTMLElement;\n\n // Handle minimize button\n const minimizeBtn = target.closest('[data-action=\"minimize\"]');\n if (minimizeBtn) {\n this.stateManager.state.isPanelMinimized = !this.stateManager.state.isPanelMinimized;\n this.updateMinimizedState();\n return;\n }\n\n // Handle section header clicks for expand/collapse\n const sectionHeader = target.closest('.section-header') as HTMLElement;\n if (sectionHeader) {\n const sectionId = sectionHeader.getAttribute('data-section');\n // Skip node section (always expanded)\n if (sectionId && sectionId !== 'node') {\n const isExpanded = this.stateManager.state.expandedSections.has(sectionId);\n if (isExpanded) {\n this.stateManager.state.expandedSections.delete(sectionId);\n } else {\n this.stateManager.state.expandedSections.add(sectionId);\n }\n\n // Update visual state\n sectionHeader.classList.toggle('expanded', !isExpanded);\n const sectionContent = sectionHeader.nextElementSibling as HTMLElement;\n if (sectionContent && sectionContent.classList.contains('section-content')) {\n sectionContent.classList.toggle('expanded', !isExpanded);\n }\n }\n }\n });\n\n // Create floating controls after panel is in DOM\n if (!this.elements.controls) {\n this.createFloatingControls();\n // Update control states immediately after creation\n this.updateControlStates();\n }\n }\n\n /**\n * Create floating control buttons.\n */\n createFloatingControls(): void {\n this.elements.controls = document.createElement(\"div\");\n this.elements.controls.className = `floating-controls vertical-layout theme-${this.stateManager.state.currentTheme}`; // Default to vertical + theme\n\n /**\n * BUTTON MAPPING DOCUMENTATION:\n * =============================\n * Button 1 (Unlock Icon): data-action=\"pin\" → controls isPanelPinned\n * - Unpinned (default): Panel follows magnify glass\n * - Pinned: Panel stays at fixed position (unlocked from following glass)\n * \n * Button 2 (Pin Icon): data-action=\"lock\" → controls isPanelLocked\n * - Unlocked (default): Panel can be dragged\n * - Locked: Panel cannot be dragged (pinned in place)\n * \n * NOTE: The data-action names are counterintuitive but kept for backwards compatibility.\n * The ICONS correctly represent the functionality:\n * - Unlock icon = unlock from following glass\n * - Pin icon = pin position (prevent drag)\n */\n this.elements.controls.innerHTML = `\n \n \n \n \n \n \n \n \n \n \n `;\n\n // Insert before the panel in the document body, not as a child\n document.body.appendChild(this.elements.controls);\n\n // Hide and position off-screen initially - will be shown when magnify glass activates and positions them\n this.elements.controls.style.display = 'none';\n this.elements.controls.style.visibility = 'hidden';\n this.elements.controls.style.left = '-9999px';\n this.elements.controls.style.top = '-9999px';\n\n // Add click event delegation for control buttons\n this.elements.controls.addEventListener('click', (e: MouseEvent) => {\n const target = e.target as HTMLElement;\n const button = target.closest('button[data-action]') as HTMLButtonElement;\n if (!button) return;\n\n const action = button.getAttribute('data-action');\n Logger.debug(`Control button clicked: ${action}`);\n\n switch (action) {\n case 'pin':\n this.stateManager.togglePinning();\n this.updatePinnedState();\n this.updateControlStates();\n break;\n case 'lock':\n this.stateManager.state.isPanelLocked = !this.stateManager.state.isPanelLocked;\n this.updateControlStates();\n if (this.elements.panel) {\n this.elements.panel.classList.toggle('panel-locked', this.stateManager.state.isPanelLocked);\n }\n break;\n case 'persist':\n this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"] = !this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"];\n this.updateControlStates();\n this.applyStyles(); // Update persist-active class\n // Sync sidebar setting if needed (optional, sidebar updates on reopen usually)\n break;\n case 'toggle-panel':\n if (this.stateManager.state.isPanelVisible) {\n // User requested to hide the panel\n this.hide();\n\n // User Request: Disable sticky info when hiding via button\n if (this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"]) {\n this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"] = false;\n this.applyStyles(); // Update visual styles if necessary\n }\n } else {\n this.show();\n }\n this.updateControlStates();\n break;\n case 'toggle-glass':\n this.stateManager.state.isGlassPreviewVisible = !this.stateManager.state.isGlassPreviewVisible;\n\n // Link Glass Visibility to Panel Pinning\n if (!this.stateManager.state.isGlassPreviewVisible) {\n // Glass Hidden\n console.log(`[MagnifyGlass Debug] Glass Hidden. pinned=${this.stateManager.state.isPanelPinned}, autoPinned=${this.stateManager.state.isAutoPinned}`);\n // Only auto-pin if not already pinned by the user\n if (!this.stateManager.state.isPanelPinned) {\n if (this.elements.panel) {\n const rect = this.elements.panel.getBoundingClientRect();\n this.stateManager.state.pinnedPosition = { x: rect.left, y: rect.top };\n }\n this.stateManager.state.isPanelPinned = true;\n this.stateManager.state.isAutoPinned = true; // Track that this was auto-pinned\n console.log(`[MagnifyGlass Debug] Auto-Pinned panel.`);\n }\n // Do NOT reset isPanelLocked here - preserve user's lock state\n } else {\n // Glass Shown\n console.log(`[MagnifyGlass Debug] Glass Shown. pinned=${this.stateManager.state.isPanelPinned}, autoPinned=${this.stateManager.state.isAutoPinned}`);\n // Only unpin if it was auto-pinned (not user-pinned)\n if (this.stateManager.state.isAutoPinned) {\n this.stateManager.state.isPanelPinned = false;\n this.stateManager.state.isAutoPinned = false;\n console.log(`[MagnifyGlass Debug] Auto-Unpinned panel.`);\n }\n // If user manually pinned, keep the panel pinned\n }\n\n this.updateControlStates();\n this.updatePinnedState(); // Update visual class\n\n // Toggle BOTH the visual visibility AND the rendering\n // This fully disables the offscreen renderer when preview is hidden\n const magnifyGlass = (window as any).comfyUIMagnifyGlass;\n if (magnifyGlass && magnifyGlass.setGlassPreviewActive) {\n magnifyGlass.setGlassPreviewActive(this.stateManager.state.isGlassPreviewVisible);\n } else if (magnifyGlass && magnifyGlass.ui?.setPreviewVisibility) {\n // Fallback for backwards compatibility\n magnifyGlass.ui.setPreviewVisibility(this.stateManager.state.isGlassPreviewVisible);\n }\n break;\n case 'popout':\n // Toggle the pop-out tab\n const glass = (window as any).comfyUIMagnifyGlass;\n if (glass && glass.popOutManager) {\n glass.popOutManager.toggle();\n }\n break;\n case 'drag-glass':\n // Toggle glass drag mode\n const mglass = (window as any).comfyUIMagnifyGlass;\n if (mglass && mglass.state) {\n mglass.state.isDragModeEnabled = !mglass.state.isDragModeEnabled;\n this.updateControlStates();\n\n // Update UI to indicate drag mode\n if (mglass.ui && mglass.ui.setDragMode) {\n mglass.ui.setDragMode(mglass.state.isDragModeEnabled);\n }\n }\n break;\n case 'reset-glass':\n // Reset glass offsets\n const rglass = (window as any).comfyUIMagnifyGlass;\n if (rglass) {\n rglass.resetOffsets();\n Logger.debug(\"Reset glass position via hover controls\");\n\n // Disable drag mode if active\n if (rglass.state && rglass.state.isDragModeEnabled) {\n rglass.state.isDragModeEnabled = false;\n if (rglass.ui && rglass.ui.setDragMode) {\n rglass.ui.setDragMode(false);\n }\n this.updateControlStates();\n }\n }\n break;\n case 'toggle-cursor':\n const cglass = (window as any).comfyUIMagnifyGlass;\n if (cglass && cglass.config) {\n cglass.config.showCursorPreview = !cglass.config.showCursorPreview;\n cglass.updateMagnifiedView();\n this.updateControlStates();\n }\n break;\n case 'toggle-hold':\n this.stateManager.toggleHold();\n this.updateControlStates();\n break;\n }\n });\n\n // Set initial layout based on settings\n const controlsPosition = String(this.stateManager.state.settings[\"🔍MagnifyGlass.ControlsPosition\"] || \"top-right\");\n this.updateControlsLayout(controlsPosition);\n\n // Initial state update\n this.updateControlStates();\n }\n\n /**\n * Update control button states.\n */\n updateControlStates(): void {\n if (!this.elements.controls) return;\n\n const pinBtn = this.elements.controls.querySelector('[data-action=\"pin\"]') as HTMLButtonElement;\n const lockBtn = this.elements.controls.querySelector('[data-action=\"lock\"]') as HTMLButtonElement;\n const visibilityBtn = this.elements.controls.querySelector('[data-action=\"toggle-panel\"]') as HTMLButtonElement;\n const glassBtn = this.elements.controls.querySelector('[data-action=\"toggle-glass\"]') as HTMLButtonElement;\n const isPanelVisible = this.stateManager.state.isPanelVisible;\n const isGlassVisible = this.stateManager.state.isGlassPreviewVisible;\n\n if (pinBtn) {\n pinBtn.classList.toggle('active', this.stateManager.state.isPanelPinned);\n pinBtn.title = this.stateManager.state.isPanelPinned ? \"Lock Panel\" : \"Unlock Panel\";\n pinBtn.innerHTML = this.stateManager.state.isPanelPinned ? Icons.lock : Icons.unlock;\n // Hide unlock button when panel is hidden\n pinBtn.style.display = isPanelVisible ? 'flex' : 'none';\n\n // Disable lock button when glass is hidden (no point unlocking to follow invisible glass)\n if (!isGlassVisible) {\n pinBtn.disabled = true;\n pinBtn.style.opacity = '0.5';\n pinBtn.title = \"Cannot toggle lock when glass preview is hidden\";\n } else {\n pinBtn.disabled = false;\n pinBtn.style.opacity = '';\n pinBtn.title = this.stateManager.state.isPanelPinned ? \"Lock Panel Position (Follow Glass)\" : \"Unlock Panel Position (Drag Inspector)\";\n }\n }\n\n if (lockBtn) {\n // Only show pin button when panel is visible AND unlocked from glass\n const showLockBtn = isPanelVisible && this.stateManager.state.isPanelPinned;\n lockBtn.style.display = showLockBtn ? 'flex' : 'none';\n lockBtn.classList.toggle('active', this.stateManager.state.isPanelLocked);\n lockBtn.title = this.stateManager.state.isPanelLocked ? \"Unpin Panel Position\" : \"Pin Panel Position\";\n lockBtn.disabled = !this.stateManager.state.isPanelPinned;\n }\n\n const persistBtn = this.elements.controls.querySelector('[data-action=\"persist\"]') as HTMLButtonElement;\n if (persistBtn) {\n const isPersistConfigured = !!this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"];\n persistBtn.classList.toggle('active', isPersistConfigured);\n persistBtn.title = isPersistConfigured ? \"Disable Sticky Info (S)\" : \"Enable Sticky Info (S)\";\n persistBtn.style.display = isPanelVisible ? 'flex' : 'none';\n }\n\n const holdBtn = this.elements.controls.querySelector('[data-action=\"toggle-hold\"]') as HTMLButtonElement;\n if (holdBtn) {\n const isPersistConfigured = !!this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"];\n const isHeld = this.stateManager.state.isInfoHeld;\n\n // Only show Hold button when Sticky Info (Persist) is enabled AND panel is visible\n holdBtn.style.display = (isPanelVisible && isPersistConfigured) ? 'flex' : 'none';\n\n holdBtn.classList.toggle('active', isHeld);\n // Toggle icon: Pause (to hold) vs Play (to resume)\n holdBtn.innerHTML = isHeld ? Icons.play : Icons.pause;\n holdBtn.title = isHeld ? \"Resume Info Update (P)\" : \"Pause Info Update (P)\";\n }\n\n if (visibilityBtn) {\n // Active means \"Panel is Visible\"\n visibilityBtn.classList.toggle('active', isPanelVisible);\n visibilityBtn.title = isPanelVisible ? \"Hide Panel\" : \"Show Panel\";\n\n // Disable hide button if glass is hidden (prevent hiding everything)\n if (!isGlassVisible) {\n visibilityBtn.disabled = true;\n visibilityBtn.style.opacity = '0.5';\n visibilityBtn.title = \"Cannot hide panel when glass preview is hidden\";\n } else {\n visibilityBtn.disabled = false;\n visibilityBtn.style.opacity = '';\n }\n }\n\n if (glassBtn) {\n glassBtn.classList.toggle('active', isGlassVisible);\n glassBtn.title = isGlassVisible ? \"Hide Glass Preview\" : \"Show Glass Preview\";\n\n // Only show glass toggle button if the inspector panel is visible\n glassBtn.style.display = isPanelVisible ? 'flex' : 'none';\n }\n\n const cursorBtn = this.elements.controls.querySelector('[data-action=\"toggle-cursor\"]') as HTMLButtonElement;\n if (cursorBtn) {\n const cglass = (window as any).comfyUIMagnifyGlass;\n const showCursor = cglass?.config?.showCursorPreview || false;\n cursorBtn.classList.toggle('active', showCursor);\n cursorBtn.title = showCursor ? \"Hide Cursor Preview\" : \"Show Cursor Preview\";\n\n // Logic: Visible when glass is visible AND:\n // 1. Panel is NOT pinned (attached to glass) - original logic\n // 2. Sticky Info (Persist) is NOT enabled - user request\n const isPersistConfigured = !!this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"];\n\n cursorBtn.style.display = (isGlassVisible && !this.stateManager.state.isPanelPinned && !isPersistConfigured) ? 'flex' : 'none';\n }\n\n const dragGlassBtn = this.elements.controls.querySelector('[data-action=\"drag-glass\"]') as HTMLButtonElement;\n if (dragGlassBtn) {\n const mglass = (window as any).comfyUIMagnifyGlass;\n const isDragMode = mglass?.state?.isDragModeEnabled || false;\n dragGlassBtn.classList.toggle('active', isDragMode);\n dragGlassBtn.title = isDragMode ? \"Cancel Move Mode (H)\" : \"Move Glass Position (H)\";\n // Only show drag button when glass is visible (even if panel is hidden)\n dragGlassBtn.style.display = isGlassVisible ? 'flex' : 'none';\n }\n\n const resetGlassBtn = this.elements.controls.querySelector('[data-action=\"reset-glass\"]') as HTMLButtonElement;\n if (resetGlassBtn) {\n // Only show reset button when glass is visible (moves with drag/popout buttons)\n resetGlassBtn.style.display = isGlassVisible ? 'flex' : 'none';\n }\n\n const popoutBtn = this.elements.controls.querySelector('[data-action=\"popout\"]') as HTMLButtonElement;\n if (popoutBtn) {\n const glass = (window as any).comfyUIMagnifyGlass;\n const isOpen = glass?.popOutManager?.isPopOutOpen() || false;\n // Logger.debug(`[UIManager] Popout button update - Glass: ${!!glass}, IsOpen: ${isOpen}`);\n popoutBtn.classList.toggle('active', isOpen);\n popoutBtn.title = isOpen ? \"Close Pop-out Viewer\" : \"Open Pop-out Viewer\";\n }\n }\n\n /**\n * Update controls layout based on position setting.\n * @param position \n */\n updateControlsLayout(position: string): void {\n if (!this.elements.controls) return;\n\n // Remove existing layout classes\n this.elements.controls.classList.remove('horizontal-layout', 'vertical-layout');\n\n // Add appropriate layout class\n if (['top', 'bottom'].includes(position)) {\n this.elements.controls.classList.add('horizontal-layout');\n } else {\n this.elements.controls.classList.add('vertical-layout');\n }\n }\n\n /**\n * Load a Google Font dynamically.\n * @param fontName - Name of the font to load\n */\n loadGoogleFont(fontName: string): void {\n // Skip if already loaded\n const linkId = `google-font-${fontName.replace(/\\s+/g, '-').toLowerCase()}`;\n if (document.getElementById(linkId)) return;\n\n // Create link element for Google Fonts\n const link = document.createElement('link');\n link.id = linkId;\n link.rel = 'stylesheet';\n link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontName)}:wght@400;500;600;700&display=swap`;\n document.head.appendChild(link);\n\n Logger.debug(`[UIManager] Loaded Google Font: ${fontName}`);\n }\n\n /**\n * Apply current styles to elements.\n */\n applyStyles(): void {\n if (!this.elements.panel) return;\n\n const settings = this.stateManager.state.settings;\n\n // Debug Log\n console.log(`[UIManager] applyStyles - MaxHeight: ${settings[\"🔍MagnifyGlass.InfoPanelMaxHeight\"]}`);\n\n // 1. Apply dimensions\n this.elements.panel.style.width = `${settings[\"🔍MagnifyGlass.InfoPanelWidth\"]}px`;\n // Set max-height via CSS variable so CSS :hover rules can override\n const maxHeight = settings[\"🔍MagnifyGlass.InfoPanelMaxHeight\"];\n this.elements.panel.style.setProperty('--panel-max-height', `${maxHeight}px`);\n this.elements.panel.style.height = 'auto';\n\n // 2. Apply static styles (only needed once or if overwritten, but safe to set)\n this.elements.panel.style.position = 'absolute';\n this.elements.panel.style.zIndex = '99999';\n this.elements.panel.style.transform = 'translateY(-10px)';\n this.elements.panel.style.pointerEvents = 'auto';\n this.elements.panel.style.userSelect = 'none';\n\n // Apply Font Family\n const fontFamily = settings[\"🔍MagnifyGlass.InfoPanelFontFamily\"] as string || \"System Default\";\n if (fontFamily === \"System Default\" || fontFamily === \"system-ui\") {\n this.elements.panel.style.fontFamily = \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\";\n } else if (fontFamily === \"monospace\") {\n this.elements.panel.style.fontFamily = \"'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace\";\n } else {\n // Load Google Font dynamically\n this.loadGoogleFont(fontFamily);\n this.elements.panel.style.fontFamily = `'${fontFamily}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`;\n }\n\n // Apply Font Size\n const fontSize = settings[\"🔍MagnifyGlass.InfoPanelFontSize\"] || 14;\n this.elements.panel.style.fontSize = `${fontSize}px`;\n\n // 3. Apply transition\n this.elements.panel.style.transition = 'none';\n\n // 4. Apply Custom Colors (CSS Variables)\n const textColor = settings[\"🔍MagnifyGlass.InfoPanelTextColor\"] as string | undefined;\n if (textColor && typeof textColor === 'string') {\n const normalizedTextColor = textColor.startsWith('#') ? textColor : `#${textColor}`;\n this.elements.panel.style.setProperty('--info-panel-text-color', normalizedTextColor);\n }\n\n const accentColor = settings[\"🔍MagnifyGlass.InfoPanelAccentColor\"] as string | undefined;\n if (accentColor && typeof accentColor === 'string') {\n const normalizedAccentColor = accentColor.startsWith('#') ? accentColor : `#${accentColor}`;\n this.elements.panel.style.setProperty('--info-panel-accent-color', normalizedAccentColor);\n }\n\n // 5. Apply Opacity\n // Logic: If visible, use setting. If hidden, use 0.\n // We do NOT touch 'display' here to avoid hiding it if it's currently shown.\n // 'display' is managed by show() / hide() methods exclusively.\n if (this.stateManager.state.isPanelVisible) {\n const opacityPercent = Number(settings[\"🔍MagnifyGlass.InfoPanelOpacity\"]) || 100;\n this.elements.panel.style.opacity = (opacityPercent / 100).toString();\n } else {\n this.elements.panel.style.opacity = '0';\n }\n\n // 6. Apply Persist Mode Class\n const isPersist = !!settings[\"🔍MagnifyGlass.InfoPanelPersist\"];\n if (isPersist) {\n this.elements.panel.classList.add('persist-active');\n } else {\n this.elements.panel.classList.remove('persist-active');\n }\n }\n\n /**\n * Show the panel.\n */\n show(): void {\n if (!this.elements.panel) return;\n\n if (this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelEnabled\"]) {\n this.elements.panel.style.display = \"block\";\n // Controls are shown by positionFloatingControls() after proper positioning\n // Apply user's opacity setting when showing (convert percentage to decimal)\n const opacityPercent = Number(this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelOpacity\"]) || 100;\n this.elements.panel.style.opacity = (opacityPercent / 100).toString();\n // Trigger reflow\n this.elements.panel.offsetHeight;\n this.elements.panel.classList.add('visible');\n this.stateManager.state.isPanelVisible = true;\n this.updateControlStates();\n }\n }\n\n /**\n * Hide the panel.\n */\n hide(): void {\n if (!this.elements.panel) return;\n\n this.elements.panel.classList.remove('visible');\n this.elements.panel.classList.remove('visible');\n if (this.elements.panel) {\n this.elements.panel.style.display = \"none\";\n }\n this.stateManager.state.isPanelVisible = false;\n this.updateControlStates();\n }\n\n /**\n * Update minimized state.\n */\n updateMinimizedState(): void {\n if (!this.elements.panel || !this.elements.header) return;\n\n this.elements.panel.classList.toggle('panel-minimized', this.stateManager.state.isPanelMinimized);\n const minimizeBtn = this.elements.header.querySelector('.minimize-btn');\n if (minimizeBtn) {\n minimizeBtn.textContent = this.stateManager.state.isPanelMinimized ? '+' : '−';\n (minimizeBtn as HTMLElement).title = this.stateManager.state.isPanelMinimized ? 'Expand Panel' : 'Minimize Panel';\n }\n }\n\n /**\n * Update pinned state.\n */\n updatePinnedState(): void {\n if (!this.elements.panel) return;\n\n this.elements.panel.classList.toggle('panel-pinned', this.stateManager.state.isPanelPinned);\n this.elements.panel.classList.toggle('panel-locked', this.stateManager.state.isPanelLocked);\n this.updateControlStates();\n }\n\n /**\n * Update theme class.\n * @param newTheme \n */\n updateTheme(newTheme: string): void {\n if (this.elements.panel) {\n this.elements.panel.className = this.elements.panel.className.replace(/theme-\\w+/, `theme-${newTheme.toLowerCase()}`);\n }\n if (this.elements.controls) {\n this.elements.controls.className = this.elements.controls.className.replace(/theme-\\w+/, `theme-${newTheme.toLowerCase()}`);\n }\n }\n\n /**\n * Display information in the panel.\n * @param info \n */\n displayInfo(info: any): void {\n const sections = this.buildSections(info);\n this.renderSections(sections);\n this.updateSectionStates();\n this.updateHeaderSubtitle(info);\n }\n\n /**\n * Build section data from info object.\n * @param info \n * @returns \n */\n buildSections(info: any): any[] {\n const sections: any[] = [];\n const settings = this.stateManager.state.settings;\n\n // Inspector section\n if (settings[\"🔍MagnifyGlass.ShowInspectorTab\"] && info.cursor && info.cursor.canvas) {\n const inspectorContent = [\n { label: 'Cursor Canvas', value: `(${Math.round(info.cursor.canvas.x)}, ${Math.round(info.cursor.canvas.y)})` },\n { label: 'Canvas Scale', value: `${(info.canvas.scale * 100).toFixed(1)}%` },\n { label: 'Magnifier Zoom', value: `${info.magnifier.zoomFactor}×` }\n ];\n\n sections.push({\n id: 'inspector',\n icon: Icons.info,\n title: 'Inspector',\n content: inspectorContent\n });\n }\n\n // Media section\n if (info.media) {\n const mediaContent = [\n { label: 'Type', value: info.media.tagName },\n { label: 'Source', value: info.media.src }\n ];\n\n if (info.media.naturalSize) {\n mediaContent.push({ label: 'Natural', value: info.media.naturalSize });\n }\n\n sections.push({\n id: 'media',\n icon: Icons.camera,\n title: 'Media',\n badge: info.media.tagName,\n content: mediaContent\n });\n }\n\n // Node Details section\n if (info.hoveredNode) {\n const nodeContent: any[] = []; // Initial Node details\n nodeContent.push({\n label: 'Title',\n value: `${info.hoveredNode.title || 'Untitled'} (#${info.hoveredNode.id})`,\n clickable: 'title'\n });\n if (info.hoveredNode.executionOrder !== undefined) {\n nodeContent.push({ label: 'Exec Order', value: info.hoveredNode.executionOrder, clickable: 'execOrder' });\n }\n\n // Add Zoom to Node button\n nodeContent.push({\n label: 'Location',\n value: `${Icons.focus} Focus Node`,\n clickable: 'zoom',\n nodeId: info.hoveredNode.id\n });\n\n // Add category if available\n if (info.hoveredNode.category) {\n nodeContent.push({ label: 'Category', value: info.hoveredNode.category });\n }\n\n // Add python module path if available\n if (info.hoveredNode.pythonModule) {\n const path = info.hoveredNode.pythonModule.replace(/\\./g, '/') + '.py';\n nodeContent.push({ label: 'Path', value: path });\n }\n\n // Check if this is a complex node that shows all widgets\n const nodeType = info.hoveredNode.type ? info.hoveredNode.type.toLowerCase() : '';\n const isSaveNode = nodeType.includes('save') &&\n !nodeType.includes('checkpoint') &&\n !nodeType.includes('model') &&\n !nodeType.includes('preview');\n\n const showAllWidgets = info.hoveredNode.type && (\n nodeType.includes('ksampler') ||\n nodeType.includes('sampler') ||\n nodeType.includes('k_samplers') ||\n nodeType.includes('checkpoint') ||\n nodeType.includes('model') ||\n nodeType.includes('lora') ||\n nodeType.includes('controlnet') ||\n nodeType.includes('advanced') ||\n nodeType.includes('detailer') ||\n nodeType.includes('inpaint') ||\n nodeType.includes('upscale') ||\n nodeType.includes('clip') ||\n nodeType.includes('text') ||\n nodeType.includes('encode')\n ) && !isSaveNode;\n\n if (!showAllWidgets) {\n // Add specific extractions for simple nodes\n const checkpoint = getCheckpointInfo(info.hoveredNode);\n if (checkpoint) {\n nodeContent.push({ label: 'Model', value: checkpoint });\n }\n\n const imgInfo = getImageInfo(info.hoveredNode);\n if (imgInfo) {\n if (typeof imgInfo === 'string') {\n nodeContent.push({ label: 'Image', value: imgInfo });\n } else if (typeof imgInfo === 'object' && imgInfo !== null) {\n const imgResult = imgInfo as ImageInfoResult;\n nodeContent.push({ label: 'Image Size', value: `${imgResult.width}×${imgResult.height}` });\n if (imgResult.src) {\n nodeContent.push({ label: 'Image Source', value: imgResult.src });\n }\n }\n }\n\n const textContent = getTextBoxContent(info.hoveredNode);\n if (textContent) {\n nodeContent.push({ label: 'Text', value: textContent });\n }\n }\n\n const importantParameters = getImportantNodeParameters(info.hoveredNode);\n nodeContent.push(...importantParameters);\n\n sections.push({\n id: 'node',\n icon: Icons.box,\n title: 'Node',\n badge: info.hoveredNode.type,\n content: nodeContent\n });\n }\n\n return sections;\n }\n\n /**\n * Render sections to the panel.\n * @param sections \n */\n renderSections(sections: any[]): void {\n if (!this.elements.content) return;\n\n if (sections.length === 0) {\n this.elements.content.innerHTML = `\n
\n
${Icons.mapPin}
\n
Empty canvas area
\n
\n `;\n return;\n }\n\n this.elements.content.innerHTML = sections.map(section => `\n
\n
\n ${section.icon}\n ${section.title}\n ${section.badge ? `${section.badge}` : ''}\n ${section.id !== 'node' ? `${Icons.chevronRight}` : ''}\n
\n
\n
\n ${section.content.map((item: any) => {\n const value = formatValue(item.value, item.label);\n const valueClass = getValueClass(item.value);\n const valueAttributes = getValueAttributes(item.value);\n const clickableAttr = item.clickable ? `data-clickable=\"${item.clickable}\"` : '';\n const nodeIdAttr = item.nodeId !== undefined ? `data-node-id=\"${item.nodeId}\"` : '';\n const clickableClass = item.clickable ? 'clickable-row' : '';\n // Only show dropdown arrow for actual dropdowns, not actions like zoom\n const dropdownIcon = (item.clickable && item.clickable !== 'zoom') ? '▼' : '';\n // Show copy button for string values that are long enough to be worth copying\n const rawValue = String(item.value || '');\n const showCopyBtn = !item.clickable && rawValue.length > 3 && typeof item.value === 'string';\n const copyBtnHtml = showCopyBtn ? `\n ` : '';\n return `\n
\n ${item.label}\n ${value}${dropdownIcon}\n ${copyBtnHtml}\n
`;\n }).join('')}\n
\n
\n
`).join('');\n\n // Add click handlers for clickable rows\n this.attachDropdownClickHandlers();\n }\n\n /**\n * Attach click handlers to clickable dropdown rows.\n */\n attachDropdownClickHandlers(): void {\n if (!this.elements.content) return;\n\n const clickableRows = this.elements.content.querySelectorAll('[data-clickable]');\n clickableRows.forEach(row => {\n const clickableType = (row as HTMLElement).dataset.clickable;\n\n row.addEventListener('click', (e) => {\n e.stopPropagation();\n\n if (clickableType === 'title') {\n this.showTitleDropdown(row as HTMLElement);\n } else if (clickableType === 'execOrder') {\n this.showExecOrderDropdown(row as HTMLElement);\n } else if (clickableType === 'id') {\n this.showIdDropdown(row as HTMLElement);\n } else if (clickableType === 'zoom') {\n const nodeId = (row as HTMLElement).dataset.nodeId;\n if (nodeId) {\n const app = (window as any).app;\n const node = app.graph.getNodeById(parseInt(nodeId));\n if (node && app.canvas) {\n app.canvas.centerOnNode(node);\n }\n }\n }\n });\n\n // Add hover effect\n row.addEventListener('mouseenter', () => {\n (row as HTMLElement).style.background = 'var(--comfy-input-bg, rgba(255,255,255,0.05))';\n });\n row.addEventListener('mouseleave', () => {\n (row as HTMLElement).style.background = '';\n });\n });\n\n // Add click handlers for copy buttons\n const copyButtons = this.elements.content.querySelectorAll('.copy-btn');\n copyButtons.forEach(btn => {\n btn.addEventListener('click', (e) => {\n e.stopPropagation();\n const value = (btn as HTMLElement).dataset.copyValue || '';\n navigator.clipboard.writeText(value).then(() => {\n // Show success feedback\n btn.classList.add('copied');\n const originalHtml = btn.innerHTML;\n btn.innerHTML = ``;\n setTimeout(() => {\n btn.innerHTML = originalHtml;\n btn.classList.remove('copied');\n }, 1500);\n }).catch(err => {\n console.error('Failed to copy:', err);\n });\n });\n });\n }\n\n /**\n * Update section expansion states.\n */\n updateSectionStates(): void {\n if (!this.elements.content) return;\n\n const sections = this.elements.content.querySelectorAll('.info-section');\n sections.forEach(section => {\n const sectionId = (section as HTMLElement).dataset.section;\n if (!sectionId) return;\n\n const header = section.querySelector('.section-header');\n const content = section.querySelector('.section-content');\n\n if (header && content) {\n if (this.stateManager.state.expandedSections.has(sectionId)) {\n header.classList.add('expanded');\n content.classList.add('expanded');\n } else {\n header.classList.remove('expanded');\n content.classList.remove('expanded');\n }\n }\n });\n }\n\n /**\n * Update header subtitle.\n * @param info \n */\n updateHeaderSubtitle(info: any): void {\n if (!this.elements.header) return;\n\n const subtitleElement = this.elements.header.querySelector('.header-subtitle') as HTMLElement;\n if (subtitleElement) {\n const accentColor = String(this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelAccentColor\"] || '');\n if (info.hoveredNode) {\n subtitleElement.textContent = `Analyzing: ${info.hoveredNode.title} `;\n subtitleElement.style.color = accentColor;\n } else if (info.media) {\n subtitleElement.textContent = `Media: ${info.media.tagName} `;\n subtitleElement.style.color = accentColor;\n } else if (info.connection) {\n subtitleElement.textContent = `Connection: ${info.connection.type} `;\n subtitleElement.style.color = accentColor;\n } else {\n subtitleElement.textContent = 'Real-time analysis';\n subtitleElement.style.color = '';\n }\n }\n }\n\n /**\n * Inject CSS styles by loading external stylesheet.\n */\n injectStyles(): void {\n if (!document.getElementById('magnify-info-panel-styles-v2')) {\n const link = document.createElement('link');\n link.id = 'magnify-info-panel-styles-v2';\n link.rel = 'stylesheet';\n link.type = 'text/css';\n link.href = 'extensions/comfyui-magnifyglass/info-panel.css';\n document.head.appendChild(link);\n }\n }\n\n /**\n * Show dropdown with nodes sorted by title.\n * @param anchorElement - Element to anchor the dropdown to\n */\n showTitleDropdown(anchorElement: HTMLElement): void {\n this.hideDropdown();\n\n const nodes = this.nodeSelector.getNodesSortedByTitle();\n if (nodes.length === 0) return;\n\n this.createDropdown(nodes, anchorElement, 'title');\n }\n\n /**\n * Show dropdown with nodes sorted by execution order.\n * @param anchorElement - Element to anchor the dropdown to\n */\n showExecOrderDropdown(anchorElement: HTMLElement): void {\n this.hideDropdown();\n\n const nodes = this.nodeSelector.getNodesSortedByExecOrder();\n if (nodes.length === 0) return;\n\n this.createDropdown(nodes, anchorElement, 'execOrder');\n }\n\n /**\n * Show dropdown with nodes sorted by ID.\n * @param anchorElement - Element to anchor the dropdown to\n */\n showIdDropdown(anchorElement: HTMLElement): void {\n this.hideDropdown();\n\n const nodes = this.nodeSelector.getNodesSortedById();\n if (nodes.length === 0) return;\n\n this.createDropdown(nodes, anchorElement, 'id');\n }\n\n /**\n * Create and show the dropdown.\n */\n private createDropdown(\n nodes: NodeListEntry[] | NodeExecOrderEntry[],\n anchorElement: HTMLElement,\n type: 'title' | 'execOrder' | 'id'\n ): void {\n const dropdown = document.createElement('div');\n dropdown.className = `node-selector-dropdown theme-${this.stateManager.state.currentTheme}`;\n dropdown.style.cssText = `\n position: absolute;\n z-index: 100000;\n max-height: 300px;\n overflow-y: auto;\n background: var(--comfy-menu-bg, #2a2a2a);\n border: 1px solid var(--border-color, #444);\n border-radius: 6px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n min-width: 200px;\n max-width: 350px;\n `;\n\n // Build dropdown items\n nodes.forEach((node) => {\n const item = document.createElement('div');\n item.className = 'dropdown-item';\n item.style.cssText = `\n padding: 8px 12px;\n cursor: pointer;\n border-bottom: 1px solid var(--border-color, #333);\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n `;\n\n // Check if this is an exec order entry\n const isExecOrder = 'order' in node;\n\n if (isExecOrder) {\n const execNode = node as NodeExecOrderEntry;\n item.innerHTML = `\n #${execNode.order}\n ${execNode.title} (#${execNode.id})\n ${execNode.type}\n `;\n } else {\n item.innerHTML = `\n ${node.title} (#${node.id})\n ${node.type}\n `;\n }\n\n // Hover effect\n item.addEventListener('mouseenter', () => {\n item.style.background = 'var(--comfy-input-bg, #3a3a3a)';\n });\n item.addEventListener('mouseleave', () => {\n item.style.background = '';\n });\n\n // Selection handler\n item.addEventListener('click', (e) => {\n e.stopPropagation();\n this.hideDropdown();\n\n // Set selected node in state\n this.stateManager.setSelectedNode(node.id);\n\n // Notify callback if set\n if (this.onNodeSelected) {\n this.onNodeSelected(node.id);\n }\n });\n\n dropdown.appendChild(item);\n });\n\n // Position dropdown below anchor\n document.body.appendChild(dropdown);\n const anchorRect = anchorElement.getBoundingClientRect();\n\n // Position below the anchor, aligned to left\n dropdown.style.top = `${anchorRect.bottom + 4}px`;\n dropdown.style.left = `${anchorRect.left}px`;\n\n // Adjust if dropdown would go off-screen\n const dropdownRect = dropdown.getBoundingClientRect();\n if (dropdownRect.right > window.innerWidth - 10) {\n dropdown.style.left = `${window.innerWidth - dropdownRect.width - 10}px`;\n }\n if (dropdownRect.bottom > window.innerHeight - 10) {\n // Show above instead\n dropdown.style.top = `${anchorRect.top - dropdownRect.height - 4}px`;\n }\n\n this.currentDropdown = dropdown;\n\n // Close on click outside\n const closeHandler = (e: MouseEvent) => {\n if (!dropdown.contains(e.target as Node) && !anchorElement.contains(e.target as Node)) {\n this.hideDropdown();\n document.removeEventListener('click', closeHandler);\n }\n };\n\n // Delay adding the listener to avoid immediate closure\n setTimeout(() => {\n document.addEventListener('click', closeHandler);\n }, 10);\n }\n\n /**\n * Hide the current dropdown.\n */\n hideDropdown(): void {\n if (this.currentDropdown && this.currentDropdown.parentNode) {\n this.currentDropdown.parentNode.removeChild(this.currentDropdown);\n this.currentDropdown = null;\n }\n }\n\n cleanup(): void {\n if (this.elements.panel && this.elements.panel.parentNode) {\n this.elements.panel.parentNode.removeChild(this.elements.panel);\n }\n if (this.elements.controls && this.elements.controls.parentNode) {\n this.elements.controls.parentNode.removeChild(this.elements.controls);\n }\n }\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"UIManager.js","sources":["../../src/info-panel/UIManager.ts"],"sourcesContent":["/**\n * ComfyUI MagnifyGlass - Info Panel UI Manager (TypeScript)\n * \n * Complete UI Manager extracted from magnify_info_panel.js\n * Handles all DOM manipulation and UI creation for the info panel.\n */\n\nimport { StateManager } from './StateManager';\nimport { Icons } from '../shared/icons';\nimport { Logger } from '../shared/logger';\nimport { formatValue, getValueClass, getValueAttributes, formatWidgetValue } from './ValueFormatter';\nimport {\n getCheckpointInfo,\n getImageInfo,\n getTextBoxContent,\n getImportantNodeParameters,\n type ImageInfoResult\n} from './NodeDataExtractor';\nimport { NodeSelector, type NodeListEntry, type NodeExecOrderEntry } from './NodeSelector';\n\ninterface InfoPanelElements {\n panel: HTMLDivElement | null;\n header: HTMLDivElement | null;\n content: HTMLDivElement | null;\n controls: HTMLDivElement | null;\n}\n\n/**\n * UI Manager class.\n * Handles all DOM manipulation and UI creation.\n */\nexport class UIManager {\n stateManager: StateManager;\n elements: InfoPanelElements;\n nodeSelector: NodeSelector;\n currentDropdown: HTMLDivElement | null = null;\n onNodeSelected: ((nodeId: number) => void) | null = null;\n\n constructor(stateManager: StateManager) {\n this.stateManager = stateManager;\n this.elements = {\n panel: null,\n header: null,\n content: null,\n controls: null\n };\n this.nodeSelector = new NodeSelector();\n\n this.createPanel();\n this.injectStyles();\n }\n\n /**\n * Create the main panel and its components.\n */\n createPanel(): void {\n // Main panel container\n this.elements.panel = document.createElement(\"div\");\n this.elements.panel.id = \"comfyui-magnify-info-panel-pro-v2\";\n this.elements.panel.className = `magnify-info-panel theme-${this.stateManager.state.currentTheme}`;\n\n // Header\n this.elements.header = document.createElement(\"div\");\n this.elements.header.className = \"panel-header\";\n this.elements.header.innerHTML = `\n
\n
${Icons.magnifyGlass}
\n
Inspector
\n
Real-time analysis
\n
\n
\n \n
\n `;\n\n // Content container\n this.elements.content = document.createElement(\"div\");\n this.elements.content.className = \"panel-content\";\n\n this.elements.panel.appendChild(this.elements.header);\n this.elements.panel.appendChild(this.elements.content);\n\n this.applyStyles();\n // Apply initial minimized state if set\n if (this.stateManager.state.isPanelMinimized) {\n this.elements.panel.classList.add('panel-minimized');\n }\n document.body.appendChild(this.elements.panel);\n\n // Hover-expand: Add/remove 'is-expanded' class, reposition, and resize font if needed\n let originalTop: number | null = null;\n let originalFontSize: number | null = null;\n const MIN_FONT_SIZE = 10; // Minimum font size in pixels\n const MARGIN = 20; // Minimum margin from viewport edges\n\n this.elements.panel.addEventListener('mouseenter', () => {\n // Sticky Mode (Persist): disable this behavior to prevent bouncing\n if (this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"]) {\n return;\n }\n\n if (!this.stateManager.state.isPanelMinimized && this.elements.panel) {\n // Save original position\n originalTop = this.elements.panel.offsetTop;\n // Save original font size just in case, though we won't change it\n originalFontSize = parseFloat(getComputedStyle(this.elements.panel).fontSize);\n\n // Add expanded class\n this.elements.panel.classList.add('is-expanded');\n\n // Simple repositioning logic only (no font scaling)\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n if (!this.elements.panel) return;\n\n const viewportHeight = window.innerHeight;\n const rect = this.elements.panel.getBoundingClientRect();\n\n // Position the panel to fit (move up if needed)\n if (rect.bottom > viewportHeight - MARGIN) {\n const newTop = Math.max(MARGIN, originalTop! - (rect.bottom - viewportHeight + MARGIN));\n this.elements.panel.style.top = `${newTop}px`;\n }\n });\n });\n }\n });\n\n this.elements.panel.addEventListener('mouseleave', () => {\n // Sticky Mode (Persist): disable this behavior to prevent bouncing\n if (this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"]) {\n return;\n }\n\n if (this.elements.panel) {\n this.elements.panel.classList.remove('is-expanded');\n\n // Restore original position\n if (originalTop !== null) {\n this.elements.panel.style.top = `${originalTop}px`;\n originalTop = null;\n }\n\n // Restore original font size (if it was somehow changed)\n if (originalFontSize !== null) {\n this.elements.panel.style.fontSize = `${originalFontSize}px`;\n originalFontSize = null;\n }\n\n // Clear any inline styles that might have been set\n this.elements.panel.style.transform = '';\n this.elements.panel.style.transformOrigin = '';\n }\n });\n\n // Add click event delegation for panel elements\n this.elements.panel.addEventListener('click', (e: MouseEvent) => {\n const target = e.target as HTMLElement;\n\n // Handle minimize button\n const minimizeBtn = target.closest('[data-action=\"minimize\"]');\n if (minimizeBtn) {\n this.stateManager.state.isPanelMinimized = !this.stateManager.state.isPanelMinimized;\n this.updateMinimizedState();\n return;\n }\n\n // Handle section header clicks for expand/collapse\n const sectionHeader = target.closest('.section-header') as HTMLElement;\n if (sectionHeader) {\n const sectionId = sectionHeader.getAttribute('data-section');\n // Skip node section (always expanded)\n if (sectionId && sectionId !== 'node') {\n const isExpanded = this.stateManager.state.expandedSections.has(sectionId);\n if (isExpanded) {\n this.stateManager.state.expandedSections.delete(sectionId);\n } else {\n this.stateManager.state.expandedSections.add(sectionId);\n }\n\n // Update visual state\n sectionHeader.classList.toggle('expanded', !isExpanded);\n const sectionContent = sectionHeader.nextElementSibling as HTMLElement;\n if (sectionContent && sectionContent.classList.contains('section-content')) {\n sectionContent.classList.toggle('expanded', !isExpanded);\n }\n }\n }\n });\n\n // Create floating controls after panel is in DOM\n if (!this.elements.controls) {\n this.createFloatingControls();\n // Update control states immediately after creation\n this.updateControlStates();\n }\n }\n\n /**\n * Create floating control buttons.\n */\n createFloatingControls(): void {\n this.elements.controls = document.createElement(\"div\");\n this.elements.controls.className = `floating-controls vertical-layout theme-${this.stateManager.state.currentTheme}`; // Default to vertical + theme\n\n /**\n * BUTTON MAPPING DOCUMENTATION:\n * =============================\n * Button 1 (Unlock Icon): data-action=\"pin\" → controls isPanelPinned\n * - Unpinned (default): Panel follows magnify glass\n * - Pinned: Panel stays at fixed position (unlocked from following glass)\n * \n * Button 2 (Pin Icon): data-action=\"lock\" → controls isPanelLocked\n * - Unlocked (default): Panel can be dragged\n * - Locked: Panel cannot be dragged (pinned in place)\n * \n * NOTE: The data-action names are counterintuitive but kept for backwards compatibility.\n * The ICONS correctly represent the functionality:\n * - Unlock icon = unlock from following glass\n * - Pin icon = pin position (prevent drag)\n */\n this.elements.controls.innerHTML = `\n \n \n \n \n \n \n \n \n \n \n `;\n\n // Insert before the panel in the document body, not as a child\n document.body.appendChild(this.elements.controls);\n\n // Hide and position off-screen initially - will be shown when magnify glass activates and positions them\n this.elements.controls.style.display = 'none';\n this.elements.controls.style.visibility = 'hidden';\n this.elements.controls.style.left = '-9999px';\n this.elements.controls.style.top = '-9999px';\n\n // Add click event delegation for control buttons\n this.elements.controls.addEventListener('click', (e: MouseEvent) => {\n const target = e.target as HTMLElement;\n const button = target.closest('button[data-action]') as HTMLButtonElement;\n if (!button) return;\n\n const action = button.getAttribute('data-action');\n Logger.debug(`Control button clicked: ${action}`);\n\n switch (action) {\n case 'pin':\n this.stateManager.togglePinning();\n this.updatePinnedState();\n this.updateControlStates();\n break;\n case 'lock':\n this.stateManager.state.isPanelLocked = !this.stateManager.state.isPanelLocked;\n this.updateControlStates();\n if (this.elements.panel) {\n this.elements.panel.classList.toggle('panel-locked', this.stateManager.state.isPanelLocked);\n }\n break;\n case 'persist':\n this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"] = !this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"];\n this.updateControlStates();\n this.applyStyles(); // Update persist-active class\n // Sync sidebar setting if needed (optional, sidebar updates on reopen usually)\n break;\n case 'toggle-panel':\n if (this.stateManager.state.isPanelVisible) {\n // User requested to hide the panel\n this.hide();\n\n // User Request: Disable sticky info when hiding via button\n if (this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"]) {\n this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"] = false;\n this.applyStyles(); // Update visual styles if necessary\n }\n } else {\n this.show();\n }\n this.updateControlStates();\n break;\n case 'toggle-glass':\n this.stateManager.state.isGlassPreviewVisible = !this.stateManager.state.isGlassPreviewVisible;\n\n // Link Glass Visibility to Panel Pinning\n if (!this.stateManager.state.isGlassPreviewVisible) {\n // Glass Hidden\n console.log(`[MagnifyGlass Debug] Glass Hidden. pinned=${this.stateManager.state.isPanelPinned}, autoPinned=${this.stateManager.state.isAutoPinned}`);\n // Only auto-pin if not already pinned by the user\n if (!this.stateManager.state.isPanelPinned) {\n if (this.elements.panel) {\n const rect = this.elements.panel.getBoundingClientRect();\n this.stateManager.state.pinnedPosition = { x: rect.left, y: rect.top };\n }\n this.stateManager.state.isPanelPinned = true;\n this.stateManager.state.isAutoPinned = true; // Track that this was auto-pinned\n console.log(`[MagnifyGlass Debug] Auto-Pinned panel.`);\n }\n // Do NOT reset isPanelLocked here - preserve user's lock state\n } else {\n // Glass Shown\n console.log(`[MagnifyGlass Debug] Glass Shown. pinned=${this.stateManager.state.isPanelPinned}, autoPinned=${this.stateManager.state.isAutoPinned}`);\n // Only unpin if it was auto-pinned (not user-pinned)\n if (this.stateManager.state.isAutoPinned) {\n this.stateManager.state.isPanelPinned = false;\n this.stateManager.state.isAutoPinned = false;\n console.log(`[MagnifyGlass Debug] Auto-Unpinned panel.`);\n }\n // If user manually pinned, keep the panel pinned\n }\n\n this.updateControlStates();\n this.updatePinnedState(); // Update visual class\n\n // Toggle BOTH the visual visibility AND the rendering\n // This fully disables the offscreen renderer when preview is hidden\n const magnifyGlass = (window as any).comfyUIMagnifyGlass;\n if (magnifyGlass && magnifyGlass.setGlassPreviewActive) {\n magnifyGlass.setGlassPreviewActive(this.stateManager.state.isGlassPreviewVisible);\n } else if (magnifyGlass && magnifyGlass.ui?.setPreviewVisibility) {\n // Fallback for backwards compatibility\n magnifyGlass.ui.setPreviewVisibility(this.stateManager.state.isGlassPreviewVisible);\n }\n break;\n case 'popout':\n // Toggle the pop-out tab\n const glass = (window as any).comfyUIMagnifyGlass;\n if (glass && glass.popOutManager) {\n glass.popOutManager.toggle();\n }\n break;\n case 'drag-glass':\n // Toggle glass drag mode\n const mglass = (window as any).comfyUIMagnifyGlass;\n if (mglass && mglass.state) {\n mglass.state.isDragModeEnabled = !mglass.state.isDragModeEnabled;\n this.updateControlStates();\n\n // Update UI to indicate drag mode\n if (mglass.ui && mglass.ui.setDragMode) {\n mglass.ui.setDragMode(mglass.state.isDragModeEnabled);\n }\n }\n break;\n case 'reset-glass':\n // Reset glass offsets\n const rglass = (window as any).comfyUIMagnifyGlass;\n if (rglass) {\n rglass.resetOffsets();\n Logger.debug(\"Reset glass position via hover controls\");\n\n // Disable drag mode if active\n if (rglass.state && rglass.state.isDragModeEnabled) {\n rglass.state.isDragModeEnabled = false;\n if (rglass.ui && rglass.ui.setDragMode) {\n rglass.ui.setDragMode(false);\n }\n this.updateControlStates();\n }\n }\n break;\n case 'toggle-cursor':\n const cglass = (window as any).comfyUIMagnifyGlass;\n if (cglass && cglass.config) {\n cglass.config.showCursorPreview = !cglass.config.showCursorPreview;\n cglass.updateMagnifiedView();\n this.updateControlStates();\n }\n break;\n case 'toggle-hold':\n this.stateManager.toggleHold();\n this.updateControlStates();\n break;\n }\n });\n\n // Set initial layout based on settings\n const controlsPosition = String(this.stateManager.state.settings[\"🔍MagnifyGlass.ControlsPosition\"] || \"top-right\");\n this.updateControlsLayout(controlsPosition);\n\n // Initial state update\n this.updateControlStates();\n }\n\n /**\n * Update control button states.\n */\n updateControlStates(): void {\n if (!this.elements.controls) return;\n\n const pinBtn = this.elements.controls.querySelector('[data-action=\"pin\"]') as HTMLButtonElement;\n const lockBtn = this.elements.controls.querySelector('[data-action=\"lock\"]') as HTMLButtonElement;\n const visibilityBtn = this.elements.controls.querySelector('[data-action=\"toggle-panel\"]') as HTMLButtonElement;\n const glassBtn = this.elements.controls.querySelector('[data-action=\"toggle-glass\"]') as HTMLButtonElement;\n const isPanelVisible = this.stateManager.state.isPanelVisible;\n const isGlassVisible = this.stateManager.state.isGlassPreviewVisible;\n\n if (pinBtn) {\n pinBtn.classList.toggle('active', this.stateManager.state.isPanelPinned);\n pinBtn.setAttribute('aria-pressed', String(this.stateManager.state.isPanelPinned));\n pinBtn.title = this.stateManager.state.isPanelPinned ? \"Lock Panel\" : \"Unlock Panel\";\n pinBtn.innerHTML = this.stateManager.state.isPanelPinned ? Icons.lock : Icons.unlock;\n // Hide unlock button when panel is hidden\n pinBtn.style.display = isPanelVisible ? 'flex' : 'none';\n\n // Disable lock button when glass is hidden (no point unlocking to follow invisible glass)\n if (!isGlassVisible) {\n pinBtn.disabled = true;\n pinBtn.style.opacity = '0.5';\n pinBtn.title = \"Cannot toggle lock when glass preview is hidden\";\n } else {\n pinBtn.disabled = false;\n pinBtn.style.opacity = '';\n pinBtn.title = this.stateManager.state.isPanelPinned ? \"Lock Panel Position (Follow Glass)\" : \"Unlock Panel Position (Drag Inspector)\";\n }\n }\n\n if (lockBtn) {\n // Only show pin button when panel is visible AND unlocked from glass\n const showLockBtn = isPanelVisible && this.stateManager.state.isPanelPinned;\n lockBtn.style.display = showLockBtn ? 'flex' : 'none';\n lockBtn.classList.toggle('active', this.stateManager.state.isPanelLocked);\n lockBtn.setAttribute('aria-pressed', String(this.stateManager.state.isPanelLocked));\n lockBtn.title = this.stateManager.state.isPanelLocked ? \"Unpin Panel Position\" : \"Pin Panel Position\";\n lockBtn.disabled = !this.stateManager.state.isPanelPinned;\n }\n\n const persistBtn = this.elements.controls.querySelector('[data-action=\"persist\"]') as HTMLButtonElement;\n if (persistBtn) {\n const isPersistConfigured = !!this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"];\n persistBtn.classList.toggle('active', isPersistConfigured);\n persistBtn.setAttribute('aria-pressed', String(isPersistConfigured));\n persistBtn.title = isPersistConfigured ? \"Disable Sticky Info (S)\" : \"Enable Sticky Info (S)\";\n persistBtn.style.display = isPanelVisible ? 'flex' : 'none';\n }\n\n const holdBtn = this.elements.controls.querySelector('[data-action=\"toggle-hold\"]') as HTMLButtonElement;\n if (holdBtn) {\n const isPersistConfigured = !!this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"];\n const isHeld = this.stateManager.state.isInfoHeld;\n\n // Only show Hold button when Sticky Info (Persist) is enabled AND panel is visible\n holdBtn.style.display = (isPanelVisible && isPersistConfigured) ? 'flex' : 'none';\n\n holdBtn.classList.toggle('active', isHeld);\n holdBtn.setAttribute('aria-pressed', String(isHeld));\n // Toggle icon: Pause (to hold) vs Play (to resume)\n holdBtn.innerHTML = isHeld ? Icons.play : Icons.pause;\n holdBtn.title = isHeld ? \"Resume Info Update (P)\" : \"Pause Info Update (P)\";\n }\n\n if (visibilityBtn) {\n // Active means \"Panel is Visible\"\n visibilityBtn.classList.toggle('active', isPanelVisible);\n visibilityBtn.setAttribute('aria-pressed', String(isPanelVisible));\n visibilityBtn.title = isPanelVisible ? \"Hide Panel\" : \"Show Panel\";\n\n // Disable hide button if glass is hidden (prevent hiding everything)\n if (!isGlassVisible) {\n visibilityBtn.disabled = true;\n visibilityBtn.style.opacity = '0.5';\n visibilityBtn.title = \"Cannot hide panel when glass preview is hidden\";\n } else {\n visibilityBtn.disabled = false;\n visibilityBtn.style.opacity = '';\n }\n }\n\n if (glassBtn) {\n glassBtn.classList.toggle('active', isGlassVisible);\n glassBtn.setAttribute('aria-pressed', String(isGlassVisible));\n glassBtn.title = isGlassVisible ? \"Hide Glass Preview\" : \"Show Glass Preview\";\n\n // Only show glass toggle button if the inspector panel is visible\n glassBtn.style.display = isPanelVisible ? 'flex' : 'none';\n }\n\n const cursorBtn = this.elements.controls.querySelector('[data-action=\"toggle-cursor\"]') as HTMLButtonElement;\n if (cursorBtn) {\n const cglass = (window as any).comfyUIMagnifyGlass;\n const showCursor = cglass?.config?.showCursorPreview || false;\n cursorBtn.classList.toggle('active', showCursor);\n cursorBtn.setAttribute('aria-pressed', String(showCursor));\n cursorBtn.title = showCursor ? \"Hide Cursor Preview\" : \"Show Cursor Preview\";\n\n // Logic: Visible when glass is visible AND:\n // 1. Panel is NOT pinned (attached to glass) - original logic\n // 2. Sticky Info (Persist) is NOT enabled - user request\n const isPersistConfigured = !!this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelPersist\"];\n\n cursorBtn.style.display = (isGlassVisible && !this.stateManager.state.isPanelPinned && !isPersistConfigured) ? 'flex' : 'none';\n }\n\n const dragGlassBtn = this.elements.controls.querySelector('[data-action=\"drag-glass\"]') as HTMLButtonElement;\n if (dragGlassBtn) {\n const mglass = (window as any).comfyUIMagnifyGlass;\n const isDragMode = mglass?.state?.isDragModeEnabled || false;\n dragGlassBtn.classList.toggle('active', isDragMode);\n dragGlassBtn.setAttribute('aria-pressed', String(isDragMode));\n dragGlassBtn.title = isDragMode ? \"Cancel Move Mode (H)\" : \"Move Glass Position (H)\";\n // Only show drag button when glass is visible (even if panel is hidden)\n dragGlassBtn.style.display = isGlassVisible ? 'flex' : 'none';\n }\n\n const resetGlassBtn = this.elements.controls.querySelector('[data-action=\"reset-glass\"]') as HTMLButtonElement;\n if (resetGlassBtn) {\n // Only show reset button when glass is visible (moves with drag/popout buttons)\n resetGlassBtn.style.display = isGlassVisible ? 'flex' : 'none';\n }\n\n const popoutBtn = this.elements.controls.querySelector('[data-action=\"popout\"]') as HTMLButtonElement;\n if (popoutBtn) {\n const glass = (window as any).comfyUIMagnifyGlass;\n const isOpen = glass?.popOutManager?.isPopOutOpen() || false;\n // Logger.debug(`[UIManager] Popout button update - Glass: ${!!glass}, IsOpen: ${isOpen}`);\n popoutBtn.classList.toggle('active', isOpen);\n popoutBtn.setAttribute('aria-pressed', String(isOpen));\n popoutBtn.title = isOpen ? \"Close Pop-out Viewer\" : \"Open Pop-out Viewer\";\n }\n }\n\n /**\n * Update controls layout based on position setting.\n * @param position \n */\n updateControlsLayout(position: string): void {\n if (!this.elements.controls) return;\n\n // Remove existing layout classes\n this.elements.controls.classList.remove('horizontal-layout', 'vertical-layout');\n\n // Add appropriate layout class\n if (['top', 'bottom'].includes(position)) {\n this.elements.controls.classList.add('horizontal-layout');\n } else {\n this.elements.controls.classList.add('vertical-layout');\n }\n }\n\n /**\n * Load a Google Font dynamically.\n * @param fontName - Name of the font to load\n */\n loadGoogleFont(fontName: string): void {\n // Skip if already loaded\n const linkId = `google-font-${fontName.replace(/\\s+/g, '-').toLowerCase()}`;\n if (document.getElementById(linkId)) return;\n\n // Create link element for Google Fonts\n const link = document.createElement('link');\n link.id = linkId;\n link.rel = 'stylesheet';\n link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontName)}:wght@400;500;600;700&display=swap`;\n document.head.appendChild(link);\n\n Logger.debug(`[UIManager] Loaded Google Font: ${fontName}`);\n }\n\n /**\n * Apply current styles to elements.\n */\n applyStyles(): void {\n if (!this.elements.panel) return;\n\n const settings = this.stateManager.state.settings;\n\n // Debug Log\n console.log(`[UIManager] applyStyles - MaxHeight: ${settings[\"🔍MagnifyGlass.InfoPanelMaxHeight\"]}`);\n\n // 1. Apply dimensions\n this.elements.panel.style.width = `${settings[\"🔍MagnifyGlass.InfoPanelWidth\"]}px`;\n // Set max-height via CSS variable so CSS :hover rules can override\n const maxHeight = settings[\"🔍MagnifyGlass.InfoPanelMaxHeight\"];\n this.elements.panel.style.setProperty('--panel-max-height', `${maxHeight}px`);\n this.elements.panel.style.height = 'auto';\n\n // 2. Apply static styles (only needed once or if overwritten, but safe to set)\n this.elements.panel.style.position = 'absolute';\n this.elements.panel.style.zIndex = '99999';\n this.elements.panel.style.transform = 'translateY(-10px)';\n this.elements.panel.style.pointerEvents = 'auto';\n this.elements.panel.style.userSelect = 'none';\n\n // Apply Font Family\n const fontFamily = settings[\"🔍MagnifyGlass.InfoPanelFontFamily\"] as string || \"System Default\";\n if (fontFamily === \"System Default\" || fontFamily === \"system-ui\") {\n this.elements.panel.style.fontFamily = \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif\";\n } else if (fontFamily === \"monospace\") {\n this.elements.panel.style.fontFamily = \"'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace\";\n } else {\n // Load Google Font dynamically\n this.loadGoogleFont(fontFamily);\n this.elements.panel.style.fontFamily = `'${fontFamily}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`;\n }\n\n // Apply Font Size\n const fontSize = settings[\"🔍MagnifyGlass.InfoPanelFontSize\"] || 14;\n this.elements.panel.style.fontSize = `${fontSize}px`;\n\n // 3. Apply transition\n this.elements.panel.style.transition = 'none';\n\n // 4. Apply Custom Colors (CSS Variables)\n const textColor = settings[\"🔍MagnifyGlass.InfoPanelTextColor\"] as string | undefined;\n if (textColor && typeof textColor === 'string') {\n const normalizedTextColor = textColor.startsWith('#') ? textColor : `#${textColor}`;\n this.elements.panel.style.setProperty('--info-panel-text-color', normalizedTextColor);\n }\n\n const accentColor = settings[\"🔍MagnifyGlass.InfoPanelAccentColor\"] as string | undefined;\n if (accentColor && typeof accentColor === 'string') {\n const normalizedAccentColor = accentColor.startsWith('#') ? accentColor : `#${accentColor}`;\n this.elements.panel.style.setProperty('--info-panel-accent-color', normalizedAccentColor);\n }\n\n // 5. Apply Opacity\n // Logic: If visible, use setting. If hidden, use 0.\n // We do NOT touch 'display' here to avoid hiding it if it's currently shown.\n // 'display' is managed by show() / hide() methods exclusively.\n if (this.stateManager.state.isPanelVisible) {\n const opacityPercent = Number(settings[\"🔍MagnifyGlass.InfoPanelOpacity\"]) || 100;\n this.elements.panel.style.opacity = (opacityPercent / 100).toString();\n } else {\n this.elements.panel.style.opacity = '0';\n }\n\n // 6. Apply Persist Mode Class\n const isPersist = !!settings[\"🔍MagnifyGlass.InfoPanelPersist\"];\n if (isPersist) {\n this.elements.panel.classList.add('persist-active');\n } else {\n this.elements.panel.classList.remove('persist-active');\n }\n }\n\n /**\n * Show the panel.\n */\n show(): void {\n if (!this.elements.panel) return;\n\n if (this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelEnabled\"]) {\n this.elements.panel.style.display = \"block\";\n // Controls are shown by positionFloatingControls() after proper positioning\n // Apply user's opacity setting when showing (convert percentage to decimal)\n const opacityPercent = Number(this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelOpacity\"]) || 100;\n this.elements.panel.style.opacity = (opacityPercent / 100).toString();\n // Trigger reflow\n this.elements.panel.offsetHeight;\n this.elements.panel.classList.add('visible');\n this.stateManager.state.isPanelVisible = true;\n this.updateControlStates();\n }\n }\n\n /**\n * Hide the panel.\n */\n hide(): void {\n if (!this.elements.panel) return;\n\n this.elements.panel.classList.remove('visible');\n this.elements.panel.classList.remove('visible');\n if (this.elements.panel) {\n this.elements.panel.style.display = \"none\";\n }\n this.stateManager.state.isPanelVisible = false;\n this.updateControlStates();\n }\n\n /**\n * Update minimized state.\n */\n updateMinimizedState(): void {\n if (!this.elements.panel || !this.elements.header) return;\n\n this.elements.panel.classList.toggle('panel-minimized', this.stateManager.state.isPanelMinimized);\n const minimizeBtn = this.elements.header.querySelector('.minimize-btn');\n if (minimizeBtn) {\n minimizeBtn.textContent = this.stateManager.state.isPanelMinimized ? '+' : '−';\n (minimizeBtn as HTMLElement).title = this.stateManager.state.isPanelMinimized ? 'Expand Panel' : 'Minimize Panel';\n minimizeBtn.setAttribute('aria-expanded', String(!this.stateManager.state.isPanelMinimized));\n }\n }\n\n /**\n * Update pinned state.\n */\n updatePinnedState(): void {\n if (!this.elements.panel) return;\n\n this.elements.panel.classList.toggle('panel-pinned', this.stateManager.state.isPanelPinned);\n this.elements.panel.classList.toggle('panel-locked', this.stateManager.state.isPanelLocked);\n this.updateControlStates();\n }\n\n /**\n * Update theme class.\n * @param newTheme \n */\n updateTheme(newTheme: string): void {\n if (this.elements.panel) {\n this.elements.panel.className = this.elements.panel.className.replace(/theme-\\w+/, `theme-${newTheme.toLowerCase()}`);\n }\n if (this.elements.controls) {\n this.elements.controls.className = this.elements.controls.className.replace(/theme-\\w+/, `theme-${newTheme.toLowerCase()}`);\n }\n }\n\n /**\n * Display information in the panel.\n * @param info \n */\n displayInfo(info: any): void {\n const sections = this.buildSections(info);\n this.renderSections(sections);\n this.updateSectionStates();\n this.updateHeaderSubtitle(info);\n }\n\n /**\n * Build section data from info object.\n * @param info \n * @returns \n */\n buildSections(info: any): any[] {\n const sections: any[] = [];\n const settings = this.stateManager.state.settings;\n\n // Inspector section\n if (settings[\"🔍MagnifyGlass.ShowInspectorTab\"] && info.cursor && info.cursor.canvas) {\n const inspectorContent = [\n { label: 'Cursor Canvas', value: `(${Math.round(info.cursor.canvas.x)}, ${Math.round(info.cursor.canvas.y)})` },\n { label: 'Canvas Scale', value: `${(info.canvas.scale * 100).toFixed(1)}%` },\n { label: 'Magnifier Zoom', value: `${info.magnifier.zoomFactor}×` }\n ];\n\n sections.push({\n id: 'inspector',\n icon: Icons.info,\n title: 'Inspector',\n content: inspectorContent\n });\n }\n\n // Media section\n if (info.media) {\n const mediaContent = [\n { label: 'Type', value: info.media.tagName },\n { label: 'Source', value: info.media.src }\n ];\n\n if (info.media.naturalSize) {\n mediaContent.push({ label: 'Natural', value: info.media.naturalSize });\n }\n\n sections.push({\n id: 'media',\n icon: Icons.camera,\n title: 'Media',\n badge: info.media.tagName,\n content: mediaContent\n });\n }\n\n // Node Details section\n if (info.hoveredNode) {\n const nodeContent: any[] = []; // Initial Node details\n nodeContent.push({\n label: 'Title',\n value: `${info.hoveredNode.title || 'Untitled'} (#${info.hoveredNode.id})`,\n clickable: 'title'\n });\n if (info.hoveredNode.executionOrder !== undefined) {\n nodeContent.push({ label: 'Exec Order', value: info.hoveredNode.executionOrder, clickable: 'execOrder' });\n }\n\n // Add Zoom to Node button\n nodeContent.push({\n label: 'Location',\n value: `${Icons.focus} Focus Node`,\n clickable: 'zoom',\n nodeId: info.hoveredNode.id\n });\n\n // Add category if available\n if (info.hoveredNode.category) {\n nodeContent.push({ label: 'Category', value: info.hoveredNode.category });\n }\n\n // Add python module path if available\n if (info.hoveredNode.pythonModule) {\n const path = info.hoveredNode.pythonModule.replace(/\\./g, '/') + '.py';\n nodeContent.push({ label: 'Path', value: path });\n }\n\n // Check if this is a complex node that shows all widgets\n const nodeType = info.hoveredNode.type ? info.hoveredNode.type.toLowerCase() : '';\n const isSaveNode = nodeType.includes('save') &&\n !nodeType.includes('checkpoint') &&\n !nodeType.includes('model') &&\n !nodeType.includes('preview');\n\n const showAllWidgets = info.hoveredNode.type && (\n nodeType.includes('ksampler') ||\n nodeType.includes('sampler') ||\n nodeType.includes('k_samplers') ||\n nodeType.includes('checkpoint') ||\n nodeType.includes('model') ||\n nodeType.includes('lora') ||\n nodeType.includes('controlnet') ||\n nodeType.includes('advanced') ||\n nodeType.includes('detailer') ||\n nodeType.includes('inpaint') ||\n nodeType.includes('upscale') ||\n nodeType.includes('clip') ||\n nodeType.includes('text') ||\n nodeType.includes('encode')\n ) && !isSaveNode;\n\n if (!showAllWidgets) {\n // Add specific extractions for simple nodes\n const checkpoint = getCheckpointInfo(info.hoveredNode);\n if (checkpoint) {\n nodeContent.push({ label: 'Model', value: checkpoint });\n }\n\n const imgInfo = getImageInfo(info.hoveredNode);\n if (imgInfo) {\n if (typeof imgInfo === 'string') {\n nodeContent.push({ label: 'Image', value: imgInfo });\n } else if (typeof imgInfo === 'object' && imgInfo !== null) {\n const imgResult = imgInfo as ImageInfoResult;\n nodeContent.push({ label: 'Image Size', value: `${imgResult.width}×${imgResult.height}` });\n if (imgResult.src) {\n nodeContent.push({ label: 'Image Source', value: imgResult.src });\n }\n }\n }\n\n const textContent = getTextBoxContent(info.hoveredNode);\n if (textContent) {\n nodeContent.push({ label: 'Text', value: textContent });\n }\n }\n\n const importantParameters = getImportantNodeParameters(info.hoveredNode);\n nodeContent.push(...importantParameters);\n\n sections.push({\n id: 'node',\n icon: Icons.box,\n title: 'Node',\n badge: info.hoveredNode.type,\n content: nodeContent\n });\n }\n\n return sections;\n }\n\n /**\n * Render sections to the panel.\n * @param sections \n */\n renderSections(sections: any[]): void {\n if (!this.elements.content) return;\n\n if (sections.length === 0) {\n this.elements.content.innerHTML = `\n
\n
${Icons.mapPin}
\n
Empty canvas area
\n
\n `;\n return;\n }\n\n this.elements.content.innerHTML = sections.map(section => `\n
\n
\n ${section.icon}\n ${section.title}\n ${section.badge ? `${section.badge}` : ''}\n ${section.id !== 'node' ? `${Icons.chevronRight}` : ''}\n
\n
\n
\n ${section.content.map((item: any) => {\n const value = formatValue(item.value, item.label);\n const valueClass = getValueClass(item.value);\n const valueAttributes = getValueAttributes(item.value);\n const clickableAttr = item.clickable ? `data-clickable=\"${item.clickable}\"` : '';\n const nodeIdAttr = item.nodeId !== undefined ? `data-node-id=\"${item.nodeId}\"` : '';\n const clickableClass = item.clickable ? 'clickable-row' : '';\n // Only show dropdown arrow for actual dropdowns, not actions like zoom\n const dropdownIcon = (item.clickable && item.clickable !== 'zoom') ? '▼' : '';\n // Show copy button for string values that are long enough to be worth copying\n const rawValue = String(item.value || '');\n const showCopyBtn = !item.clickable && rawValue.length > 3 && typeof item.value === 'string';\n const copyBtnHtml = showCopyBtn ? `\n ` : '';\n return `\n
\n ${item.label}\n ${value}${dropdownIcon}\n ${copyBtnHtml}\n
`;\n }).join('')}\n
\n
\n
`).join('');\n\n // Add click handlers for clickable rows\n this.attachDropdownClickHandlers();\n }\n\n /**\n * Attach click handlers to clickable dropdown rows.\n */\n attachDropdownClickHandlers(): void {\n if (!this.elements.content) return;\n\n const clickableRows = this.elements.content.querySelectorAll('[data-clickable]');\n clickableRows.forEach(row => {\n const clickableType = (row as HTMLElement).dataset.clickable;\n\n row.addEventListener('click', (e) => {\n e.stopPropagation();\n\n if (clickableType === 'title') {\n this.showTitleDropdown(row as HTMLElement);\n } else if (clickableType === 'execOrder') {\n this.showExecOrderDropdown(row as HTMLElement);\n } else if (clickableType === 'id') {\n this.showIdDropdown(row as HTMLElement);\n } else if (clickableType === 'zoom') {\n const nodeId = (row as HTMLElement).dataset.nodeId;\n if (nodeId) {\n const app = (window as any).app;\n const node = app.graph.getNodeById(parseInt(nodeId));\n if (node && app.canvas) {\n app.canvas.centerOnNode(node);\n }\n }\n }\n });\n\n // Add hover effect\n row.addEventListener('mouseenter', () => {\n (row as HTMLElement).style.background = 'var(--comfy-input-bg, rgba(255,255,255,0.05))';\n });\n row.addEventListener('mouseleave', () => {\n (row as HTMLElement).style.background = '';\n });\n });\n\n // Add click handlers for copy buttons\n const copyButtons = this.elements.content.querySelectorAll('.copy-btn');\n copyButtons.forEach(btn => {\n btn.addEventListener('click', (e) => {\n e.stopPropagation();\n const value = (btn as HTMLElement).dataset.copyValue || '';\n navigator.clipboard.writeText(value).then(() => {\n // Show success feedback\n btn.classList.add('copied');\n const originalHtml = btn.innerHTML;\n btn.innerHTML = ``;\n setTimeout(() => {\n btn.innerHTML = originalHtml;\n btn.classList.remove('copied');\n }, 1500);\n }).catch(err => {\n console.error('Failed to copy:', err);\n });\n });\n });\n }\n\n /**\n * Update section expansion states.\n */\n updateSectionStates(): void {\n if (!this.elements.content) return;\n\n const sections = this.elements.content.querySelectorAll('.info-section');\n sections.forEach(section => {\n const sectionId = (section as HTMLElement).dataset.section;\n if (!sectionId) return;\n\n const header = section.querySelector('.section-header');\n const content = section.querySelector('.section-content');\n\n if (header && content) {\n if (this.stateManager.state.expandedSections.has(sectionId)) {\n header.classList.add('expanded');\n content.classList.add('expanded');\n } else {\n header.classList.remove('expanded');\n content.classList.remove('expanded');\n }\n }\n });\n }\n\n /**\n * Update header subtitle.\n * @param info \n */\n updateHeaderSubtitle(info: any): void {\n if (!this.elements.header) return;\n\n const subtitleElement = this.elements.header.querySelector('.header-subtitle') as HTMLElement;\n if (subtitleElement) {\n const accentColor = String(this.stateManager.state.settings[\"🔍MagnifyGlass.InfoPanelAccentColor\"] || '');\n if (info.hoveredNode) {\n subtitleElement.textContent = `Analyzing: ${info.hoveredNode.title} `;\n subtitleElement.style.color = accentColor;\n } else if (info.media) {\n subtitleElement.textContent = `Media: ${info.media.tagName} `;\n subtitleElement.style.color = accentColor;\n } else if (info.connection) {\n subtitleElement.textContent = `Connection: ${info.connection.type} `;\n subtitleElement.style.color = accentColor;\n } else {\n subtitleElement.textContent = 'Real-time analysis';\n subtitleElement.style.color = '';\n }\n }\n }\n\n /**\n * Inject CSS styles by loading external stylesheet.\n */\n injectStyles(): void {\n if (!document.getElementById('magnify-info-panel-styles-v2')) {\n const link = document.createElement('link');\n link.id = 'magnify-info-panel-styles-v2';\n link.rel = 'stylesheet';\n link.type = 'text/css';\n link.href = 'extensions/comfyui-magnifyglass/info-panel.css';\n document.head.appendChild(link);\n }\n }\n\n /**\n * Show dropdown with nodes sorted by title.\n * @param anchorElement - Element to anchor the dropdown to\n */\n showTitleDropdown(anchorElement: HTMLElement): void {\n this.hideDropdown();\n\n const nodes = this.nodeSelector.getNodesSortedByTitle();\n if (nodes.length === 0) return;\n\n this.createDropdown(nodes, anchorElement, 'title');\n }\n\n /**\n * Show dropdown with nodes sorted by execution order.\n * @param anchorElement - Element to anchor the dropdown to\n */\n showExecOrderDropdown(anchorElement: HTMLElement): void {\n this.hideDropdown();\n\n const nodes = this.nodeSelector.getNodesSortedByExecOrder();\n if (nodes.length === 0) return;\n\n this.createDropdown(nodes, anchorElement, 'execOrder');\n }\n\n /**\n * Show dropdown with nodes sorted by ID.\n * @param anchorElement - Element to anchor the dropdown to\n */\n showIdDropdown(anchorElement: HTMLElement): void {\n this.hideDropdown();\n\n const nodes = this.nodeSelector.getNodesSortedById();\n if (nodes.length === 0) return;\n\n this.createDropdown(nodes, anchorElement, 'id');\n }\n\n /**\n * Create and show the dropdown.\n */\n private createDropdown(\n nodes: NodeListEntry[] | NodeExecOrderEntry[],\n anchorElement: HTMLElement,\n type: 'title' | 'execOrder' | 'id'\n ): void {\n const dropdown = document.createElement('div');\n dropdown.className = `node-selector-dropdown theme-${this.stateManager.state.currentTheme}`;\n dropdown.style.cssText = `\n position: absolute;\n z-index: 100000;\n max-height: 300px;\n overflow-y: auto;\n background: var(--comfy-menu-bg, #2a2a2a);\n border: 1px solid var(--border-color, #444);\n border-radius: 6px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n min-width: 200px;\n max-width: 350px;\n `;\n\n // Build dropdown items\n nodes.forEach((node) => {\n const item = document.createElement('div');\n item.className = 'dropdown-item';\n item.style.cssText = `\n padding: 8px 12px;\n cursor: pointer;\n border-bottom: 1px solid var(--border-color, #333);\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n `;\n\n // Check if this is an exec order entry\n const isExecOrder = 'order' in node;\n\n if (isExecOrder) {\n const execNode = node as NodeExecOrderEntry;\n item.innerHTML = `\n #${execNode.order}\n ${execNode.title} (#${execNode.id})\n ${execNode.type}\n `;\n } else {\n item.innerHTML = `\n ${node.title} (#${node.id})\n ${node.type}\n `;\n }\n\n // Hover effect\n item.addEventListener('mouseenter', () => {\n item.style.background = 'var(--comfy-input-bg, #3a3a3a)';\n });\n item.addEventListener('mouseleave', () => {\n item.style.background = '';\n });\n\n // Selection handler\n item.addEventListener('click', (e) => {\n e.stopPropagation();\n this.hideDropdown();\n\n // Set selected node in state\n this.stateManager.setSelectedNode(node.id);\n\n // Notify callback if set\n if (this.onNodeSelected) {\n this.onNodeSelected(node.id);\n }\n });\n\n dropdown.appendChild(item);\n });\n\n // Position dropdown below anchor\n document.body.appendChild(dropdown);\n const anchorRect = anchorElement.getBoundingClientRect();\n\n // Position below the anchor, aligned to left\n dropdown.style.top = `${anchorRect.bottom + 4}px`;\n dropdown.style.left = `${anchorRect.left}px`;\n\n // Adjust if dropdown would go off-screen\n const dropdownRect = dropdown.getBoundingClientRect();\n if (dropdownRect.right > window.innerWidth - 10) {\n dropdown.style.left = `${window.innerWidth - dropdownRect.width - 10}px`;\n }\n if (dropdownRect.bottom > window.innerHeight - 10) {\n // Show above instead\n dropdown.style.top = `${anchorRect.top - dropdownRect.height - 4}px`;\n }\n\n this.currentDropdown = dropdown;\n\n // Close on click outside\n const closeHandler = (e: MouseEvent) => {\n if (!dropdown.contains(e.target as Node) && !anchorElement.contains(e.target as Node)) {\n this.hideDropdown();\n document.removeEventListener('click', closeHandler);\n }\n };\n\n // Delay adding the listener to avoid immediate closure\n setTimeout(() => {\n document.addEventListener('click', closeHandler);\n }, 10);\n }\n\n /**\n * Hide the current dropdown.\n */\n hideDropdown(): void {\n if (this.currentDropdown && this.currentDropdown.parentNode) {\n this.currentDropdown.parentNode.removeChild(this.currentDropdown);\n this.currentDropdown = null;\n }\n }\n\n cleanup(): void {\n if (this.elements.panel && this.elements.panel.parentNode) {\n this.elements.panel.parentNode.removeChild(this.elements.panel);\n }\n if (this.elements.controls && this.elements.controls.parentNode) {\n this.elements.controls.parentNode.removeChild(this.elements.controls);\n }\n }\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/web/magnify-glass/UiManager.js b/web/magnify-glass/UiManager.js index ef1505e..52b857e 100644 --- a/web/magnify-glass/UiManager.js +++ b/web/magnify-glass/UiManager.js @@ -326,6 +326,8 @@ class UiManager { btn.style.minHeight = computed.minHeight; btn.style.width = computed.width; btn.title = "Toggle Magnify Glass (X)"; + btn.setAttribute("aria-label", "Toggle Magnify Glass"); + btn.setAttribute("aria-pressed", "false"); btn.setAttribute("data-testid", "toggle-magnify-glass-button"); btn.innerHTML = Icons.magnifyGlass; btn.style.display = "inline-flex"; @@ -341,9 +343,10 @@ class UiManager { btn.addEventListener("click", () => { if (this.onToggle) { this.onToggle(); - btn.classList.toggle("active"); + const isActive = btn.classList.toggle("active"); btn.classList.toggle("p-highlight"); btn.classList.toggle("selected"); + btn.setAttribute("aria-pressed", String(isActive)); } }); if (linkVisibilityBtn && minimapBtn.parentElement === linkVisibilityBtn.parentElement) { diff --git a/web/magnify-glass/UiManager.js.map b/web/magnify-glass/UiManager.js.map index 5c079c0..8309401 100644 --- a/web/magnify-glass/UiManager.js.map +++ b/web/magnify-glass/UiManager.js.map @@ -1 +1 @@ -{"version":3,"file":"UiManager.js","sources":["../../src/magnify-glass/UiManager.ts"],"sourcesContent":["/**\n * ComfyUI MagnifyGlass - UiManager (TypeScript)\n * \n * Handles creation and management of DOM elements for the magnifying glass.\n */\n\nimport { Z_INDEX, DEFAULT_PADDING, DEFAULT_GLASS_Y_OFFSET } from '../shared/constants';\nimport { Icons } from '../shared/icons';\nimport { Logger } from '../shared/logger';\nimport type { ConfigManager } from './ConfigManager';\nimport type { MagnifierState } from './MagnifierState';\n\n/**\n * UI Manager class.\n * Manages all DOM elements for the magnifying glass.\n */\nexport class UiManager {\n config: ConfigManager;\n state: MagnifierState;\n glassDiv: HTMLDivElement | null;\n glassCanvas: HTMLCanvasElement | null;\n htmlOverlayContainer: HTMLDivElement | null;\n onToggle: (() => void) | undefined;\n\n constructor(config: ConfigManager, state: MagnifierState, onToggle?: () => void) {\n this.config = config;\n this.state = state;\n this.glassDiv = null;\n this.glassCanvas = null;\n this.htmlOverlayContainer = null;\n this.onToggle = onToggle;\n }\n\n /**\n * Create all DOM elements for the magnifying glass.\n */\n createElements(): void {\n // Create magnifying glass container\n this.glassDiv = document.createElement(\"div\");\n this.glassDiv.id = \"comfyui-magnify-glass\";\n this.glassDiv.style.cssText = `\n position: absolute;\n box-sizing: border-box;\n width: ${this.config.glassSize}px;\n height: ${this.config.glassSize}px;\n border-radius: ${this.config.glassShape === \"Circle\" ? \"50%\" : \"0px\"};\n border: ${this.config.borderEnabled ? `${this.config.borderWidth}px solid ${this.config.borderColor}` : 'none'};\n overflow: hidden;\n pointer-events: none;\n z-index: ${Z_INDEX.GLASS};\n display: none;\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n background-color: rgba(255,255,255,0.1);\n `;\n\n // Create WebGL canvas for the magnifying glass\n this.glassCanvas = document.createElement(\"canvas\");\n this.glassCanvas.width = this.config.glassSize;\n this.glassCanvas.height = this.config.glassSize;\n this.glassCanvas.id = \"comfyui-magnify-canvas\";\n this.glassDiv.appendChild(this.glassCanvas);\n\n // Create HTML overlay container\n this.htmlOverlayContainer = document.createElement(\"div\");\n this.htmlOverlayContainer.id = \"comfyui-magnify-html-overlay\";\n this.htmlOverlayContainer.style.cssText = `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden; \n `;\n this.glassDiv.appendChild(this.htmlOverlayContainer);\n\n document.body.appendChild(this.glassDiv);\n\n // Inject menu button\n this.injectMenuButton();\n }\n\n /**\n * Show the magnifying glass.\n */\n show(): void {\n if (this.glassDiv) {\n this.glassDiv.style.display = 'block';\n }\n }\n\n /**\n * Set the visual visibility of the glass preview (opacity).\n * This allows the tool to remain \"Active\" (tracking mouse) but invisible,\n * so that the Inspector Panel can be used in \"Inspector Only\" mode.\n */\n setPreviewVisibility(visible: boolean): void {\n if (this.glassDiv) {\n this.glassDiv.style.opacity = visible ? '1' : '0';\n }\n }\n\n /**\n * Enable or disable glass drag mode.\n * When enabled, the glass can be dragged to a new position.\n */\n setDragMode(enabled: boolean): void {\n if (!this.glassDiv) return;\n\n if (enabled) {\n // Use 'all-scroll' which shows a 4-way arrow consistently across browsers\n // Firefox shows 'move' as a grab/fist cursor which is confusing\n this.glassDiv.style.cursor = 'all-scroll';\n this.glassDiv.style.pointerEvents = 'auto';\n this.glassDiv.classList.add('drag-mode');\n\n // Add drag handlers\n const onMouseDown = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n\n // Calculate the fixed offset between mouse and glass top-left\n // This maintains the \"grab point\" relative to the glass\n const rect = this.glassDiv!.getBoundingClientRect();\n const grabOffsetX = rect.left - e.clientX;\n const grabOffsetY = rect.top - e.clientY;\n\n // First, set left/top to current position to prevent jump\n this.glassDiv!.style.left = `${rect.left}px`;\n this.glassDiv!.style.top = `${rect.top}px`;\n\n // Then clear opposite positioning props (now safe since left/top are set)\n this.glassDiv!.style.right = 'auto';\n this.glassDiv!.style.bottom = 'auto';\n this.glassDiv!.style.transform = 'none'; // Clear any centering transforms if they exist\n\n const onMouseMove = (moveEvent: MouseEvent) => {\n moveEvent.preventDefault();\n moveEvent.stopPropagation();\n\n // 1:1 Movement: Glass moves exactly with mouse\n // New Pos = Mouse Pos + Initial Grab Offset\n const newLeft = moveEvent.clientX + grabOffsetX;\n const newTop = moveEvent.clientY + grabOffsetY;\n\n if (this.glassDiv) {\n this.glassDiv.style.left = `${newLeft}px`;\n this.glassDiv.style.top = `${newTop}px`;\n }\n };\n\n const onMouseUp = (upEvent: MouseEvent) => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n\n // Disable drag mode after drop\n this.state.isDragModeEnabled = false;\n this.setDragMode(false);\n\n // Update control states via info panel\n const infoPanel = (window as any).infoPanelManager;\n if (infoPanel?.uiManager) {\n infoPanel.uiManager.updateControlStates();\n }\n };\n\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n };\n\n this.glassDiv.addEventListener('mousedown', onMouseDown);\n (this.glassDiv as any)._dragHandler = onMouseDown;\n } else {\n this.glassDiv.style.cursor = '';\n this.glassDiv.style.pointerEvents = 'none';\n this.glassDiv.classList.remove('drag-mode');\n\n // Remove drag handler\n if ((this.glassDiv as any)._dragHandler) {\n this.glassDiv.removeEventListener('mousedown', (this.glassDiv as any)._dragHandler);\n delete (this.glassDiv as any)._dragHandler;\n }\n }\n }\n\n /**\n * Hide the magnifying glass.\n */\n hide(): void {\n if (this.glassDiv) {\n this.glassDiv.style.display = 'none';\n }\n // Clear HTML overlays when hiding\n if (this.htmlOverlayContainer) {\n this.htmlOverlayContainer.innerHTML = '';\n }\n }\n\n /**\n * Position the glass relative to cursor.\n * Uses dynamic anchoring (Left/Right, Top/Bottom) based on screen quadrant.\n * @param clientX - Client X coordinate\n * @param clientY - Client Y coordinate\n */\n positionGlass(clientX: number, clientY: number): void {\n // Skip positioning if drag mode is active (handled manually in setDragMode)\n if (!this.config.followCursor || !this.glassDiv || this.state.isDragModeEnabled) return;\n\n const glassSize = this.config.glassSize;\n const offsetAmount = DEFAULT_PADDING;\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n // Determine base coordinates (top-left based)\n // Add manual offsets (from drag operations)\n let targetX: number = this.config.offsetX || 0;\n let targetY: number = this.config.offsetY || 0;\n\n // Calculate standard Top-Left based positions first\n switch (this.config.glassPosition) {\n case \"Top\":\n targetX += clientX - (glassSize / 2);\n targetY += clientY - glassSize - offsetAmount;\n break;\n case \"Bottom\":\n targetX += clientX - (glassSize / 2);\n targetY += clientY + offsetAmount;\n break;\n case \"Left\":\n targetX += clientX - glassSize - offsetAmount;\n targetY += clientY - (glassSize / 2);\n break;\n case \"Right\":\n targetX += clientX + offsetAmount;\n targetY += clientY - (glassSize / 2);\n break;\n case \"Top-Left\":\n targetX += clientX - glassSize - offsetAmount;\n targetY += clientY - glassSize - offsetAmount;\n break;\n case \"Top-Right\":\n targetX += clientX + offsetAmount;\n targetY += clientY - glassSize - offsetAmount;\n break;\n case \"Bottom-Left\":\n targetX += clientX - glassSize - offsetAmount;\n targetY += clientY + offsetAmount;\n break;\n case \"Bottom-Right\":\n targetX += clientX + offsetAmount;\n targetY += clientY + offsetAmount;\n break;\n default:\n targetX += clientX - (glassSize / 2);\n targetY += clientY + offsetAmount;\n break;\n }\n\n // Apply Dynamic Anchoring based on resulting position's center relative to screen\n const glassCenterX = targetX + (glassSize / 2);\n const glassCenterY = targetY + (glassSize / 2);\n\n // Horizontal Anchor\n if (glassCenterX > vw / 2) {\n // Anchor Right\n const rightPos = vw - (targetX + glassSize);\n this.glassDiv.style.right = `${rightPos}px`;\n this.glassDiv.style.left = 'auto';\n } else {\n // Anchor Left\n this.glassDiv.style.left = `${targetX}px`;\n this.glassDiv.style.right = 'auto';\n }\n\n // Vertical Anchor\n if (glassCenterY > vh / 2) {\n // Anchor Bottom\n const bottomPos = vh - (targetY + glassSize);\n this.glassDiv.style.bottom = `${bottomPos}px`;\n this.glassDiv.style.top = 'auto';\n } else {\n // Anchor Top\n this.glassDiv.style.top = `${targetY}px`;\n this.glassDiv.style.bottom = 'auto';\n }\n\n // We run a lightweight clamp to ensure it doesn't bleed offscreen during movement\n // (Though the anchor logic implicitly handles resize, dragging near edges might need clamping)\n this.adjustForBoundaries();\n }\n\n /**\n * Adjust glass position to stay within viewport boundaries.\n * Respects the current anchor (Left/Right, Top/Bottom).\n */\n adjustForBoundaries(): void {\n if (!this.glassDiv) return;\n\n const glassSize = this.config.glassSize;\n const padding = DEFAULT_PADDING;\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n // Check if anchored Right or Left\n const isAnchoredRight = this.glassDiv.style.right !== 'auto' && this.glassDiv.style.right !== '';\n\n if (isAnchoredRight) {\n let currentRight = parseFloat(this.glassDiv.style.right) || padding;\n // Clamp Right: max(padding, min(current, vw - size - padding))\n // Ensure it doesn't go off left side (vw - size - padding)\n currentRight = Math.max(padding, Math.min(currentRight, vw - glassSize - padding));\n this.glassDiv.style.right = `${currentRight}px`;\n } else {\n // Anchor Left\n let currentLeft = parseFloat(this.glassDiv.style.left) || padding;\n currentLeft = Math.max(padding, Math.min(currentLeft, vw - glassSize - padding));\n this.glassDiv.style.left = `${currentLeft}px`;\n }\n\n // Check if anchored Bottom or Top\n const isAnchoredBottom = this.glassDiv.style.bottom !== 'auto' && this.glassDiv.style.bottom !== '';\n\n if (isAnchoredBottom) {\n let currentBottom = parseFloat(this.glassDiv.style.bottom) || padding;\n currentBottom = Math.max(padding, Math.min(currentBottom, vh - glassSize - padding));\n this.glassDiv.style.bottom = `${currentBottom}px`;\n } else {\n // Anchor Top\n let currentTop = parseFloat(this.glassDiv.style.top) || padding;\n currentTop = Math.max(padding, Math.min(currentTop, vh - glassSize - padding));\n this.glassDiv.style.top = `${currentTop}px`;\n }\n }\n\n /**\n * Update position safely on resize.\n * Since we use dynamic anchoring in positionGlass, CSS handles most resize cases.\n * This method ensures we verify boundaries (clamping) and fix anchors if we cross thresholds drastically.\n */\n updateResponsivePosition(): void {\n if (!this.glassDiv) return;\n // Re-run boundary adjustments to clamp if resize pushed us offscreen\n this.adjustForBoundaries();\n }\n\n /**\n * Apply current config to UI elements.\n */\n applyStyles(): void {\n if (this.glassDiv) {\n this.glassDiv.style.width = `${this.config.glassSize}px`;\n this.glassDiv.style.height = `${this.config.glassSize}px`;\n this.glassDiv.style.border = this.config.borderEnabled\n ? `${this.config.borderWidth}px solid ${this.config.borderColor}`\n : 'none';\n\n // Reset clip-path and set default border-radius\n this.glassDiv.style.clipPath = 'none';\n this.glassDiv.style.borderRadius = '0px';\n\n switch (this.config.glassShape) {\n case \"Circle\":\n this.glassDiv.style.borderRadius = \"50%\";\n break;\n case \"Square\":\n // borderRadius is already '0px'\n break;\n case \"Rounded Square\":\n this.glassDiv.style.borderRadius = \"20%\";\n break;\n default:\n this.glassDiv.style.borderRadius = \"50%\";\n break;\n }\n\n // Reduce Motion\n if (this.config.reduceMotion) {\n this.glassDiv.style.transition = 'none !important';\n this.glassDiv.style.animation = 'none !important';\n // Also set property directly just in case !important doesn't stick in inline style without special handling\n this.glassDiv.style.setProperty('transition', 'none', 'important');\n this.glassDiv.style.setProperty('animation', 'none', 'important');\n } else {\n this.glassDiv.style.transition = '';\n this.glassDiv.style.animation = '';\n this.glassDiv.style.removeProperty('transition');\n this.glassDiv.style.removeProperty('animation');\n }\n }\n\n if (this.glassCanvas) {\n this.glassCanvas.width = this.config.glassSize;\n this.glassCanvas.height = this.config.glassSize;\n }\n }\n\n /**\n * Cleanup DOM elements.\n */\n cleanup(): void {\n if (this.glassDiv) this.glassDiv.remove();\n // Remove menu button if needed (though hard to track references here without saving it)\n const btn = document.querySelector('.magnify-toggle-btn');\n if (btn) btn.remove();\n }\n\n /**\n * Inject a quick toggle button into the ComfyUI menu.\n */\n injectMenuButton(): void {\n // Stop after 30 seconds\n const stopTime = Date.now() + 30000;\n\n // Define check function\n const attemptInjection = () => {\n // Use data-testid selectors to find the specific buttons in the bottom toolbar\n // These are the official ComfyUI frontend identifiers\n const minimapBtn = document.querySelector('button[data-testid=\"toggle-minimap-button\"]') as HTMLButtonElement;\n const linkVisibilityBtn = document.querySelector('button[data-testid=\"toggle-link-visibility-button\"]') as HTMLButtonElement;\n\n // We need at least the minimap button to inject after it\n if (!minimapBtn || !minimapBtn.parentElement) {\n return false;\n }\n\n // Check if already injected\n if (minimapBtn.parentElement.querySelector('.magnify-toggle-btn')) {\n return true;\n }\n\n Logger.debug('Found minimap button in bottom toolbar, injecting magnify glass toggle');\n\n const btn = document.createElement('button');\n // Copy all classes from minimap button to match theme/library\n btn.className = minimapBtn.className + ' magnify-toggle-btn';\n\n // Copy key styles that might define shape/size\n const computed = window.getComputedStyle(minimapBtn);\n btn.style.height = computed.height;\n btn.style.minHeight = computed.minHeight;\n btn.style.width = computed.width; // Match width for consistency\n\n btn.title = \"Toggle Magnify Glass (X)\";\n btn.setAttribute('data-testid', 'toggle-magnify-glass-button');\n btn.innerHTML = Icons.magnifyGlass;\n\n // Ensure specific display props\n btn.style.display = \"inline-flex\";\n btn.style.alignItems = \"center\";\n btn.style.justifyContent = \"center\";\n btn.style.padding = \"0\";\n btn.style.cursor = \"pointer\";\n\n // Copy border radius if available\n if (minimapBtn.style.borderRadius) {\n btn.style.borderRadius = minimapBtn.style.borderRadius;\n } else {\n btn.style.borderRadius = computed.borderRadius;\n }\n\n // Add active state tracking\n btn.addEventListener('click', () => {\n if (this.onToggle) {\n this.onToggle();\n // Toggle active states to match ComfyUI's button styling\n btn.classList.toggle('active');\n btn.classList.toggle('p-highlight'); // PrimeVue\n btn.classList.toggle('selected');\n }\n });\n\n // Insert AFTER the minimap button (between minimap and link visibility)\n if (linkVisibilityBtn && minimapBtn.parentElement === linkVisibilityBtn.parentElement) {\n // Insert before link visibility button (which puts it after minimap)\n minimapBtn.parentElement.insertBefore(btn, linkVisibilityBtn);\n } else if (minimapBtn.nextSibling) {\n // Fallback: insert after minimap button\n minimapBtn.parentElement.insertBefore(btn, minimapBtn.nextSibling);\n } else {\n minimapBtn.parentElement.appendChild(btn);\n }\n\n Logger.debug('Menu toggle button injected successfully between minimap and link visibility');\n return true;\n };\n\n // Run immediately first\n if (attemptInjection()) return;\n\n // Then poll rapidly\n const checkForMenu = setInterval(() => {\n if (Date.now() > stopTime) {\n console.warn(\"[MagnifyGlass] Menu injection timed out. Could not find toggle-minimap-button\");\n clearInterval(checkForMenu);\n return;\n }\n\n if (attemptInjection()) {\n clearInterval(checkForMenu);\n }\n }, 100);\n }\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"UiManager.js","sources":["../../src/magnify-glass/UiManager.ts"],"sourcesContent":["/**\n * ComfyUI MagnifyGlass - UiManager (TypeScript)\n * \n * Handles creation and management of DOM elements for the magnifying glass.\n */\n\nimport { Z_INDEX, DEFAULT_PADDING, DEFAULT_GLASS_Y_OFFSET } from '../shared/constants';\nimport { Icons } from '../shared/icons';\nimport { Logger } from '../shared/logger';\nimport type { ConfigManager } from './ConfigManager';\nimport type { MagnifierState } from './MagnifierState';\n\n/**\n * UI Manager class.\n * Manages all DOM elements for the magnifying glass.\n */\nexport class UiManager {\n config: ConfigManager;\n state: MagnifierState;\n glassDiv: HTMLDivElement | null;\n glassCanvas: HTMLCanvasElement | null;\n htmlOverlayContainer: HTMLDivElement | null;\n onToggle: (() => void) | undefined;\n\n constructor(config: ConfigManager, state: MagnifierState, onToggle?: () => void) {\n this.config = config;\n this.state = state;\n this.glassDiv = null;\n this.glassCanvas = null;\n this.htmlOverlayContainer = null;\n this.onToggle = onToggle;\n }\n\n /**\n * Create all DOM elements for the magnifying glass.\n */\n createElements(): void {\n // Create magnifying glass container\n this.glassDiv = document.createElement(\"div\");\n this.glassDiv.id = \"comfyui-magnify-glass\";\n this.glassDiv.style.cssText = `\n position: absolute;\n box-sizing: border-box;\n width: ${this.config.glassSize}px;\n height: ${this.config.glassSize}px;\n border-radius: ${this.config.glassShape === \"Circle\" ? \"50%\" : \"0px\"};\n border: ${this.config.borderEnabled ? `${this.config.borderWidth}px solid ${this.config.borderColor}` : 'none'};\n overflow: hidden;\n pointer-events: none;\n z-index: ${Z_INDEX.GLASS};\n display: none;\n box-shadow: 0 5px 15px rgba(0,0,0,0.3);\n background-color: rgba(255,255,255,0.1);\n `;\n\n // Create WebGL canvas for the magnifying glass\n this.glassCanvas = document.createElement(\"canvas\");\n this.glassCanvas.width = this.config.glassSize;\n this.glassCanvas.height = this.config.glassSize;\n this.glassCanvas.id = \"comfyui-magnify-canvas\";\n this.glassDiv.appendChild(this.glassCanvas);\n\n // Create HTML overlay container\n this.htmlOverlayContainer = document.createElement(\"div\");\n this.htmlOverlayContainer.id = \"comfyui-magnify-html-overlay\";\n this.htmlOverlayContainer.style.cssText = `\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n overflow: hidden; \n `;\n this.glassDiv.appendChild(this.htmlOverlayContainer);\n\n document.body.appendChild(this.glassDiv);\n\n // Inject menu button\n this.injectMenuButton();\n }\n\n /**\n * Show the magnifying glass.\n */\n show(): void {\n if (this.glassDiv) {\n this.glassDiv.style.display = 'block';\n }\n }\n\n /**\n * Set the visual visibility of the glass preview (opacity).\n * This allows the tool to remain \"Active\" (tracking mouse) but invisible,\n * so that the Inspector Panel can be used in \"Inspector Only\" mode.\n */\n setPreviewVisibility(visible: boolean): void {\n if (this.glassDiv) {\n this.glassDiv.style.opacity = visible ? '1' : '0';\n }\n }\n\n /**\n * Enable or disable glass drag mode.\n * When enabled, the glass can be dragged to a new position.\n */\n setDragMode(enabled: boolean): void {\n if (!this.glassDiv) return;\n\n if (enabled) {\n // Use 'all-scroll' which shows a 4-way arrow consistently across browsers\n // Firefox shows 'move' as a grab/fist cursor which is confusing\n this.glassDiv.style.cursor = 'all-scroll';\n this.glassDiv.style.pointerEvents = 'auto';\n this.glassDiv.classList.add('drag-mode');\n\n // Add drag handlers\n const onMouseDown = (e: MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n\n // Calculate the fixed offset between mouse and glass top-left\n // This maintains the \"grab point\" relative to the glass\n const rect = this.glassDiv!.getBoundingClientRect();\n const grabOffsetX = rect.left - e.clientX;\n const grabOffsetY = rect.top - e.clientY;\n\n // First, set left/top to current position to prevent jump\n this.glassDiv!.style.left = `${rect.left}px`;\n this.glassDiv!.style.top = `${rect.top}px`;\n\n // Then clear opposite positioning props (now safe since left/top are set)\n this.glassDiv!.style.right = 'auto';\n this.glassDiv!.style.bottom = 'auto';\n this.glassDiv!.style.transform = 'none'; // Clear any centering transforms if they exist\n\n const onMouseMove = (moveEvent: MouseEvent) => {\n moveEvent.preventDefault();\n moveEvent.stopPropagation();\n\n // 1:1 Movement: Glass moves exactly with mouse\n // New Pos = Mouse Pos + Initial Grab Offset\n const newLeft = moveEvent.clientX + grabOffsetX;\n const newTop = moveEvent.clientY + grabOffsetY;\n\n if (this.glassDiv) {\n this.glassDiv.style.left = `${newLeft}px`;\n this.glassDiv.style.top = `${newTop}px`;\n }\n };\n\n const onMouseUp = (upEvent: MouseEvent) => {\n document.removeEventListener('mousemove', onMouseMove);\n document.removeEventListener('mouseup', onMouseUp);\n\n // Disable drag mode after drop\n this.state.isDragModeEnabled = false;\n this.setDragMode(false);\n\n // Update control states via info panel\n const infoPanel = (window as any).infoPanelManager;\n if (infoPanel?.uiManager) {\n infoPanel.uiManager.updateControlStates();\n }\n };\n\n document.addEventListener('mousemove', onMouseMove);\n document.addEventListener('mouseup', onMouseUp);\n };\n\n this.glassDiv.addEventListener('mousedown', onMouseDown);\n (this.glassDiv as any)._dragHandler = onMouseDown;\n } else {\n this.glassDiv.style.cursor = '';\n this.glassDiv.style.pointerEvents = 'none';\n this.glassDiv.classList.remove('drag-mode');\n\n // Remove drag handler\n if ((this.glassDiv as any)._dragHandler) {\n this.glassDiv.removeEventListener('mousedown', (this.glassDiv as any)._dragHandler);\n delete (this.glassDiv as any)._dragHandler;\n }\n }\n }\n\n /**\n * Hide the magnifying glass.\n */\n hide(): void {\n if (this.glassDiv) {\n this.glassDiv.style.display = 'none';\n }\n // Clear HTML overlays when hiding\n if (this.htmlOverlayContainer) {\n this.htmlOverlayContainer.innerHTML = '';\n }\n }\n\n /**\n * Position the glass relative to cursor.\n * Uses dynamic anchoring (Left/Right, Top/Bottom) based on screen quadrant.\n * @param clientX - Client X coordinate\n * @param clientY - Client Y coordinate\n */\n positionGlass(clientX: number, clientY: number): void {\n // Skip positioning if drag mode is active (handled manually in setDragMode)\n if (!this.config.followCursor || !this.glassDiv || this.state.isDragModeEnabled) return;\n\n const glassSize = this.config.glassSize;\n const offsetAmount = DEFAULT_PADDING;\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n // Determine base coordinates (top-left based)\n // Add manual offsets (from drag operations)\n let targetX: number = this.config.offsetX || 0;\n let targetY: number = this.config.offsetY || 0;\n\n // Calculate standard Top-Left based positions first\n switch (this.config.glassPosition) {\n case \"Top\":\n targetX += clientX - (glassSize / 2);\n targetY += clientY - glassSize - offsetAmount;\n break;\n case \"Bottom\":\n targetX += clientX - (glassSize / 2);\n targetY += clientY + offsetAmount;\n break;\n case \"Left\":\n targetX += clientX - glassSize - offsetAmount;\n targetY += clientY - (glassSize / 2);\n break;\n case \"Right\":\n targetX += clientX + offsetAmount;\n targetY += clientY - (glassSize / 2);\n break;\n case \"Top-Left\":\n targetX += clientX - glassSize - offsetAmount;\n targetY += clientY - glassSize - offsetAmount;\n break;\n case \"Top-Right\":\n targetX += clientX + offsetAmount;\n targetY += clientY - glassSize - offsetAmount;\n break;\n case \"Bottom-Left\":\n targetX += clientX - glassSize - offsetAmount;\n targetY += clientY + offsetAmount;\n break;\n case \"Bottom-Right\":\n targetX += clientX + offsetAmount;\n targetY += clientY + offsetAmount;\n break;\n default:\n targetX += clientX - (glassSize / 2);\n targetY += clientY + offsetAmount;\n break;\n }\n\n // Apply Dynamic Anchoring based on resulting position's center relative to screen\n const glassCenterX = targetX + (glassSize / 2);\n const glassCenterY = targetY + (glassSize / 2);\n\n // Horizontal Anchor\n if (glassCenterX > vw / 2) {\n // Anchor Right\n const rightPos = vw - (targetX + glassSize);\n this.glassDiv.style.right = `${rightPos}px`;\n this.glassDiv.style.left = 'auto';\n } else {\n // Anchor Left\n this.glassDiv.style.left = `${targetX}px`;\n this.glassDiv.style.right = 'auto';\n }\n\n // Vertical Anchor\n if (glassCenterY > vh / 2) {\n // Anchor Bottom\n const bottomPos = vh - (targetY + glassSize);\n this.glassDiv.style.bottom = `${bottomPos}px`;\n this.glassDiv.style.top = 'auto';\n } else {\n // Anchor Top\n this.glassDiv.style.top = `${targetY}px`;\n this.glassDiv.style.bottom = 'auto';\n }\n\n // We run a lightweight clamp to ensure it doesn't bleed offscreen during movement\n // (Though the anchor logic implicitly handles resize, dragging near edges might need clamping)\n this.adjustForBoundaries();\n }\n\n /**\n * Adjust glass position to stay within viewport boundaries.\n * Respects the current anchor (Left/Right, Top/Bottom).\n */\n adjustForBoundaries(): void {\n if (!this.glassDiv) return;\n\n const glassSize = this.config.glassSize;\n const padding = DEFAULT_PADDING;\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n // Check if anchored Right or Left\n const isAnchoredRight = this.glassDiv.style.right !== 'auto' && this.glassDiv.style.right !== '';\n\n if (isAnchoredRight) {\n let currentRight = parseFloat(this.glassDiv.style.right) || padding;\n // Clamp Right: max(padding, min(current, vw - size - padding))\n // Ensure it doesn't go off left side (vw - size - padding)\n currentRight = Math.max(padding, Math.min(currentRight, vw - glassSize - padding));\n this.glassDiv.style.right = `${currentRight}px`;\n } else {\n // Anchor Left\n let currentLeft = parseFloat(this.glassDiv.style.left) || padding;\n currentLeft = Math.max(padding, Math.min(currentLeft, vw - glassSize - padding));\n this.glassDiv.style.left = `${currentLeft}px`;\n }\n\n // Check if anchored Bottom or Top\n const isAnchoredBottom = this.glassDiv.style.bottom !== 'auto' && this.glassDiv.style.bottom !== '';\n\n if (isAnchoredBottom) {\n let currentBottom = parseFloat(this.glassDiv.style.bottom) || padding;\n currentBottom = Math.max(padding, Math.min(currentBottom, vh - glassSize - padding));\n this.glassDiv.style.bottom = `${currentBottom}px`;\n } else {\n // Anchor Top\n let currentTop = parseFloat(this.glassDiv.style.top) || padding;\n currentTop = Math.max(padding, Math.min(currentTop, vh - glassSize - padding));\n this.glassDiv.style.top = `${currentTop}px`;\n }\n }\n\n /**\n * Update position safely on resize.\n * Since we use dynamic anchoring in positionGlass, CSS handles most resize cases.\n * This method ensures we verify boundaries (clamping) and fix anchors if we cross thresholds drastically.\n */\n updateResponsivePosition(): void {\n if (!this.glassDiv) return;\n // Re-run boundary adjustments to clamp if resize pushed us offscreen\n this.adjustForBoundaries();\n }\n\n /**\n * Apply current config to UI elements.\n */\n applyStyles(): void {\n if (this.glassDiv) {\n this.glassDiv.style.width = `${this.config.glassSize}px`;\n this.glassDiv.style.height = `${this.config.glassSize}px`;\n this.glassDiv.style.border = this.config.borderEnabled\n ? `${this.config.borderWidth}px solid ${this.config.borderColor}`\n : 'none';\n\n // Reset clip-path and set default border-radius\n this.glassDiv.style.clipPath = 'none';\n this.glassDiv.style.borderRadius = '0px';\n\n switch (this.config.glassShape) {\n case \"Circle\":\n this.glassDiv.style.borderRadius = \"50%\";\n break;\n case \"Square\":\n // borderRadius is already '0px'\n break;\n case \"Rounded Square\":\n this.glassDiv.style.borderRadius = \"20%\";\n break;\n default:\n this.glassDiv.style.borderRadius = \"50%\";\n break;\n }\n\n // Reduce Motion\n if (this.config.reduceMotion) {\n this.glassDiv.style.transition = 'none !important';\n this.glassDiv.style.animation = 'none !important';\n // Also set property directly just in case !important doesn't stick in inline style without special handling\n this.glassDiv.style.setProperty('transition', 'none', 'important');\n this.glassDiv.style.setProperty('animation', 'none', 'important');\n } else {\n this.glassDiv.style.transition = '';\n this.glassDiv.style.animation = '';\n this.glassDiv.style.removeProperty('transition');\n this.glassDiv.style.removeProperty('animation');\n }\n }\n\n if (this.glassCanvas) {\n this.glassCanvas.width = this.config.glassSize;\n this.glassCanvas.height = this.config.glassSize;\n }\n }\n\n /**\n * Cleanup DOM elements.\n */\n cleanup(): void {\n if (this.glassDiv) this.glassDiv.remove();\n // Remove menu button if needed (though hard to track references here without saving it)\n const btn = document.querySelector('.magnify-toggle-btn');\n if (btn) btn.remove();\n }\n\n /**\n * Inject a quick toggle button into the ComfyUI menu.\n */\n injectMenuButton(): void {\n // Stop after 30 seconds\n const stopTime = Date.now() + 30000;\n\n // Define check function\n const attemptInjection = () => {\n // Use data-testid selectors to find the specific buttons in the bottom toolbar\n // These are the official ComfyUI frontend identifiers\n const minimapBtn = document.querySelector('button[data-testid=\"toggle-minimap-button\"]') as HTMLButtonElement;\n const linkVisibilityBtn = document.querySelector('button[data-testid=\"toggle-link-visibility-button\"]') as HTMLButtonElement;\n\n // We need at least the minimap button to inject after it\n if (!minimapBtn || !minimapBtn.parentElement) {\n return false;\n }\n\n // Check if already injected\n if (minimapBtn.parentElement.querySelector('.magnify-toggle-btn')) {\n return true;\n }\n\n Logger.debug('Found minimap button in bottom toolbar, injecting magnify glass toggle');\n\n const btn = document.createElement('button');\n // Copy all classes from minimap button to match theme/library\n btn.className = minimapBtn.className + ' magnify-toggle-btn';\n\n // Copy key styles that might define shape/size\n const computed = window.getComputedStyle(minimapBtn);\n btn.style.height = computed.height;\n btn.style.minHeight = computed.minHeight;\n btn.style.width = computed.width; // Match width for consistency\n\n btn.title = \"Toggle Magnify Glass (X)\";\n btn.setAttribute('aria-label', \"Toggle Magnify Glass\");\n btn.setAttribute('aria-pressed', 'false');\n btn.setAttribute('data-testid', 'toggle-magnify-glass-button');\n btn.innerHTML = Icons.magnifyGlass;\n\n // Ensure specific display props\n btn.style.display = \"inline-flex\";\n btn.style.alignItems = \"center\";\n btn.style.justifyContent = \"center\";\n btn.style.padding = \"0\";\n btn.style.cursor = \"pointer\";\n\n // Copy border radius if available\n if (minimapBtn.style.borderRadius) {\n btn.style.borderRadius = minimapBtn.style.borderRadius;\n } else {\n btn.style.borderRadius = computed.borderRadius;\n }\n\n // Add active state tracking\n btn.addEventListener('click', () => {\n if (this.onToggle) {\n this.onToggle();\n // Toggle active states to match ComfyUI's button styling\n const isActive = btn.classList.toggle('active');\n btn.classList.toggle('p-highlight'); // PrimeVue\n btn.classList.toggle('selected');\n btn.setAttribute('aria-pressed', String(isActive));\n }\n });\n\n // Insert AFTER the minimap button (between minimap and link visibility)\n if (linkVisibilityBtn && minimapBtn.parentElement === linkVisibilityBtn.parentElement) {\n // Insert before link visibility button (which puts it after minimap)\n minimapBtn.parentElement.insertBefore(btn, linkVisibilityBtn);\n } else if (minimapBtn.nextSibling) {\n // Fallback: insert after minimap button\n minimapBtn.parentElement.insertBefore(btn, minimapBtn.nextSibling);\n } else {\n minimapBtn.parentElement.appendChild(btn);\n }\n\n Logger.debug('Menu toggle button injected successfully between minimap and link visibility');\n return true;\n };\n\n // Run immediately first\n if (attemptInjection()) return;\n\n // Then poll rapidly\n const checkForMenu = setInterval(() => {\n if (Date.now() > stopTime) {\n console.warn(\"[MagnifyGlass] Menu injection timed out. Could not find toggle-minimap-button\");\n clearInterval(checkForMenu);\n return;\n }\n\n if (attemptInjection()) {\n clearInterval(checkForMenu);\n }\n }, 100);\n }\n}\n"],"names":[],"mappings":"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"} \ No newline at end of file