refactor: migrate magnify glass and info panel to TypeScript with Vite and Vue

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "comfyui-magnifyglass",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A professional magnifying glass and info panel for ComfyUI",
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test:e2e": "playwright test",
+    "test:unit": "vitest"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.57.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vue/test-utils": "^2.4.6",
+    "happy-dom": "^20.0.11",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vitest": "^4.0.16"
+  },
+  "dependencies": {
+    "vue": "^3.5.26"
+  }
+}

playwright.config.ts

@@ -0,0 +1,49 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+    testDir: './tests/e2e',
+    /* Run tests in files in parallel */
+    fullyParallel: true,
+    /* Fail the build on CI if you accidentally left test.only in the source code. */
+    forbidOnly: !!process.env.CI,
+    /* Retry on CI only */
+    retries: process.env.CI ? 2 : 0,
+    /* Opt out of parallel tests on CI. */
+    workers: process.env.CI ? 1 : undefined,
+    /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+    reporter: 'html',
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        /* Base URL to use in actions like `await page.goto('/')`. */
+        // baseURL: 'http://127.0.0.1:8188',
+
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
+    },
+
+    /* Configure projects for major browsers */
+    projects: [
+        {
+            name: 'chromium',
+            use: { ...devices['Desktop Chrome'] },
+        },
+        // {
+        //   name: 'firefox',
+        //   use: { ...devices['Desktop Firefox'] },
+        // },
+        // {
+        //   name: 'webkit',
+        //   use: { ...devices['Desktop Safari'] },
+        // },
+    ],
+
+    /* Run your local dev server before starting the tests */
+    // webServer: {
+    //   command: 'npm run start',
+    //   url: 'http://127.0.0.1:3000',
+    //   reuseExistingServer: !process.env.CI,
+    // },
+});

src/components/ComfyPanel.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="comfy-vue-panel" :class="themeClass">
+    <h1>{{ title }}</h1>
+    <div class="content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+
+export default defineComponent({
+  name: 'ComfyPanel',
+  props: {
+    title: {
+      type: String,
+      default: 'Panel'
+    },
+    theme: {
+      type: String,
+      default: 'dark'
+    }
+  },
+  setup(props) {
+    const themeClass = computed(() => `theme-${props.theme}`);
+    
+    return {
+      themeClass
+    };
+  }
+});
+</script>
+
+<style scoped>
+.comfy-vue-panel {
+  padding: 10px;
+  background-color: var(--comfy-menu-bg, #222);
+  color: var(--comfy-text-color, #fff);
+  border: 1px solid var(--border-color, #444);
+  border-radius: 4px;
+}
+.theme-light {
+  background-color: #f0f0f0;
+  color: #333;
+}
+</style>

src/info-panel/EventManager.ts

@@ -0,0 +1,181 @@
+/**
+ * ComfyUI MagnifyGlass - Info Panel Event Manager (TypeScript)
+ * 
+ * Complete Event Manager extracted from magnify_info_panel.js
+ * Handles all event binding and delegation for the info panel.
+ */
+
+import { StateManager } from './StateManager';
+import { UIManager } from './UIManager'; // Kept for type compatibility if needed, though we use HTMLElement mostly
+import { PositionManager } from './PositionManager';
+import { isUserTyping } from '../shared/utils';
+
+export interface EventCallbacks {
+    toggleVisibility: () => void;
+    togglePin: () => void;
+    updatePosition: () => void;
+}
+
+/**
+ * Event Manager class.
+ * Handles all event listeners for the info panel.
+ */
+export class EventManager {
+    stateManager: StateManager;
+    panelElement: HTMLElement | null;
+    positionManager: PositionManager;
+    callbacks: EventCallbacks | null;
+
+    dragCleanup: (() => void) | null;
+
+    boundHandleMouseMove: (e: MouseEvent) => void;
+    boundHandleKeyDown: (e: KeyboardEvent) => void;
+    boundHandleKeyUp: (e: KeyboardEvent) => void;
+
+    constructor(stateManager: StateManager, panelElement: HTMLElement | null, positionManager: PositionManager, callbacks?: EventCallbacks) {
+        this.stateManager = stateManager;
+        this.panelElement = panelElement;
+        this.positionManager = positionManager;
+        this.callbacks = callbacks || null;
+        this.dragCleanup = null;
+
+        this.boundHandleMouseMove = this.handleMouseMove.bind(this);
+        this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+        this.boundHandleKeyUp = this.handleKeyUp.bind(this);
+
+        this.setupEventListeners();
+    }
+
+    setupEventListeners(): void {
+        this.setupPanelEvents();
+        this.setupHotkeyEvents();
+        this.setupDragEvents();
+        this.setupHoverEvents();
+    }
+
+    setupPanelEvents(): void {
+        if (!this.panelElement) return;
+
+        // Vue handles most internal events now.
+        // We can keep specific global-ish listeners if needed here.
+    }
+
+    setupHotkeyEvents(): void {
+        document.addEventListener('keydown', this.boundHandleKeyDown);
+    }
+
+    setupDragEvents(): void {
+        if (!this.panelElement) return;
+
+        // Simple drag implementation for the Vue panel
+        // The dragging logic could be inside Vue, but if we want to update global state/position, we can do it here.
+        // For now, let's look for the header element.
+
+        // We need to wait for Vue to render the header?
+        // Since we pass the container, and Vue mounts to it, the header might be inside.
+        // We can use event delegation on the container.
+
+        const startDrag = (e: MouseEvent) => {
+            if (!this.panelElement) return;
+            const target = e.target as HTMLElement;
+
+            // Only allow dragging from header
+            if (!target.closest('.mag-panel-header')) return;
+            if (target.closest('button')) return;
+
+            e.preventDefault();
+
+            const startX = e.clientX;
+            const startY = e.clientY;
+            const rect = this.panelElement.getBoundingClientRect();
+            const startLeft = rect.left;
+            const startTop = rect.top;
+
+            // Use requestAnimationFrame for smoother dragging?
+            const onMouseMove = (moveEvent: MouseEvent) => {
+                const dx = moveEvent.clientX - startX;
+                const dy = moveEvent.clientY - startY;
+
+                if (this.panelElement) {
+                    this.panelElement.style.left = `${startLeft + dx}px`;
+                    this.panelElement.style.top = `${startTop + dy}px`;
+                }
+            };
+
+            const onMouseUp = () => {
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+
+                // Save pinned position
+                if (this.panelElement) {
+                    const finalRect = this.panelElement.getBoundingClientRect();
+                    this.stateManager.state.pinnedPosition = { x: finalRect.left, y: finalRect.top };
+                    // Auto-pin on drag end?
+                    if (!this.stateManager.state.isPanelPinned) {
+                        // callbacks.togglePin? Or just set state?
+                        // Better to let user manually pin, or follow existing logic.
+                    }
+                }
+            };
+
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        };
+
+        this.panelElement.addEventListener('mousedown', startDrag);
+
+        this.dragCleanup = () => {
+            if (this.panelElement) this.panelElement.removeEventListener('mousedown', startDrag);
+        };
+    }
+
+    setupHoverEvents(): void {
+        if (!this.panelElement) return;
+
+        this.panelElement.addEventListener('mouseenter', () => {
+            this.stateManager.state.isPanelHovered = true;
+            this.stateManager.clearAutoExpandTimer();
+        });
+
+        this.panelElement.addEventListener('mouseleave', () => {
+            this.stateManager.state.isPanelHovered = false;
+            if (!this.stateManager.state.isHoveringNode) {
+                this.stateManager.scheduleAutoCollapse();
+            }
+        });
+    }
+
+    handleKeyDown(e: KeyboardEvent): void {
+        if (isUserTyping()) return;
+
+        const settings = this.stateManager.state.settings;
+        const key = e.key.toLowerCase();
+        // console.log(`[InfoPanel] KeyDown: ${key}`);
+
+        // Toggle visibility
+        if (key === (settings["🔍MagnifyGlass.ToggleHotkey"] as string).toLowerCase()) {
+            console.log("[InfoPanel] Toggle visibility hotkey matched!");
+            e.preventDefault();
+            this.callbacks?.toggleVisibility();
+        }
+
+        // Toggle Pin
+        if (key === (settings["🔍MagnifyGlass.PinPanelHotkey"] as string).toLowerCase()) {
+            e.preventDefault();
+            this.callbacks?.togglePin();
+        }
+    }
+
+    handleMouseMove(e: MouseEvent): void {
+        // Placeholder
+    }
+
+    handleKeyUp(e: KeyboardEvent): void {
+        // Placeholder
+    }
+
+    cleanup(): void {
+        document.removeEventListener('keydown', this.boundHandleKeyDown);
+        if (this.dragCleanup) this.dragCleanup();
+    }
+}

src/info-panel/InfoPanel.ts

@@ -0,0 +1,146 @@
+/**
+ * ComfyUI MagnifyGlass - Info Panel Orchestrator (TypeScript)
+ * 
+ * Complete Info Panel Manager extracted from magnify_info_panel.js
+ * Main class that orchestrates all info panel components.
+ */
+
+import { registerPanelSettings } from '../shared/settings';
+import { StateManager } from './StateManager';
+import { UIManager } from './UIManager';
+import { PositionManager } from './PositionManager';
+import { EventManager } from './EventManager';
+import { InformationGatherer } from './InformationGatherer';
+
+/**
+ * Professional Info Panel Manager.
+ * Orchestrates all the other components for the info panel.
+ */
+export class InfoPanel {
+    magnifyGlass: any;
+    stateManager: StateManager;
+    uiManager: UIManager;
+    positionManager: PositionManager;
+    eventManager: EventManager;
+    informationGatherer: InformationGatherer;
+
+    constructor(magnifyGlass: any) {
+        this.magnifyGlass = magnifyGlass;
+
+        // Initialize Managers
+        this.stateManager = new StateManager();
+        this.uiManager = new UIManager(this.stateManager);
+        this.informationGatherer = new InformationGatherer();
+
+        // Position Manager needs the UI elements
+        this.positionManager = new PositionManager(this.stateManager, this.uiManager.elements.panel!);
+
+        // Event Manager needs state and UI manager
+        this.eventManager = new EventManager(this.stateManager, this.uiManager.elements.panel!, this.positionManager, {
+            toggleVisibility: () => {
+                if (this.stateManager.state.isPanelVisible) {
+                    this.uiManager.hide();
+                } else {
+                    this.uiManager.show();
+                }
+            },
+            togglePin: () => {
+                this.stateManager.togglePinning();
+                this.uiManager.updatePinnedState();
+            },
+            updatePosition: () => this.positionManager.positionPanel()
+        });
+
+        this.hookIntoMagnifyGlass();
+
+        // Register settings with ComfyUI
+        registerPanelSettings(this.stateManager, this.uiManager, this.positionManager);
+
+        console.log("ComfyUI Magnify Info Panel Pro V2: Initialized successfully");
+    }
+
+    hookIntoMagnifyGlass(): void {
+        // Hook into magnify glass update cycle
+        const originalUpdateMagnifiedView = this.magnifyGlass.updateMagnifiedView.bind(this.magnifyGlass);
+
+        this.magnifyGlass.updateMagnifiedView = (() => {
+            originalUpdateMagnifiedView();
+
+            if (this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"] && this.magnifyGlass.state.active) {
+                this.scheduleInfoUpdate();
+            }
+        }).bind(this);
+
+        // Hook into show/hide
+        const originalShow = this.magnifyGlass.ui.show.bind(this.magnifyGlass.ui);
+        const originalHide = this.magnifyGlass.ui.hide.bind(this.magnifyGlass.ui);
+
+        this.magnifyGlass.ui.show = (() => {
+            originalShow();
+            if (this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"]) {
+                this.uiManager.show();
+                // Position controls after showing
+                setTimeout(() => {
+                    this.positionManager.positionPanel();
+                    this.positionManager.positionFloatingControls(this.uiManager.elements.controls);
+                }, 10);
+            }
+        }).bind(this);
+
+        this.magnifyGlass.ui.hide = (() => {
+            originalHide();
+            this.uiManager.hide();
+        }).bind(this);
+    }
+
+    scheduleInfoUpdate(): void {
+        if (this.stateManager.state.updateScheduled) return;
+
+        this.stateManager.state.updateScheduled = true;
+        requestAnimationFrame(() => {
+            this.updateInfo();
+            this.stateManager.state.updateScheduled = false;
+        });
+    }
+
+    updateInfo(): void {
+        if (!this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"] || !this.magnifyGlass.state.active) return;
+
+        const info = this.informationGatherer.gatherInformation();
+        this.stateManager.setCurrentInfo(info);
+
+        // Update the UI
+        this.uiManager.displayInfo(info);
+
+        this.positionManager.positionPanel();
+        this.positionManager.positionFloatingControls(this.uiManager.elements.controls);
+
+        // Handle node hover state logic if needed for internal state
+        if (info.hoveredNode) {
+            this.stateManager.state.isHoveringNode = true;
+            this.stateManager.expandNodeSections();
+            if (this.stateManager.state.lastNodeId !== info.hoveredNode.id) {
+                this.stateManager.state.lastNodeId = info.hoveredNode.id;
+            }
+        } else {
+            this.stateManager.state.isHoveringNode = false;
+            if (this.stateManager.state.lastNodeId !== null) {
+                this.stateManager.state.lastNodeId = null;
+                if (!this.stateManager.state.isPanelHovered) {
+                    this.stateManager.scheduleAutoCollapse();
+                }
+            }
+        }
+    }
+
+    updateSettings(): void {
+        const changes = this.stateManager.updateSettings();
+        this.uiManager.applyStyles();
+
+        if (this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"] && this.magnifyGlass.state.active) {
+            this.uiManager.show();
+        } else {
+            this.uiManager.hide();
+        }
+    }
+}

src/info-panel/InformationGatherer.ts

@@ -0,0 +1,322 @@
+/**
+ * ComfyUI MagnifyGlass - Info Panel Information Gatherer (TypeScript)
+ * 
+ * Complete Information Gatherer extracted from magnify_info_panel.js
+ * Responsible for collecting information about nodes, widgets, and canvas state.
+ */
+
+// We need to declare the app global variable or import it if the type definition is available
+// Assuming types/comfyui.d.ts handles declared const app: ComfyApp;
+declare const app: any;
+
+/**
+ * Information Gatherer class.
+ * Collects information about the current state under the cursor.
+ */
+export class InformationGatherer {
+    constructor() { }
+
+    gatherInformation(): any {
+        const magnifyGlass = window.comfyUIMagnifyGlass;
+        if (!magnifyGlass) return {};
+
+        const info: any = {
+            timestamp: Date.now(),
+            cursor: {
+                canvas: { x: magnifyGlass.state.x, y: magnifyGlass.state.y },
+                screen: {
+                    x: magnifyGlass.lastKnownMousePosition.x,
+                    y: magnifyGlass.lastKnownMousePosition.y
+                }
+            },
+            canvas: {
+                scale: magnifyGlass.state.canvasScale,
+                offset: {
+                    x: magnifyGlass.state.canvasOffsetX,
+                    y: magnifyGlass.state.canvasOffsetY
+                }
+            },
+            magnifier: {
+                zoomFactor: magnifyGlass.config.zoomFactor,
+                offsetX: magnifyGlass.config.offsetX,
+                offsetY: magnifyGlass.config.offsetY,
+                sourceRegion: {
+                    x: magnifyGlass.state.sourceX,
+                    y: magnifyGlass.state.sourceY,
+                    width: magnifyGlass.state.sourceWidth,
+                    height: magnifyGlass.state.sourceHeight
+                }
+            },
+            hoveredNode: null,
+            node: null,
+            widget: null,
+            connection: null,
+            media: null
+        };
+
+        if (magnifyGlass.isOverMedia && magnifyGlass.currentMediaElement) {
+            info.media = this.getMediaInfo(magnifyGlass.currentMediaElement);
+        }
+
+        const nodeUnderCursor = this.getNodeUnderCursor();
+        if (nodeUnderCursor) {
+            info.hoveredNode = this.getDetailedNodeInfo(nodeUnderCursor.node, nodeUnderCursor.localPos);
+            info.node = this.getNodeInfo(nodeUnderCursor.node);
+
+            const widget = this.getWidgetUnderCursor(nodeUnderCursor.node, nodeUnderCursor.localPos);
+            if (widget) {
+                info.widget = this.getWidgetInfo(widget);
+            }
+        }
+
+        return info;
+    }
+
+    getNodeUnderCursor(): { node: any, localPos: { x: number, y: number } } | null {
+        const magnifyGlass = window.comfyUIMagnifyGlass;
+        if (!app.graph || !app.canvas || !magnifyGlass) {
+            return null;
+        }
+
+        try {
+            // Try to get the node from ComfyUI's state
+            if (app.canvas.node_over) {
+                const node = app.canvas.node_over;
+                if (node && node.pos && node.size) {
+                    const canvasRect = app.canvas.canvas.getBoundingClientRect();
+                    const mouseX = magnifyGlass.lastKnownMousePosition.x - canvasRect.left;
+                    const mouseY = magnifyGlass.lastKnownMousePosition.y - canvasRect.top;
+
+                    let graphPos: [number, number];
+                    if (app.canvas.convertOffsetToCanvasPos) {
+                        graphPos = app.canvas.convertOffsetToCanvasPos([mouseX, mouseY]);
+                    } else {
+                        const ds = app.canvas.ds || { scale: 1, offset: [0, 0] };
+                        graphPos = [
+                            (mouseX / ds.scale) - (ds.offset[0] / ds.scale),
+                            (mouseY / ds.scale) - (ds.offset[1] / ds.scale)
+                        ];
+                    }
+
+                    return {
+                        node: node,
+                        localPos: {
+                            x: graphPos[0] - node.pos[0],
+                            y: graphPos[1] - node.pos[1]
+                        }
+                    };
+                }
+            }
+
+            // Fallback to manual detection
+            const canvasRect = app.canvas.canvas.getBoundingClientRect();
+            const mouseX = magnifyGlass.lastKnownMousePosition.x - canvasRect.left;
+            const mouseY = magnifyGlass.lastKnownMousePosition.y - canvasRect.top;
+
+            let graphPos: [number, number];
+            if (app.canvas.convertOffsetToCanvasPos) {
+                graphPos = app.canvas.convertOffsetToCanvasPos([mouseX, mouseY]);
+            } else {
+                const ds = app.canvas.ds || { scale: 1, offset: [0, 0] };
+                graphPos = [
+                    (mouseX / ds.scale) - (ds.offset[0] / ds.scale),
+                    (mouseY / ds.scale) - (ds.offset[1] / ds.scale)
+                ];
+            }
+
+            for (let i = app.graph._nodes.length - 1; i >= 0; i--) {
+                const node = app.graph._nodes[i];
+                if (!node.pos || !node.size || (node.flags && node.flags.collapsed)) continue;
+
+                if (graphPos[0] >= node.pos[0] &&
+                    graphPos[0] <= node.pos[0] + node.size[0] &&
+                    graphPos[1] >= node.pos[1] &&
+                    graphPos[1] <= node.pos[1] + node.size[1]) {
+
+                    return {
+                        node: node,
+                        localPos: {
+                            x: graphPos[0] - node.pos[0],
+                            y: graphPos[1] - node.pos[1]
+                        }
+                    };
+                }
+            }
+        } catch (err) {
+            console.warn("Error in node detection:", err);
+        }
+
+        return null;
+    }
+
+    getDetailedNodeInfo(node: any, localPos: { x: number, y: number }): any {
+        return {
+            id: node.id,
+            title: node.title || "Untitled Node",
+            type: node.type,
+            mode: this.getNodeModeText(node.mode),
+            position: {
+                x: Math.round(node.pos[0]),
+                y: Math.round(node.pos[1]),
+                formatted: `(${Math.round(node.pos[0])}, ${Math.round(node.pos[1])})`
+            },
+            size: {
+                width: Math.round(node.size[0]),
+                height: Math.round(node.size[1]),
+                formatted: `${Math.round(node.size[0])}×${Math.round(node.size[1])}`
+            },
+            localPosition: {
+                x: Math.round(localPos.x),
+                y: Math.round(localPos.y),
+                formatted: `(${Math.round(localPos.x)}, ${Math.round(localPos.y)})`,
+                percentage: {
+                    x: ((localPos.x / node.size[0]) * 100).toFixed(1),
+                    y: ((localPos.y / node.size[1]) * 100).toFixed(1)
+                }
+            },
+            counts: {
+                widgets: node.widgets ? node.widgets.length : 0,
+                inputs: node.inputs ? node.inputs.length : 0,
+                outputs: node.outputs ? node.outputs.length : 0,
+                properties: node.properties ? Object.keys(node.properties).length : 0
+            },
+            widgets: node.widgets || [],
+            inputs: node.inputs || [],
+            outputs: node.outputs || [],
+            properties: node.properties || {},
+            hoverRegion: this.detectNodeRegion(localPos, node)
+        };
+    }
+
+    getNodeInfo(node: any): any {
+        return {
+            id: node.id,
+            title: node.title || "Untitled",
+            type: node.type,
+            mode: node.mode,
+            size: node.size ? `${Math.round(node.size[0])}×${Math.round(node.size[1])}` : "Unknown",
+            position: node.pos ? `(${Math.round(node.pos[0])}, ${Math.round(node.pos[1])})` : "Unknown",
+            widgets: node.widgets || [],
+            inputs: node.inputs || [],
+            outputs: node.outputs || [],
+            properties: node.properties || {}
+        };
+    }
+
+    getWidgetUnderCursor(node: any, localPos: { x: number, y: number }): any {
+        if (!node.widgets || !node.widgets.length) return null;
+
+        const titleHeight = 30;
+        let currentY = titleHeight;
+
+        for (const widget of node.widgets) {
+            const widgetHeight = 25;
+
+            if (localPos.y >= currentY && localPos.y <= currentY + widgetHeight) {
+                return widget;
+            }
+
+            currentY += widgetHeight + 5;
+        }
+
+        return null;
+    }
+
+    getWidgetInfo(widget: any): any {
+        return {
+            name: widget.name,
+            type: widget.type,
+            value: this.formatValue(widget.value),
+            options: widget.options || null,
+            min: widget.min,
+            max: widget.max,
+            step: widget.step
+        };
+    }
+
+    getMediaInfo(mediaElement: HTMLImageElement | HTMLVideoElement): any {
+        const info: any = {
+            tagName: mediaElement.tagName,
+            src: mediaElement.src ? mediaElement.src.substring(mediaElement.src.lastIndexOf('/') + 1) : "No source"
+        };
+
+        if (mediaElement instanceof HTMLImageElement) {
+            info.naturalSize = `${mediaElement.naturalWidth}×${mediaElement.naturalHeight}`;
+            info.displaySize = `${Math.round(mediaElement.width)}×${Math.round(mediaElement.height)}`;
+            info.complete = mediaElement.complete;
+        } else if (mediaElement instanceof HTMLVideoElement) {
+            info.videoSize = `${mediaElement.videoWidth}×${mediaElement.videoHeight}`;
+            info.duration = mediaElement.duration ? `${mediaElement.duration.toFixed(2)}s` : "Unknown";
+            info.currentTime = `${mediaElement.currentTime.toFixed(2)}s`;
+            info.paused = mediaElement.paused;
+            info.readyState = mediaElement.readyState;
+        }
+
+        return info;
+    }
+
+    getNodeModeText(mode: number): string {
+        const modes: { [key: number]: string } = {
+            0: "Always",
+            1: "On Event",
+            2: "Never",
+            3: "On Trigger",
+            4: "On Request"
+        };
+        return modes[mode] || `Mode ${mode}`;
+    }
+
+    detectNodeRegion(localPos: { x: number, y: number }, node: any): string {
+        const titleHeight = 30;
+        const regions: string[] = [];
+
+        if (localPos.y <= titleHeight) {
+            regions.push("Title Bar");
+        }
+
+        if (localPos.x <= 10) {
+            regions.push("Left Edge");
+        } else if (localPos.x >= node.size[0] - 10) {
+            regions.push("Right Edge");
+        }
+
+        if (localPos.y <= 10) {
+            regions.push("Top Edge");
+        } else if (localPos.y >= node.size[1] - 10) {
+            regions.push("Bottom Edge");
+        }
+
+        if (regions.length === 0) {
+            if (localPos.y > titleHeight) {
+                regions.push("Content Area");
+            }
+        }
+
+        if (localPos.x <= 20 && localPos.y > titleHeight) {
+            regions.push("Input Area");
+        } else if (localPos.x >= node.size[0] - 20 && localPos.y > titleHeight) {
+            regions.push("Output Area");
+        }
+
+        return regions.length > 0 ? regions.join(", ") : "Unknown";
+    }
+
+    formatValue(value: any): string {
+        if (value === null) return "null";
+        if (value === undefined) return "undefined";
+        if (typeof value === "string") {
+            return value; // Show full text without truncation
+        }
+        if (typeof value === "number") {
+            return Number.isInteger(value) ? value.toString() : value.toFixed(3);
+        }
+        if (typeof value === "boolean") return value.toString();
+        if (Array.isArray(value)) {
+            return `Array(${value.length})`;
+        }
+        if (typeof value === "object") {
+            return "Object";
+        }
+        return String(value);
+    }
+}

src/info-panel/PositionManager.ts

@@ -0,0 +1,145 @@
+/**
+ * Position Manager class.
+ * Handles all positioning logic for the info panel.
+ */
+
+import { StateManager } from './StateManager';
+
+export class PositionManager {
+    stateManager: StateManager;
+    panelElement: HTMLElement;
+
+    constructor(stateManager: StateManager, panelElement: HTMLElement) {
+        this.stateManager = stateManager;
+        this.panelElement = panelElement;
+    }
+
+    positionPanel(): void {
+        if (!this.panelElement) return;
+
+        // If panel is pinned, keep it at its pinned position
+        if (this.stateManager.state.isPanelPinned) {
+            this.applyPinnedPosition();
+            return;
+        }
+
+        // Normal positioning logic
+        this.calculateNormalPosition();
+    }
+
+    applyPinnedPosition(): void {
+        if (!this.panelElement) return;
+
+        let { x, y } = this.stateManager.state.pinnedPosition;
+        const panelWidth = this.panelElement.offsetWidth;
+        const panelHeight = this.panelElement.offsetHeight;
+        const margin = 10;
+
+        const boundedX = Math.max(margin, Math.min(x, window.innerWidth - panelWidth - margin));
+        const boundedY = Math.max(margin, Math.min(y, window.innerHeight - panelHeight - margin));
+
+        this.panelElement.style.left = `${boundedX}px`;
+        this.panelElement.style.top = `${boundedY}px`;
+    }
+
+    calculateNormalPosition(): void {
+        const magnifyGlass = window.comfyUIMagnifyGlass;
+        if (!magnifyGlass || !this.panelElement) return;
+
+        const settings = this.stateManager.state.settings;
+        const panelWidth = settings["🔍MagnifyGlass.InfoPanelWidth"];
+        const panelHeight = this.panelElement.offsetHeight; // Use actual height
+
+        let left: number;
+        let top: number;
+        const margin = 15;
+
+        if (!this.stateManager.state.isGlassPreviewVisible) {
+            left = magnifyGlass.lastKnownMousePosition.x - (panelWidth / 2);
+            top = magnifyGlass.lastKnownMousePosition.y - 20;
+        } else {
+            const glassRect = magnifyGlass.ui.glassDiv?.getBoundingClientRect();
+            if (glassRect) {
+                const position = settings["🔍MagnifyGlass.InfoPanelPosition"];
+                switch (position) {
+                    case "Right":
+                        left = glassRect.right + margin;
+                        top = glassRect.top;
+                        break;
+                    case "Left":
+                        left = glassRect.left - panelWidth - margin;
+                        top = glassRect.top;
+                        break;
+                    case "Top":
+                        left = glassRect.left;
+                        top = glassRect.top - panelHeight - margin;
+                        break;
+                    case "Bottom":
+                        left = glassRect.left;
+                        top = glassRect.bottom + margin;
+                        break;
+                    default:
+                        left = glassRect.right + margin;
+                        top = glassRect.top;
+                        break;
+                }
+            } else {
+                left = magnifyGlass.lastKnownMousePosition.x - (panelWidth / 2);
+                top = magnifyGlass.lastKnownMousePosition.y - 20;
+            }
+        }
+
+        left = Math.max(10, Math.min(left, window.innerWidth - panelWidth - 10));
+        top = Math.max(10, Math.min(top, window.innerHeight - panelHeight - 10));
+
+        this.panelElement.style.left = `${left}px`;
+        this.panelElement.style.top = `${top}px`;
+    }
+
+    /**
+     * Position the floating controls relative to the panel.
+     */
+    positionFloatingControls(controlsElement: HTMLElement | null): void {
+        if (!controlsElement || !this.panelElement) return;
+
+        const panelRect = this.panelElement.getBoundingClientRect();
+        const controlsPosition = this.stateManager.state.settings["🔍MagnifyGlass.ControlsPosition"] || "right";
+        const margin = 8;
+
+        let left: number;
+        let top: number;
+
+        switch (controlsPosition) {
+            case "left":
+                left = panelRect.left - controlsElement.offsetWidth - margin;
+                top = panelRect.top;
+                break;
+            case "right":
+                left = panelRect.right + margin;
+                top = panelRect.top;
+                break;
+            case "top":
+                left = panelRect.left;
+                top = panelRect.top - controlsElement.offsetHeight - margin;
+                break;
+            case "bottom":
+                left = panelRect.left;
+                top = panelRect.bottom + margin;
+                break;
+            case "top-right":
+                left = panelRect.right - controlsElement.offsetWidth;
+                top = panelRect.top - controlsElement.offsetHeight - margin;
+                break;
+            default:
+                left = panelRect.right + margin;
+                top = panelRect.top;
+        }
+
+        // Keep controls within viewport
+        left = Math.max(10, Math.min(left, window.innerWidth - controlsElement.offsetWidth - 10));
+        top = Math.max(10, Math.min(top, window.innerHeight - controlsElement.offsetHeight - 10));
+
+        controlsElement.style.left = `${left}px`;
+        controlsElement.style.top = `${top}px`;
+    }
+}

src/info-panel/StateManager.ts

@@ -0,0 +1,404 @@
+/**
+ * ComfyUI MagnifyGlass - Info Panel State Manager (TypeScript)
+ * 
+ * Centralized state management for the information panel.
+ */
+
+import { getSettingValue } from '../shared/utils';
+import { DEFAULT_PANEL_SETTINGS } from '../shared/settings';
+
+export interface InfoPanelStateData {
+    // Panel visibility and positioning
+    isPanelVisible: boolean;
+    isPanelMinimized: boolean;
+    isPanelPinned: boolean;
+    isPanelLocked: boolean; // New lock state
+    isAutoPinned: boolean; // Track if panel was auto-pinned by glass hide
+    pinnedPosition: { x: number; y: number };
+    lastPinnedPosition: { x: number; y: number } | null; // Remember last pinned location
+
+    // Glass visibility
+    isGlassPreviewVisible: boolean;
+
+    // Section expansion
+    expandedSections: Set<string>;
+
+    // Interaction states
+    isPanelHovered: boolean;
+    isHoveringNode: boolean;
+
+    // Auto-collapse
+    autoExpandTimer: ReturnType<typeof setTimeout> | null;
+    lastNodeId: string | number | null;
+
+    // Update scheduling
+    updateScheduled: boolean;
+    isInitialLoading: boolean;
+
+    // Current data
+    currentInfo: any;
+
+    // Settings cache
+    settings: { [key: string]: any };
+
+    // Auto-detected theme
+    currentTheme: string;
+}
+
+/**
+ * State Manager class.
+ * Handles all state-related operations and provides clean state transitions.
+ */
+export class StateManager {
+    state: InfoPanelStateData;
+
+    constructor() {
+        this.state = {
+            // Panel visibility and positioning
+            isPanelVisible: false,
+            isPanelMinimized: false,
+            isPanelPinned: false,
+            isPanelLocked: false, // New lock state
+            isAutoPinned: false, // Track if panel was auto-pinned by glass hide
+            pinnedPosition: { x: 0, y: 0 },
+            lastPinnedPosition: null, // Remember last pinned location
+
+            // Glass visibility
+            isGlassPreviewVisible: true,
+
+            // Section expansion
+            expandedSections: new Set(['node']),
+
+            // Interaction states
+            isPanelHovered: false,
+            isHoveringNode: false,
+
+            // Auto-collapse
+            autoExpandTimer: null,
+            lastNodeId: null,
+
+            // Update scheduling
+            updateScheduled: false,
+            isInitialLoading: false,
+
+            // Current data
+            currentInfo: {},
+
+            // Settings cache
+            settings: {},
+
+            // Auto-detected theme
+            currentTheme: 'dark' // Will be auto-detected
+        };
+
+        this.initThemeDetection();
+        this.loadSettings();
+    }
+
+    initThemeDetection(): void {
+        // Detect ComfyUI's current theme
+        this.detectCurrentTheme();
+
+        // Force an immediate check in case we missed the initial state
+        setTimeout(() => {
+            if (this.detectCurrentTheme()) {
+                this.notifyThemeChange();
+            }
+        }, 1000);
+
+        // Set up mutation observer to watch for theme changes
+        this.setupThemeObserver();
+
+        // Listen for system theme changes as fallback
+        if (window.matchMedia) {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+            if (prefersDark.addListener) {
+                prefersDark.addListener(() => this.detectCurrentTheme());
+            } else if (prefersDark.addEventListener) {
+                prefersDark.addEventListener('change', () => this.detectCurrentTheme());
+            }
+        }
+
+        // Add click listener to theme toggle buttons for immediate detection
+        this.setupThemeButtonListeners();
+    }
+
+    detectCurrentTheme(): boolean {
+        let detectedTheme = 'dark'; // Default fallback
+
+        const body = document.body;
+        const html = document.documentElement;
+        const vueApp = document.querySelector('#vue-app');
+        const sidebar = document.querySelector('.comfy-menu, .sidebar, .menu, [class*="sidebar"], [class*="menu"]');
+
+        // Get all possible theme-related elements
+        const allElements = [body, html, vueApp, sidebar].filter(Boolean) as Element[];
+
+        // Check CSS variables
+        const rootStyles = window.getComputedStyle(html);
+        const bodyStyles = window.getComputedStyle(body);
+
+        // Method 2: Analyze background colors of multiple elements
+        const backgrounds = allElements.map(el => {
+            const styles = window.getComputedStyle(el);
+            return {
+                element: el.tagName || el.className,
+                backgroundColor: styles.backgroundColor,
+                color: styles.color
+            };
+        });
+
+        // Method 3: Check for light backgrounds
+        for (const bg of backgrounds) {
+            if (bg.backgroundColor && bg.backgroundColor !== 'rgba(0, 0, 0, 0)' && bg.backgroundColor !== 'transparent') {
+                const rgbMatch = bg.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+                if (rgbMatch) {
+                    const [, r, g, b] = rgbMatch.map(Number);
+                    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+                    if (brightness > 180) { // Higher threshold for light detection
+                        detectedTheme = 'light';
+                        break;
+                    }
+                }
+            }
+        }
+
+        // Method 5: Force light theme detection if we see light backgrounds
+        if (detectedTheme === 'dark') {
+            // Look for any element with very light background
+            const lightElements = document.querySelectorAll('*');
+            for (let i = 0; i < Math.min(lightElements.length, 50); i++) { // Check first 50 elements
+                const el = lightElements[i];
+                const styles = window.getComputedStyle(el);
+                const bgColor = styles.backgroundColor;
+
+                if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
+                    const rgbMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+                    if (rgbMatch) {
+                        const [, r, g, b] = rgbMatch.map(Number);
+                        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+                        if (brightness > 200) { // Very light elements
+                            detectedTheme = 'light';
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+
+        // Update theme if it changed
+        if (this.state.currentTheme !== detectedTheme) {
+            this.state.currentTheme = detectedTheme;
+            return true; // Theme changed
+        }
+
+        return false; // No change
+    }
+
+    setupThemeObserver(): void {
+        // Watch for changes to body/html classes and attributes
+        const observer = new MutationObserver((mutations) => {
+            let shouldCheck = false;
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' &&
+                    (mutation.attributeName === 'class' ||
+                        mutation.attributeName === 'data-theme' ||
+                        mutation.attributeName === 'style')) {
+                    shouldCheck = true;
+                }
+            });
+
+            if (shouldCheck && this.detectCurrentTheme()) {
+                // Theme changed, update UI immediately
+                this.notifyThemeChange();
+            }
+        });
+
+        // Observe changes to body, html, and vue app
+        observer.observe(document.body, { attributes: true, attributeOldValue: true });
+        observer.observe(document.documentElement, { attributes: true, attributeOldValue: true });
+
+        const vueApp = document.querySelector('#vue-app');
+        if (vueApp) {
+            observer.observe(vueApp, { attributes: true, attributeOldValue: true });
+        }
+
+        // Also watch for changes to any element with theme-related classes
+        const themeElements = document.querySelectorAll('[class*="theme"], [class*="dark"], [class*="light"], [data-theme]');
+        themeElements.forEach(el => {
+            observer.observe(el, { attributes: true, attributeOldValue: true });
+        });
+
+        // Periodic fallback check every 2 seconds
+        setInterval(() => {
+            if (this.detectCurrentTheme()) {
+                this.notifyThemeChange();
+            }
+        }, 2000);
+    }
+
+    setupThemeButtonListeners(): void {
+        // Listen for clicks on theme toggle buttons
+        document.addEventListener('click', (e) => {
+            // Check if clicked element might be a theme toggle
+            const target = e.target as HTMLElement;
+            const isThemeButton = target.textContent?.toLowerCase().includes('theme') ||
+                target.textContent?.toLowerCase().includes('light') ||
+                target.textContent?.toLowerCase().includes('dark') ||
+                target.title?.toLowerCase().includes('theme') ||
+                target.className?.toLowerCase().includes('theme');
+
+            if (isThemeButton) {
+                setTimeout(() => {
+                    if (this.detectCurrentTheme()) {
+                        this.notifyThemeChange();
+                    }
+                }, 100);
+            }
+        });
+    }
+
+    notifyThemeChange(): void {
+        // Update settings to reflect new theme
+        this.state.settings["🔍MagnifyGlass.InfoPanelTheme"] = this.state.currentTheme;
+
+        // Notify UI components of theme change immediately
+        if (window.infoPanelManager && window.infoPanelManager.uiManager) {
+            window.infoPanelManager.uiManager.updateTheme(this.state.currentTheme);
+        }
+    }
+
+    loadSettings(): void {
+        Object.keys(DEFAULT_PANEL_SETTINGS).forEach(key => {
+            // Skip the theme setting since we auto-detect it
+            if (key !== "🔍MagnifyGlass.InfoPanelTheme") {
+                this.state.settings[key] = getSettingValue(key, (DEFAULT_PANEL_SETTINGS as any)[key]);
+            }
+        });
+
+        // Set theme to auto-detected value
+        this.state.settings["🔍MagnifyGlass.InfoPanelTheme"] = this.state.currentTheme;
+    }
+
+    updateSettings(): { [key: string]: { old: any, new: any } } {
+        const oldSettings = { ...this.state.settings };
+        this.loadSettings();
+
+        // Return what changed for reactive updates
+        const changes: { [key: string]: { old: any, new: any } } = {};
+        Object.keys(this.state.settings).forEach(key => {
+            if (oldSettings[key] !== this.state.settings[key]) {
+                changes[key] = {
+                    old: oldSettings[key],
+                    new: this.state.settings[key]
+                };
+            }
+        });
+
+        return changes;
+    }
+
+    togglePanelVisibility(): boolean {
+        this.state.isPanelVisible = !this.state.isPanelVisible;
+        return this.state.isPanelVisible;
+    }
+
+    toggleGlassPreview(): boolean {
+        this.state.isGlassPreviewVisible = !this.state.isGlassPreviewVisible;
+        return this.state.isGlassPreviewVisible;
+    }
+
+    togglePinning(): boolean {
+        const wasPinned = this.state.isPanelPinned;
+        this.state.isPanelPinned = !this.state.isPanelPinned;
+
+        // When unpinning, also unlock and clear auto-pin flag
+        if (!this.state.isPanelPinned) {
+            this.state.isPanelLocked = false;
+            this.state.isAutoPinned = false; // Clear auto-pin flag when manually unpinning
+        }
+
+        if (this.state.isPanelPinned && this.state.lastPinnedPosition) {
+            // Restore to last pinned position
+            this.state.pinnedPosition = { ...this.state.lastPinnedPosition };
+        } else if (!this.state.isPanelPinned && wasPinned) {
+            // Save current position when unpinning
+            this.state.lastPinnedPosition = { ...this.state.pinnedPosition };
+        }
+
+        return this.state.isPanelPinned;
+    }
+
+    toggleLocking(): boolean {
+        // Only allow locking when pinned
+        if (!this.state.isPanelPinned) {
+            return false;
+        }
+
+        this.state.isPanelLocked = !this.state.isPanelLocked;
+        return this.state.isPanelLocked;
+    }
+
+    toggleMinimized(): boolean {
+        this.state.isPanelMinimized = !this.state.isPanelMinimized;
+        return this.state.isPanelMinimized;
+    }
+
+    toggleSection(sectionId: string): boolean {
+        if (sectionId === 'node') return false; // Node section always expanded
+
+        if (this.state.expandedSections.has(sectionId)) {
+            this.state.expandedSections.delete(sectionId);
+        } else {
+            this.state.expandedSections.add(sectionId);
+        }
+        return true;
+    }
+
+    setPinnedPosition(x: number, y: number): void {
+        this.state.pinnedPosition = { x, y };
+        // Also save as last pinned position for memory
+        this.state.lastPinnedPosition = { x, y };
+    }
+
+    setCurrentInfo(info: any): void {
+        this.state.currentInfo = info;
+    }
+
+    scheduleAutoCollapse(): void {
+        this.clearAutoExpandTimer();
+        if (this.state.settings["🔍MagnifyGlass.InfoPanelAnimations"]) {
+            this.state.autoExpandTimer = setTimeout(() => {
+                if (!this.state.isPanelHovered) {
+                    this.collapseNodeSections();
+                }
+            }, 1500);
+        }
+    }
+
+    clearAutoExpandTimer(): void {
+        if (this.state.autoExpandTimer) {
+            clearTimeout(this.state.autoExpandTimer);
+            this.state.autoExpandTimer = null;
+        }
+    }
+
+    expandNodeSections(): void {
+        this.state.expandedSections.add('hoveredNode');
+        this.state.expandedSections.add('node');
+        this.state.expandedSections.add('cursor');
+        this.state.expandedSections.add('canvas');
+        this.state.expandedSections.add('magnifier');
+        this.clearAutoExpandTimer();
+    }
+
+    collapseNodeSections(): void {
+        this.state.expandedSections.delete('hoveredNode');
+        this.state.expandedSections.delete('node');
+        this.state.expandedSections.delete('widget');
+    }
+
+    cleanup(): void {
+        this.clearAutoExpandTimer();
+    }
+}

src/info-panel/UIManager.ts

@@ -0,0 +1,839 @@
+/**
+ * ComfyUI MagnifyGlass - Info Panel UI Manager (TypeScript)
+ * 
+ * Complete UI Manager extracted from magnify_info_panel.js
+ * Handles all DOM manipulation and UI creation for the info panel.
+ */
+
+// import { Z_INDEX } from '../shared/constants'; // Not used in original code? Kept for reference if needed
+import { getInfoPanelCSS } from './styles';
+import { StateManager } from './StateManager';
+
+interface InfoPanelElements {
+    panel: HTMLDivElement | null;
+    header: HTMLDivElement | null;
+    content: HTMLDivElement | null;
+    controls: HTMLDivElement | null;
+}
+
+/**
+ * UI Manager class.
+ * Handles all DOM manipulation and UI creation.
+ */
+export class UIManager {
+    stateManager: StateManager;
+    elements: InfoPanelElements;
+
+    constructor(stateManager: StateManager) {
+        this.stateManager = stateManager;
+        this.elements = {
+            panel: null,
+            header: null,
+            content: null,
+            controls: null
+        };
+
+        this.createPanel();
+        this.injectStyles();
+    }
+
+    /**
+     * Create the main panel and its components.
+     */
+    createPanel(): void {
+        // Main panel container
+        this.elements.panel = document.createElement("div");
+        this.elements.panel.id = "comfyui-magnify-info-panel-pro-v2";
+        this.elements.panel.className = `magnify-info-panel theme-${this.stateManager.state.currentTheme}`;
+
+        // Header
+        this.elements.header = document.createElement("div");
+        this.elements.header.className = "panel-header";
+        this.elements.header.innerHTML = `
+            <div class="header-content">
+                <div class="header-icon">🔍</div>
+                <div class="header-title">Inspector</div>
+                <div class="header-subtitle">Real-time analysis</div>
+            </div>
+            <div class="header-controls">
+                <button class="control-btn minimize-btn" title="Minimize Panel" data-action="minimize">−</button>
+            </div>
+        `;
+
+        // Content container
+        this.elements.content = document.createElement("div");
+        this.elements.content.className = "panel-content";
+
+        this.elements.panel.appendChild(this.elements.header);
+        this.elements.panel.appendChild(this.elements.content);
+
+        this.applyStyles();
+        document.body.appendChild(this.elements.panel);
+
+        // Create floating controls after panel is in DOM
+        if (this.stateManager.state.settings["🔍MagnifyGlass.ShowHoveringControls"]) {
+            this.createFloatingControls();
+            // Update control states immediately after creation
+            this.updateControlStates();
+        }
+    }
+
+    /**
+     * Create floating control buttons.
+     */
+    createFloatingControls(): void {
+        this.elements.controls = document.createElement("div");
+        this.elements.controls.className = "floating-controls vertical-layout"; // Default to vertical
+        this.elements.controls.innerHTML = `
+            <button class="control-btn pin-btn" title="Unlock Panel to Mouse Location (U)" data-action="pin">🔓</button>
+            <button class="control-btn lock-btn" title="Lock Panel Position" data-action="lock">📌</button>
+            <button class="control-btn visibility-btn" title="Toggle Panel Visibility (I)" data-action="toggle-panel">👁️</button>
+            <button class="control-btn glass-btn" title="Toggle Glass Preview (G)" data-action="toggle-glass">🔍</button>
+        `;
+
+        // Insert before the panel in the document body, not as a child
+        document.body.appendChild(this.elements.controls);
+
+        // Set initial layout based on settings
+        const controlsPosition = this.stateManager.state.settings["🔍MagnifyGlass.ControlsPosition"] || "top-right";
+        this.updateControlsLayout(controlsPosition);
+    }
+
+    /**
+     * Update control button states.
+     */
+    updateControlStates(): void {
+        if (!this.elements.controls) return;
+
+        const pinBtn = this.elements.controls.querySelector('[data-action="pin"]') as HTMLButtonElement;
+        const lockBtn = this.elements.controls.querySelector('[data-action="lock"]') as HTMLButtonElement;
+        const visibilityBtn = this.elements.controls.querySelector('[data-action="toggle-panel"]') as HTMLButtonElement;
+        const glassBtn = this.elements.controls.querySelector('[data-action="toggle-glass"]') as HTMLButtonElement;
+
+        if (pinBtn) {
+            pinBtn.classList.toggle('active', this.stateManager.state.isPanelPinned);
+            pinBtn.title = this.stateManager.state.isPanelPinned ? "Lock Panel" : "Unlock Panel";
+            pinBtn.textContent = this.stateManager.state.isPanelPinned ? "🔒" : "🔓";
+        }
+
+        if (lockBtn) {
+            // Only show/enable lock button when pinned
+            lockBtn.style.display = this.stateManager.state.isPanelPinned ? 'flex' : 'none';
+            lockBtn.classList.toggle('active', this.stateManager.state.isPanelLocked);
+            lockBtn.title = this.stateManager.state.isPanelLocked ? "Upin Panel Position" : "Pin Panel Position";
+            lockBtn.disabled = !this.stateManager.state.isPanelPinned;
+        }
+
+        if (visibilityBtn) {
+            visibilityBtn.classList.toggle('active', this.stateManager.state.isPanelVisible);
+            visibilityBtn.title = this.stateManager.state.isPanelVisible ? "Show Panel" : "Hide Panel";
+        }
+
+        if (glassBtn) {
+            glassBtn.classList.toggle('active', this.stateManager.state.isGlassPreviewVisible);
+            glassBtn.title = this.stateManager.state.isGlassPreviewVisible ? "Hide Glass Preview" : "Show Glass Preview";
+        }
+    }
+
+    /**
+     * Update controls layout based on position setting.
+     * @param position 
+     */
+    updateControlsLayout(position: string): void {
+        if (!this.elements.controls) return;
+
+        // Remove existing layout classes
+        this.elements.controls.classList.remove('horizontal-layout', 'vertical-layout');
+
+        // Add appropriate layout class
+        if (['top', 'bottom'].includes(position)) {
+            this.elements.controls.classList.add('horizontal-layout');
+        } else {
+            this.elements.controls.classList.add('vertical-layout');
+        }
+    }
+
+    /**
+     * Apply current styles to elements.
+     */
+    applyStyles(): void {
+        if (!this.elements.panel) return;
+
+        const settings = this.stateManager.state.settings;
+
+        // Apply custom text color via CSS variable if provided
+        const textColor = settings["🔍MagnifyGlass.InfoPanelTextColor"];
+        if (textColor) {
+            // Ensure color has # symbol
+            const normalizedTextColor = textColor.startsWith('#') ? textColor : `#${textColor}`;
+            this.elements.panel.style.setProperty('--info-panel-text-color', normalizedTextColor);
+        }
+
+        // Apply custom accent color via CSS variable if provided
+        const accentColor = settings["🔍MagnifyGlass.InfoPanelAccentColor"];
+        if (accentColor) {
+            // Ensure color has # symbol
+            const normalizedAccentColor = accentColor.startsWith('#') ? accentColor : `#${accentColor}`;
+            this.elements.panel.style.setProperty('--info-panel-accent-color', normalizedAccentColor);
+        }
+
+        // Apply opacity setting if panel is visible (convert percentage to decimal)
+        if (this.stateManager.state.isPanelVisible) {
+            const opacityPercent = settings["🔍MagnifyGlass.InfoPanelOpacity"];
+            this.elements.panel.style.opacity = (opacityPercent / 100).toString();
+        }
+
+        this.elements.panel.style.cssText = `
+            position: absolute;
+            width: ${settings["🔍MagnifyGlass.InfoPanelWidth"]}px;
+            max-height: ${settings["🔍MagnifyGlass.InfoPanelMaxHeight"]}px;
+            z-index: 99999;
+            display: none;
+            opacity: 0;
+            transform: translateY(-10px);
+            transition: ${settings["🔍MagnifyGlass.InfoPanelAnimations"] ? 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)' : 'none'};
+            pointer-events: auto;
+            user-select: none;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            ${textColor ? `--info-panel-text-color: ${textColor.startsWith('#') ? textColor : `#${textColor}`};` : ''}
+            ${accentColor ? `--info-panel-accent-color: ${accentColor.startsWith('#') ? accentColor : `#${accentColor}`};` : ''}
+        `;
+    }
+
+    /**
+     * Show the panel.
+     */
+    show(): void {
+        if (!this.elements.panel) return;
+
+        if (this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"]) {
+            this.elements.panel.style.display = "block";
+            if (this.elements.controls) {
+                this.elements.controls.style.display = "flex";
+            }
+            // Apply user's opacity setting when showing (convert percentage to decimal)
+            const opacityPercent = this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelOpacity"];
+            this.elements.panel.style.opacity = (opacityPercent / 100).toString();
+            // Trigger reflow
+            this.elements.panel.offsetHeight;
+            this.elements.panel.classList.add('visible');
+            this.stateManager.state.isPanelVisible = true;
+        }
+    }
+
+    /**
+     * Hide the panel.
+     */
+    hide(): void {
+        if (!this.elements.panel) return;
+
+        this.elements.panel.classList.remove('visible');
+        setTimeout(() => {
+            if (!this.stateManager.state.isPanelVisible && this.elements.panel) {
+                this.elements.panel.style.display = "none";
+                if (this.elements.controls) {
+                    this.elements.controls.style.display = "none";
+                }
+            }
+        }, this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelAnimations"] ? 300 : 0);
+        this.stateManager.state.isPanelVisible = false;
+    }
+
+    /**
+     * Update minimized state.
+     */
+    updateMinimizedState(): void {
+        if (!this.elements.panel || !this.elements.header) return;
+
+        this.elements.panel.classList.toggle('panel-minimized', this.stateManager.state.isPanelMinimized);
+        const minimizeBtn = this.elements.header.querySelector('.minimize-btn');
+        if (minimizeBtn) {
+            minimizeBtn.textContent = this.stateManager.state.isPanelMinimized ? '+' : '−';
+            (minimizeBtn as HTMLElement).title = this.stateManager.state.isPanelMinimized ? 'Expand Panel' : 'Minimize Panel';
+        }
+    }
+
+    /**
+     * Update pinned state.
+     */
+    updatePinnedState(): void {
+        if (!this.elements.panel) return;
+
+        this.elements.panel.classList.toggle('panel-pinned', this.stateManager.state.isPanelPinned);
+        this.elements.panel.classList.toggle('panel-locked', this.stateManager.state.isPanelLocked);
+        this.updateControlStates();
+    }
+
+    /**
+     * Update theme class.
+     * @param newTheme 
+     */
+    updateTheme(newTheme: string): void {
+        if (this.elements.panel) {
+            this.elements.panel.className = this.elements.panel.className.replace(/theme-\w+/, `theme-${newTheme.toLowerCase()}`);
+        }
+    }
+
+    /**
+     * Display information in the panel.
+     * @param info 
+     */
+    displayInfo(info: any): void {
+        const sections = this.buildSections(info);
+        this.renderSections(sections);
+        this.updateSectionStates();
+        this.updateHeaderSubtitle(info);
+    }
+
+    /**
+     * Build section data from info object.
+     * @param info 
+     * @returns 
+     */
+    buildSections(info: any): any[] {
+        const sections: any[] = [];
+        const settings = this.stateManager.state.settings;
+
+        // Inspector section
+        if (settings["🔍MagnifyGlass.ShowInspectorTab"]) {
+            const inspectorContent = [
+                { label: 'Cursor Canvas', value: `(${Math.round(info.cursor.canvas.x)}, ${Math.round(info.cursor.canvas.y)})` },
+                { label: 'Canvas Scale', value: `${(info.canvas.scale * 100).toFixed(1)}%` },
+                { label: 'Magnifier Zoom', value: `${info.magnifier.zoomFactor}×` }
+            ];
+
+            sections.push({
+                id: 'inspector',
+                icon: '🔍',
+                title: 'Inspector',
+                content: inspectorContent
+            });
+        }
+
+        // Media section
+        if (info.media) {
+            const mediaContent = [
+                { label: 'Type', value: info.media.tagName },
+                { label: 'Source', value: info.media.src }
+            ];
+
+            if (info.media.naturalSize) {
+                mediaContent.push({ label: 'Natural', value: info.media.naturalSize });
+            }
+
+            sections.push({
+                id: 'media',
+                icon: '📷',
+                title: 'Media',
+                badge: info.media.tagName,
+                content: mediaContent
+            });
+        }
+
+        // Node Details section
+        if (info.hoveredNode) {
+            const nodeContent = [
+                { label: 'Title', value: info.hoveredNode.title }
+            ];
+
+            // Check if this is a complex node that shows all widgets
+            const nodeType = info.hoveredNode.type ? info.hoveredNode.type.toLowerCase() : '';
+            const isSaveNode = nodeType.includes('save') &&
+                !nodeType.includes('checkpoint') &&
+                !nodeType.includes('model') &&
+                !nodeType.includes('preview');
+
+            const showAllWidgets = info.hoveredNode.type && (
+                nodeType.includes('ksampler') ||
+                nodeType.includes('sampler') ||
+                nodeType.includes('k_samplers') ||
+                nodeType.includes('checkpoint') ||
+                nodeType.includes('model') ||
+                nodeType.includes('lora') ||
+                nodeType.includes('controlnet') ||
+                nodeType.includes('advanced') ||
+                nodeType.includes('detailer') ||
+                nodeType.includes('inpaint') ||
+                nodeType.includes('upscale') ||
+                nodeType.includes('clip') ||
+                nodeType.includes('text') ||
+                nodeType.includes('encode')
+            ) && !isSaveNode;
+
+            if (!showAllWidgets) {
+                // Add specific extractions for simple nodes
+                const checkpointInfo = this.getCheckpointInfo(info.hoveredNode);
+                if (checkpointInfo) {
+                    nodeContent.push({ label: 'Model', value: checkpointInfo });
+                }
+
+                const imageInfo = this.getImageInfo(info.hoveredNode);
+                if (imageInfo) {
+                    if (typeof imageInfo === 'string') {
+                        nodeContent.push({ label: 'Image', value: imageInfo });
+                    } else if (typeof imageInfo === 'object' && imageInfo !== null) {
+                        const imgInfoAny = imageInfo as any;
+                        nodeContent.push({ label: 'Image Size', value: `${imgInfoAny.width}×${imgInfoAny.height}` });
+                        if (imgInfoAny.src) {
+                            nodeContent.push({ label: 'Image Source', value: imgInfoAny.src });
+                        }
+                    }
+                }
+
+                const textBoxContent = this.getTextBoxContent(info.hoveredNode);
+                if (textBoxContent) {
+                    nodeContent.push({ label: 'Text', value: textBoxContent });
+                }
+            }
+
+            const importantParameters = this.getImportantNodeParameters(info.hoveredNode);
+            nodeContent.push(...importantParameters);
+
+            sections.push({
+                id: 'node',
+                icon: '🎯',
+                title: 'Node',
+                badge: info.hoveredNode.type,
+                content: nodeContent
+            });
+        }
+
+        return sections;
+    }
+
+    /**
+     * Render sections to the panel.
+     * @param sections 
+     */
+    renderSections(sections: any[]): void {
+        if (!this.elements.content) return;
+
+        if (sections.length === 0) {
+            this.elements.content.innerHTML = `
+                <div class="empty-state">
+                    <div class="empty-state-icon">📍</div>
+                    <div class="empty-state-text">Empty canvas area</div>
+                </div>
+            `;
+            return;
+        }
+
+        this.elements.content.innerHTML = sections.map(section => `
+            <div class="info-section" data-section="${section.id}">
+                <div class="section-header" data-section="${section.id}">
+                    <span class="section-icon">${section.icon}</span>
+                    <span class="section-title">${section.title}</span>
+                    ${section.badge ? `<span class="section-badge">${section.badge}</span>` : ''}
+                    ${section.id !== 'node' ? '<span class="expand-icon">▶</span>' : ''}
+                </div>
+                <div class="section-content">
+                    <div class="section-body">
+                        ${section.content.map((item: any) => {
+            const value = this.formatValue(item.value, item.label);
+            const valueClass = this.getValueClass(item.value);
+            const valueAttributes = this.getValueAttributes(item.value);
+            return `
+                            <div class="info-row">
+                                <span class="info-label">${item.label}</span>
+                                <span class="info-value ${valueClass}" ${valueAttributes}>${value}</span>
+                            </div>`;
+        }).join('')}
+                    </div>
+                </div>
+            </div>
+        `).join('');
+    }
+
+    /**
+     * Update section expansion states.
+     */
+    updateSectionStates(): void {
+        if (!this.elements.content) return;
+
+        const sections = this.elements.content.querySelectorAll('.info-section');
+        sections.forEach(section => {
+            const sectionId = (section as HTMLElement).dataset.section;
+            if (!sectionId) return;
+
+            const header = section.querySelector('.section-header');
+            const content = section.querySelector('.section-content');
+
+            if (header && content) {
+                if (this.stateManager.state.expandedSections.has(sectionId)) {
+                    header.classList.add('expanded');
+                    content.classList.add('expanded');
+                } else {
+                    header.classList.remove('expanded');
+                    content.classList.remove('expanded');
+                }
+            }
+        });
+    }
+
+    /**
+     * Format a value for display.
+     * @param value 
+     * @param label
+     * @returns 
+     */
+    formatValue(value: any, label?: string): string {
+        if (value === null || value === undefined) return '';
+
+        const str = String(value);
+
+        // Show full text for prompts, text content, model names, and file paths
+        if (label && (
+            label.toLowerCase().includes('text') ||
+            label.toLowerCase().includes('prompt') ||
+            label.toLowerCase().includes('model') ||
+            label.toLowerCase().includes('file') ||
+            label.toLowerCase().includes('conditioning') ||
+            label.toLowerCase().includes('positive') ||
+            label.toLowerCase().includes('negative')
+        )) {
+            return str;
+        }
+
+        // Show full text for very long values (no truncation)
+        return str;
+    }
+
+    /**
+     * Get value class for styling.
+     * @param value 
+     * @returns 
+     */
+    getValueClass(value: any): string {
+        if (!value) return '';
+
+        const str = String(value);
+        let classes: string[] = [];
+
+        // Mark text that might benefit from special styling for readability
+        if (str.length > 100) {
+            classes.push('long-text');
+        }
+
+        return classes.join(' ');
+    }
+
+    /**
+     * Get value attributes.
+     * @param value 
+     * @returns 
+     */
+    getValueAttributes(value: any): string {
+        // Since we show full text now, we don't need title attributes for long text
+        // Only add title for very long text that might benefit from tooltips
+        if (!value) return '';
+
+        const str = String(value);
+        if (str.length > 500) { // Only for extremely long text
+            return `title="${str.replace(/"/g, '&quot;')}"`;
+        }
+
+        return '';
+    }
+
+    /**
+     * Update header subtitle.
+     * @param info 
+     */
+    updateHeaderSubtitle(info: any): void {
+        if (!this.elements.header) return;
+
+        const subtitleElement = this.elements.header.querySelector('.header-subtitle') as HTMLElement;
+        if (subtitleElement) {
+            const accentColor = this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelAccentColor"];
+            if (info.hoveredNode) {
+                subtitleElement.textContent = `Analyzing: ${info.hoveredNode.title}`;
+                subtitleElement.style.color = accentColor || '';
+            } else if (info.media) {
+                subtitleElement.textContent = `Media: ${info.media.tagName}`;
+                subtitleElement.style.color = accentColor || '';
+            } else if (info.connection) {
+                subtitleElement.textContent = `Connection: ${info.connection.type}`;
+                subtitleElement.style.color = accentColor || '';
+            } else {
+                subtitleElement.textContent = 'Real-time analysis';
+                subtitleElement.style.color = '';
+            }
+        }
+    }
+
+    // ============== Helper methods for node information extraction ==============
+
+    /**
+     * Get checkpoint/model info from a node.
+     * @param nodeInfo 
+     * @returns 
+     */
+    getCheckpointInfo(nodeInfo: any): string | null {
+        if (nodeInfo.type && (
+            nodeInfo.type.includes("CheckpointLoader") ||
+            nodeInfo.type.includes("LoadCheckpoint") ||
+            nodeInfo.type.includes("ModelLoader") ||
+            nodeInfo.type.includes("UNETLoader") ||
+            nodeInfo.type.includes("VAELoader") ||
+            nodeInfo.type.includes("LoraLoader")
+        )) {
+            if (nodeInfo.widgets && nodeInfo.widgets.length > 0) {
+                for (const widget of nodeInfo.widgets) {
+                    if (widget.name && (
+                        widget.name.toLowerCase().includes("model") ||
+                        widget.name.toLowerCase().includes("checkpoint") ||
+                        widget.name.toLowerCase().includes("ckpt") ||
+                        widget.name.toLowerCase().includes("lora") ||
+                        widget.name.toLowerCase().includes("vae") ||
+                        widget.name.toLowerCase().includes("file")
+                    )) {
+                        const value = String(widget.value);
+                        const filename = value.split(/[\/\\]/).pop();
+                        return filename || value;
+                    }
+                }
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Get image info from a node.
+     * @param nodeInfo 
+     * @returns 
+     */
+    getImageInfo(nodeInfo: any): string | object | null {
+        if (nodeInfo.type && (
+            nodeInfo.type.includes("SaveImage") ||
+            nodeInfo.type.includes("PreviewImage") ||
+            nodeInfo.type.includes("VisionOutput") ||
+            nodeInfo.type.includes("ImageOutput") ||
+            nodeInfo.type.includes("LoadImage") ||
+            nodeInfo.type.includes("Display")
+        )) {
+            if (nodeInfo.widgets) {
+                for (const widget of nodeInfo.widgets) {
+                    if (widget.name && (
+                        widget.name.toLowerCase().includes("image") ||
+                        widget.name.toLowerCase().includes("filename") ||
+                        widget.name.toLowerCase().includes("file")
+                    )) {
+                        return widget.value;
+                    }
+                }
+            }
+
+            if (nodeInfo.properties && nodeInfo.properties.img) {
+                const img = nodeInfo.properties.img;
+                return {
+                    width: img.width || "unknown",
+                    height: img.height || "unknown",
+                    src: img.src ? img.src.split(/[\/\\]/).pop() : "Preview available"
+                };
+            }
+
+            if (nodeInfo.outputs) {
+                for (const output of nodeInfo.outputs) {
+                    if (output.links && output.links.length > 0) {
+                        return "Image connected to " + output.links.length + " node(s)";
+                    }
+                }
+            }
+
+            return "Image node";
+        }
+        return null;
+    }
+
+    /**
+     * Get text box content from a node.
+     * @param nodeInfo 
+     * @returns 
+     */
+    getTextBoxContent(nodeInfo: any): string | null {
+        if (nodeInfo.widgets && nodeInfo.widgets.length > 0) {
+            if (nodeInfo.type && nodeInfo.type.includes("CLIPTextEncode")) {
+                for (const widget of nodeInfo.widgets) {
+                    if (widget.name === "text" && typeof widget.value === 'string') {
+                        return widget.value;
+                    }
+                }
+            }
+
+            for (const widget of nodeInfo.widgets) {
+                if ((widget.name.toLowerCase().includes("prompt") ||
+                    widget.name.toLowerCase().includes("conditioning")) &&
+                    typeof widget.value === 'string' && widget.value.length > 0) {
+                    return widget.value;
+                }
+            }
+
+            for (const widget of nodeInfo.widgets) {
+                if ((widget.type === 'text' || widget.type === 'textarea' ||
+                    widget.type === 'string' || widget.name.toLowerCase().includes('text')) &&
+                    typeof widget.value === 'string' && widget.value.length > 0) {
+
+                    // Show full text without truncation
+                    return widget.value;
+                }
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Get important node parameters based on node type.
+     * @param nodeInfo 
+     * @returns 
+     */
+    getImportantNodeParameters(nodeInfo: any): any[] {
+        const parameters: any[] = [];
+
+        // For complex nodes that have many parameters, show ALL widgets
+        const nodeType = nodeInfo.type ? nodeInfo.type.toLowerCase() : '';
+        const isSaveNode = nodeType.includes('save') &&
+            !nodeType.includes('checkpoint') &&
+            !nodeType.includes('model') &&
+            !nodeType.includes('preview');
+
+        const showAllWidgets = nodeInfo.type && (
+            nodeType.includes('ksampler') ||
+            nodeType.includes('sampler') ||
+            nodeType.includes('k_samplers') ||
+            nodeType.includes('checkpoint') ||
+            nodeType.includes('model') ||
+            nodeType.includes('lora') ||
+            nodeType.includes('controlnet') ||
+            nodeType.includes('advanced') ||
+            nodeType.includes('detailer') ||
+            nodeType.includes('inpaint') ||
+            nodeType.includes('upscale') ||
+            nodeType.includes('clip') ||
+            nodeType.includes('text') ||
+            nodeType.includes('encode')
+        ) && !isSaveNode;
+
+        if (showAllWidgets) {
+            if (nodeInfo.widgets && nodeInfo.widgets.length > 0) {
+                for (const widget of nodeInfo.widgets) {
+                    // Show all widgets for complex nodes, but filter out some duplicates
+                    if (widget.name && widget.name !== '') {
+                        const widgetName = widget.name.toLowerCase();
+
+                        // Skip some generic widget names that might be duplicates
+                        if (widgetName.includes('title') ||
+                            widgetName === 'node' ||
+                            widgetName === 'id' ||
+                            widgetName === 'type' ||
+                            widgetName === 'mode') {
+                            continue;
+                        }
+
+                        parameters.push({
+                            label: widget.name,
+                            value: this.formatWidgetValue(widget.value)
+                        });
+                    }
+                }
+            }
+            return parameters;
+        }
+
+        // Special handling for Save nodes - only show essential parameters
+        let importantParams: string[];
+        if (isSaveNode) {
+            importantParams = [
+                'filename_prefix', 'filename', 'directory', 'path',
+                'format', 'quality', 'extension'
+            ];
+        } else {
+            // For other nodes, use the filtered list but avoid duplicates with specific extractions
+            importantParams = [
+                'seed', 'steps', 'cfg', 'scale', 'sampler', 'scheduler',
+                'positive', 'negative', 'width', 'height', 'denoise', 'strength',
+                'noise', 'count', 'batch', 'size', 'phase', 'color', 'intensity',
+                // KSampler specific parameters (for other samplers)
+                'control_after_generate', 'control', 'after', 'generate',
+                'start_at_step', 'end_at_step', 'start', 'end',
+                'return_with_leftover_noise', 'leftover', 'noise_return',
+                // Additional common parameters (but avoid duplicates with specific extractors)
+                'model', 'vae', 'clip', 'lora', 'checkpoint',
+                'latent', 'image', 'mask', 'filename', 'directory',
+                'prompt', 'conditioning', 'filename_prefix',
+                // New detection vocabulary
+                'resolution', 'num_chunks', 'seconds', 'aspect_ratio',
+                'style_type', 'background', 'n', 'human', 'raw', 'guidance',
+                'skip_preprocessing', 'movement_amplitude', 'animation',
+                'material_type', 'b1', 'b2', 's1', 's2', 'type', 'channel',
+                'sigma', 'rho',
+                // Additional detection vocabulary
+                'alpha', 'base_shift', 'shift', 'stretch', 'terminal',
+                'spacing', 'style', 'eta', 'norm_threshold', 'momentum',
+                'hypernetwork_name', 'reuse_threshold', 'verbose', 'layers',
+                'set_cond_area', 'audioui',
+                // Camera and 3D parameters
+                'camera_pose', 'fx', 'cx', 'fy', 'cy'
+                // Note: 'text' and 'string' removed to avoid duplication with getTextBoxContent
+            ];
+        }
+
+        if (nodeInfo.widgets && nodeInfo.widgets.length > 0) {
+            for (const widget of nodeInfo.widgets) {
+                const paramName = widget.name.toLowerCase();
+                if (importantParams.some(param => paramName.includes(param))) {
+                    parameters.push({
+                        label: widget.name,
+                        value: this.formatWidgetValue(widget.value)
+                    });
+                }
+            }
+        }
+
+        return parameters;
+    }
+
+    /**
+     * Format widget value for display.
+     * @param value 
+     * @returns 
+     */
+    formatWidgetValue(value: any): string {
+        if (value === null) return "null";
+        if (value === undefined) return "undefined";
+        if (typeof value === "string") {
+            return value; // Show full text without truncation
+        }
+        if (typeof value === "number") {
+            return Number.isInteger(value) ? value.toString() : value.toFixed(3);
+        }
+        if (typeof value === "boolean") return value.toString();
+        if (Array.isArray(value)) {
+            return `Array(${value.length})`;
+        }
+        if (typeof value === "object") {
+            return "Object";
+        }
+        return String(value);
+    }
+
+    /**
+     * Inject CSS styles.
+     */
+    injectStyles(): void {
+        if (!document.getElementById('magnify-info-panel-styles-v2')) {
+            const style = document.createElement('style');
+            style.id = 'magnify-info-panel-styles-v2';
+            style.textContent = getInfoPanelCSS();
+            document.head.appendChild(style);
+        }
+    }
+
+    cleanup(): void {
+        if (this.elements.panel && this.elements.panel.parentNode) {
+            this.elements.panel.parentNode.removeChild(this.elements.panel);
+        }
+        if (this.elements.controls && this.elements.controls.parentNode) {
+            this.elements.controls.parentNode.removeChild(this.elements.controls);
+        }
+    }
+}

src/info-panel/components/InfoPanel.vue

@@ -0,0 +1,174 @@
+<template>
+  <div v-if="isVisible" class="mag-info-panel" :class="themeClass" :style="panelStyle">
+    <div class="mag-panel-header">
+      <div class="mag-panel-title">Magnify Info</div>
+      <div class="mag-panel-controls">
+        <button @click="togglePin" :class="{ active: isPinned }">📌</button>
+        <button @click="close">✕</button>
+      </div>
+    </div>
+    
+    <div class="mag-panel-content">
+      <div v-if="nodeInfo" class="mag-node-info">
+        <h3>{{ nodeInfo.title || nodeInfo.type }}</h3>
+        <div class="mag-property-grid">
+           <div class="mag-prop-row">
+             <span class="mag-prop-label">ID:</span>
+             <span class="mag-prop-value">{{ nodeInfo.id }}</span>
+           </div>
+           <!-- More properties will go here -->
+        </div>
+      </div>
+      <div v-else class="mag-empty-state">
+        Hover over a node to see details
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, toRefs } from 'vue';
+
+export default defineComponent({
+  name: 'InfoPanel',
+  props: {
+    state: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    // Use toRefs to maintain reactivity from the parent's reactive state
+    const { state } = toRefs(props);
+    
+    const isVisible = computed(() => state.value?.visible ?? false);
+    const isPinned = computed(() => state.value?.pinned ?? false);
+    const nodeInfo = computed(() => state.value?.hoveredNode ?? null);
+    const theme = computed(() => state.value?.theme ?? 'dark');
+
+    const themeClass = computed(() => `theme-${theme.value}`);
+    const panelStyle = computed(() => ({
+      width: '300px',
+      opacity: 1
+    }));
+
+    const togglePin = () => {
+      if (state.value) {
+        state.value.pinned = !state.value.pinned;
+      }
+    };
+
+    const close = () => {
+      if (state.value) {
+        state.value.visible = false;
+      }
+    };
+
+    return {
+      isVisible,
+      isPinned,
+      nodeInfo,
+      themeClass,
+      panelStyle,
+      togglePin,
+      close
+    };
+  }
+});
+</script>
+
+<style scoped>
+.mag-info-panel {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  background: var(--comfy-menu-bg, #222);
+  color: var(--comfy-text-color, #fff);
+  border: 1px solid var(--border-color, #444);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  overflow: hidden;
+  font-family: sans-serif;
+  z-index: 1000;
+  pointer-events: auto;
+}
+
+.mag-panel-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: rgba(255,255,255,0.05);
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  cursor: grab;
+}
+
+.mag-panel-header:active {
+  cursor: grabbing;
+}
+
+.mag-panel-title {
+  font-weight: bold;
+}
+
+.mag-panel-controls {
+  display: flex;
+  gap: 4px;
+}
+
+.mag-panel-controls button {
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.mag-panel-controls button:hover {
+  background: rgba(255,255,255,0.1);
+}
+
+.mag-panel-controls button.active {
+  background: rgba(59, 130, 246, 0.3);
+}
+
+.mag-panel-content {
+  padding: 12px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.mag-node-info h3 {
+  margin-top: 0;
+  margin-bottom: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  padding-bottom: 5px;
+}
+
+.mag-property-grid {
+  display: grid;
+  gap: 4px;
+}
+
+.mag-prop-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.mag-prop-label {
+  opacity: 0.7;
+}
+
+.mag-empty-state {
+  opacity: 0.6;
+  text-align: center;
+  padding: 20px;
+}
+
+.theme-light {
+  background: #fff;
+  color: #333;
+  border-color: #ccc;
+}
+</style>

src/info-panel/index.ts

@@ -0,0 +1,7 @@
+export * from './StateManager';
+export * from './UIManager';
+export * from './PositionManager';
+export * from './InformationGatherer';
+export * from './EventManager';
+export * from './InfoPanel';
+export * from './styles';

src/info-panel/styles.ts

@@ -0,0 +1,574 @@
+/**
+ * ComfyUI MagnifyGlass - Info Panel Styles (TypeScript)
+ * 
+ * Complete CSS styles for the info panel component.
+ */
+
+/**
+ * Get the complete CSS for the info panel.
+ * @returns CSS string
+ */
+export function getInfoPanelCSS(): string {
+    return `
+        .magnify-info-panel {
+            border-radius: 12px;
+            backdrop-filter: blur(20px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
+            overflow: hidden;
+            font-size: 16px;
+            line-height: 1.6;
+            pointer-events: auto;
+        }
+        
+        .magnify-info-panel * {
+            pointer-events: auto;
+        }
+        
+        .magnify-info-panel.theme-dark {
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.96), rgba(10, 10, 15, 0.96));
+            color: var(--info-panel-text-color, #e0e0e0);
+            border: 1px solid rgba(100, 100, 120, 0.4);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 16px rgba(0, 0, 0, 0.2);
+            backdrop-filter: blur(12px);
+        }
+        
+        .magnify-info-panel.theme-light {
+            background: linear-gradient(135deg, rgba(250, 250, 255, 0.96), rgba(240, 240, 250, 0.96));
+            color: var(--info-panel-text-color, #2a2a2a);
+            border: 1px solid rgba(200, 200, 220, 0.5);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 16px rgba(0, 0, 0, 0.05);
+            backdrop-filter: blur(12px);
+        }
+        
+        .magnify-info-panel.visible {
+            transform: translateY(0) !important;
+        }
+        
+        .magnify-info-panel.panel-pinned {
+            cursor: grab;
+            box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+        
+        .magnify-info-panel.panel-locked {
+            cursor: default !important;
+            box-shadow: 0 0 0 2px rgba(255, 69, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.3);
+        }
+        
+        .magnify-info-panel.panel-locked::after {
+            content: '📌';
+            position: absolute;
+            top: 8px;
+            right: 8px;
+            font-size: 14px;
+            opacity: 0.7;
+            pointer-events: none;
+            z-index: 1;
+        }
+        
+        .magnify-info-panel.panel-pinned.panel-dragging {
+            cursor: grabbing;
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(255, 215, 0, 0.7);
+            transform: scale(1.02) !important;
+            z-index: 100001 !important;
+            transition: none !important;
+        }
+        
+        .magnify-info-panel.panel-pinned::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
+            pointer-events: none;
+            border-radius: inherit;
+        }
+        
+        .panel-dragging * {
+            pointer-events: none !important;
+            user-select: none !important;
+            transition: none !important;
+        }
+        
+        .magnify-info-panel.panel-minimized .panel-content {
+            max-height: 0 !important;
+            overflow: hidden;
+            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        
+        .floating-controls {
+            position: fixed;
+            display: flex;
+            padding: 4px;
+            background: rgba(40, 40, 50, 0.95);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 4px;
+            opacity: 1;
+            z-index: 100000;
+            backdrop-filter: blur(8px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+        }
+        
+        .floating-controls.vertical-layout {
+            flex-direction: column;
+            gap: 4px;
+        }
+        
+        .floating-controls.horizontal-layout {
+            flex-direction: row;
+            gap: 4px;
+        }
+        
+        .control-btn {
+            background: rgba(60, 60, 70, 0.8);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            width: 28px;
+            height: 28px;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: #ddd;
+            border-radius: 3px;
+            transition: background-color 0.15s ease;
+        }
+        
+        .control-btn:hover {
+            background: rgba(80, 80, 90, 0.9);
+            color: white;
+        }
+        
+        .control-btn:active {
+            background: rgba(100, 100, 110, 0.9);
+        }
+        
+        .control-btn:disabled {
+            background: rgba(40, 40, 50, 0.5);
+            color: #666;
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+        
+        .control-btn.active {
+            background: rgba(255, 200, 50, 0.3);
+            border-color: rgba(255, 200, 50, 0.6);
+            color: #ffcc33;
+        }
+        
+        .control-btn.lock-btn.active {
+            background: rgba(255, 69, 0, 0.3);
+            border-color: rgba(255, 69, 0, 0.6);
+            color: #ff4500;
+        }
+        
+        .panel-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 14px 18px;
+            background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.05));
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            user-select: none;
+        }
+        
+        .header-content {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        
+        .header-icon {
+            font-size: 18px;
+            opacity: 0.9;
+        }
+        
+        .header-title {
+            font-weight: 600;
+            font-size: 18px;
+        }
+        
+        .header-subtitle {
+            font-size: 14px;
+            opacity: 0.7;
+            font-style: italic;
+        }
+        
+        .header-controls {
+            display: flex;
+            gap: 6px;
+        }
+        
+        .minimize-btn {
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            border-radius: 6px;
+            color: inherit;
+            width: 28px;
+            height: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-weight: bold;
+            font-size: 16px;
+        }
+        
+        .minimize-btn:hover {
+            background: rgba(255, 255, 255, 0.2);
+            transform: scale(1.05);
+        }
+        
+        .minimize-btn:active {
+            transform: scale(0.95);
+        }
+        
+        .panel-content {
+            padding: 0;
+            max-height: calc(100% - 60px);
+            overflow-y: auto;
+            scrollbar-width: thin;
+        }
+        
+        .panel-content::-webkit-scrollbar {
+            width: 8px;
+        }
+        
+        .panel-content::-webkit-scrollbar-track {
+            background: rgba(0, 0, 0, 0.1);
+        }
+        
+        .panel-content::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 3px;
+        }
+        
+        .info-section {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            margin-bottom: 8px;
+            border-radius: 10px;
+            overflow: visible;
+            background: rgba(255, 255, 255, 0.02);
+            transition: all 0.3s ease;
+        }
+        
+        .info-section:hover {
+            background: rgba(255, 255, 255, 0.04);
+            transform: translateY(-1px);
+        }
+        
+        .section-header {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 16px 20px;
+            cursor: pointer;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            font-weight: 500;
+            border-radius: 8px;
+            margin: 3px;
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .section-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
+            transform: translateX(-100%);
+            transition: transform 0.6s ease;
+        }
+        
+        .section-header:hover::before {
+            transform: translateX(100%);
+        }
+        
+        .section-header:hover {
+            background: rgba(255, 255, 255, 0.08);
+            transform: translateX(2px);
+            box-shadow: inset 2px 0 0 rgba(116, 185, 255, 0.5);
+        }
+        
+        .section-header:active {
+            background: rgba(255, 255, 255, 0.12);
+            transform: translateX(1px);
+        }
+        
+        .section-header.expanded {
+            background: rgba(116, 185, 255, 0.1);
+            border-left: 2px solid var(--info-panel-accent-color, #74b9ff);
+        }
+        
+        .info-section[data-section="node"] {
+            background: linear-gradient(135deg, rgba(116, 185, 255, 0.05), rgba(160, 212, 104, 0.05));
+            border: 1px solid rgba(116, 185, 255, 0.2);
+            border-radius: 8px;
+            margin: 6px;
+        }
+        
+        .info-section[data-section="node"] .section-header {
+            background: linear-gradient(135deg, rgba(116, 185, 255, 0.15), rgba(160, 212, 104, 0.15));
+            border-radius: 8px 8px 0 0;
+            cursor: default;
+        }
+        
+        .info-section[data-section="node"] .section-header:hover {
+            transform: none;
+            box-shadow: none;
+        }
+        
+        .info-section[data-section="node"] .section-title {
+            color: var(--info-panel-accent-color, #74b9ff);
+            font-weight: 700;
+        }
+        
+        .info-section[data-section="inspector"] {
+            background: linear-gradient(135deg, rgba(100, 150, 255, 0.05), rgba(74, 144, 226, 0.05));
+            border: 1px solid rgba(100, 150, 255, 0.2);
+            border-radius: 8px;
+            margin: 6px;
+        }
+        
+        .info-section[data-section="inspector"] .section-header {
+            background: linear-gradient(135deg, rgba(100, 150, 255, 0.15), rgba(74, 144, 226, 0.15));
+            border-radius: 8px 8px 0 0;
+        }
+        
+        .info-section[data-section="inspector"] .section-title {
+            color: #6496ff;
+            font-weight: 700;
+        }
+        
+        .info-section[data-section="media"] {
+            background: linear-gradient(135deg, rgba(253, 203, 110, 0.05), rgba(255, 215, 0, 0.05));
+            border: 1px solid rgba(253, 203, 110, 0.2);
+            border-radius: 8px;
+            margin: 6px;
+        }
+        
+        .info-section[data-section="media"] .section-header {
+            background: linear-gradient(135deg, rgba(253, 203, 110, 0.15), rgba(255, 215, 0, 0.15));
+            border-radius: 8px 8px 0 0;
+        }
+        
+        .info-section[data-section="media"] .section-title {
+            color: var(--info-panel-accent-color, #fdcb6e);
+            font-weight: 700;
+        }
+        
+        .section-icon {
+            font-size: 18px;
+            width: 22px;
+            text-align: center;
+        }
+        
+        .section-title {
+            flex: 1;
+            font-size: 16px;
+            font-weight: 600;
+            letter-spacing: 0.3px;
+            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+        }
+        
+        .section-badge {
+            background: rgba(100, 150, 255, 0.2);
+            color: #8bb3ff;
+            padding: 3px 10px;
+            border-radius: 10px;
+            font-size: 13px;
+            font-weight: 500;
+        }
+        
+        .expand-icon {
+            font-size: 14px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            color: rgba(255, 255, 255, 0.6);
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.05);
+            margin-left: auto;
+        }
+        
+        .section-header:hover .expand-icon {
+            color: var(--info-panel-accent-color, #74b9ff);
+            background: rgba(116, 185, 255, 0.15);
+            transform: scale(1.1);
+        }
+        
+        .section-header.expanded .expand-icon {
+            transform: rotate(90deg) scale(1.1);
+            color: var(--info-panel-accent-color, #74b9ff);
+            background: rgba(116, 185, 255, 0.2);
+        }
+        
+        .section-content {
+            max-height: 0;
+            overflow: visible;
+            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
+            opacity: 0;
+        }
+
+        .section-content.expanded {
+            max-height: 2000px;
+            opacity: 1;
+            overflow: visible;
+        }
+        
+        .section-body {
+            padding: 0 18px 16px 24px;
+        }
+        
+        .info-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            padding: 10px 0;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            transition: all 0.2s ease;
+            border-radius: 4px;
+            margin: 0 -8px;
+            padding-left: 8px;
+            padding-right: 8px;
+        }
+        
+        .info-row:last-child {
+            border-bottom: none;
+        }
+        
+        .info-row:hover {
+            background: rgba(255, 255, 255, 0.03);
+            border-bottom-color: rgba(255, 255, 255, 0.08);
+        }
+        
+        .info-label {
+            font-weight: 500;
+            opacity: 0.85;
+            font-size: 15px;
+            min-width: 80px;
+            padding-right: 12px;
+            line-height: 1.5;
+        }
+        
+        .info-value {
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 14px;
+            color: var(--info-panel-accent-color, #a0d468);
+            background: rgba(160, 212, 104, 0.12);
+            padding: 4px 10px;
+            border-radius: 6px;
+            max-width: 100%;
+            word-wrap: break-word;
+            word-break: break-word;
+            hyphens: auto;
+            line-height: 1.4;
+            text-align: left;
+            white-space: pre-wrap;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            transition: all 0.2s ease;
+        }
+        
+        .info-value:hover {
+            background: rgba(160, 212, 104, 0.18);
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+        
+        .info-value.long-text {
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            max-width: 100%;
+            line-height: 1.4;
+        }
+        
+        .empty-state {
+            text-align: center;
+            padding: 50px 25px;
+            opacity: 0.6;
+        }
+        
+        .empty-state-icon {
+            font-size: 36px;
+            margin-bottom: 15px;
+            opacity: 0.5;
+        }
+        
+        /* Copy to clipboard functionality */
+        .info-value[title]:hover::after {
+            content: '📋';
+            position: absolute;
+            right: -20px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 12px;
+            opacity: 0.7;
+        }
+        
+        /* Smooth loading states */
+        .section-body.loading {
+            opacity: 0.5;
+            pointer-events: none;
+        }
+        
+        .section-body.loading::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 20px;
+            height: 20px;
+            border: 2px solid transparent;
+            border-top: 2px solid var(--info-panel-accent-color, #74b9ff);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            transform: translate(-50%, -50%);
+        }
+        
+        @keyframes spin {
+            to { transform: translate(-50%, -50%) rotate(360deg); }
+        }
+        
+        /* Enhanced scrollbar for better UX */
+        .section-body::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .section-body::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 2px;
+        }
+        
+        .section-body::-webkit-scrollbar-thumb {
+            background: var(--info-panel-accent-color, #74b9ff);
+            border-radius: 2px;
+            opacity: 0.6;
+        }
+        
+        .section-body::-webkit-scrollbar-thumb:hover {
+            opacity: 1;
+        }
+        
+        .empty-state-text {
+            font-size: 16px;
+            font-style: italic;
+        }
+        
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.7; }
+        }
+        
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+    `;
+}

src/magnify-glass/ConfigManager.ts

@@ -0,0 +1,182 @@
+/**
+ * ComfyUI MagnifyGlass - ConfigManager (TypeScript)
+ * 
+ * Manages configuration and settings for the magnifying glass.
+ */
+
+import { getSettingValue } from '../shared/utils';
+import { STORAGE_KEYS } from '../shared/constants';
+import type { GlassPosition, GlassShape, TextureFilter } from '../shared/constants';
+
+// Default settings (we'll import these properly later)
+const DEFAULT_GLASS_SETTINGS = {
+    "🔍MagnifyGlass.ZoomFactor": 300,
+    "🔍MagnifyGlass.GlassSize": 300,
+    "🔍MagnifyGlass.BorderColor": "#6b7280",
+    "🔍MagnifyGlass.BorderWidth": 1,
+    "🔍MagnifyGlass.ActivationKey": "x",
+    "🔍MagnifyGlass.AltRequired": false,
+    "🔍MagnifyGlass.FollowCursor": false,
+    "🔍MagnifyGlass.DebugMode": false,
+    "🔍MagnifyGlass.OffsetStep": 5,
+    "🔍MagnifyGlass.GlassPosition": "Top-Right" as GlassPosition,
+    "🔍MagnifyGlass.ResetKey": "o",
+    "🔍MagnifyGlass.GlassShape": "Rounded Square" as GlassShape,
+    "🔍MagnifyGlass.BorderEnabled": true,
+    "🔍MagnifyGlass.TextureFiltering": "Linear" as TextureFilter,
+    "🔍MagnifyGlass.AlwaysActiveMode": true,
+    "🔍MagnifyGlass.ToggleFollowCursorKey": "h",
+};
+
+/**
+ * Configuration manager class.
+ * Reads settings from ComfyUI and manages persistent offsets.
+ */
+export class ConfigManager {
+    /** Zoom factor (1.0 = 100%, 3.0 = 300%) */
+    zoomFactor: number;
+
+    /** Glass size in pixels */
+    glassSize: number;
+
+    /** Border color (CSS color string) */
+    borderColor: string;
+
+    /** Border width in pixels */
+    borderWidth: number;
+
+    /** Activation key (lowercase) */
+    activationKey: string;
+
+    /** Whether Alt key is required for activation */
+    altRequired: boolean;
+
+    /** Whether glass follows cursor */
+    followCursor: boolean;
+
+    /** Debug mode enabled */
+    debugMode: boolean;
+
+    /** Offset step for arrow key adjustments */
+    offsetStep: number;
+
+    /** Glass position relative to cursor */
+    glassPosition: string;
+
+    /** Reset key (lowercase) */
+    resetKey: string;
+
+    /** Glass shape */
+    glassShape: string;
+
+    /** Whether border is enabled */
+    borderEnabled: boolean;
+
+    /** Texture filtering mode */
+    textureFiltering: string;
+
+    /** Always active mode */
+    alwaysActiveMode: boolean;
+
+    /** Toggle follow cursor key */
+    toggleFollowCursorKey: string;
+
+    /** Manual offset X in graph units */
+    offsetX: number;
+
+    /** Manual offset Y in graph units */
+    offsetY: number;
+
+    constructor() {
+        // Initialize properties with defaults
+        this.zoomFactor = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ZoomFactor"] / 100;
+        this.glassSize = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.GlassSize"];
+        this.borderColor = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.BorderColor"];
+        this.borderWidth = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.BorderWidth"];
+        this.activationKey = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ActivationKey"];
+        this.altRequired = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.AltRequired"];
+        this.followCursor = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.FollowCursor"];
+        this.debugMode = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.DebugMode"];
+        this.offsetStep = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.OffsetStep"];
+        this.glassPosition = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.GlassPosition"];
+        this.resetKey = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ResetKey"];
+        this.glassShape = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.GlassShape"];
+        this.borderEnabled = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.BorderEnabled"];
+        this.textureFiltering = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.TextureFiltering"];
+        this.alwaysActiveMode = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.AlwaysActiveMode"];
+        this.toggleFollowCursorKey = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ToggleFollowCursorKey"];
+
+        // Alignment adjustment parameters - managed separately
+        this.offsetX = 0;
+        this.offsetY = 0;
+    }
+
+    /**
+     * Load settings from ComfyUI settings system.
+     */
+    loadSettings(): void {
+        this.zoomFactor = getSettingValue<number>("🔍MagnifyGlass.ZoomFactor", this.zoomFactor * 100) / 100;
+        this.glassSize = getSettingValue<number>("🔍MagnifyGlass.GlassSize", this.glassSize);
+        this.borderColor = getSettingValue<string>("🔍MagnifyGlass.BorderColor", this.borderColor);
+        this.borderWidth = getSettingValue<number>("🔍MagnifyGlass.BorderWidth", this.borderWidth);
+        this.activationKey = getSettingValue<string>("🔍MagnifyGlass.ActivationKey", this.activationKey);
+        this.altRequired = getSettingValue<boolean>("🔍MagnifyGlass.AltRequired", this.altRequired);
+        this.followCursor = getSettingValue<boolean>("🔍MagnifyGlass.FollowCursor", this.followCursor);
+        this.debugMode = getSettingValue<boolean>("🔍MagnifyGlass.DebugMode", this.debugMode);
+        this.offsetStep = getSettingValue<number>("🔍MagnifyGlass.OffsetStep", this.offsetStep);
+        this.glassPosition = getSettingValue<string>("🔍MagnifyGlass.GlassPosition", this.glassPosition);
+        this.resetKey = getSettingValue<string>("🔍MagnifyGlass.ResetKey", this.resetKey);
+        this.glassShape = getSettingValue<string>("🔍MagnifyGlass.GlassShape", this.glassShape);
+        this.borderEnabled = getSettingValue<boolean>("🔍MagnifyGlass.BorderEnabled", this.borderEnabled);
+        this.textureFiltering = getSettingValue<string>("🔍MagnifyGlass.TextureFiltering", this.textureFiltering);
+        this.alwaysActiveMode = getSettingValue<boolean>("🔍MagnifyGlass.AlwaysActiveMode", this.alwaysActiveMode);
+        this.toggleFollowCursorKey = getSettingValue<string>("🔍MagnifyGlass.ToggleFollowCursorKey", this.toggleFollowCursorKey);
+    }
+
+    /**
+     * Load saved offsets from localStorage.
+     */
+    loadSavedOffsets(): void {
+        try {
+            const savedOffsetX = localStorage.getItem(STORAGE_KEYS.OFFSET_X);
+            const savedOffsetY = localStorage.getItem(STORAGE_KEYS.OFFSET_Y);
+
+            if (savedOffsetX !== null) {
+                this.offsetX = parseInt(savedOffsetX, 10);
+            } else {
+                this.offsetX = 0;
+            }
+
+            if (savedOffsetY !== null) {
+                this.offsetY = parseInt(savedOffsetY, 10);
+            } else {
+                this.offsetY = 0;
+            }
+        } catch (e) {
+            console.error("ComfyUI Magnifying Glass ERROR: Error loading saved offsets:", e);
+            this.offsetX = 0;
+            this.offsetY = 0;
+        }
+    }
+
+    /**
+     * Save current offsets to localStorage.
+     */
+    saveOffsets(): void {
+        try {
+            localStorage.setItem(STORAGE_KEYS.OFFSET_X, this.offsetX.toString());
+            localStorage.setItem(STORAGE_KEYS.OFFSET_Y, this.offsetY.toString());
+        } catch (e) {
+            console.error("ComfyUI Magnifying Glass ERROR: Error saving offsets:", e);
+        }
+    }
+
+    /**
+     * Reset offsets to default (zero).
+     */
+    resetOffsets(): void {
+        this.offsetX = 0;
+        this.offsetY = 0;
+        this.saveOffsets();
+    }
+}

src/magnify-glass/DebugManager.ts

@@ -0,0 +1,181 @@
+/**
+ * ComfyUI MagnifyGlass - DebugManager (TypeScript)
+ * 
+ * Handles debug visualization and logging.
+ */
+
+import type { ComfyApp } from '../types/comfyui';
+import type { ConfigManager } from './ConfigManager';
+import type { MagnifierState } from './MagnifierState';
+import type { UiManager } from './UiManager';
+
+declare const app: ComfyApp;
+
+/**
+ * Debug Manager class.
+ * Provides debug logging and canvas visualization.
+ */
+export class DebugManager {
+    config: ConfigManager;
+    state: MagnifierState;
+    ui: UiManager;
+
+    constructor(config: ConfigManager, state: MagnifierState, ui: UiManager) {
+        this.config = config;
+        this.state = state;
+        this.ui = ui;
+    }
+
+    /**
+     * Log a message if debug mode is enabled.
+     */
+    log(...args: unknown[]): void {
+        if (this.config.debugMode) {
+            console.log("ComfyUI Magnifying Glass:", ...args);
+        }
+    }
+
+    /**
+     * Log an error message.
+     */
+    error(...args: unknown[]): void {
+        console.error("ComfyUI Magnifying Glass ERROR:", ...args);
+    }
+
+    /**
+     * Print detailed canvas information for debugging.
+     */
+    printCanvasInfo(): void {
+        if (!this.config.debugMode) return;
+
+        try {
+            // Using any for deep property access on ComfyUI objects that might vary
+            const canvasManager = (app as any).canvas;
+            const canvas = canvasManager?.graph_canvas as HTMLCanvasElement;
+
+            if (!canvas) {
+                this.log("Could not find graph canvas for detailed info");
+                return;
+            }
+
+            this.log("---- Canvas Information ----");
+            this.log(`Canvas dimensions: ${canvas.width}x${canvas.height}`);
+            this.log(`Canvas display size: ${canvas.clientWidth}x${canvas.clientHeight}`);
+            this.log(`Canvas CSS transform: ${canvas.style.transform || 'none'}`);
+
+            const ds = canvasManager.ds;
+            if (ds) {
+                this.log(`Canvas DS scale: ${ds.scale}`);
+                if (ds.offset) {
+                    this.log(`Canvas DS offset: [${ds.offset[0]}, ${ds.offset[1]}]`);
+                } else {
+                    this.log("Canvas DS offset not found");
+                }
+            } else {
+                this.log("Canvas DS object not found");
+            }
+
+            const screenWidth = window.innerWidth;
+            const screenHeight = window.innerHeight;
+            const canvasWidth = canvas.width;
+            const canvasHeight = canvas.height;
+
+            this.log(`Window dimensions: ${screenWidth}x${screenHeight}`);
+            this.log(`Resolution scale factor: X=${canvasWidth / screenWidth}, Y=${canvasHeight / screenHeight}`);
+            this.log("---- End Canvas Information ----");
+        } catch (e) {
+            this.log("Error in printCanvasInfo:", e);
+        }
+    }
+
+    /**
+     * Update the debug visualization canvas.
+     */
+    updateDebugView(): void {
+        if (!this.config.debugMode || !this.ui || !this.ui.debugCanvas || !this.ui.debugCtx) return;
+
+        const debugCtx = this.ui.debugCtx;
+        const debugCanvas = this.ui.debugCanvas;
+
+        debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
+
+        // Draw background
+        debugCtx.fillStyle = 'rgba(0,0,0,0.8)';
+        debugCtx.fillRect(0, 0, debugCanvas.width, debugCanvas.height);
+
+        // Header
+        debugCtx.fillStyle = '#FFFFFF';
+        debugCtx.font = '14px monospace';
+        debugCtx.fillText('Magnify Glass Debug', 10, 20);
+
+        // Position info
+        debugCtx.font = '12px monospace';
+        debugCtx.fillText(`Cursor: (${this.state.x.toFixed(1)}, ${this.state.y.toFixed(1)})`, 10, 50);
+        debugCtx.fillText(`Source Rect: (${this.state.sourceX.toFixed(1)}, ${this.state.sourceY.toFixed(1)}, w:${this.state.sourceWidth.toFixed(1)}, h:${this.state.sourceHeight.toFixed(1)})`, 10, 70);
+
+        // Canvas transform
+        debugCtx.fillText(`Canvas Scale: ${this.state.canvasScale.toFixed(2)}`, 10, 90);
+        debugCtx.fillText(`Canvas Offset: (${this.state.canvasOffsetX.toFixed(1)}, ${this.state.canvasOffsetY.toFixed(1)})`, 10, 110);
+
+        // Offset information
+        debugCtx.fillStyle = '#FFFF00';
+        debugCtx.fillText(`MANUAL OFFSETS: X=${this.config.offsetX}, Y=${this.config.offsetY} (Use arrow keys to adjust)`, 10, 130);
+        debugCtx.fillStyle = '#FFFFFF';
+
+        // Visualization
+        this.drawCanvasVisualization(debugCtx, debugCanvas);
+    }
+
+    /**
+     * Draw a scaled visualization of the canvas and source region.
+     */
+    drawCanvasVisualization(debugCtx: CanvasRenderingContext2D, debugCanvas: HTMLCanvasElement): void {
+        const canvasScale = 0.1;
+        const canvasVisX = 10;
+        const canvasVisY = 170;
+        const canvasVisWidth = 380;
+        const canvasVisHeight = 150;
+
+        // Draw canvas representation
+        debugCtx.strokeStyle = '#AAAAAA';
+        debugCtx.strokeRect(canvasVisX, canvasVisY, canvasVisWidth, canvasVisHeight);
+        debugCtx.fillStyle = '#444444';
+        debugCtx.fillRect(canvasVisX, canvasVisY, canvasVisWidth, canvasVisHeight);
+
+        // Calculate cursor position in visualization
+        const cursorVisX = canvasVisX + (this.state.x * canvasScale);
+        const cursorVisY = canvasVisY + (this.state.y * canvasScale);
+
+        // Calculate source rect in visualization
+        const sourceRectVisX = canvasVisX + (this.state.sourceX * canvasScale);
+        const sourceRectVisY = canvasVisY + (this.state.sourceY * canvasScale);
+        const sourceRectVisWidth = this.state.sourceWidth * canvasScale;
+        const sourceRectVisHeight = this.state.sourceHeight * canvasScale;
+
+        // Draw source rect
+        debugCtx.strokeStyle = '#FF0000';
+        debugCtx.strokeRect(sourceRectVisX, sourceRectVisY, sourceRectVisWidth, sourceRectVisHeight);
+
+        // Draw cursor position
+        debugCtx.fillStyle = '#FFFF00';
+        debugCtx.beginPath();
+        debugCtx.arc(cursorVisX, cursorVisY, 3, 0, Math.PI * 2);
+        debugCtx.fill();
+
+        // Draw line from cursor to source rect center
+        debugCtx.strokeStyle = '#00FF00';
+        debugCtx.beginPath();
+        debugCtx.moveTo(cursorVisX, cursorVisY);
+        debugCtx.lineTo(sourceRectVisX + sourceRectVisWidth / 2, sourceRectVisY + sourceRectVisHeight / 2);
+        debugCtx.stroke();
+
+        // Label for visualization
+        debugCtx.fillStyle = '#FFFFFF';
+        debugCtx.fillText('Canvas Visualization (scaled)', canvasVisX, canvasVisY - 5);
+
+        // Offset values
+        const offsetX = this.state.sourceX - this.state.x + (this.state.sourceWidth / 2);
+        const offsetY = this.state.sourceY - this.state.y + (this.state.sourceHeight / 2);
+        debugCtx.fillText(`Alignment Offset: (${offsetX.toFixed(1)}, ${offsetY.toFixed(1)})`, 10, canvasVisY + canvasVisHeight + 20);
+    }
+}

src/magnify-glass/EventHandler.ts

@@ -0,0 +1,232 @@
+/**
+ * ComfyUI MagnifyGlass - EventHandler (TypeScript)
+ * 
+ * Handles keyboard and mouse events for the magnifying glass.
+ */
+
+import { isUserTyping } from '../shared/utils';
+import { DEFAULT_PADDING } from '../shared/constants';
+import type { MagnifyGlass } from './MagnifyGlass';
+
+/**
+ * Event Handler class.
+ * Manages all keyboard and mouse event handling for the magnifier.
+ */
+export class EventHandler {
+    magnifyGlass: MagnifyGlass;
+
+    constructor(magnifyGlass: MagnifyGlass) {
+        this.magnifyGlass = magnifyGlass;
+
+        // Bind methods to maintain context
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.handleKeyUp = this.handleKeyUp.bind(this);
+        this.handleMouseMove = this.handleMouseMove.bind(this);
+    }
+
+    /**
+     * Attach all event listeners.
+     */
+    attachListeners(): void {
+        document.addEventListener("keydown", this.handleKeyDown);
+        document.addEventListener("keyup", this.handleKeyUp);
+        document.addEventListener("mousemove", this.handleMouseMove);
+    }
+
+    /**
+     * Detach all event listeners.
+     */
+    detachListeners(): void {
+        document.removeEventListener("keydown", this.handleKeyDown);
+        document.removeEventListener("keyup", this.handleKeyUp);
+        document.removeEventListener("mousemove", this.handleMouseMove);
+    }
+
+    /**
+     * Handle keydown events.
+     */
+    handleKeyDown(e: KeyboardEvent): void {
+        const config = this.magnifyGlass.config;
+        const state = this.magnifyGlass.state;
+
+        // Don't handle hotkeys if user is typing in an input field
+        if (isUserTyping()) {
+            return;
+        }
+
+        // Magnifier activation
+        console.log(`[MagnifyGlass] KeyDown: ${e.key} (config: ${config.activationKey}, active: ${state.active})`);
+        if (e.key.toLowerCase() === config.activationKey &&
+            (!config.altRequired || e.altKey)) {
+            console.log("[MagnifyGlass] Activation key matched!");
+            if (config.alwaysActiveMode) {
+                if (state.active) {
+                    state.active = false;
+                    this.magnifyGlass.ui.hide();
+                } else {
+                    state.active = true;
+                    this.magnifyGlass.ui.show();
+                    this.updateInitialPosition();
+                }
+            } else {
+                if (!state.active) {
+                    state.active = true;
+                    this.magnifyGlass.ui.show();
+                    this.updateInitialPosition();
+                }
+            }
+        }
+
+        // Manual offset adjustment keys (only when magnifier is active)
+        if (state.active) {
+            let offsetChanged = false;
+            const stepSize = e.shiftKey ? config.offsetStep * 5 : config.offsetStep;
+
+            if (e.key === "ArrowUp") {
+                config.offsetY -= stepSize;
+                offsetChanged = true;
+                e.preventDefault();
+            } else if (e.key === "ArrowDown") {
+                config.offsetY += stepSize;
+                offsetChanged = true;
+                e.preventDefault();
+            } else if (e.key === "ArrowLeft") {
+                config.offsetX -= stepSize;
+                offsetChanged = true;
+                e.preventDefault();
+            } else if (e.key === "ArrowRight") {
+                config.offsetX += stepSize;
+                offsetChanged = true;
+                e.preventDefault();
+            } else if (e.key.toLowerCase() === config.resetKey.toLowerCase() &&
+                (!config.altRequired || e.altKey)) {
+                this.magnifyGlass.resetOffsets();
+                offsetChanged = true;
+                e.preventDefault();
+            }
+
+            // Toggle Follow Cursor Key
+            if (e.key.toLowerCase() === config.toggleFollowCursorKey &&
+                (!config.altRequired || e.altKey)) {
+                config.followCursor = !config.followCursor;
+                this.magnifyGlass.debugger.log(`Follow Cursor Toggled: ${config.followCursor ? 'ON' : 'OFF'}`);
+                if (state.active && config.followCursor) {
+                    this.magnifyGlass.ui.positionGlass(
+                        this.magnifyGlass.lastKnownMousePosition.x,
+                        this.magnifyGlass.lastKnownMousePosition.y
+                    );
+                }
+                e.preventDefault();
+            }
+
+            if (offsetChanged) {
+                config.saveOffsets();
+                this.magnifyGlass.updateMagnifiedView();
+            }
+        }
+    }
+
+    /**
+     * Handle keyup events.
+     */
+    handleKeyUp(e: KeyboardEvent): void {
+        const config = this.magnifyGlass.config;
+        const state = this.magnifyGlass.state;
+
+        if (!config.alwaysActiveMode &&
+            (e.key.toLowerCase() === config.activationKey ||
+                (config.altRequired && e.key === "Alt"))) {
+
+            let shouldDeactivate = false;
+            if (config.altRequired) {
+                if (e.key === "Alt" || e.key.toLowerCase() === config.activationKey) {
+                    shouldDeactivate = true;
+                }
+            } else {
+                if (e.key.toLowerCase() === config.activationKey) {
+                    shouldDeactivate = true;
+                }
+            }
+
+            if (state.active && shouldDeactivate) {
+                state.active = false;
+                this.magnifyGlass.ui.hide();
+            }
+        }
+    }
+
+    /**
+     * Handle mousemove events.
+     */
+    handleMouseMove(e: MouseEvent): void {
+        // Always track mouse position
+        this.magnifyGlass.lastKnownMousePosition.x = e.clientX;
+        this.magnifyGlass.lastKnownMousePosition.y = e.clientY;
+
+        if (!this.magnifyGlass.state.active || !this.magnifyGlass.litegraphCanvas) return;
+
+        const rect = this.magnifyGlass.litegraphCanvas.getBoundingClientRect();
+        const cssMouseXOnCanvas = e.clientX - rect.left;
+        const cssMouseYOnCanvas = e.clientY - rect.top;
+
+        // Check if the cursor is over the canvas element
+        if (cssMouseXOnCanvas >= 0 && cssMouseXOnCanvas <= rect.width &&
+            cssMouseYOnCanvas >= 0 && cssMouseYOnCanvas <= rect.height) {
+
+            const canvasElement = this.magnifyGlass.litegraphCanvas;
+            const scaleX = rect.width > 0 ? canvasElement.width / rect.width : 1;
+            const scaleY = rect.height > 0 ? canvasElement.height / rect.height : 1;
+
+            const pixelX = cssMouseXOnCanvas * scaleX;
+            const pixelY = cssMouseYOnCanvas * scaleY;
+
+            this.magnifyGlass.state.x = pixelX;
+            this.magnifyGlass.state.y = pixelY;
+
+            this.magnifyGlass.ui.positionGlass(e.clientX, e.clientY);
+            this.magnifyGlass.updateMagnifiedView();
+        }
+    }
+
+    /**
+     * Update the initial position when magnifier is activated.
+     */
+    updateInitialPosition(): void {
+        if (!this.magnifyGlass.litegraphCanvas) return;
+
+        const rect = this.magnifyGlass.litegraphCanvas.getBoundingClientRect();
+        const clientX = this.magnifyGlass.lastKnownMousePosition.x;
+        const clientY = this.magnifyGlass.lastKnownMousePosition.y;
+
+        const isOverCanvas = clientX >= rect.left && clientX <= rect.right &&
+            clientY >= rect.top && clientY <= rect.bottom;
+
+        if (this.magnifyGlass.config.alwaysActiveMode || isOverCanvas) {
+            const cssMouseXOnCanvas = clientX - rect.left;
+            const cssMouseYOnCanvas = clientY - rect.top;
+
+            const canvasElement = this.magnifyGlass.litegraphCanvas;
+            const scaleX = rect.width > 0 ? canvasElement.width / rect.width : 1;
+            const scaleY = rect.height > 0 ? canvasElement.height / rect.height : 1;
+
+            const pixelX = cssMouseXOnCanvas * scaleX;
+            const pixelY = cssMouseYOnCanvas * scaleY;
+
+            this.magnifyGlass.state.x = pixelX;
+            this.magnifyGlass.state.y = pixelY;
+
+            const glassSize = this.magnifyGlass.config.glassSize;
+
+            if (!this.magnifyGlass.state.wasActivatedBefore && this.magnifyGlass.ui.glassDiv) {
+                // First activation - position at top right of the window
+                this.magnifyGlass.ui.glassDiv.style.left = `${window.innerWidth - glassSize - DEFAULT_PADDING}px`;
+                this.magnifyGlass.ui.glassDiv.style.top = `${DEFAULT_PADDING}px`;
+                this.magnifyGlass.state.wasActivatedBefore = true;
+            } else {
+                this.magnifyGlass.ui.positionGlass(clientX, clientY);
+            }
+
+            this.magnifyGlass.updateMagnifiedView();
+        }
+    }
+}

src/magnify-glass/MagnifierState.ts

@@ -0,0 +1,80 @@
+/**
+ * ComfyUI MagnifyGlass - MagnifierState (TypeScript)
+ * 
+ * Manages the state of the magnifying glass.
+ */
+
+/**
+ * Magnifier state class.
+ * Tracks activation state, cursor position, and canvas transforms.
+ */
+export class MagnifierState {
+    /** Whether the magnifier is currently active */
+    active: boolean;
+
+    /** Track if the glass has been activated before */
+    wasActivatedBefore: boolean;
+
+    /** Cursor X relative to litegraphCanvas */
+    x: number;
+
+    /** Cursor Y relative to litegraphCanvas */
+    y: number;
+
+    /** Calculated source area X */
+    sourceX: number;
+
+    /** Calculated source area Y */
+    sourceY: number;
+
+    /** Calculated source area width */
+    sourceWidth: number;
+
+    /** Calculated source area height */
+    sourceHeight: number;
+
+    /** Current canvas scale/zoom */
+    canvasScale: number;
+
+    /** Canvas translation X */
+    canvasOffsetX: number;
+
+    /** Canvas translation Y */
+    canvasOffsetY: number;
+
+    /** Flag to manage requestAnimationFrame */
+    isRenderScheduled: boolean;
+
+    constructor() {
+        this.active = false;
+        this.wasActivatedBefore = false;
+        this.x = 0;
+        this.y = 0;
+        this.sourceX = 0;
+        this.sourceY = 0;
+        this.sourceWidth = 0;
+        this.sourceHeight = 0;
+        this.canvasScale = 1.0;
+        this.canvasOffsetX = 0;
+        this.canvasOffsetY = 0;
+        this.isRenderScheduled = false;
+    }
+
+    /**
+     * Reset state to initial values.
+     */
+    reset(): void {
+        this.active = false;
+        this.wasActivatedBefore = false;
+        this.x = 0;
+        this.y = 0;
+        this.sourceX = 0;
+        this.sourceY = 0;
+        this.sourceWidth = 0;
+        this.sourceHeight = 0;
+        this.canvasScale = 1.0;
+        this.canvasOffsetX = 0;
+        this.canvasOffsetY = 0;
+        this.isRenderScheduled = false;
+    }
+}

src/magnify-glass/MagnifyGlass.ts

@@ -0,0 +1,414 @@
+/**
+ * ComfyUI MagnifyGlass - Main Class (TypeScript)
+ * 
+ * Orchestrates all components of the magnifying glass.
+ */
+
+import type { ComfyApp, ComfyNode } from '../types/comfyui';
+import { findLiteGraphCanvas, rectsOverlap, Rectangle } from '../shared/utils';
+import { DEFAULT_PADDING } from '../shared/constants';
+import { registerGlassSettings } from '../shared/settings';
+import { ConfigManager } from './ConfigManager';
+import { MagnifierState } from './MagnifierState';
+import { UiManager } from './UiManager';
+import { WebGLRenderer } from './WebGLRenderer';
+import { DebugManager } from './DebugManager';
+import { EventHandler } from './EventHandler';
+
+// External ComfyUI globals
+declare const app: ComfyApp;
+declare const LiteGraph: unknown;
+
+/**
+ * Main MagnifyGlass class.
+ * Orchestrates all components and provides the main API.
+ */
+export class MagnifyGlass {
+    config: ConfigManager;
+    state: MagnifierState;
+    ui: UiManager;
+    renderer: WebGLRenderer | null;
+    debugger: DebugManager;
+    eventHandler: EventHandler;
+
+    /** The LiteGraph canvas */
+    litegraphCanvas: HTMLCanvasElement | null;
+
+    /** Last known mouse position for better initial positioning */
+    lastKnownMousePosition: { x: number; y: number };
+
+    /** Whether we're currently over media (for info panel) */
+    isOverMedia: boolean;
+
+    /** Current media element under cursor */
+    currentMediaElement: HTMLImageElement | HTMLVideoElement | null;
+
+    constructor() {
+        this.config = new ConfigManager();
+        this.state = new MagnifierState();
+        this.ui = new UiManager(this.config, this.state);
+        this.renderer = null;
+        this.debugger = new DebugManager(this.config, this.state, this.ui);
+        this.eventHandler = new EventHandler(this);
+
+        // The LiteGraph canvas
+        this.litegraphCanvas = null;
+
+        // Last known mouse position for better initial positioning
+        this.lastKnownMousePosition = { x: 0, y: 0 };
+
+        // Media tracking
+        this.isOverMedia = false;
+        this.currentMediaElement = null;
+    }
+
+    /**
+     * Initialize the magnifying glass.
+     */
+    init(): void {
+        if (typeof LiteGraph === 'undefined' || typeof app === 'undefined' || !app.canvas) {
+            this.debugger.log("LiteGraph or app not ready, retrying in 100ms.");
+            setTimeout(() => this.init(), 100);
+            return;
+        }
+        this.debugger.log("LiteGraph and app ready.");
+
+        // Load saved offsets first
+        this.config.loadSavedOffsets();
+
+        // Print detailed canvas information
+        this.debugger.printCanvasInfo();
+
+        // Create UI elements
+        this.ui.createElements();
+
+        // Setup WebGL renderer
+        this.renderer = new WebGLRenderer(this.config, this.state, this.ui);
+        if (!this.renderer.isValid()) {
+            this.ui.cleanup();
+            return;
+        }
+
+        // Find the LiteGraph canvas
+        this.litegraphCanvas = findLiteGraphCanvas();
+        this.debugger.log("LiteGraph canvas found:", this.litegraphCanvas);
+        if (!this.litegraphCanvas) {
+            this.debugger.error("Could not find LiteGraph canvas. Magnifier will not work.");
+            this.ui.cleanup();
+            return;
+        }
+
+        // Attach event handlers
+        this.eventHandler.attachListeners();
+
+        // Register settings with ComfyUI
+        registerGlassSettings(this);
+
+        this.debugger.log(`Initialized (WebGL) with Smart Input Detection. Press ${this.config.altRequired ? 'Alt+' : ''}${this.config.activationKey.toUpperCase()} to activate.`);
+    }
+
+    /**
+     * Update the magnified view.
+     */
+    updateMagnifiedView(): void {
+        if (!this.state.active || !this.renderer || !this.litegraphCanvas) {
+            return;
+        }
+
+        // Get canvas transformation info
+        this.updateCanvasTransformation();
+
+        // Calculate the source region
+        this.calculateSourceRegion();
+
+        // Schedule the rendering operation
+        if (!this.state.isRenderScheduled) {
+            this.state.isRenderScheduled = true;
+            requestAnimationFrame(() => {
+                if (!this.state.active || !this.renderer || !this.litegraphCanvas) {
+                    this.state.isRenderScheduled = false;
+                    return;
+                }
+                // Render the magnified view
+                this.renderer.render(this.litegraphCanvas);
+
+                // Update debug visualization
+                this.debugger.updateDebugView();
+
+                // Render HTML overlays
+                this.renderHtmlOverlays();
+
+                this.state.isRenderScheduled = false;
+            });
+        }
+    }
+
+    /**
+     * Update canvas transformation state.
+     */
+    updateCanvasTransformation(): void {
+        this.state.canvasScale = 1.0;
+        this.state.canvasOffsetX = 0;
+        this.state.canvasOffsetY = 0;
+
+        if (app?.canvas) {
+            const ds = (app.canvas as any).ds;
+            if (ds) {
+                if (typeof ds.scale === 'number') {
+                    this.state.canvasScale = ds.scale;
+                }
+
+                if (ds.offset) {
+                    this.state.canvasOffsetX = ds.offset[0] || 0;
+                    this.state.canvasOffsetY = ds.offset[1] || 0;
+                }
+            }
+        }
+    }
+
+    /**
+     * Calculate the source region for magnification.
+     */
+    calculateSourceRegion(): void {
+        const cursorPixelX = this.state.x;
+        const cursorPixelY = this.state.y;
+        const canvasScale = this.state.canvasScale;
+        const canvasOffsetX = this.state.canvasOffsetX;
+        const canvasOffsetY = this.state.canvasOffsetY;
+
+        if (canvasScale === 0) return;
+
+        // Convert cursor canvas pixels to LiteGraph graph coordinates
+        const cursorGraphX = (cursorPixelX - canvasOffsetX) / canvasScale;
+        const cursorGraphY = (cursorPixelY - canvasOffsetY) / canvasScale;
+
+        // Apply manual offset
+        const targetGraphCenterX = cursorGraphX + this.config.offsetX;
+        const targetGraphCenterY = cursorGraphY + this.config.offsetY;
+
+        // Calculate source dimensions in graph units
+        const sourceGraphWidth = (this.config.glassSize / this.config.zoomFactor) / canvasScale;
+        const sourceGraphHeight = (this.config.glassSize / this.config.zoomFactor) / canvasScale;
+
+        // Calculate source top-left corner in graph coordinates
+        const sourceGraphX = targetGraphCenterX - (sourceGraphWidth / 2);
+        const sourceGraphY = targetGraphCenterY - (sourceGraphHeight / 2);
+
+        // Convert back to canvas pixel coordinates
+        this.state.sourceX = (sourceGraphX * canvasScale) + canvasOffsetX;
+        this.state.sourceY = (sourceGraphY * canvasScale) + canvasOffsetY;
+        this.state.sourceWidth = sourceGraphWidth * canvasScale;
+        this.state.sourceHeight = sourceGraphHeight * canvasScale;
+    }
+
+    /**
+     * Render HTML overlays for text and media in the magnified view.
+     */
+    renderHtmlOverlays(): void {
+        const graph = (app as any).graph;
+        if (!this.state.active || !this.ui.htmlOverlayContainer || !graph || !this.litegraphCanvas) {
+            if (this.ui.htmlOverlayContainer) this.ui.htmlOverlayContainer.innerHTML = '';
+            return;
+        }
+
+        this.ui.htmlOverlayContainer.innerHTML = '';
+
+        const magnifyRect: Rectangle = {
+            x: this.state.sourceX,
+            y: this.state.sourceY,
+            width: this.state.sourceWidth,
+            height: this.state.sourceHeight
+        };
+
+        const nodes: ComfyNode[] = graph._nodes;
+        if (!nodes) return;
+
+        for (const node of nodes) {
+            const widgets = (node as any).widgets;
+            if (!widgets) continue;
+
+            for (const widget of widgets) {
+                let isTextElement = false;
+                let isVideoElement = false;
+                let isImageElement = false;
+                let elementToProcess: HTMLElement | null = null;
+
+                if (widget.element) {
+                    const element = widget.element as HTMLElement;
+                    if (widget.type === "text" || widget.type === "string" || element.tagName === 'TEXTAREA') {
+                        isTextElement = true;
+                        elementToProcess = element;
+                    } else if (element.tagName === 'VIDEO') {
+                        isVideoElement = true;
+                        elementToProcess = element;
+                    } else if (element.tagName === 'IMG') {
+                        isImageElement = true;
+                        elementToProcess = element;
+                    } else {
+                        const potentialVideo = element.querySelector('video');
+                        if (potentialVideo) {
+                            isVideoElement = true;
+                            elementToProcess = potentialVideo;
+                        } else {
+                            const potentialImage = element.querySelector('img');
+                            if (potentialImage) {
+                                isImageElement = true;
+                                elementToProcess = potentialImage;
+                            }
+                        }
+                    }
+                }
+
+                if (elementToProcess && (isTextElement || isVideoElement || isImageElement)) {
+                    const widgetRect = elementToProcess.getBoundingClientRect();
+                    const canvasRect = this.litegraphCanvas!.getBoundingClientRect();
+
+                    const canvasToViewportScaleX = canvasRect.width > 0 ? (this.litegraphCanvas!.width / canvasRect.width) : 1;
+                    const canvasToViewportScaleY = canvasRect.height > 0 ? (this.litegraphCanvas!.height / canvasRect.height) : 1;
+
+                    const widgetCanvasX = (widgetRect.left - canvasRect.left) * canvasToViewportScaleX;
+                    const widgetCanvasY = (widgetRect.top - canvasRect.top) * canvasToViewportScaleY;
+                    const widgetCanvasWidth = widgetRect.width * canvasToViewportScaleX;
+                    const widgetCanvasHeight = widgetRect.height * canvasToViewportScaleY;
+
+                    const widgetSourceRect: Rectangle = {
+                        x: widgetCanvasX,
+                        y: widgetCanvasY,
+                        width: widgetCanvasWidth,
+                        height: widgetCanvasHeight
+                    };
+
+                    if (rectsOverlap(magnifyRect, widgetSourceRect)) {
+                        const clonedElement = elementToProcess.cloneNode(true) as HTMLElement;
+                        clonedElement.style.position = 'absolute';
+                        clonedElement.style.pointerEvents = 'none';
+
+                        if (isTextElement) {
+                            clonedElement.style.backgroundColor = elementToProcess.style.backgroundColor || '#222';
+                            clonedElement.style.color = elementToProcess.style.color || '#DDD';
+                            clonedElement.style.border = elementToProcess.style.border || '1px solid #555';
+                            (clonedElement as HTMLInputElement).disabled = true;
+                        } else if (isVideoElement) {
+                            const video = clonedElement as HTMLVideoElement;
+                            const originalVideo = elementToProcess as HTMLVideoElement;
+                            video.src = originalVideo.src;
+                            video.autoplay = originalVideo.autoplay;
+                            video.loop = originalVideo.loop;
+                            video.preload = originalVideo.preload;
+                            video.crossOrigin = originalVideo.crossOrigin;
+                            video.muted = true;
+                            if (!originalVideo.paused) {
+                                video.play().catch(e => console.warn("Magnify Glass: Cloned video play failed", e));
+                            }
+                            video.currentTime = originalVideo.currentTime;
+                        } else if (isImageElement) {
+                            const img = clonedElement as HTMLImageElement;
+                            const originalImg = elementToProcess as HTMLImageElement;
+                            img.src = originalImg.src;
+                            img.alt = originalImg.alt;
+                        }
+
+                        const relativeX = widgetSourceRect.x - magnifyRect.x;
+                        const relativeY = widgetSourceRect.y - magnifyRect.y;
+                        const magnifiedX = relativeX * this.config.zoomFactor;
+                        const magnifiedY = relativeY * this.config.zoomFactor;
+
+                        clonedElement.style.left = `${magnifiedX}px`;
+                        clonedElement.style.top = `${magnifiedY}px`;
+                        clonedElement.style.width = `${widgetSourceRect.width}px`;
+                        clonedElement.style.height = `${widgetSourceRect.height}px`;
+                        clonedElement.style.transformOrigin = 'top left';
+                        clonedElement.style.transform = `scale(${this.config.zoomFactor})`;
+
+                        if (isTextElement && clonedElement.style.fontSize) {
+                            const originalFontSize = parseFloat(window.getComputedStyle(elementToProcess).fontSize);
+                            clonedElement.style.fontSize = `${originalFontSize}px`;
+                        }
+
+                        this.ui.htmlOverlayContainer!.appendChild(clonedElement);
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Update config from current settings values.
+     */
+    updateConfigFromSettings(): void {
+        this.config.loadSettings();
+    }
+
+    /**
+     * Apply UI changes based on current config.
+     */
+    applyUiChanges(): void {
+        this.ui.applyStyles();
+
+        if (this.renderer?.gl) {
+            this.renderer.updateViewport();
+        }
+    }
+
+    /**
+     * Toggle the magnify glass on/off.
+     */
+    toggle(): void {
+        this.state.active = !this.state.active;
+        if (this.state.active) {
+            this.ui.show();
+        } else {
+            this.ui.hide();
+        }
+    }
+
+    /**
+     * Reset offsets and panel positions to defaults.
+     */
+    resetOffsets(): void {
+        this.config.resetOffsets();
+
+        if (this.state.active) {
+            this.updateMagnifiedView();
+        }
+
+        // Reset magnify glass position to top-right corner
+        if (this.ui.glassDiv) {
+            const glassSize = this.config.glassSize;
+            this.ui.glassDiv.style.left = `${window.innerWidth - glassSize - DEFAULT_PADDING}px`;
+            this.ui.glassDiv.style.top = `${DEFAULT_PADDING}px`;
+            this.state.wasActivatedBefore = false;
+        }
+
+        // Reset inspector panel position if exists
+        const extensions = window.comfyUIMagnifyGlassExtensions;
+        if (extensions && extensions.length > 0) {
+            extensions.forEach((extension: any) => {
+                if (extension?.stateManager) {
+                    extension.stateManager.state.isPanelPinned = false;
+                    extension.stateManager.state.isPanelLocked = false;
+                    extension.stateManager.state.isAutoPinned = false;
+                    extension.stateManager.state.pinnedPosition = { x: 0, y: 0 };
+                    extension.stateManager.state.lastPinnedPosition = null;
+
+                    if (extension.positionManager) {
+                        extension.positionManager.positionPanel();
+                    }
+                    if (extension.uiManager?.updateControlStates) {
+                        extension.uiManager.updateControlStates();
+                    }
+                }
+            });
+        }
+
+        this.debugger.log("Reset: Magnify glass and inspector panel positions restored to defaults");
+    }
+
+    /**
+     * Cleanup all resources.
+     */
+    cleanup(): void {
+        this.eventHandler.detachListeners();
+        this.ui.cleanup();
+    }
+}

src/magnify-glass/UiManager.ts

@@ -0,0 +1,279 @@
+/**
+ * ComfyUI MagnifyGlass - UiManager (TypeScript)
+ * 
+ * Handles creation and management of DOM elements for the magnifying glass.
+ */
+
+import { Z_INDEX, DEFAULT_PADDING } from '../shared/constants';
+import type { ConfigManager } from './ConfigManager';
+import type { MagnifierState } from './MagnifierState';
+
+/**
+ * UI Manager class.
+ * Manages all DOM elements for the magnifying glass.
+ */
+export class UiManager {
+    config: ConfigManager;
+    state: MagnifierState;
+    glassDiv: HTMLDivElement | null;
+    glassCanvas: HTMLCanvasElement | null;
+    debugCanvas: HTMLCanvasElement | null;
+    debugCtx: CanvasRenderingContext2D | null;
+    htmlOverlayContainer: HTMLDivElement | null;
+
+    constructor(config: ConfigManager, state: MagnifierState) {
+        this.config = config;
+        this.state = state;
+        this.glassDiv = null;
+        this.glassCanvas = null;
+        this.debugCanvas = null;
+        this.debugCtx = null;
+        this.htmlOverlayContainer = null;
+    }
+
+    /**
+     * Create all DOM elements for the magnifying glass.
+     */
+    createElements(): void {
+        // Create magnifying glass container
+        this.glassDiv = document.createElement("div");
+        this.glassDiv.id = "comfyui-magnify-glass";
+        this.glassDiv.style.cssText = `
+            position: absolute;
+            width: ${this.config.glassSize}px;
+            height: ${this.config.glassSize}px;
+            border-radius: ${this.config.glassShape === "Circle" ? "50%" : "0px"};
+            border: ${this.config.borderEnabled ? `${this.config.borderWidth}px solid ${this.config.borderColor}` : 'none'};
+            overflow: hidden;
+            pointer-events: none;
+            z-index: ${Z_INDEX.GLASS};
+            display: none;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            background-color: rgba(255,255,255,0.1);
+        `;
+
+        // Create WebGL canvas for the magnifying glass
+        this.glassCanvas = document.createElement("canvas");
+        this.glassCanvas.width = this.config.glassSize;
+        this.glassCanvas.height = this.config.glassSize;
+        this.glassCanvas.id = "comfyui-magnify-canvas";
+        this.glassDiv.appendChild(this.glassCanvas);
+
+        // Create HTML overlay container
+        this.htmlOverlayContainer = document.createElement("div");
+        this.htmlOverlayContainer.id = "comfyui-magnify-html-overlay";
+        this.htmlOverlayContainer.style.cssText = `
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            overflow: hidden; 
+        `;
+        this.glassDiv.appendChild(this.htmlOverlayContainer);
+
+        document.body.appendChild(this.glassDiv);
+
+        // Create debug canvas if debug mode is enabled
+        if (this.config.debugMode) {
+            this.createDebugCanvas();
+        }
+    }
+
+    /**
+     * Create the debug canvas overlay.
+     */
+    createDebugCanvas(): void {
+        this.debugCanvas = document.createElement("canvas");
+        this.debugCanvas.id = "comfyui-magnify-debug";
+        this.debugCanvas.width = 400;
+        this.debugCanvas.height = 350;
+        this.debugCanvas.style.cssText = `
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: rgba(0,0,0,0.7);
+            border: 1px solid #fff;
+            z-index: ${Z_INDEX.DEBUG};
+            pointer-events: none;
+            color: white;
+            font-family: monospace;
+            display: none;
+        `;
+        document.body.appendChild(this.debugCanvas);
+        this.debugCtx = this.debugCanvas.getContext('2d');
+    }
+
+    /**
+     * Show the magnifying glass.
+     */
+    show(): void {
+        if (this.glassDiv) {
+            this.glassDiv.style.display = "block";
+        }
+        if (this.config.debugMode && this.debugCanvas) {
+            this.debugCanvas.style.display = "block";
+        }
+    }
+
+    /**
+     * Hide the magnifying glass.
+     */
+    hide(): void {
+        if (this.glassDiv) {
+            this.glassDiv.style.display = "none";
+        }
+        if (this.config.debugMode && this.debugCanvas) {
+            this.debugCanvas.style.display = "none";
+        }
+        // Clear HTML overlays when hiding
+        if (this.htmlOverlayContainer) {
+            this.htmlOverlayContainer.innerHTML = '';
+        }
+    }
+
+    /**
+     * Position the glass relative to cursor.
+     * @param clientX - Client X coordinate
+     * @param clientY - Client Y coordinate
+     */
+    positionGlass(clientX: number, clientY: number): void {
+        if (!this.config.followCursor || !this.glassDiv) return;
+
+        const glassSize = this.config.glassSize;
+        const offsetAmount = DEFAULT_PADDING;
+        let newLeft: number;
+        let newTop: number;
+
+        switch (this.config.glassPosition) {
+            case "Top":
+                newLeft = clientX - (glassSize / 2);
+                newTop = clientY - glassSize - offsetAmount;
+                break;
+            case "Bottom":
+                newLeft = clientX - (glassSize / 2);
+                newTop = clientY + offsetAmount;
+                break;
+            case "Left":
+                newLeft = clientX - glassSize - offsetAmount;
+                newTop = clientY - (glassSize / 2);
+                break;
+            case "Right":
+                newLeft = clientX + offsetAmount;
+                newTop = clientY - (glassSize / 2);
+                break;
+            case "Top-Left":
+                newLeft = clientX - glassSize - offsetAmount;
+                newTop = clientY - glassSize - offsetAmount;
+                break;
+            case "Top-Right":
+                newLeft = clientX + offsetAmount;
+                newTop = clientY - glassSize - offsetAmount;
+                break;
+            case "Bottom-Left":
+                newLeft = clientX - glassSize - offsetAmount;
+                newTop = clientY + offsetAmount;
+                break;
+            case "Bottom-Right":
+                newLeft = clientX + offsetAmount;
+                newTop = clientY + offsetAmount;
+                break;
+            default:
+                newLeft = clientX - (glassSize / 2);
+                newTop = clientY + offsetAmount;
+                break;
+        }
+
+        this.glassDiv.style.left = `${newLeft}px`;
+        this.glassDiv.style.top = `${newTop}px`;
+
+        this.adjustForBoundaries(clientX, clientY);
+    }
+
+    /**
+     * Adjust glass position to stay within viewport boundaries.
+     * @param clientX - Client X coordinate
+     * @param clientY - Client Y coordinate
+     */
+    adjustForBoundaries(clientX: number, clientY: number): void {
+        if (!this.glassDiv) return;
+
+        const glassRect = this.glassDiv.getBoundingClientRect();
+
+        // Check right boundary
+        if (glassRect.right > window.innerWidth) {
+            this.glassDiv.style.left = `${clientX - glassRect.width - DEFAULT_PADDING}px`;
+        }
+
+        // Check left boundary
+        const currentRectLeft = this.glassDiv.getBoundingClientRect();
+        if (currentRectLeft.left < 0) {
+            this.glassDiv.style.left = "10px";
+        }
+
+        // Check bottom boundary
+        if (glassRect.bottom > window.innerHeight) {
+            this.glassDiv.style.top = `${clientY - glassRect.height - DEFAULT_PADDING}px`;
+        }
+
+        // Check top boundary
+        const currentRectTop = this.glassDiv.getBoundingClientRect();
+        if (currentRectTop.top < 0) {
+            this.glassDiv.style.top = "10px";
+        }
+    }
+
+    /**
+     * Apply current config to UI elements.
+     */
+    applyStyles(): void {
+        if (this.glassDiv) {
+            this.glassDiv.style.width = `${this.config.glassSize}px`;
+            this.glassDiv.style.height = `${this.config.glassSize}px`;
+            this.glassDiv.style.border = this.config.borderEnabled
+                ? `${this.config.borderWidth}px solid ${this.config.borderColor}`
+                : 'none';
+
+            // Reset clip-path and set default border-radius
+            this.glassDiv.style.clipPath = 'none';
+            this.glassDiv.style.borderRadius = '0px';
+
+            switch (this.config.glassShape) {
+                case "Circle":
+                    this.glassDiv.style.borderRadius = "50%";
+                    break;
+                case "Square":
+                    // borderRadius is already '0px'
+                    break;
+                case "Rounded Square":
+                    this.glassDiv.style.borderRadius = "20%";
+                    break;
+                default:
+                    this.glassDiv.style.borderRadius = "50%";
+                    break;
+            }
+        }
+
+        if (this.glassCanvas) {
+            this.glassCanvas.width = this.config.glassSize;
+            this.glassCanvas.height = this.config.glassSize;
+        }
+
+        // Handle debug canvas show/hide
+        if (this.config.debugMode) {
+            if (!this.debugCanvas) this.createDebugCanvas();
+            if (this.state.active && this.debugCanvas) this.debugCanvas.style.display = "block";
+        } else {
+            if (this.debugCanvas) this.debugCanvas.style.display = "none";
+        }
+    }
+
+    /**
+     * Cleanup DOM elements.
+     */
+    cleanup(): void {
+        if (this.glassDiv) this.glassDiv.remove();
+        if (this.debugCanvas) this.debugCanvas.remove();
+    }
+}

src/magnify-glass/WebGLRenderer.ts

@@ -0,0 +1,302 @@
+/**
+ * ComfyUI MagnifyGlass - WebGLRenderer (TypeScript)
+ * 
+ * Handles WebGL-based rendering of the magnified view.
+ */
+
+import type { ConfigManager } from './ConfigManager';
+import type { MagnifierState } from './MagnifierState';
+import type { UiManager } from './UiManager';
+
+interface UniformLocations {
+    sourceTexture: WebGLUniformLocation | null;
+    textureOffset: WebGLUniformLocation | null;
+    textureRepeat: WebGLUniformLocation | null;
+    glassSize: WebGLUniformLocation | null;
+}
+
+interface AttributeLocations {
+    position: number;
+    texCoord: number;
+}
+
+/**
+ * WebGL Renderer class.
+ * Provides efficient WebGL-based magnification rendering.
+ */
+export class WebGLRenderer {
+    config: ConfigManager;
+    state: MagnifierState;
+    ui: UiManager;
+
+    gl: WebGLRenderingContext | null;
+    program: WebGLProgram | null;
+    texture: WebGLTexture | null;
+    positionBuffer: WebGLBuffer | null;
+    texCoordBuffer: WebGLBuffer | null;
+    uniformLocations: UniformLocations | null;
+    attributeLocations: AttributeLocations | null;
+    currentFilteringMode: number | null;
+
+    vertexShaderSource: string;
+    fragmentShaderSource: string;
+
+    constructor(config: ConfigManager, state: MagnifierState, ui: UiManager) {
+        this.config = config;
+        this.state = state;
+        this.ui = ui;
+
+        this.gl = null;
+        this.program = null;
+        this.texture = null;
+        this.positionBuffer = null;
+        this.texCoordBuffer = null;
+        this.uniformLocations = null;
+        this.attributeLocations = null;
+        this.currentFilteringMode = null;
+
+        this.vertexShaderSource = `
+            attribute vec2 a_position;
+            attribute vec2 a_texCoord;
+            varying vec2 v_texCoord;
+            void main() {
+                gl_Position = vec4(a_position, 0.0, 1.0);
+                v_texCoord = a_texCoord;
+            }
+        `;
+
+        this.fragmentShaderSource = `
+            precision mediump float;
+            varying vec2 v_texCoord;
+            uniform sampler2D u_sourceTexture;
+            uniform vec2 u_textureOffset;
+            uniform vec2 u_textureRepeat;
+            uniform float u_glassSize;
+
+            void main() {
+                vec2 sampleCoord = u_textureOffset + v_texCoord * u_textureRepeat;
+                vec4 color = texture2D(u_sourceTexture, sampleCoord);
+                gl_FragColor = color;
+            }
+        `;
+
+        this.initialize();
+    }
+
+    /**
+     * Initialize WebGL context and resources.
+     */
+    initialize(): void {
+        // Get WebGL context
+        if (!this.ui.glassCanvas) return;
+
+        this.gl = this.ui.glassCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+        if (!this.gl) {
+            console.error("ComfyUI Magnifying Glass ERROR: WebGL not supported or context creation failed.");
+            return;
+        }
+
+        // Create shader program
+        this.program = this.createShaderProgram(this.gl, this.vertexShaderSource, this.fragmentShaderSource);
+        if (!this.program) return;
+
+        // Create position buffer
+        this.positionBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+        const positions = [-1, -1, 1, -1, -1, 1, 1, 1];
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);
+
+        // Create texture coordinate buffer
+        this.texCoordBuffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
+        const texCoords = [0, 1, 1, 1, 0, 0, 1, 0]; // Flipped Y for texCoords
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(texCoords), this.gl.STATIC_DRAW);
+
+        // Create texture
+        this.texture = this.gl.createTexture();
+        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+        this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+        this.updateTextureFiltering(this.config.textureFiltering);
+
+        // Get uniform and attribute locations
+        this.uniformLocations = {
+            sourceTexture: this.gl.getUniformLocation(this.program, "u_sourceTexture"),
+            textureOffset: this.gl.getUniformLocation(this.program, "u_textureOffset"),
+            textureRepeat: this.gl.getUniformLocation(this.program, "u_textureRepeat"),
+            glassSize: this.gl.getUniformLocation(this.program, "u_glassSize"),
+        };
+
+        this.attributeLocations = {
+            position: this.gl.getAttribLocation(this.program, "a_position"),
+            texCoord: this.gl.getAttribLocation(this.program, "a_texCoord"),
+        };
+    }
+
+    /**
+     * Update texture filtering mode.
+     * @param filteringModeString - "Linear" or "Nearest"
+     */
+    updateTextureFiltering(filteringModeString: string): void {
+        if (!this.gl || !this.texture) return;
+
+        let glFilterMode: number;
+        if (filteringModeString === "Nearest") {
+            glFilterMode = this.gl.NEAREST;
+        } else {
+            glFilterMode = this.gl.LINEAR;
+        }
+
+        if (this.currentFilteringMode === glFilterMode) return;
+
+        this.currentFilteringMode = glFilterMode;
+
+        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, glFilterMode);
+        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, glFilterMode);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, null);
+    }
+
+    /**
+     * Check if renderer is valid and ready.
+     * @returns Boolean indicating if WebGL context and program are ready
+     */
+    isValid(): boolean {
+        return this.gl !== null && this.program !== null;
+    }
+
+    /**
+     * Create a WebGL shader program.
+     * @param gl - WebGL context
+     * @param vsSource - Vertex shader source
+     * @param fsSource - Fragment shader source
+     * @returns WebGL program or null on failure
+     */
+    createShaderProgram(gl: WebGLRenderingContext, vsSource: string, fsSource: string): WebGLProgram | null {
+        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+        if (!vertexShader) return null;
+
+        gl.shaderSource(vertexShader, vsSource);
+        gl.compileShader(vertexShader);
+        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+            console.error('ComfyUI Magnifying Glass ERROR: Vertex shader compilation error:', gl.getShaderInfoLog(vertexShader));
+            gl.deleteShader(vertexShader);
+            return null;
+        }
+
+        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+        if (!fragmentShader) {
+            gl.deleteShader(vertexShader);
+            return null;
+        }
+
+        gl.shaderSource(fragmentShader, fsSource);
+        gl.compileShader(fragmentShader);
+        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+            console.error('ComfyUI Magnifying Glass ERROR: Fragment shader compilation error:', gl.getShaderInfoLog(fragmentShader));
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+            return null;
+        }
+
+        const program = gl.createProgram();
+        if (!program) {
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+            return null;
+        }
+
+        gl.attachShader(program, vertexShader);
+        gl.attachShader(program, fragmentShader);
+        gl.linkProgram(program);
+
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            console.error('ComfyUI Magnifying Glass ERROR: Shader program linking error:', gl.getProgramInfoLog(program));
+            gl.deleteProgram(program);
+            gl.deleteShader(vertexShader);
+            gl.deleteShader(fragmentShader);
+            return null;
+        }
+
+        return program;
+    }
+
+    /**
+     * Render the magnified view.
+     * @param sourceCanvas - The source canvas to sample from
+     */
+    render(sourceCanvas: HTMLCanvasElement): void {
+        if (!this.gl || !this.program || !this.texture || !this.uniformLocations || !this.attributeLocations) return;
+
+        // Bind texture and update with source canvas
+        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+
+        try {
+            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, sourceCanvas);
+        } catch (e) {
+            console.error("ComfyUI Magnifying Glass ERROR: Error in texImage2D:", e);
+            return;
+        }
+
+        // Calculate normalized texture coordinates (UV space: 0-1)
+        const uvX = this.state.sourceX / sourceCanvas.width;
+        const uvY = this.state.sourceY / sourceCanvas.height;
+        const uvWidth = this.state.sourceWidth / sourceCanvas.width;
+        const uvHeight = this.state.sourceHeight / sourceCanvas.height;
+
+        // Set up rendering
+        this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+        this.gl.clearColor(0.0, 0.0, 0.0, 0.0);
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+
+        this.gl.useProgram(this.program);
+
+        // Set uniforms
+        this.gl.activeTexture(this.gl.TEXTURE0);
+        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+        this.gl.uniform1i(this.uniformLocations.sourceTexture, 0);
+        this.gl.uniform2f(this.uniformLocations.textureOffset, uvX, uvY);
+        this.gl.uniform2f(this.uniformLocations.textureRepeat, uvWidth, uvHeight);
+        this.gl.uniform1f(this.uniformLocations.glassSize, this.config.glassSize);
+
+        // Set attributes
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+        this.gl.vertexAttribPointer(this.attributeLocations.position, 2, this.gl.FLOAT, false, 0, 0);
+        this.gl.enableVertexAttribArray(this.attributeLocations.position);
+
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
+        this.gl.vertexAttribPointer(this.attributeLocations.texCoord, 2, this.gl.FLOAT, false, 0, 0);
+        this.gl.enableVertexAttribArray(this.attributeLocations.texCoord);
+
+        // Draw
+        this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+    }
+
+    /**
+     * Check for WebGL errors.
+     * @param label - Debug label
+     * @returns True if error occurred
+     */
+    checkWebGLError(label: string): boolean {
+        if (!this.gl) return false;
+
+        const err = this.gl.getError();
+        if (err !== this.gl.NO_ERROR) {
+            console.error(`ComfyUI Magnifying Glass ERROR: WebGL Error (${label}):`, err);
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Update viewport when glass size changes.
+     */
+    updateViewport(): void {
+        if (this.gl) {
+            this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+        }
+    }
+}

src/magnify-glass/index.ts

@@ -0,0 +1,13 @@
+/**
+ * ComfyUI MagnifyGlass - Module Index (TypeScript)
+ * 
+ * Re-exports all magnify-glass components.
+ */
+
+export { MagnifyGlass } from './MagnifyGlass';
+export { MagnifierState } from './MagnifierState';
+export { ConfigManager } from './ConfigManager';
+export { UiManager } from './UiManager';
+export { WebGLRenderer } from './WebGLRenderer';
+export { DebugManager } from './DebugManager';
+export { EventHandler } from './EventHandler';

src/magnify_glass.ts

@@ -0,0 +1,27 @@
+/**
+ * ComfyUI Magnify Glass - Main Entry Point
+ * 
+ * Initializes the Magnify Glass extension.
+ */
+
+import { MagnifyGlass } from './magnify-glass';
+// @ts-ignore
+import { app } from "/scripts/app.js";
+
+// Global declaration handled in comfyui.d.ts
+
+// We rely on the global 'app' object provided by ComfyUI
+// Register extension
+app.registerExtension({
+    name: "comfyui.magnify.glass",
+    init() {
+        // Initialize the magnify glass
+        const magnifyGlass = new MagnifyGlass();
+        magnifyGlass.init();
+
+        // Expose to window for other extensions (like info panel) to access
+        window.comfyUIMagnifyGlass = magnifyGlass;
+
+        console.log("ComfyUI Magnify Glass: Extension initialized");
+    }
+});

src/magnify_info_panel.ts

@@ -0,0 +1,58 @@
+/**
+ * ComfyUI Magnify Info Panel - Main Entry Point
+ * 
+ * Initializes the Info Panel extension.
+ */
+
+import { InfoPanel } from './info-panel';
+// @ts-ignore
+import { app } from "/scripts/app.js";
+
+// We rely on the global 'app' object provided by ComfyUI
+// No need to import it as it's global, but TypeScript needs to know about it.
+// We handled this in types/comfyui.d.ts
+
+app.registerExtension({
+    name: "comfyui.magnify.info.panel",
+    init() {
+        // Wait for magnify glass to be available
+        const checkDependencies = () => {
+            if (window.comfyUIMagnifyGlass) {
+                initializeInfoPanel();
+            } else {
+                setTimeout(checkDependencies, 100);
+            }
+        };
+
+        checkDependencies();
+    }
+});
+
+function initializeInfoPanel() {
+    const magnifyGlass = window.comfyUIMagnifyGlass;
+    if (!magnifyGlass) {
+        console.error("ComfyUI Magnify Info Panel: Failed to find MagnifyGlass instance.");
+        return;
+    }
+
+    try {
+        // Initialize the info panel
+        const infoPanel = new InfoPanel(magnifyGlass);
+
+        // Expose orchestrator globally if needed
+        window.infoPanelManager = infoPanel as any;
+
+        // Load CSS
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.type = "text/css";
+        link.href = "extensions/comfyui-magnifyglass/style.css";
+        document.head.appendChild(link);
+        console.log("ComfyUI Magnify Info Panel: CSS loaded");
+
+        console.log("ComfyUI Magnify Info Panel: Extension initialized");
+    } catch (e) {
+        console.error("ComfyUI Magnify Info Panel: Error during initialization:", e);
+    }
+}
+

src/shared/constants.ts

@@ -0,0 +1,85 @@
+/**
+ * ComfyUI MagnifyGlass - Shared Constants
+ * 
+ * Configuration constants shared between magnify glass and info panel modules.
+ */
+
+// Glass positioning options
+export const GLASS_POSITIONS = [
+    "Top",
+    "Bottom",
+    "Left",
+    "Right",
+    "Top-Left",
+    "Top-Right",
+    "Bottom-Left",
+    "Bottom-Right"
+] as const;
+
+export type GlassPosition = typeof GLASS_POSITIONS[number];
+
+// Glass shape options
+export const GLASS_SHAPES = [
+    "Circle",
+    "Square",
+    "Rounded Square"
+] as const;
+
+export type GlassShape = typeof GLASS_SHAPES[number];
+
+// Texture filtering modes
+export const TEXTURE_FILTERS = [
+    "Linear",
+    "Nearest"
+] as const;
+
+export type TextureFilter = typeof TEXTURE_FILTERS[number];
+
+// Info panel positions relative to glass
+export const PANEL_POSITIONS = [
+    "Top",
+    "Bottom",
+    "Left",
+    "Right"
+] as const;
+
+export type PanelPosition = typeof PANEL_POSITIONS[number];
+
+// Available keys for settings
+export const ACTIVATION_KEYS = ["x", "z", "m", "q", "v", "c"] as const;
+export const RESET_KEYS = ["r", "o", "p", "k", "l"] as const;
+export const TOGGLE_FOLLOW_KEYS = ["f", "g", "h", "j", "k"] as const;
+
+// UI Constants
+export const DEFAULT_PADDING = 20;
+export const DEFAULT_GLASS_SIZE = 300;
+export const DEFAULT_ZOOM_FACTOR = 300; // 3x as percentage
+export const DEFAULT_BORDER_WIDTH = 1;
+export const DEFAULT_BORDER_COLOR = "#6b7280";
+export const DEFAULT_OFFSET_STEP = 5;
+
+// Panel Constants
+export const DEFAULT_PANEL_WIDTH = 320;
+export const DEFAULT_PANEL_MAX_HEIGHT = 1000;
+export const DEFAULT_PANEL_OPACITY = 100;
+
+// Z-Index hierarchy
+export const Z_INDEX = {
+    GLASS: 98999,
+    DEBUG: 99000,
+    PANEL: 99999,
+    CONTROLS: 99998
+} as const;
+
+// Animation durations (ms)
+export const ANIMATION = {
+    PANEL_TRANSITION: 300,
+    AUTO_COLLAPSE_DELAY: 1500,
+    THEME_DETECTION_INTERVAL: 2000
+} as const;
+
+// LocalStorage keys
+export const STORAGE_KEYS = {
+    OFFSET_X: 'comfyui_magnify_offset_x',
+    OFFSET_Y: 'comfyui_magnify_offset_y'
+} as const;

src/shared/index.ts

@@ -0,0 +1,3 @@
+export * from './constants';
+export * from './utils';
+export * from './settings';

src/shared/settings.ts

@@ -0,0 +1,700 @@
+/**
+ * ComfyUI MagnifyGlass - Settings Configuration
+ * 
+ * Centralized settings definitions and registration functions.
+ */
+
+// @ts-ignore
+import { app } from "/scripts/app.js";
+import {
+    DEFAULT_GLASS_SIZE,
+    DEFAULT_ZOOM_FACTOR,
+    DEFAULT_BORDER_WIDTH,
+    DEFAULT_BORDER_COLOR,
+    DEFAULT_OFFSET_STEP,
+    DEFAULT_PANEL_WIDTH,
+    DEFAULT_PANEL_MAX_HEIGHT,
+    DEFAULT_PANEL_OPACITY,
+    GLASS_POSITIONS,
+    GLASS_SHAPES,
+    ACTIVATION_KEYS,
+    RESET_KEYS,
+    TOGGLE_FOLLOW_KEYS,
+    PANEL_POSITIONS
+} from './constants';
+
+// Define the shape of our settings objects for better type safety
+export interface GlassSettings {
+    "🔍MagnifyGlass.ZoomFactor": number;
+    "🔍MagnifyGlass.GlassSize": number;
+    "🔍MagnifyGlass.BorderColor": string;
+    "🔍MagnifyGlass.BorderWidth": number;
+    "🔍MagnifyGlass.ActivationKey": string;
+    "🔍MagnifyGlass.AltRequired": boolean;
+    "🔍MagnifyGlass.FollowCursor": boolean;
+    "🔍MagnifyGlass.DebugMode": boolean;
+    "🔍MagnifyGlass.OffsetStep": number;
+    "🔍MagnifyGlass.GlassPosition": string;
+    "🔍MagnifyGlass.ResetKey": string;
+    "🔍MagnifyGlass.GlassShape": string;
+    "🔍MagnifyGlass.BorderEnabled": boolean;
+    "🔍MagnifyGlass.TextureFiltering": string;
+    "🔍MagnifyGlass.AlwaysActiveMode": boolean;
+    "🔍MagnifyGlass.ToggleFollowCursorKey": string;
+}
+
+export interface PanelSettings {
+    "🔍MagnifyGlass.InfoPanelEnabled": boolean;
+    "🔍MagnifyGlass.InfoPanelPosition": string;
+    "🔍MagnifyGlass.InfoPanelWidth": number;
+    "🔍MagnifyGlass.InfoPanelOpacity": number;
+    "🔍MagnifyGlass.InfoPanelMaxHeight": number;
+    "🔍MagnifyGlass.InfoPanelAnimations": boolean;
+    "🔍MagnifyGlass.ShowInspectorTab": boolean;
+    "🔍MagnifyGlass.ToggleHotkey": string;
+    "🔍MagnifyGlass.GlassPreviewToggleHotkey": string;
+    "🔍MagnifyGlass.PinPanelHotkey": string;
+    "🔍MagnifyGlass.ShowHoveringControls": boolean;
+    "🔍MagnifyGlass.ControlsPosition": string;
+    "🔍MagnifyGlass.InfoPanelTextColor": string;
+    "🔍MagnifyGlass.InfoPanelAccentColor": string;
+    [key: string]: any; // Allow indexing
+}
+
+/**
+ * Default settings for the magnify glass component.
+ */
+export const DEFAULT_GLASS_SETTINGS: GlassSettings = {
+    "🔍MagnifyGlass.ZoomFactor": DEFAULT_ZOOM_FACTOR,
+    "🔍MagnifyGlass.GlassSize": DEFAULT_GLASS_SIZE,
+    "🔍MagnifyGlass.BorderColor": DEFAULT_BORDER_COLOR,
+    "🔍MagnifyGlass.BorderWidth": DEFAULT_BORDER_WIDTH,
+    "🔍MagnifyGlass.ActivationKey": "x",
+    "🔍MagnifyGlass.AltRequired": false,
+    "🔍MagnifyGlass.FollowCursor": false,
+    "🔍MagnifyGlass.DebugMode": false,
+    "🔍MagnifyGlass.OffsetStep": DEFAULT_OFFSET_STEP,
+    "🔍MagnifyGlass.GlassPosition": "Top-Right",
+    "🔍MagnifyGlass.ResetKey": "o",
+    "🔍MagnifyGlass.GlassShape": "Rounded Square",
+    "🔍MagnifyGlass.BorderEnabled": true,
+    "🔍MagnifyGlass.TextureFiltering": "Linear",
+    "🔍MagnifyGlass.AlwaysActiveMode": true,
+    "🔍MagnifyGlass.ToggleFollowCursorKey": "h",
+};
+
+/**
+ * Default settings for the info panel component.
+ */
+export const DEFAULT_PANEL_SETTINGS: PanelSettings = {
+    "🔍MagnifyGlass.InfoPanelEnabled": true,
+    "🔍MagnifyGlass.InfoPanelPosition": "Bottom",
+    "🔍MagnifyGlass.InfoPanelWidth": DEFAULT_PANEL_WIDTH,
+    "🔍MagnifyGlass.InfoPanelOpacity": DEFAULT_PANEL_OPACITY,
+    "🔍MagnifyGlass.InfoPanelMaxHeight": DEFAULT_PANEL_MAX_HEIGHT,
+    "🔍MagnifyGlass.InfoPanelAnimations": false,
+    "🔍MagnifyGlass.ShowInspectorTab": false,
+    "🔍MagnifyGlass.ToggleHotkey": "i",
+    "🔍MagnifyGlass.GlassPreviewToggleHotkey": "g",
+    "🔍MagnifyGlass.PinPanelHotkey": "u",
+    "🔍MagnifyGlass.ShowHoveringControls": true,
+    "🔍MagnifyGlass.ControlsPosition": "bottom",
+    "🔍MagnifyGlass.InfoPanelTextColor": "#6b7280",
+    "🔍MagnifyGlass.InfoPanelAccentColor": "#3b82f6",
+};
+
+/**
+ * Register all magnify glass settings with ComfyUI.
+ * @param magnifyGlass - The MagnifyGlass instance
+ */
+export function registerGlassSettings(magnifyGlass: any): void {
+    const settings = DEFAULT_GLASS_SETTINGS;
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.ZoomFactor",
+        name: "🔍 Magnify Glass: Zoom Factor (%)",
+        type: "slider",
+        defaultValue: settings["🔍MagnifyGlass.ZoomFactor"],
+        min: 100,
+        max: 1000,
+        step: 25,
+        tooltip: "Magnification level as a percentage (e.g., 300 = 3x zoom, 150 = 1.5x zoom).",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.zoomFactor = typeof value === 'number' ? value / 100 : parseFloat(value) / 100;
+                if (magnifyGlass.state.active) {
+                    magnifyGlass.updateMagnifiedView();
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.GlassSize",
+        name: "🔍 Magnify Glass: Size (px)",
+        type: "slider",
+        defaultValue: settings["🔍MagnifyGlass.GlassSize"],
+        min: 50,
+        max: 100,
+        step: 10,
+        tooltip: "Diameter of the magnifying glass circle in pixels.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.glassSize = parseInt(String(value), 10);
+                magnifyGlass.applyUiChanges();
+                if (magnifyGlass.state.active) {
+                    magnifyGlass.updateMagnifiedView();
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.BorderWidth",
+        name: "🔍 Magnify Glass: Border Width (px)",
+        type: "slider",
+        defaultValue: settings["🔍MagnifyGlass.BorderWidth"],
+        min: 0,
+        max: 10,
+        step: 0.1,
+        tooltip: "Width of the border around the magnifying glass.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.borderWidth = parseFloat(String(value));
+                magnifyGlass.applyUiChanges();
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.BorderColor",
+        name: "🎨 Magnify Glass: Border Color",
+        type: "color",
+        defaultValue: settings["🔍MagnifyGlass.BorderColor"],
+        tooltip: "Color of the border around the magnifying glass.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                const strValue = String(value);
+                const normalizedColor = strValue && !strValue.startsWith('#') ? `#${strValue}` : strValue;
+                magnifyGlass.config.borderColor = normalizedColor;
+                if (strValue !== normalizedColor) {
+                    try {
+                        app.ui.settings.setSettingValue("🔍MagnifyGlass.BorderColor", normalizedColor);
+                    } catch (e) {
+                        console.warn('Failed to save normalized border color:', e);
+                    }
+                }
+                magnifyGlass.applyUiChanges();
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.ActivationKey",
+        name: "⌨️ Magnify Glass: Activation Key",
+        type: "combo",
+        options: ACTIVATION_KEYS.map(k => ({ value: k, text: k })), // Assuming ACTIVATION_KEYS is simply an array of strings
+        defaultValue: settings["🔍MagnifyGlass.ActivationKey"],
+        tooltip: "The key to activate the magnifier.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.activationKey = String(value).toLowerCase();
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.AltRequired",
+        name: "⌨️ Magnify Glass: Require Alt/Option Key",
+        type: "combo",
+        options: [{ value: true, text: "Yes" }, { value: false, text: "No" }],
+        defaultValue: settings["🔍MagnifyGlass.AltRequired"],
+        tooltip: "If Yes, Alt (Windows/Linux) or Option (Mac) must be held for activation.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.altRequired = !!value;
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.FollowCursor",
+        name: "🖱️ Magnify Glass: Follow Cursor Position",
+        type: "combo",
+        options: [{ value: true, text: "Yes" }, { value: false, text: "No" }],
+        defaultValue: settings["🔍MagnifyGlass.FollowCursor"],
+        tooltip: "If Yes, the magnifier window moves with the cursor.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.followCursor = !!value;
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.OffsetStep",
+        name: "⌨️ Magnify Glass: Offset Adjust Step",
+        type: "slider",
+        defaultValue: settings["🔍MagnifyGlass.OffsetStep"],
+        min: 1,
+        max: 50,
+        step: 1,
+        tooltip: "How many graph units the view shifts when pressing arrow keys.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.offsetStep = parseInt(String(value), 10);
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.ResetKey",
+        name: "⌨️ Magnify Glass: Reset Offset Key",
+        type: "combo",
+        options: RESET_KEYS.map(k => ({ value: k, text: k })),
+        defaultValue: settings["🔍MagnifyGlass.ResetKey"],
+        tooltip: "The key to reset the magnify glass offset to default.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.resetKey = String(value).toLowerCase();
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.DebugMode",
+        name: "🐞 Magnify Glass: Debug Mode",
+        type: "combo",
+        options: [{ value: true, text: "Enabled" }, { value: false, text: "Disabled" }],
+        defaultValue: settings["🔍MagnifyGlass.DebugMode"],
+        tooltip: "Show detailed logging and the debug visualization overlay.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.debugMode = !!value;
+                magnifyGlass.applyUiChanges();
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.GlassPosition",
+        name: "🖱️ Magnify Glass: Glass Position",
+        type: "combo",
+        options: GLASS_POSITIONS.map(p => ({ value: p, text: p === "Bottom" ? "Bottom (Default)" : p })),
+        defaultValue: settings["🔍MagnifyGlass.GlassPosition"],
+        tooltip: "Position of the magnifying glass relative to the cursor.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.glassPosition = String(value);
+                if (magnifyGlass.state.active && !magnifyGlass.config.followCursor) {
+                    const { x, y } = magnifyGlass.lastKnownMousePosition;
+                    magnifyGlass.ui.positionGlass(x, y);
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.GlassShape",
+        name: "🖼️ Magnify Glass: Shape",
+        type: "combo",
+        options: GLASS_SHAPES.map(s => ({ value: s, text: s })),
+        defaultValue: settings["🔍MagnifyGlass.GlassShape"],
+        tooltip: "Shape of the magnifying glass.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.glassShape = String(value);
+                magnifyGlass.applyUiChanges();
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.BorderEnabled",
+        name: "🖼️ Magnify Glass: Show Border",
+        type: "combo",
+        options: [{ value: true, text: "Yes" }, { value: false, text: "No" }],
+        defaultValue: settings["🔍MagnifyGlass.BorderEnabled"],
+        tooltip: "Enable or disable the border around the magnifying glass.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.borderEnabled = !!value;
+                magnifyGlass.applyUiChanges();
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.TextureFiltering",
+        name: "🖼️ Magnify Glass: Texture Filtering",
+        type: "combo",
+        options: [
+            { value: "Linear", text: "Linear (Smooth)" },
+            { value: "Nearest", text: "Nearest (Pixelated)" }
+        ],
+        defaultValue: settings["🔍MagnifyGlass.TextureFiltering"],
+        tooltip: "Controls how the magnified image is scaled.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config && magnifyGlass.renderer) {
+                magnifyGlass.config.textureFiltering = String(value);
+                magnifyGlass.renderer.updateTextureFiltering(value);
+                if (magnifyGlass.state.active) {
+                    magnifyGlass.updateMagnifiedView();
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.AlwaysActiveMode",
+        name: "🔒 Magnify Glass: Always Active Mode",
+        type: "combo",
+        options: [{ value: true, text: "Yes" }, { value: false, text: "No" }],
+        defaultValue: settings["🔍MagnifyGlass.AlwaysActiveMode"],
+        tooltip: "If Yes, activating the magnifier keeps it on until activated again.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.alwaysActiveMode = !!value;
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.ToggleFollowCursorKey",
+        name: "🔑 Magnify Glass: Toggle Follow Key",
+        type: "combo",
+        options: TOGGLE_FOLLOW_KEYS.map(k => ({ value: k, text: k })),
+        defaultValue: settings["🔍MagnifyGlass.ToggleFollowCursorKey"],
+        tooltip: "The key to toggle the 'Follow Cursor' behavior.",
+        onChange: (value: any) => {
+            if (magnifyGlass?.config) {
+                magnifyGlass.config.toggleFollowCursorKey = String(value).toLowerCase();
+            }
+        }
+    });
+}
+
+/**
+ * Register all info panel settings with ComfyUI.
+ * @param stateManager - The StateManager instance for the info panel
+ * @param uiManager - The UIManager instance for the info panel
+ * @param positionManager - The PositionManager instance for the info panel
+ */
+export function registerPanelSettings(stateManager: any, uiManager: any, positionManager: any): void {
+    const settings = DEFAULT_PANEL_SETTINGS;
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.InfoPanelEnabled",
+        name: "📊 Info Panel: Enable",
+        type: "combo",
+        options: [{ value: true, text: "Yes" }, { value: false, text: "No" }],
+        defaultValue: settings["🔍MagnifyGlass.InfoPanelEnabled"],
+        tooltip: "Enable or disable the information panel.",
+        onChange: (value: any) => {
+            if (stateManager) {
+                stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"] = !!value;
+                if (!value && uiManager) {
+                    uiManager.hide();
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.InfoPanelPosition",
+        name: "📊 Info Panel: Position",
+        type: "combo",
+        options: PANEL_POSITIONS.map(p => ({ value: p, text: p })),
+        defaultValue: settings["🔍MagnifyGlass.InfoPanelPosition"],
+        tooltip: "Position of the info panel relative to the magnifying glass.",
+        onChange: (value: any) => {
+            if (stateManager) {
+                stateManager.state.settings["🔍MagnifyGlass.InfoPanelPosition"] = String(value);
+                if (positionManager) {
+                    positionManager.positionPanel();
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.InfoPanelWidth",
+        name: "📊 Info Panel: Width (px)",
+        type: "slider",
+        defaultValue: settings["🔍MagnifyGlass.InfoPanelWidth"],
+        min: 200,
+        max: 600,
+        step: 20,
+        tooltip: "Width of the information panel in pixels.",
+        onChange: (value: any) => {
+            if (stateManager) {
+                stateManager.state.settings["🔍MagnifyGlass.InfoPanelWidth"] = parseInt(String(value), 10);
+                if (uiManager) {
+                    uiManager.applyStyles();
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.InfoPanelOpacity",
+        name: "📊 Info Panel: Opacity (%)",
+        type: "slider",
+        defaultValue: settings["🔍MagnifyGlass.InfoPanelOpacity"],
+        min: 10,
+        max: 100,
+        step: 5,
+        tooltip: "Opacity of the information panel background.",
+        onChange: (value: any) => {
+            if (stateManager) {
+                stateManager.state.settings["🔍MagnifyGlass.InfoPanelOpacity"] = parseInt(String(value), 10);
+                if (uiManager) {
+                    uiManager.applyStyles();
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.InfoPanelMaxHeight",
+        name: "📊 Info Panel: Max Height (px)",
+        type: "slider",
+        defaultValue: settings["🔍MagnifyGlass.InfoPanelMaxHeight"],
+        min: 200,
+        max: 1500,
+        step: 50,
+        tooltip: "Maximum height of the information panel in pixels.",
+        onChange: (value: any) => {
+            if (stateManager) {
+                stateManager.state.settings["🔍MagnifyGlass.InfoPanelMaxHeight"] = parseInt(String(value), 10);
+                if (uiManager) {
+                    uiManager.applyStyles();
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.InfoPanelAnimations",
+        name: "📊 Info Panel: Animations",
+        type: "combo",
+        options: [{ value: true, text: "Enabled" }, { value: false, text: "Disabled" }],
+        defaultValue: settings["🔍MagnifyGlass.InfoPanelAnimations"],
+        tooltip: "Enable or disable animations for the info panel.",
+        onChange: (value: any) => {
+            if (stateManager) {
+                stateManager.state.settings["🔍MagnifyGlass.InfoPanelAnimations"] = !!value;
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.ShowInspectorTab",
+        name: "📊 Info Panel: Show Inspector Tab",
+        type: "combo",
+        options: [{ value: true, text: "Yes" }, { value: false, text: "No" }],
+        defaultValue: settings["🔍MagnifyGlass.ShowInspectorTab"],
+        tooltip: "Show or hide the Inspector tab with cursor and canvas information.",
+        onChange: (value: any) => {
+            if (stateManager) {
+                stateManager.state.settings["🔍MagnifyGlass.ShowInspectorTab"] = !!value;
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.ShowHoveringControls",
+        name: "📊 Info Panel: Show Hover Controls",
+        type: "combo",
+        options: [{ value: true, text: "Yes" }, { value: false, text: "No" }],
+        defaultValue: settings["🔍MagnifyGlass.ShowHoveringControls"],
+        tooltip: "Show or hide hovering UI controls above the info panel.",
+        onChange: (value: any) => {
+            if (stateManager) {
+                stateManager.state.settings["🔍MagnifyGlass.ShowHoveringControls"] = !!value;
+                if (uiManager && uiManager.elements.controls) {
+                    uiManager.elements.controls.style.display = value ? 'flex' : 'none';
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.InfoPanelTextColor",
+        name: "🎨 Info Panel: Text Color",
+        type: "color",
+        defaultValue: settings["🔍MagnifyGlass.InfoPanelTextColor"],
+        tooltip: "Custom text color for the info panel.",
+        onChange: (value: any) => {
+            if (stateManager) {
+                const strValue = String(value);
+                const normalizedColor = strValue && !strValue.startsWith('#') ? `#${strValue}` : strValue;
+                stateManager.state.settings["🔍MagnifyGlass.InfoPanelTextColor"] = normalizedColor;
+                if (uiManager) {
+                    uiManager.applyStyles();
+                }
+            }
+        }
+    });
+
+    app.ui.settings.addSetting({
+        id: "🔍MagnifyGlass.InfoPanelAccentColor",
+        name: "🎨 Info Panel: Accent Color",
+        type: "color",
+        defaultValue: settings["🔍MagnifyGlass.InfoPanelAccentColor"],
+        tooltip: "Custom accent color for the info panel.",
+        onChange: (value: any) => {
+            if (stateManager) {
+                const strValue = String(value);
+                const normalizedColor = strValue && !strValue.startsWith('#') ? `#${strValue}` : strValue;
+                stateManager.state.settings["🔍MagnifyGlass.InfoPanelAccentColor"] = normalizedColor;
+                if (uiManager) {
+                    uiManager.applyStyles();
+                }
+            }
+        }
+    });
+}
+
+/**
+ * Get a setting configuration object for ComfyUI settings registration.
+ * This function generates the setting config based on the key and default value.
+ * 
+ * @param key - The setting key
+ * @param defaultValue - The default value for the setting
+ * @returns The setting configuration or null if not found
+ */
+export function getSettingConfig(key: string, defaultValue: any): any {
+    const configs: Record<string, any> = {
+        "🔍MagnifyGlass.InfoPanelEnabled": {
+            id: key,
+            name: "📋 Magnify Glass: Info Panel",
+            type: "combo",
+            options: [
+                { value: true, text: "Enabled" },
+                { value: false, text: "Disabled" }
+            ],
+            defaultValue,
+            tooltip: "Enable or disable the professional information panel."
+        },
+        "🔍MagnifyGlass.InfoPanelPosition": {
+            id: key,
+            name: "📋 Info Panel: Position",
+            type: "combo",
+            options: PANEL_POSITIONS.map(pos => ({ value: pos, text: pos })),
+            defaultValue,
+            tooltip: "Position of the info panel relative to the magnify glass."
+        },
+        "🔍MagnifyGlass.InfoPanelWidth": {
+            id: key,
+            name: "📋 Info Panel: Width (px)",
+            type: "slider",
+            defaultValue,
+            min: 200,
+            max: 600,
+            step: 20,
+            tooltip: "Width of the info panel in pixels."
+        },
+        "🔍MagnifyGlass.InfoPanelMaxHeight": {
+            id: key,
+            name: "📋 Info Panel: Max Height (px)",
+            type: "slider",
+            defaultValue,
+            min: 200,
+            max: 1500,
+            step: 50,
+            tooltip: "Maximum height of the info panel."
+        },
+        "🔍MagnifyGlass.InfoPanelOpacity": {
+            id: key,
+            name: "📋 Info Panel: Opacity (%)",
+            type: "slider",
+            defaultValue,
+            min: 10,
+            max: 100,
+            step: 5,
+            tooltip: "Opacity of the info panel background."
+        },
+        "🔍MagnifyGlass.InfoPanelAnimations": {
+            id: key,
+            name: "📋 Info Panel: Animations",
+            type: "combo",
+            options: [
+                { value: true, text: "Enabled" },
+                { value: false, text: "Disabled" }
+            ],
+            defaultValue,
+            tooltip: "Enable smooth animations for the info panel."
+        },
+        "🔍MagnifyGlass.ShowInspectorTab": {
+            id: key,
+            name: "📋 Info Panel: Show Inspector",
+            type: "combo",
+            options: [
+                { value: true, text: "Yes" },
+                { value: false, text: "No" }
+            ],
+            defaultValue,
+            tooltip: "Show the inspector tab with cursor and canvas information."
+        },
+        "🔍MagnifyGlass.ToggleHotkey": {
+            id: key,
+            name: "📋 Info Panel: Toggle Hotkey",
+            type: "combo",
+            options: ["i", "j", "k", "l", "n", "m"].map(k => ({ value: k, text: k.toUpperCase() })),
+            defaultValue,
+            tooltip: "Key to toggle the info panel visibility."
+        },
+        "🔍MagnifyGlass.GlassPreviewToggleHotkey": {
+            id: key,
+            name: "📋 Info Panel: Glass Toggle Hotkey",
+            type: "combo",
+            options: ["g", "f", "v", "b"].map(k => ({ value: k, text: k.toUpperCase() })),
+            defaultValue,
+            tooltip: "Key to toggle the magnify glass preview visibility."
+        },
+        "🔍MagnifyGlass.PinPanelHotkey": {
+            id: key,
+            name: "📋 Info Panel: Pin Hotkey",
+            type: "combo",
+            options: ["u", "p", "y", "t"].map(k => ({ value: k, text: k.toUpperCase() })),
+            defaultValue,
+            tooltip: "Key to pin/unlock the info panel at the current mouse location."
+        },
+        "🔍MagnifyGlass.ShowHoveringControls": {
+            id: key,
+            name: "📋 Info Panel: Floating Controls",
+            type: "combo",
+            options: [
+                { value: true, text: "Show" },
+                { value: false, text: "Hide" }
+            ],
+            defaultValue,
+            tooltip: "Show floating control buttons near the info panel."
+        },
+        "🔍MagnifyGlass.ControlsPosition": {
+            id: key,
+            name: "📋 Info Panel: Controls Position",
+            type: "combo",
+            options: ["top-left", "top-right", "bottom-left", "bottom-right", "top", "bottom", "left", "right"].map(p => ({ value: p, text: p })),
+            defaultValue,
+            tooltip: "Position of the floating control buttons."
+        },
+        "🔍MagnifyGlass.InfoPanelTextColor": {
+            id: key,
+            name: "🎨 Info Panel: Text Color",
+            type: "color",
+            defaultValue,
+            tooltip: "Color for text in the info panel."
+        },
+        "🔍MagnifyGlass.InfoPanelAccentColor": {
+            id: key,
+            name: "🎨 Info Panel: Accent Color",
+            type: "color",
+            defaultValue,
+            tooltip: "Accent color for highlights in the info panel."
+        }
+    };
+
+    return configs[key] || null;
+}

src/shared/utils.ts

@@ -0,0 +1,161 @@
+/**
+ * ComfyUI MagnifyGlass - Shared Utilities
+ * 
+ * Common utility functions shared between magnify glass and info panel modules.
+ */
+
+import type { ComfyApp } from '../types/comfyui';
+
+// Reference to ComfyUI's app - will be set at runtime
+// @ts-ignore
+import { app } from "/scripts/app.js";
+
+/**
+ * Rectangle interface for overlap calculations
+ */
+export interface Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+/**
+ * Debug logger interface
+ */
+export interface DebugLogger {
+    log(...args: unknown[]): void;
+    error(...args: unknown[]): void;
+}
+
+/**
+ * Safely get a setting value from ComfyUI settings with fallback to default.
+ * @param key - The setting key
+ * @param defaultValue - Default value if setting not found
+ * @returns The setting value or default
+ */
+export function getSettingValue<T>(key: string, defaultValue: T): T {
+    try {
+        const value = app.ui.settings.getSettingValue(key);
+        return value === undefined ? defaultValue : value as T;
+    } catch (e) {
+        console.warn(`ComfyUI Magnifying Glass: Could not get setting ${key}, using default ${defaultValue}. Error: ${e}`);
+        return defaultValue;
+    }
+}
+
+/**
+ * Check if the user is currently typing in an input field.
+ * Used for smart input detection to avoid triggering hotkeys while typing.
+ * @returns True if user is typing in an input field
+ */
+export function isUserTyping(): boolean {
+    const activeElement = document.activeElement as HTMLElement | null;
+    if (!activeElement) return false;
+
+    // Check if the active element is an input, textarea, or contenteditable
+    const tagName = activeElement.tagName.toLowerCase();
+    if (tagName === 'input' || tagName === 'textarea') {
+        return true;
+    }
+
+    // Check for contenteditable elements
+    if (activeElement.contentEditable === 'true') {
+        return true;
+    }
+
+    // Check if it's inside a form or has input-like classes
+    if (activeElement.closest('form') ||
+        activeElement.classList.contains('cm-editor') || // CodeMirror editor
+        activeElement.classList.contains('monaco-editor') || // Monaco editor
+        activeElement.closest('.cm-editor') ||
+        activeElement.closest('.monaco-editor')) {
+        return true;
+    }
+
+    return false;
+}
+
+/**
+ * Check if two rectangles overlap.
+ * @param rect1 - First rectangle
+ * @param rect2 - Second rectangle
+ * @returns True if rectangles overlap
+ */
+export function rectsOverlap(rect1: Rectangle, rect2: Rectangle): boolean {
+    return rect1.x < rect2.x + rect2.width &&
+        rect1.x + rect1.width > rect2.x &&
+        rect1.y < rect2.y + rect2.height &&
+        rect1.y + rect1.height > rect2.y;
+}
+
+/**
+ * Find the LiteGraph canvas element in the DOM.
+ * Tries multiple selectors for compatibility with different ComfyUI versions.
+ * @returns The canvas element or null if not found
+ */
+export function findLiteGraphCanvas(): HTMLCanvasElement | null {
+    // Try multiple selectors for compatibility
+    const canvas = document.getElementById("graph-canvas") as HTMLCanvasElement | null;
+    if (canvas) return canvas;
+
+    const graphCanvas = document.querySelector("canvas.graphcanvas") as HTMLCanvasElement | null;
+    if (graphCanvas) return graphCanvas;
+
+    // Try canvas manager (dynamic access for ComfyUI compatibility)
+    const appAny = app as any;
+    if (appAny?.canvas_manager?.container) {
+        const managerCanvas = appAny.canvas_manager.container.querySelector("canvas") as HTMLCanvasElement | null;
+        if (managerCanvas) return managerCanvas;
+    }
+
+    // Try direct canvas reference
+    if (appAny?.canvas?.graph_canvas) {
+        return appAny.canvas.graph_canvas;
+    }
+
+    return null;
+}
+
+/**
+ * Normalize a color value to include the # symbol for CSS.
+ * @param color - The color value (with or without #)
+ * @returns The normalized color with # prefix
+ */
+export function normalizeColor(color: string | null | undefined): string {
+    if (!color) return color ?? '';
+    return color.startsWith('#') ? color : `#${color}`;
+}
+
+/**
+ * Clamp a value between min and max bounds.
+ * @param value - The value to clamp
+ * @param min - Minimum bound
+ * @param max - Maximum bound
+ * @returns The clamped value
+ */
+export function clamp(value: number, min: number, max: number): number {
+    return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Create a debug logger that only logs when debug mode is enabled.
+ * @param prefix - Prefix for log messages
+ * @param isDebugEnabled - Function that returns whether debug is enabled
+ * @returns Logger object
+ */
+export function createDebugLogger(
+    prefix: string,
+    isDebugEnabled: () => boolean
+): DebugLogger {
+    return {
+        log(...args: unknown[]): void {
+            if (isDebugEnabled()) {
+                console.log(`${prefix}:`, ...args);
+            }
+        },
+        error(...args: unknown[]): void {
+            console.error(`${prefix} ERROR:`, ...args);
+        }
+    };
+}

src/types/comfy-scripts.d.ts

@@ -0,0 +1,11 @@
+declare module "../../scripts/app.js" {
+    export const app: any;
+}
+
+declare module "../../scripts/ui.js" {
+    export const ui: any;
+}
+
+declare module "../../scripts/api.js" {
+    export const api: any;
+}

src/types/comfyui.d.ts

@@ -0,0 +1,264 @@
+/**
+ * ComfyUI Type Definitions
+ * 
+ * Type definitions for ComfyUI's app, canvas, and graph APIs.
+ * These types are based on the runtime behavior of ComfyUI.
+ */
+
+// ============================================================================
+// ComfyUI App
+// ============================================================================
+
+export interface ComfyApp {
+    graph: ComfyGraph;
+    canvas: ComfyCanvas;
+    ui: ComfyUI;
+    extensionManager: ComfyExtensionManager;
+    registerExtension(extension: ComfyExtension): void;
+}
+
+export interface ComfyExtension {
+    name: string;
+    setup?: () => Promise<void> | void;
+    init?: () => Promise<void> | void;
+    commands?: ComfyCommand[];
+    keybindings?: ComfyKeybinding[];
+    menuCommands?: ComfyMenuCommand[];
+    settings?: ComfySetting[];
+    bottomPanelTabs?: ComfyBottomPanelTab[];
+    aboutPageBadges?: ComfyBadge[];
+    getSelectionToolboxCommands?: (selectedItem: unknown) => string[];
+}
+
+export interface ComfyCommand {
+    id: string;
+    label?: string;
+    icon?: string;
+    function: () => void;
+}
+
+export interface ComfyKeybinding {
+    combo: {
+        key: string;
+        alt?: boolean;
+        ctrl?: boolean;
+        shift?: boolean;
+        meta?: boolean;
+    };
+    commandId: string;
+}
+
+export interface ComfyMenuCommand {
+    path: string[];
+    commands: string[];
+}
+
+export interface ComfySetting {
+    id: string;
+    name: string;
+    type: 'text' | 'number' | 'slider' | 'combo' | 'color' | 'boolean';
+    defaultValue: unknown;
+    min?: number;
+    max?: number;
+    step?: number;
+    options?: Array<{ value: unknown; text: string }>;
+    tooltip?: string;
+    onChange?: (value: unknown) => void;
+}
+
+export interface ComfyBottomPanelTab {
+    id: string;
+    title: string;
+    type: 'custom';
+    render: (el: HTMLElement) => void;
+}
+
+export interface ComfyBadge {
+    label: string;
+    url: string;
+    icon: string;
+}
+
+// ============================================================================
+// ComfyUI UI
+// ============================================================================
+
+export interface ComfyUI {
+    settings: ComfySettings;
+}
+
+export interface ComfySettings {
+    addSetting(setting: ComfySetting): void;
+    getSettingValue(id: string): unknown;
+    setSettingValue(id: string, value: unknown): void;
+}
+
+// ============================================================================
+// ComfyUI Extension Manager
+// ============================================================================
+
+export interface ComfyExtensionManager {
+    setting: {
+        get(id: string): unknown;
+        set(id: string, value: unknown): void;
+    };
+    toast: ComfyToast;
+    dialog: ComfyDialog;
+    registerSidebarTab(tab: ComfySidebarTab): void;
+}
+
+export interface ComfySidebarTab {
+    id: string;
+    icon: string;
+    title: string;
+    tooltip: string;
+    type: 'custom';
+    render: (el: HTMLElement) => void;
+}
+
+export interface ComfyToast {
+    add(options: ComfyToastOptions): void;
+    addAlert(message: string): void;
+}
+
+export interface ComfyToastOptions {
+    severity: 'success' | 'info' | 'warn' | 'error';
+    summary: string;
+    detail: string;
+    life?: number;
+}
+
+export interface ComfyDialog {
+    prompt(options: { title: string; message: string }): Promise<string>;
+    confirm(options: { title: string; message: string }): Promise<boolean>;
+}
+
+// ============================================================================
+// ComfyUI Graph
+// ============================================================================
+
+export interface ComfyGraph {
+    _nodes: ComfyNode[];
+    getNodeById(id: number): ComfyNode | null;
+}
+
+export interface ComfyNode {
+    id: number;
+    title: string;
+    type: string;
+    mode: number;
+    pos: [number, number];
+    size: [number, number];
+    flags?: {
+        collapsed?: boolean;
+    };
+    widgets?: ComfyWidget[];
+    inputs?: ComfySlot[];
+    outputs?: ComfySlot[];
+    properties?: Record<string, unknown>;
+}
+
+export interface ComfyWidget {
+    name: string;
+    type: string;
+    value: unknown;
+    options?: Record<string, unknown>;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+
+export interface ComfySlot {
+    name: string;
+    type: string;
+    link?: number | null;
+    links?: number[];
+}
+
+// ============================================================================
+// ComfyUI Canvas
+// ============================================================================
+
+export interface ComfyCanvas {
+    canvas: HTMLCanvasElement;
+    ds: {
+        scale: number;
+        offset: [number, number];
+    };
+    node_over: ComfyNode | null;
+    convertOffsetToCanvasPos?(pos: [number, number]): [number, number];
+}
+
+// ============================================================================
+// Global Window Extensions
+// ============================================================================
+
+declare global {
+    interface Window {
+        comfyUIMagnifyGlass?: MagnifyGlassInstance;
+        comfyUIMagnifyGlassExtensions?: unknown[];
+        infoPanelManager?: { uiManager?: { updateTheme: (theme: string) => void } };
+    }
+
+    var app: ComfyApp;
+}
+
+export interface MagnifyGlassInstance {
+    state: MagnifyGlassState;
+    config: MagnifyGlassConfig;
+    ui: MagnifyGlassUI;
+    renderer: MagnifyGlassRenderer | null;
+    lastKnownMousePosition: { x: number; y: number };
+    isOverMedia: boolean;
+    currentMediaElement: HTMLImageElement | HTMLVideoElement | null;
+    updateMagnifiedView(): void;
+    applyUiChanges(): void;
+    toggle(): void;
+}
+
+export interface MagnifyGlassState {
+    active: boolean;
+    x: number;
+    y: number;
+    sourceX: number;
+    sourceY: number;
+    sourceWidth: number;
+    sourceHeight: number;
+    canvasScale: number;
+    canvasOffsetX: number;
+    canvasOffsetY: number;
+}
+
+export interface MagnifyGlassConfig {
+    zoomFactor: number;
+    glassSize: number;
+    borderColor: string;
+    borderWidth: number;
+    borderEnabled: boolean;
+    activationKey: string;
+    altRequired: boolean;
+    followCursor: boolean;
+    debugMode: boolean;
+    offsetStep: number;
+    offsetX: number;
+    offsetY: number;
+    glassPosition: string;
+    glassShape: string;
+    resetKey: string;
+    textureFiltering: string;
+    alwaysActiveMode: boolean;
+    toggleFollowCursorKey: string;
+}
+
+export interface MagnifyGlassUI {
+    glassDiv: HTMLDivElement | null;
+    show(): void;
+    hide(): void;
+    positionGlass(x: number, y: number): void;
+}
+
+export interface MagnifyGlassRenderer {
+    updateTextureFiltering(filtering: string): void;
+}
+
+export { };

src/types/vue-shims.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue'
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

tests/e2e/example.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test('magnify glass extension loads', async ({ page }) => {
+    // This is a placeholder test.
+    // To test ComfyUI, you would typically need to start the ComfyUI server and navigate to it.
+    // console.log('This test needs a running ComfyUI instance to verify the extension.');
+
+    // Example of what we might check if ComfyUI was running locally:
+    // await page.goto('http://127.0.0.1:8188');
+    // await expect(page).toHaveTitle(/ComfyUI/);
+    // await expect(page.locator('.magnify-glass-icon')).toBeVisible(); // Hypothetical check
+});

tests/unit/ComfyPanel.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ComfyPanel from '../../src/components/ComfyPanel.vue';
+
+describe('ComfyPanel.vue', () => {
+    it('renders title correctly', () => {
+        const title = 'Test Panel';
+        const wrapper = mount(ComfyPanel, {
+            props: { title }
+        });
+        expect(wrapper.find('h1').text()).toBe(title);
+    });
+
+    it('renders slot content', () => {
+        const wrapper = mount(ComfyPanel, {
+            slots: {
+                default: '<div class="test-content">Content</div>'
+            }
+        });
+        expect(wrapper.find('.test-content').exists()).toBe(true);
+    });
+
+    it('applies theme class', () => {
+        const wrapper = mount(ComfyPanel, {
+            props: { theme: 'light' }
+        });
+        expect(wrapper.classes()).toContain('theme-light');
+    });
+});

tests/unit/InfoPanel.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import InfoPanel from '../../src/info-panel/components/InfoPanel.vue';
+
+describe('InfoPanel.vue', () => {
+    it('is initially hidden if initialVisible is false', () => {
+        const wrapper = mount(InfoPanel, {
+            props: { initialVisible: false }
+        });
+        expect(wrapper.find('.mag-info-panel').exists()).toBe(false);
+    });
+
+    it('renders node info when hoveredNode is present', async () => {
+        const wrapper = mount(InfoPanel, {
+            props: { initialVisible: true }
+        });
+
+        // Simulate state update (since component uses internal ref, we need to access exposed method or setup state)
+        // In our component definition, we returned `updateState`.
+        // However, simpler for this test is to modify the internal state if we can, or refactor component to take props.
+        // Given the component uses `visible` ref initialized from prop, checking it exists is tricky if it's strictly v-if.
+
+        // Let's rely on the fact that we can interact with the component instance
+        const vm = wrapper.vm as any;
+        vm.visible = true;
+        vm.hoveredNode = { id: 123, title: 'Test Node', type: 'TestType' };
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.text()).toContain('Test Node');
+        expect(wrapper.text()).toContain('ID:');
+        expect(wrapper.text()).toContain('123');
+    });
+
+    it('toggles pin state', async () => {
+        const wrapper = mount(InfoPanel, {
+            props: { initialVisible: true }
+        });
+        const vm = wrapper.vm as any;
+        vm.visible = true;
+        await wrapper.vm.$nextTick();
+
+        const pinBtn = wrapper.find('button');
+        expect(vm.pinned).toBe(false);
+
+        await pinBtn.trigger('click');
+        expect(vm.pinned).toBe(true);
+    });
+});

tests/unit/utils.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { clamp, normalizeColor } from '../../src/shared/utils';
+
+describe('Shared Utilities', () => {
+    describe('clamp', () => {
+        it('should clamp value within range', () => {
+            expect(clamp(150, 0, 100)).toBe(100);
+            expect(clamp(-50, 0, 100)).toBe(0);
+            expect(clamp(50, 0, 100)).toBe(50);
+        });
+    });
+
+    describe('normalizeColor', () => {
+        it('should add # prefix if missing', () => {
+            expect(normalizeColor('ffffff')).toBe('#ffffff');
+            expect(normalizeColor('000')).toBe('#000');
+        });
+
+        it('should keep # prefix if present', () => {
+            expect(normalizeColor('#ff0000')).toBe('#ff0000');
+        });
+
+        it('should handle falsy values', () => {
+            expect(normalizeColor('')).toBe('');
+            // @ts-ignore
+            expect(normalizeColor(null)).toBe(null);
+        });
+    });
+});

tsconfig.json

@@ -0,0 +1,44 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "lib": [
+            "ES2022",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "strict": true,
+        "noEmit": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "allowSyntheticDefaultImports": true,
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "baseUrl": ".",
+        "paths": {
+            "@shared/*": [
+                "src/shared/*"
+            ],
+            "@magnify-glass/*": [
+                "src/magnify-glass/*"
+            ],
+            "@info-panel/*": [
+                "src/info-panel/*"
+            ]
+        }
+    },
+    "include": [
+        "src/**/*.ts",
+        "src/**/*.d.ts"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist",
+        "web"
+    ]
+}

vite.config.ts

@@ -0,0 +1,47 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    define: {
+        'process.env': {}
+    },
+    plugins: [vue()],
+    build: {
+        lib: {
+            entry: {
+                'magnify_glass': resolve(__dirname, 'src/magnify_glass.ts'),
+                'magnify_info_panel': resolve(__dirname, 'src/magnify_info_panel.ts')
+            },
+            formats: ['es'],
+            fileName: (format, entryName) => `${entryName}.js`
+        },
+        outDir: 'web',
+        emptyOutDir: false, // Keep existing files
+        rollupOptions: {
+            external: [
+                /^\/scripts\//,                  // Match /scripts/ (Absolute path)
+                /^\.\.\/\.\.\/scripts\//,        // Match ../../scripts/ (Browser path - deprecated)
+            ],
+            output: {
+                preserveModules: true,
+                preserveModulesRoot: 'src',
+                entryFileNames: '[name].js',
+            }
+        },
+        sourcemap: true,
+        minify: false // Keep readable for debugging
+    },
+    resolve: {
+        alias: {
+            '@shared': resolve(__dirname, 'src/shared'),
+            '@magnify-glass': resolve(__dirname, 'src/magnify-glass'),
+            '@info-panel': resolve(__dirname, 'src/info-panel')
+        }
+    },
+    test: {
+        environment: 'happy-dom', // or jsdom, useful for component testing
+        globals: true
+    }
+});

web/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,11 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+export {
+  _export_sfc as default
+};
+//# sourceMappingURL=_plugin-vue_export-helper.js.map

web/_virtual/_plugin-vue_export-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_plugin-vue_export-helper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

web/info-panel/EventManager.js

@@ -1,455 +1,115 @@
-/**
- * ComfyUI MagnifyGlass - Info Panel Event Manager
- * 
- * Complete Event Manager extracted from magnify_info_panel.js
- * Handles all event binding and delegation for the info panel.
- */
-
-import { isUserTyping } from '../shared/utils.js';
-
-/**
- * Event Manager class.
- * Handles all event binding and delegation.
- */
-export class EventManager {
-    /**
-     * @param {import('./StateManager.js').StateManager} stateManager 
-     * @param {import('./UIManager.js').UIManager} uiManager 
-     * @param {import('./PositionManager.js').PositionManager} positionManager 
-     */
-    constructor(stateManager, uiManager, positionManager) {
-        this.stateManager = stateManager;
-        this.uiManager = uiManager;
-        this.positionManager = positionManager;
-        this.dragCleanup = null;
-
-        this.setupEventListeners();
-    }
-
-    setupEventListeners() {
-        this.setupPanelEvents();
-        this.setupHotkeyEvents();
-        this.setupDragEvents();
-        this.setupHoverEvents();
-    }
-
-    setupPanelEvents() {
-        // Event delegation for panel controls
-        this.uiManager.elements.panel.addEventListener('click', (e) => {
-            const action = e.target.dataset.action;
-            if (action) {
-                e.stopPropagation();
-                e.preventDefault();
-                this.handleControlAction(action);
-            }
-
-            // Section header clicks
-            const sectionHeader = e.target.closest('.section-header');
-            if (sectionHeader && sectionHeader.dataset.section) {
-                const sectionId = sectionHeader.dataset.section;
-                if (sectionId !== 'node') { // Node section is always expanded
-                    this.stateManager.toggleSection(sectionId);
-                    this.uiManager.updateSectionStates();
-                }
-            }
-        });
-
-        // Event delegation for floating controls (separate since they're not children of panel)
-        if (this.uiManager.elements.controls) {
-            this.uiManager.elements.controls.addEventListener('click', (e) => {
-                const action = e.target.dataset.action;
-                if (action) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    this.handleControlAction(action);
-                }
-            });
-
-            // Prevent floating controls from propagating events
-            this.uiManager.elements.controls.addEventListener('mousedown', (e) => {
-                e.stopPropagation();
-            });
-
-            this.uiManager.elements.controls.addEventListener('mouseup', (e) => {
-                e.stopPropagation();
-            });
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { isUserTyping } from "../shared/utils.js";
+class EventManager {
+  constructor(stateManager, panelElement, positionManager, callbacks) {
+    __publicField(this, "stateManager");
+    __publicField(this, "panelElement");
+    __publicField(this, "positionManager");
+    __publicField(this, "callbacks");
+    __publicField(this, "dragCleanup");
+    __publicField(this, "boundHandleMouseMove");
+    __publicField(this, "boundHandleKeyDown");
+    __publicField(this, "boundHandleKeyUp");
+    this.stateManager = stateManager;
+    this.panelElement = panelElement;
+    this.positionManager = positionManager;
+    this.callbacks = callbacks || null;
+    this.dragCleanup = null;
+    this.boundHandleMouseMove = this.handleMouseMove.bind(this);
+    this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+    this.boundHandleKeyUp = this.handleKeyUp.bind(this);
+    this.setupEventListeners();
+  }
+  setupEventListeners() {
+    this.setupPanelEvents();
+    this.setupHotkeyEvents();
+    this.setupDragEvents();
+    this.setupHoverEvents();
+  }
+  setupPanelEvents() {
+    if (!this.panelElement) return;
+  }
+  setupHotkeyEvents() {
+    document.addEventListener("keydown", this.boundHandleKeyDown);
+  }
+  setupDragEvents() {
+    if (!this.panelElement) return;
+    const startDrag = (e) => {
+      if (!this.panelElement) return;
+      const target = e.target;
+      if (!target.closest(".mag-panel-header")) return;
+      if (target.closest("button")) return;
+      e.preventDefault();
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const rect = this.panelElement.getBoundingClientRect();
+      const startLeft = rect.left;
+      const startTop = rect.top;
+      const onMouseMove = (moveEvent) => {
+        const dx = moveEvent.clientX - startX;
+        const dy = moveEvent.clientY - startY;
+        if (this.panelElement) {
+          this.panelElement.style.left = `${startLeft + dx}px`;
+          this.panelElement.style.top = `${startTop + dy}px`;
         }
-
-        // Prevent panel interactions from propagating
-        this.uiManager.elements.panel.addEventListener('mousedown', (e) => {
-            e.stopPropagation();
-        });
-
-        this.uiManager.elements.panel.addEventListener('mouseup', (e) => {
-            e.stopPropagation();
-        });
-    }
-
-    // Helper function to check if user is typing in an input field
-    isUserTyping() {
-        const activeElement = document.activeElement;
-        if (!activeElement) return false;
-
-        // Check if the active element is an input, textarea, or contenteditable
-        const tagName = activeElement.tagName.toLowerCase();
-        if (tagName === 'input' || tagName === 'textarea') {
-            return true;
+      };
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        if (this.panelElement) {
+          const finalRect = this.panelElement.getBoundingClientRect();
+          this.stateManager.state.pinnedPosition = { x: finalRect.left, y: finalRect.top };
+          if (!this.stateManager.state.isPanelPinned) ;
         }
-
-        // Check for contenteditable elements
-        if (activeElement.contentEditable === 'true') {
-            return true;
-        }
-
-        // Check if it's inside a form or has input-like classes
-        if (activeElement.closest('form') ||
-            activeElement.classList.contains('cm-editor') || // CodeMirror editor
-            activeElement.classList.contains('monaco-editor') || // Monaco editor
-            activeElement.closest('.cm-editor') ||
-            activeElement.closest('.monaco-editor')) {
-            return true;
-        }
-
-        return false;
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+    this.panelElement.addEventListener("mousedown", startDrag);
+    this.dragCleanup = () => {
+      if (this.panelElement) this.panelElement.removeEventListener("mousedown", startDrag);
+    };
+  }
+  setupHoverEvents() {
+    if (!this.panelElement) return;
+    this.panelElement.addEventListener("mouseenter", () => {
+      this.stateManager.state.isPanelHovered = true;
+      this.stateManager.clearAutoExpandTimer();
+    });
+    this.panelElement.addEventListener("mouseleave", () => {
+      this.stateManager.state.isPanelHovered = false;
+      if (!this.stateManager.state.isHoveringNode) {
+        this.stateManager.scheduleAutoCollapse();
+      }
+    });
+  }
+  handleKeyDown(e) {
+    var _a, _b;
+    if (isUserTyping()) return;
+    const settings = this.stateManager.state.settings;
+    const key = e.key.toLowerCase();
+    if (key === settings["🔍MagnifyGlass.ToggleHotkey"].toLowerCase()) {
+      console.log("[InfoPanel] Toggle visibility hotkey matched!");
+      e.preventDefault();
+      (_a = this.callbacks) == null ? void 0 : _a.toggleVisibility();
     }
-
-    setupHotkeyEvents() {
-        const magnifyGlass = window.comfyUIMagnifyGlass;
-
-        document.addEventListener('keydown', (e) => {
-            // Don't handle hotkeys if user is typing in an input field (Smart Input Detection)
-            if (this.isUserTyping()) {
-                return;
-            }
-
-            // Only handle hotkeys when magnifying glass is active
-            const magnifyGlass = window.comfyUIMagnifyGlass;
-            if (!magnifyGlass || !magnifyGlass.state.active) return;
-
-            const settings = this.stateManager.state.settings;
-
-            // Toggle info panel
-            if (e.key.toLowerCase() === settings["🔍MagnifyGlass.ToggleHotkey"].toLowerCase() &&
-                (!magnifyGlass.config.altRequired || e.altKey) && !e.repeat) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.handleControlAction('toggle-panel');
-            }
-
-            // Toggle glass preview
-            if (e.key.toLowerCase() === settings["🔍MagnifyGlass.GlassPreviewToggleHotkey"].toLowerCase() &&
-                (!magnifyGlass.config.altRequired || e.altKey) && !e.repeat) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.handleControlAction('toggle-glass');
-            }
-
-            // Unlock panel from magnify glass and move to current mouse location (no Alt required due to Smart Input Detection)
-            if (e.key.toLowerCase() === settings["🔍MagnifyGlass.PinPanelHotkey"].toLowerCase() && !e.repeat) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.handleControlAction('pin-at-mouse');
-            }
-        });
-    }
-
-    setupDragEvents() {
-        let dragState = {
-            isDragging: false,
-            startX: 0,
-            startY: 0,
-            currentX: 0,
-            currentY: 0,
-            offsetX: 0,
-            offsetY: 0
-        };
-
-        // Start drag
-        const startDrag = (e) => {
-            // Only when pinned and not locked
-            if (!this.stateManager.state.isPanelPinned || this.stateManager.state.isPanelLocked) return;
-
-            // Block on specific elements only
-            if (e.target.closest('.minimize-btn') ||
-                e.target.closest('.control-btn') ||
-                e.target.tagName === 'BUTTON') {
-                return;
-            }
-
-            // Stop all event propagation immediately
-            e.preventDefault();
-            e.stopImmediatePropagation();
-
-            // Set drag state
-            dragState.isDragging = true;
-            dragState.startX = e.clientX;
-            dragState.startY = e.clientY;
-
-            // Get current panel position
-            const rect = this.uiManager.elements.panel.getBoundingClientRect();
-            dragState.currentX = rect.left;
-            dragState.currentY = rect.top;
-            dragState.offsetX = e.clientX - rect.left;
-            dragState.offsetY = e.clientY - rect.top;
-
-            // Visual feedback
-            this.uiManager.elements.panel.classList.add('panel-dragging');
-            this.uiManager.elements.panel.style.cursor = 'grabbing';
-            document.body.style.cursor = 'grabbing';
-            document.body.style.userSelect = 'none';
-        };
-
-        // Handle drag movement
-        const doDrag = (e) => {
-            if (!dragState.isDragging) return;
-
-            e.preventDefault();
-            e.stopImmediatePropagation();
-
-            // Calculate new position based on mouse movement
-            const newX = e.clientX - dragState.offsetX;
-            const newY = e.clientY - dragState.offsetY;
-
-            // Apply boundaries
-            const panelWidth = this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelWidth"];
-            const panelHeight = this.uiManager.elements.panel.offsetHeight;
-            const margin = 10;
-
-            const boundedX = Math.max(margin, Math.min(newX, window.innerWidth - panelWidth - margin));
-            const boundedY = Math.max(margin, Math.min(newY, window.innerHeight - panelHeight - margin));
-
-            // Apply position immediately and forcefully
-            this.uiManager.elements.panel.style.position = 'fixed';
-            this.uiManager.elements.panel.style.left = `${boundedX}px`;
-            this.uiManager.elements.panel.style.top = `${boundedY}px`;
-            this.uiManager.elements.panel.style.transform = 'none';
-            this.uiManager.elements.panel.style.zIndex = '10010';
-
-            // Update current position
-            dragState.currentX = boundedX;
-            dragState.currentY = boundedY;
-
-            // Update floating controls
-            if (this.uiManager.elements.controls) {
-                this.positionManager.positionFloatingControls();
-            }
-        };
-
-        // End drag
-        const endDrag = (e) => {
-            if (!dragState.isDragging) return;
-
-            e.preventDefault();
-            e.stopImmediatePropagation();
-
-            // Calculate if we actually moved significantly
-            const deltaX = Math.abs(e.clientX - dragState.startX);
-            const deltaY = Math.abs(e.clientY - dragState.startY);
-            const moved = deltaX > 5 || deltaY > 5;
-
-            if (moved) {
-                // Save the final position
-                this.stateManager.setPinnedPosition(dragState.currentX, dragState.currentY);
-            }
-
-            // Reset state
-            dragState.isDragging = false;
-
-            // Remove visual feedback
-            this.uiManager.elements.panel.classList.remove('panel-dragging');
-            this.uiManager.elements.panel.style.cursor = '';
-            this.uiManager.elements.panel.style.zIndex = '';
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-        };
-
-        // Cancel drag
-        const cancelDrag = () => {
-            if (!dragState.isDragging) return;
-
-            // Restore original position from pinned state
-            const { x, y } = this.stateManager.state.pinnedPosition;
-            this.uiManager.elements.panel.style.left = `${x}px`;
-            this.uiManager.elements.panel.style.top = `${y}px`;
-
-            // Reset state
-            dragState.isDragging = false;
-
-            // Remove visual feedback
-            this.uiManager.elements.panel.classList.remove('panel-dragging');
-            this.uiManager.elements.panel.style.cursor = '';
-            this.uiManager.elements.panel.style.zIndex = '';
-            document.body.style.cursor = '';
-            document.body.style.userSelect = '';
-
-            // Update controls
-            if (this.uiManager.elements.controls) {
-                this.positionManager.positionFloatingControls();
-            }
-        };
-
-        // Attach events with capture to prevent interference
-        this.uiManager.elements.panel.addEventListener('mousedown', startDrag, { capture: true, passive: false });
-        document.addEventListener('mousemove', doDrag, { capture: true, passive: false });
-        document.addEventListener('mouseup', endDrag, { capture: true, passive: false });
-
-        // Handle escape key
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') {
-                cancelDrag();
-            }
-        });
-
-        // Handle mouse leaving window
-        document.addEventListener('mouseleave', endDrag);
-
-        // Visual feedback
-        this.uiManager.elements.panel.addEventListener('mouseenter', () => {
-            if (this.stateManager.state.isPanelPinned && !this.stateManager.state.isPanelLocked && !dragState.isDragging) {
-                this.uiManager.elements.panel.style.cursor = 'grab';
-            }
-        });
-
-        this.uiManager.elements.panel.addEventListener('mouseleave', () => {
-            if (!dragState.isDragging) {
-                this.uiManager.elements.panel.style.cursor = '';
-            }
-        });
-
-        // Store cleanup function
-        this.dragCleanup = () => {
-            this.uiManager.elements.panel.removeEventListener('mousedown', startDrag, { capture: true });
-            document.removeEventListener('mousemove', doDrag, { capture: true });
-            document.removeEventListener('mouseup', endDrag, { capture: true });
-            document.removeEventListener('mouseleave', endDrag);
-            cancelDrag();
-        };
-    }
-
-    setupHoverEvents() {
-        this.uiManager.elements.panel.addEventListener('mouseenter', () => {
-            this.stateManager.state.isPanelHovered = true;
-            this.stateManager.clearAutoExpandTimer();
-        });
-
-        this.uiManager.elements.panel.addEventListener('mouseleave', () => {
-            this.stateManager.state.isPanelHovered = false;
-            if (!this.stateManager.state.isHoveringNode) {
-                this.stateManager.scheduleAutoCollapse();
-            }
-        });
-    }
-
-    captureCurrentPanelPosition() {
-        // Capture current position when pinning is activated
-        const panelRect = this.uiManager.elements.panel.getBoundingClientRect();
-        this.stateManager.setPinnedPosition(panelRect.left, panelRect.top);
-    }
-
-    handleControlAction(action) {
-        const magnifyGlass = window.comfyUIMagnifyGlass;
-
-        switch (action) {
-            case 'minimize':
-                this.stateManager.toggleMinimized();
-                this.uiManager.updateMinimizedState();
-                break;
-
-            case 'pin':
-                // If not currently pinned, either restore to last position or capture current
-                if (!this.stateManager.state.isPanelPinned) {
-                    // If we don't have a remembered position, capture current position
-                    if (!this.stateManager.state.lastPinnedPosition) {
-                        this.captureCurrentPanelPosition();
-                    }
-                    // Note: togglePinning will restore lastPinnedPosition if it exists
-                }
-
-                this.stateManager.togglePinning();
-                this.uiManager.updatePinnedState();
-                this.positionManager.positionPanel();
-                break;
-
-            case 'lock':
-                this.stateManager.toggleLocking();
-                this.uiManager.updatePinnedState(); // This updates both pinned and locked states
-                break;
-
-            case 'pin-at-mouse':
-                if (!magnifyGlass) return;
-
-                // Pin at current mouse location (Alt + configured key)
-                const settings = this.stateManager.state.settings;
-                const panelWidth = settings["🔍MagnifyGlass.InfoPanelWidth"];
-                const panelHeight = Math.min(settings["🔍MagnifyGlass.InfoPanelMaxHeight"], 400);
-
-                // Position panel near mouse with some offset to avoid covering cursor area
-                const mouseX = magnifyGlass.lastKnownMousePosition.x;
-                const mouseY = magnifyGlass.lastKnownMousePosition.y;
-
-                let pinX = mouseX + 50; // Offset to the right of mouse
-                let pinY = mouseY - 100; // Offset above mouse
-
-                // Apply boundary constraints
-                pinX = Math.max(10, Math.min(pinX, window.innerWidth - panelWidth - 10));
-                pinY = Math.max(10, Math.min(pinY, window.innerHeight - panelHeight - 10));
-
-                // Set the new pin position (this will also save as lastPinnedPosition)
-                this.stateManager.setPinnedPosition(pinX, pinY);
-
-                // Enable pinning if not already pinned
-                if (!this.stateManager.state.isPanelPinned) {
-                    this.stateManager.state.isPanelPinned = true;
-                }
-
-                this.uiManager.updatePinnedState();
-                this.positionManager.positionPanel();
-                break;
-
-            case 'toggle-panel':
-                if (this.stateManager.togglePanelVisibility()) {
-                    this.uiManager.show();
-                } else {
-                    this.uiManager.hide();
-                }
-                this.uiManager.updateControlStates();
-                break;
-
-            case 'toggle-glass':
-                const isVisible = this.stateManager.toggleGlassPreview();
-                this.applyGlassVisibility(isVisible);
-
-                // When the glass preview is hidden, automatically pin the panel at its current location.
-                if (!isVisible && !this.stateManager.state.isPanelPinned) {
-                    this.captureCurrentPanelPosition(); // Capture current position before pinning
-                    this.stateManager.togglePinning();
-                    this.stateManager.state.isAutoPinned = true; // Mark as auto-pinned
-                    this.uiManager.updatePinnedState();
-                }
-
-                // When the glass preview is shown again, only auto-unlock if NOT manually locked with 📌 button
-                if (isVisible && this.stateManager.state.isPanelPinned && !this.stateManager.state.isPanelLocked) {
-                    this.stateManager.togglePinning(); // Unpin the panel
-                    this.stateManager.state.isAutoPinned = false; // Clear auto-pin flag
-                    this.uiManager.updatePinnedState();
-                }
-
-                this.uiManager.updateControlStates();
-                this.positionManager.positionPanel(); // Reposition based on new glass state
-                break;
-        }
-    }
-
-    applyGlassVisibility(isVisible) {
-        const magnifyGlass = window.comfyUIMagnifyGlass;
-        if (magnifyGlass && magnifyGlass.ui && magnifyGlass.ui.glassDiv) {
-            magnifyGlass.ui.glassDiv.style.opacity = isVisible ? "1" : "0";
-        }
-    }
-
-    cleanup() {
-        if (this.dragCleanup) {
-            this.dragCleanup();
-        }
+    if (key === settings["🔍MagnifyGlass.PinPanelHotkey"].toLowerCase()) {
+      e.preventDefault();
+      (_b = this.callbacks) == null ? void 0 : _b.togglePin();
     }
+  }
+  handleMouseMove(e) {
+  }
+  handleKeyUp(e) {
+  }
+  cleanup() {
+    document.removeEventListener("keydown", this.boundHandleKeyDown);
+    if (this.dragCleanup) this.dragCleanup();
+  }
 }
+export {
+  EventManager
+};
+//# sourceMappingURL=EventManager.js.map

web/info-panel/InfoPanel.js

@@ -1,130 +1,110 @@
-/**
- * ComfyUI MagnifyGlass - Info Panel Orchestrator
- * 
- * Complete Info Panel Manager extracted from magnify_info_panel.js
- * Main class that orchestrates all info panel components.
- */
-
-import { app } from "../../../../scripts/app.js";
-import { StateManager } from './StateManager.js';
-import { UIManager } from './UIManager.js';
-import { PositionManager } from './PositionManager.js';
-import { EventManager } from './EventManager.js';
-import { InformationGatherer } from './InformationGatherer.js';
-
-/**
- * Professional Info Panel Manager.
- * Orchestrates all the other components for the info panel.
- */
-export class InfoPanel {
-    constructor(magnifyGlass) {
-        this.magnifyGlass = magnifyGlass;
-
-        // Initialize all managers
-        this.stateManager = new StateManager();
-        this.uiManager = new UIManager(this.stateManager);
-        this.positionManager = new PositionManager(this.stateManager, this.uiManager);
-        this.eventManager = new EventManager(this.stateManager, this.uiManager, this.positionManager);
-        this.informationGatherer = new InformationGatherer();
-
-        this.hookIntoMagnifyGlass();
-
-        console.log("ComfyUI Magnify Info Panel Pro V2: Initialized successfully");
-    }
-
-    hookIntoMagnifyGlass() {
-        // Hook into magnify glass update cycle
-        const originalUpdateMagnifiedView = this.magnifyGlass.updateMagnifiedView.bind(this.magnifyGlass);
-
-        this.magnifyGlass.updateMagnifiedView = (() => {
-            originalUpdateMagnifiedView();
-
-            if (this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"] && this.magnifyGlass.state.active) {
-                this.scheduleInfoUpdate();
-            }
-        }).bind(this);
-
-        // Hook into show/hide
-        const originalShow = this.magnifyGlass.ui.show.bind(this.magnifyGlass.ui);
-        const originalHide = this.magnifyGlass.ui.hide.bind(this.magnifyGlass.ui);
-
-        this.magnifyGlass.ui.show = (() => {
-            originalShow();
-            if (this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"]) {
-                this.uiManager.show();
-                // Position controls after showing
-                setTimeout(() => this.positionManager.positionPanel(), 10);
-            }
-        }).bind(this);
-
-        this.magnifyGlass.ui.hide = (() => {
-            originalHide();
-            this.uiManager.hide();
-        }).bind(this);
-    }
-
-    scheduleInfoUpdate() {
-        if (this.stateManager.state.updateScheduled) return;
-
-        this.stateManager.state.updateScheduled = true;
-        requestAnimationFrame(() => {
-            this.updateInfo();
-            this.stateManager.state.updateScheduled = false;
-        });
-    }
-
-    updateInfo() {
-        if (!this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"] || !this.magnifyGlass.state.active) return;
-
-        const info = this.informationGatherer.gatherInformation();
-        this.stateManager.setCurrentInfo(info);
-        this.uiManager.displayInfo(info);
-        this.positionManager.positionPanel();
-
-        // Handle node hover state
-        if (info.hoveredNode) {
-            this.stateManager.state.isHoveringNode = true;
-            this.stateManager.expandNodeSections();
-
-            if (this.stateManager.state.lastNodeId !== info.hoveredNode.id) {
-                this.stateManager.state.lastNodeId = info.hoveredNode.id;
-            }
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { registerPanelSettings } from "../shared/settings.js";
+import { StateManager } from "./StateManager.js";
+import { UIManager } from "./UIManager.js";
+import { PositionManager } from "./PositionManager.js";
+import { EventManager } from "./EventManager.js";
+import { InformationGatherer } from "./InformationGatherer.js";
+class InfoPanel {
+  constructor(magnifyGlass) {
+    __publicField(this, "magnifyGlass");
+    __publicField(this, "stateManager");
+    __publicField(this, "uiManager");
+    __publicField(this, "positionManager");
+    __publicField(this, "eventManager");
+    __publicField(this, "informationGatherer");
+    this.magnifyGlass = magnifyGlass;
+    this.stateManager = new StateManager();
+    this.uiManager = new UIManager(this.stateManager);
+    this.informationGatherer = new InformationGatherer();
+    this.positionManager = new PositionManager(this.stateManager, this.uiManager.elements.panel);
+    this.eventManager = new EventManager(this.stateManager, this.uiManager.elements.panel, this.positionManager, {
+      toggleVisibility: () => {
+        if (this.stateManager.state.isPanelVisible) {
+          this.uiManager.hide();
         } else {
-            this.stateManager.state.isHoveringNode = false;
-
-            if (this.stateManager.state.lastNodeId !== null) {
-                this.stateManager.state.lastNodeId = null;
-                if (!this.stateManager.state.isPanelHovered) {
-                    this.stateManager.scheduleAutoCollapse();
-                }
-            }
+          this.uiManager.show();
         }
-    }
-
-    updateSettings() {
-        const changes = this.stateManager.updateSettings();
-
-        // React to setting changes (theme is now auto-detected)
-        // Theme changes are handled automatically by the observer
-
-        if (changes["🔍MagnifyGlass.ControlsPosition"]) {
-            // Update controls layout and position when position setting changes
-            this.positionManager.positionPanel();
-        }
-
-        // Apply new styles
-        this.uiManager.applyStyles();
-
-        if (this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"] && this.magnifyGlass.state.active) {
-            this.uiManager.show();
-        } else {
-            this.uiManager.hide();
+      },
+      togglePin: () => {
+        this.stateManager.togglePinning();
+        this.uiManager.updatePinnedState();
+      },
+      updatePosition: () => this.positionManager.positionPanel()
+    });
+    this.hookIntoMagnifyGlass();
+    registerPanelSettings(this.stateManager, this.uiManager, this.positionManager);
+    console.log("ComfyUI Magnify Info Panel Pro V2: Initialized successfully");
+  }
+  hookIntoMagnifyGlass() {
+    const originalUpdateMagnifiedView = this.magnifyGlass.updateMagnifiedView.bind(this.magnifyGlass);
+    this.magnifyGlass.updateMagnifiedView = (() => {
+      originalUpdateMagnifiedView();
+      if (this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"] && this.magnifyGlass.state.active) {
+        this.scheduleInfoUpdate();
+      }
+    }).bind(this);
+    const originalShow = this.magnifyGlass.ui.show.bind(this.magnifyGlass.ui);
+    const originalHide = this.magnifyGlass.ui.hide.bind(this.magnifyGlass.ui);
+    this.magnifyGlass.ui.show = (() => {
+      originalShow();
+      if (this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"]) {
+        this.uiManager.show();
+        setTimeout(() => {
+          this.positionManager.positionPanel();
+          this.positionManager.positionFloatingControls(this.uiManager.elements.controls);
+        }, 10);
+      }
+    }).bind(this);
+    this.magnifyGlass.ui.hide = (() => {
+      originalHide();
+      this.uiManager.hide();
+    }).bind(this);
+  }
+  scheduleInfoUpdate() {
+    if (this.stateManager.state.updateScheduled) return;
+    this.stateManager.state.updateScheduled = true;
+    requestAnimationFrame(() => {
+      this.updateInfo();
+      this.stateManager.state.updateScheduled = false;
+    });
+  }
+  updateInfo() {
+    if (!this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"] || !this.magnifyGlass.state.active) return;
+    const info = this.informationGatherer.gatherInformation();
+    this.stateManager.setCurrentInfo(info);
+    this.uiManager.displayInfo(info);
+    this.positionManager.positionPanel();
+    this.positionManager.positionFloatingControls(this.uiManager.elements.controls);
+    if (info.hoveredNode) {
+      this.stateManager.state.isHoveringNode = true;
+      this.stateManager.expandNodeSections();
+      if (this.stateManager.state.lastNodeId !== info.hoveredNode.id) {
+        this.stateManager.state.lastNodeId = info.hoveredNode.id;
+      }
+    } else {
+      this.stateManager.state.isHoveringNode = false;
+      if (this.stateManager.state.lastNodeId !== null) {
+        this.stateManager.state.lastNodeId = null;
+        if (!this.stateManager.state.isPanelHovered) {
+          this.stateManager.scheduleAutoCollapse();
         }
+      }
     }
-
-    cleanup() {
-        this.stateManager.cleanup();
-        this.uiManager.cleanup();
-        this.eventManager.cleanup();
+  }
+  updateSettings() {
+    this.stateManager.updateSettings();
+    this.uiManager.applyStyles();
+    if (this.stateManager.state.settings["🔍MagnifyGlass.InfoPanelEnabled"] && this.magnifyGlass.state.active) {
+      this.uiManager.show();
+    } else {
+      this.uiManager.hide();
     }
+  }
 }
+export {
+  InfoPanel
+};
+//# sourceMappingURL=InfoPanel.js.map

web/info-panel/InformationGatherer.js

@@ -1,320 +1,270 @@
-/**
- * ComfyUI MagnifyGlass - Info Panel Information Gatherer
- * 
- * Complete Information Gatherer extracted from magnify_info_panel.js
- * Responsible for collecting information about nodes, widgets, and canvas state.
- */
-
-import { app } from "../../../../scripts/app.js";
-
-/**
- * Information Gatherer class.
- * Collects information about the current state under the cursor.
- */
-export class InformationGatherer {
-    constructor() { }
-
-    gatherInformation() {
-        const magnifyGlass = window.comfyUIMagnifyGlass;
-        if (!magnifyGlass) return {};
-
-        const info = {
-            timestamp: Date.now(),
-            cursor: {
-                canvas: { x: magnifyGlass.state.x, y: magnifyGlass.state.y },
-                screen: {
-                    x: magnifyGlass.lastKnownMousePosition.x,
-                    y: magnifyGlass.lastKnownMousePosition.y
-                }
-            },
-            canvas: {
-                scale: magnifyGlass.state.canvasScale,
-                offset: {
-                    x: magnifyGlass.state.canvasOffsetX,
-                    y: magnifyGlass.state.canvasOffsetY
-                }
-            },
-            magnifier: {
-                zoomFactor: magnifyGlass.config.zoomFactor,
-                offsetX: magnifyGlass.config.offsetX,
-                offsetY: magnifyGlass.config.offsetY,
-                sourceRegion: {
-                    x: magnifyGlass.state.sourceX,
-                    y: magnifyGlass.state.sourceY,
-                    width: magnifyGlass.state.sourceWidth,
-                    height: magnifyGlass.state.sourceHeight
-                }
-            },
-            hoveredNode: null,
-            node: null,
-            widget: null,
-            connection: null,
-            media: null
-        };
-
-        if (magnifyGlass.isOverMedia && magnifyGlass.currentMediaElement) {
-            info.media = this.getMediaInfo(magnifyGlass.currentMediaElement);
+class InformationGatherer {
+  constructor() {
+  }
+  gatherInformation() {
+    const magnifyGlass = window.comfyUIMagnifyGlass;
+    if (!magnifyGlass) return {};
+    const info = {
+      timestamp: Date.now(),
+      cursor: {
+        canvas: { x: magnifyGlass.state.x, y: magnifyGlass.state.y },
+        screen: {
+          x: magnifyGlass.lastKnownMousePosition.x,
+          y: magnifyGlass.lastKnownMousePosition.y
         }
-
-        const nodeUnderCursor = this.getNodeUnderCursor();
-        if (nodeUnderCursor) {
-            info.hoveredNode = this.getDetailedNodeInfo(nodeUnderCursor.node, nodeUnderCursor.localPos);
-            info.node = this.getNodeInfo(nodeUnderCursor.node);
-
-            const widget = this.getWidgetUnderCursor(nodeUnderCursor.node, nodeUnderCursor.localPos);
-            if (widget) {
-                info.widget = this.getWidgetInfo(widget);
+      },
+      canvas: {
+        scale: magnifyGlass.state.canvasScale,
+        offset: {
+          x: magnifyGlass.state.canvasOffsetX,
+          y: magnifyGlass.state.canvasOffsetY
+        }
+      },
+      magnifier: {
+        zoomFactor: magnifyGlass.config.zoomFactor,
+        offsetX: magnifyGlass.config.offsetX,
+        offsetY: magnifyGlass.config.offsetY,
+        sourceRegion: {
+          x: magnifyGlass.state.sourceX,
+          y: magnifyGlass.state.sourceY,
+          width: magnifyGlass.state.sourceWidth,
+          height: magnifyGlass.state.sourceHeight
+        }
+      },
+      hoveredNode: null,
+      node: null,
+      widget: null,
+      connection: null,
+      media: null
+    };
+    if (magnifyGlass.isOverMedia && magnifyGlass.currentMediaElement) {
+      info.media = this.getMediaInfo(magnifyGlass.currentMediaElement);
+    }
+    const nodeUnderCursor = this.getNodeUnderCursor();
+    if (nodeUnderCursor) {
+      info.hoveredNode = this.getDetailedNodeInfo(nodeUnderCursor.node, nodeUnderCursor.localPos);
+      info.node = this.getNodeInfo(nodeUnderCursor.node);
+      const widget = this.getWidgetUnderCursor(nodeUnderCursor.node, nodeUnderCursor.localPos);
+      if (widget) {
+        info.widget = this.getWidgetInfo(widget);
+      }
+    }
+    return info;
+  }
+  getNodeUnderCursor() {
+    const magnifyGlass = window.comfyUIMagnifyGlass;
+    if (!app.graph || !app.canvas || !magnifyGlass) {
+      return null;
+    }
+    try {
+      if (app.canvas.node_over) {
+        const node = app.canvas.node_over;
+        if (node && node.pos && node.size) {
+          const canvasRect2 = app.canvas.canvas.getBoundingClientRect();
+          const mouseX2 = magnifyGlass.lastKnownMousePosition.x - canvasRect2.left;
+          const mouseY2 = magnifyGlass.lastKnownMousePosition.y - canvasRect2.top;
+          let graphPos2;
+          if (app.canvas.convertOffsetToCanvasPos) {
+            graphPos2 = app.canvas.convertOffsetToCanvasPos([mouseX2, mouseY2]);
+          } else {
+            const ds = app.canvas.ds || { scale: 1, offset: [0, 0] };
+            graphPos2 = [
+              mouseX2 / ds.scale - ds.offset[0] / ds.scale,
+              mouseY2 / ds.scale - ds.offset[1] / ds.scale
+            ];
+          }
+          return {
+            node,
+            localPos: {
+              x: graphPos2[0] - node.pos[0],
+              y: graphPos2[1] - node.pos[1]
             }
+          };
         }
-
-        return info;
-    }
-
-    getNodeUnderCursor() {
-        const magnifyGlass = window.comfyUIMagnifyGlass;
-        if (!app.graph || !app.canvas || !magnifyGlass) {
-            return null;
-        }
-
-        try {
-            // Try to get the node from ComfyUI's state
-            if (app.canvas.node_over) {
-                const node = app.canvas.node_over;
-                if (node && node.pos && node.size) {
-                    const canvasRect = app.canvas.canvas.getBoundingClientRect();
-                    const mouseX = magnifyGlass.lastKnownMousePosition.x - canvasRect.left;
-                    const mouseY = magnifyGlass.lastKnownMousePosition.y - canvasRect.top;
-
-                    let graphPos;
-                    if (app.canvas.convertOffsetToCanvasPos) {
-                        graphPos = app.canvas.convertOffsetToCanvasPos([mouseX, mouseY]);
-                    } else {
-                        const ds = app.canvas.ds || { scale: 1, offset: [0, 0] };
-                        graphPos = [
-                            (mouseX / ds.scale) - (ds.offset[0] / ds.scale),
-                            (mouseY / ds.scale) - (ds.offset[1] / ds.scale)
-                        ];
-                    }
-
-                    return {
-                        node: node,
-                        localPos: {
-                            x: graphPos[0] - node.pos[0],
-                            y: graphPos[1] - node.pos[1]
-                        }
-                    };
-                }
+      }
+      const canvasRect = app.canvas.canvas.getBoundingClientRect();
+      const mouseX = magnifyGlass.lastKnownMousePosition.x - canvasRect.left;
+      const mouseY = magnifyGlass.lastKnownMousePosition.y - canvasRect.top;
+      let graphPos;
+      if (app.canvas.convertOffsetToCanvasPos) {
+        graphPos = app.canvas.convertOffsetToCanvasPos([mouseX, mouseY]);
+      } else {
+        const ds = app.canvas.ds || { scale: 1, offset: [0, 0] };
+        graphPos = [
+          mouseX / ds.scale - ds.offset[0] / ds.scale,
+          mouseY / ds.scale - ds.offset[1] / ds.scale
+        ];
+      }
+      for (let i = app.graph._nodes.length - 1; i >= 0; i--) {
+        const node = app.graph._nodes[i];
+        if (!node.pos || !node.size || node.flags && node.flags.collapsed) continue;
+        if (graphPos[0] >= node.pos[0] && graphPos[0] <= node.pos[0] + node.size[0] && graphPos[1] >= node.pos[1] && graphPos[1] <= node.pos[1] + node.size[1]) {
+          return {
+            node,
+            localPos: {
+              x: graphPos[0] - node.pos[0],
+              y: graphPos[1] - node.pos[1]
             }
-
-            // Fallback to manual detection
-            const canvasRect = app.canvas.canvas.getBoundingClientRect();
-            const mouseX = magnifyGlass.lastKnownMousePosition.x - canvasRect.left;
-            const mouseY = magnifyGlass.lastKnownMousePosition.y - canvasRect.top;
-
-            let graphPos;
-            if (app.canvas.convertOffsetToCanvasPos) {
-                graphPos = app.canvas.convertOffsetToCanvasPos([mouseX, mouseY]);
-            } else {
-                const ds = app.canvas.ds || { scale: 1, offset: [0, 0] };
-                graphPos = [
-                    (mouseX / ds.scale) - (ds.offset[0] / ds.scale),
-                    (mouseY / ds.scale) - (ds.offset[1] / ds.scale)
-                ];
-            }
-
-            for (let i = app.graph._nodes.length - 1; i >= 0; i--) {
-                const node = app.graph._nodes[i];
-                if (!node.pos || !node.size || node.flags?.collapsed) continue;
-
-                if (graphPos[0] >= node.pos[0] &&
-                    graphPos[0] <= node.pos[0] + node.size[0] &&
-                    graphPos[1] >= node.pos[1] &&
-                    graphPos[1] <= node.pos[1] + node.size[1]) {
-
-                    return {
-                        node: node,
-                        localPos: {
-                            x: graphPos[0] - node.pos[0],
-                            y: graphPos[1] - node.pos[1]
-                        }
-                    };
-                }
-            }
-        } catch (err) {
-            console.warn("Error in node detection:", err);
+          };
         }
-
-        return null;
+      }
+    } catch (err) {
+      console.warn("Error in node detection:", err);
     }
-
-    getDetailedNodeInfo(node, localPos) {
-        return {
-            id: node.id,
-            title: node.title || "Untitled Node",
-            type: node.type,
-            mode: this.getNodeModeText(node.mode),
-            position: {
-                x: Math.round(node.pos[0]),
-                y: Math.round(node.pos[1]),
-                formatted: `(${Math.round(node.pos[0])}, ${Math.round(node.pos[1])})`
-            },
-            size: {
-                width: Math.round(node.size[0]),
-                height: Math.round(node.size[1]),
-                formatted: `${Math.round(node.size[0])}×${Math.round(node.size[1])}`
-            },
-            localPosition: {
-                x: Math.round(localPos.x),
-                y: Math.round(localPos.y),
-                formatted: `(${Math.round(localPos.x)}, ${Math.round(localPos.y)})`,
-                percentage: {
-                    x: ((localPos.x / node.size[0]) * 100).toFixed(1),
-                    y: ((localPos.y / node.size[1]) * 100).toFixed(1)
-                }
-            },
-            counts: {
-                widgets: node.widgets ? node.widgets.length : 0,
-                inputs: node.inputs ? node.inputs.length : 0,
-                outputs: node.outputs ? node.outputs.length : 0,
-                properties: node.properties ? Object.keys(node.properties).length : 0
-            },
-            widgets: node.widgets || [],
-            inputs: node.inputs || [],
-            outputs: node.outputs || [],
-            properties: node.properties || {},
-            hoverRegion: this.detectNodeRegion(localPos, node)
-        };
+    return null;
+  }
+  getDetailedNodeInfo(node, localPos) {
+    return {
+      id: node.id,
+      title: node.title || "Untitled Node",
+      type: node.type,
+      mode: this.getNodeModeText(node.mode),
+      position: {
+        x: Math.round(node.pos[0]),
+        y: Math.round(node.pos[1]),
+        formatted: `(${Math.round(node.pos[0])}, ${Math.round(node.pos[1])})`
+      },
+      size: {
+        width: Math.round(node.size[0]),
+        height: Math.round(node.size[1]),
+        formatted: `${Math.round(node.size[0])}×${Math.round(node.size[1])}`
+      },
+      localPosition: {
+        x: Math.round(localPos.x),
+        y: Math.round(localPos.y),
+        formatted: `(${Math.round(localPos.x)}, ${Math.round(localPos.y)})`,
+        percentage: {
+          x: (localPos.x / node.size[0] * 100).toFixed(1),
+          y: (localPos.y / node.size[1] * 100).toFixed(1)
+        }
+      },
+      counts: {
+        widgets: node.widgets ? node.widgets.length : 0,
+        inputs: node.inputs ? node.inputs.length : 0,
+        outputs: node.outputs ? node.outputs.length : 0,
+        properties: node.properties ? Object.keys(node.properties).length : 0
+      },
+      widgets: node.widgets || [],
+      inputs: node.inputs || [],
+      outputs: node.outputs || [],
+      properties: node.properties || {},
+      hoverRegion: this.detectNodeRegion(localPos, node)
+    };
+  }
+  getNodeInfo(node) {
+    return {
+      id: node.id,
+      title: node.title || "Untitled",
+      type: node.type,
+      mode: node.mode,
+      size: node.size ? `${Math.round(node.size[0])}×${Math.round(node.size[1])}` : "Unknown",
+      position: node.pos ? `(${Math.round(node.pos[0])}, ${Math.round(node.pos[1])})` : "Unknown",
+      widgets: node.widgets || [],
+      inputs: node.inputs || [],
+      outputs: node.outputs || [],
+      properties: node.properties || {}
+    };
+  }
+  getWidgetUnderCursor(node, localPos) {
+    if (!node.widgets || !node.widgets.length) return null;
+    const titleHeight = 30;
+    let currentY = titleHeight;
+    for (const widget of node.widgets) {
+      const widgetHeight = 25;
+      if (localPos.y >= currentY && localPos.y <= currentY + widgetHeight) {
+        return widget;
+      }
+      currentY += widgetHeight + 5;
     }
-
-    getNodeInfo(node) {
-        return {
-            id: node.id,
-            title: node.title || "Untitled",
-            type: node.type,
-            mode: node.mode,
-            size: node.size ? `${Math.round(node.size[0])}×${Math.round(node.size[1])}` : "Unknown",
-            position: node.pos ? `(${Math.round(node.pos[0])}, ${Math.round(node.pos[1])})` : "Unknown",
-            widgets: node.widgets || [],
-            inputs: node.inputs || [],
-            outputs: node.outputs || [],
-            properties: node.properties || {}
-        };
+    return null;
+  }
+  getWidgetInfo(widget) {
+    return {
+      name: widget.name,
+      type: widget.type,
+      value: this.formatValue(widget.value),
+      options: widget.options || null,
+      min: widget.min,
+      max: widget.max,
+      step: widget.step
+    };
+  }
+  getMediaInfo(mediaElement) {
+    const info = {
+      tagName: mediaElement.tagName,
+      src: mediaElement.src ? mediaElement.src.substring(mediaElement.src.lastIndexOf("/") + 1) : "No source"
+    };
+    if (mediaElement instanceof HTMLImageElement) {
+      info.naturalSize = `${mediaElement.naturalWidth}×${mediaElement.naturalHeight}`;
+      info.displaySize = `${Math.round(mediaElement.width)}×${Math.round(mediaElement.height)}`;
+      info.complete = mediaElement.complete;
+    } else if (mediaElement instanceof HTMLVideoElement) {
+      info.videoSize = `${mediaElement.videoWidth}×${mediaElement.videoHeight}`;
+      info.duration = mediaElement.duration ? `${mediaElement.duration.toFixed(2)}s` : "Unknown";
+      info.currentTime = `${mediaElement.currentTime.toFixed(2)}s`;
+      info.paused = mediaElement.paused;
+      info.readyState = mediaElement.readyState;
     }
-
-    getWidgetUnderCursor(node, localPos) {
-        if (!node.widgets || !node.widgets.length) return null;
-
-        const titleHeight = 30;
-        let currentY = titleHeight;
-
-        for (const widget of node.widgets) {
-            const widgetHeight = 25;
-
-            if (localPos.y >= currentY && localPos.y <= currentY + widgetHeight) {
-                return widget;
-            }
-
-            currentY += widgetHeight + 5;
-        }
-
-        return null;
+    return info;
+  }
+  getNodeModeText(mode) {
+    const modes = {
+      0: "Always",
+      1: "On Event",
+      2: "Never",
+      3: "On Trigger",
+      4: "On Request"
+    };
+    return modes[mode] || `Mode ${mode}`;
+  }
+  detectNodeRegion(localPos, node) {
+    const titleHeight = 30;
+    const regions = [];
+    if (localPos.y <= titleHeight) {
+      regions.push("Title Bar");
     }
-
-    getWidgetInfo(widget) {
-        return {
-            name: widget.name,
-            type: widget.type,
-            value: this.formatValue(widget.value),
-            options: widget.options || null,
-            min: widget.min,
-            max: widget.max,
-            step: widget.step
-        };
+    if (localPos.x <= 10) {
+      regions.push("Left Edge");
+    } else if (localPos.x >= node.size[0] - 10) {
+      regions.push("Right Edge");
     }
-
-    getMediaInfo(mediaElement) {
-        const info = {
-            tagName: mediaElement.tagName,
-            src: mediaElement.src ? mediaElement.src.substring(mediaElement.src.lastIndexOf('/') + 1) : "No source"
-        };
-
-        if (mediaElement.tagName === 'IMG') {
-            info.naturalSize = `${mediaElement.naturalWidth}×${mediaElement.naturalHeight}`;
-            info.displaySize = `${Math.round(mediaElement.width)}×${Math.round(mediaElement.height)}`;
-            info.complete = mediaElement.complete;
-        } else if (mediaElement.tagName === 'VIDEO') {
-            info.videoSize = `${mediaElement.videoWidth}×${mediaElement.videoHeight}`;
-            info.duration = mediaElement.duration ? `${mediaElement.duration.toFixed(2)}s` : "Unknown";
-            info.currentTime = `${mediaElement.currentTime.toFixed(2)}s`;
-            info.paused = mediaElement.paused;
-            info.readyState = mediaElement.readyState;
-        }
-
-        return info;
+    if (localPos.y <= 10) {
+      regions.push("Top Edge");
+    } else if (localPos.y >= node.size[1] - 10) {
+      regions.push("Bottom Edge");
     }
-
-    getNodeModeText(mode) {
-        const modes = {
-            0: "Always",
-            1: "On Event",
-            2: "Never",
-            3: "On Trigger",
-            4: "On Request"
-        };
-        return modes[mode] || `Mode ${mode}`;
+    if (regions.length === 0) {
+      if (localPos.y > titleHeight) {
+        regions.push("Content Area");
+      }
     }
-
-    detectNodeRegion(localPos, node) {
-        const titleHeight = 30;
-        const regions = [];
-
-        if (localPos.y <= titleHeight) {
-            regions.push("Title Bar");
-        }
-
-        if (localPos.x <= 10) {
-            regions.push("Left Edge");
-        } else if (localPos.x >= node.size[0] - 10) {
-            regions.push("Right Edge");
-        }
-
-        if (localPos.y <= 10) {
-            regions.push("Top Edge");
-        } else if (localPos.y >= node.size[1] - 10) {
-            regions.push("Bottom Edge");
-        }
-
-        if (regions.length === 0) {
-            if (localPos.y > titleHeight) {
-                regions.push("Content Area");
-            }
-        }
-
-        if (localPos.x <= 20 && localPos.y > titleHeight) {
-            regions.push("Input Area");
-        } else if (localPos.x >= node.size[0] - 20 && localPos.y > titleHeight) {
-            regions.push("Output Area");
-        }
-
-        return regions.length > 0 ? regions.join(", ") : "Unknown";
+    if (localPos.x <= 20 && localPos.y > titleHeight) {
+      regions.push("Input Area");
+    } else if (localPos.x >= node.size[0] - 20 && localPos.y > titleHeight) {
+      regions.push("Output Area");
     }
-
-    formatValue(value) {
-        if (value === null) return "null";
-        if (value === undefined) return "undefined";
-        if (typeof value === "string") {
-            return value; // Show full text without truncation
-        }
-        if (typeof value === "number") {
-            return Number.isInteger(value) ? value.toString() : value.toFixed(3);
-        }
-        if (typeof value === "boolean") return value.toString();
-        if (Array.isArray(value)) {
-            return `Array(${value.length})`;
-        }
-        if (typeof value === "object") {
-            return "Object";
-        }
-        return String(value);
+    return regions.length > 0 ? regions.join(", ") : "Unknown";
+  }
+  formatValue(value) {
+    if (value === null) return "null";
+    if (value === void 0) return "undefined";
+    if (typeof value === "string") {
+      return value;
     }
+    if (typeof value === "number") {
+      return Number.isInteger(value) ? value.toString() : value.toFixed(3);
+    }
+    if (typeof value === "boolean") return value.toString();
+    if (Array.isArray(value)) {
+      return `Array(${value.length})`;
+    }
+    if (typeof value === "object") {
+      return "Object";
+    }
+    return String(value);
+  }
 }
+export {
+  InformationGatherer
+};
+//# sourceMappingURL=InformationGatherer.js.map

web/info-panel/PositionManager.js

@@ -1,192 +1,123 @@
-/**
- * ComfyUI MagnifyGlass - Info Panel Position Manager
- * 
- * Complete Position Manager extracted from magnify_info_panel.js
- * Handles all positioning logic including pinning and boundary checking.
- */
-
-/**
- * Position Manager class.
- * Handles all positioning logic for the info panel.
- */
-export class PositionManager {
-    /**
-     * @param {import('./StateManager.js').StateManager} stateManager 
-     * @param {import('./UIManager.js').UIManager} uiManager
-     */
-    constructor(stateManager, uiManager) {
-        this.stateManager = stateManager;
-        this.uiManager = uiManager;
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class PositionManager {
+  constructor(stateManager, panelElement) {
+    __publicField(this, "stateManager");
+    __publicField(this, "panelElement");
+    this.stateManager = stateManager;
+    this.panelElement = panelElement;
+  }
+  positionPanel() {
+    if (!this.panelElement) return;
+    if (this.stateManager.state.isPanelPinned) {
+      this.applyPinnedPosition();
+      return;
     }
-
-    positionPanel() {
-        if (!this.uiManager.elements.panel) return;
-
-        // If panel is pinned, keep it at its pinned position
-        if (this.stateManager.state.isPanelPinned) {
-            this.applyPinnedPosition();
-            this.positionFloatingControls();
-            return;
+    this.calculateNormalPosition();
+  }
+  applyPinnedPosition() {
+    if (!this.panelElement) return;
+    let { x, y } = this.stateManager.state.pinnedPosition;
+    const panelWidth = this.panelElement.offsetWidth;
+    const panelHeight = this.panelElement.offsetHeight;
+    const margin = 10;
+    const boundedX = Math.max(margin, Math.min(x, window.innerWidth - panelWidth - margin));
+    const boundedY = Math.max(margin, Math.min(y, window.innerHeight - panelHeight - margin));
+    this.panelElement.style.left = `${boundedX}px`;
+    this.panelElement.style.top = `${boundedY}px`;
+  }
+  calculateNormalPosition() {
+    var _a;
+    const magnifyGlass = window.comfyUIMagnifyGlass;
+    if (!magnifyGlass || !this.panelElement) return;
+    const settings = this.stateManager.state.settings;
+    const panelWidth = settings["🔍MagnifyGlass.InfoPanelWidth"];
+    const panelHeight = this.panelElement.offsetHeight;
+    let left;
+    let top;
+    const margin = 15;
+    if (!this.stateManager.state.isGlassPreviewVisible) {
+      left = magnifyGlass.lastKnownMousePosition.x - panelWidth / 2;
+      top = magnifyGlass.lastKnownMousePosition.y - 20;
+    } else {
+      const glassRect = (_a = magnifyGlass.ui.glassDiv) == null ? void 0 : _a.getBoundingClientRect();
+      if (glassRect) {
+        const position = settings["🔍MagnifyGlass.InfoPanelPosition"];
+        switch (position) {
+          case "Right":
+            left = glassRect.right + margin;
+            top = glassRect.top;
+            break;
+          case "Left":
+            left = glassRect.left - panelWidth - margin;
+            top = glassRect.top;
+            break;
+          case "Top":
+            left = glassRect.left;
+            top = glassRect.top - panelHeight - margin;
+            break;
+          case "Bottom":
+            left = glassRect.left;
+            top = glassRect.bottom + margin;
+            break;
+          default:
+            left = glassRect.right + margin;
+            top = glassRect.top;
+            break;
         }
-
-        // Normal positioning logic
-        this.calculateNormalPosition();
-        this.positionFloatingControls();
+      } else {
+        left = magnifyGlass.lastKnownMousePosition.x - panelWidth / 2;
+        top = magnifyGlass.lastKnownMousePosition.y - 20;
+      }
     }
-
-    positionFloatingControls() {
-        if (!this.uiManager.elements.controls) return;
-
-        const panelRect = this.uiManager.elements.panel.getBoundingClientRect();
-        const controlsPosition = this.stateManager.state.settings["🔍MagnifyGlass.ControlsPosition"] || "top-right";
-
-        let idealX, idealY;
-        // Determine dimensions based on layout. Fallback values are estimates.
-        const isHorizontal = ['top', 'bottom'].includes(controlsPosition);
-        const controlsWidth = this.uiManager.elements.controls.offsetWidth || (isHorizontal ? 160 : 40);
-        const controlsHeight = this.uiManager.elements.controls.offsetHeight || (isHorizontal ? 40 : 160);
-        const margin = 5;
-
-        // Determine the ideal, unconstrained position for the controls
-        switch (controlsPosition) {
-            case "top-left":
-                idealX = panelRect.left - controlsWidth - margin;
-                idealY = panelRect.top;
-                break;
-            case "top-right":
-                idealX = panelRect.right + margin;
-                idealY = panelRect.top;
-                break;
-            case "bottom-left":
-                idealX = panelRect.left - controlsWidth - margin;
-                idealY = panelRect.bottom - controlsHeight;
-                break;
-            case "bottom-right":
-                idealX = panelRect.right + margin;
-                idealY = panelRect.bottom - controlsHeight;
-                break;
-            case "top":
-                idealX = panelRect.left + (panelRect.width - controlsWidth) / 2;
-                idealY = panelRect.top - controlsHeight - margin;
-                break;
-            case "bottom":
-                idealX = panelRect.left + (panelRect.width - controlsWidth) / 2;
-                idealY = panelRect.bottom + margin;
-                break;
-            case "left":
-                idealX = panelRect.left - controlsWidth - margin;
-                idealY = panelRect.top + (panelRect.height - controlsHeight) / 2;
-                break;
-            case "right":
-                idealX = panelRect.right + margin;
-                idealY = panelRect.top + (panelRect.height - controlsHeight) / 2;
-                break;
-            default: // Fallback to top-right
-                idealX = panelRect.right + margin;
-                idealY = panelRect.top;
-                break;
-        }
-
-        let finalX = idealX;
-        let finalY = idealY;
-
-        // For side-positioned controls, check if they are forced to move horizontally.
-        // If so, override their vertical alignment to be "top" instead of "center".
-        if (['left', 'right'].includes(controlsPosition)) {
-            if (idealX < margin || (idealX + controlsWidth) > (window.innerWidth - margin)) {
-                finalY = panelRect.top; // Switch to top alignment
-
-                // Also, place it slightly inside the panel to ensure it's visible.
-                if (controlsPosition === 'left') {
-                    finalX = margin;
-                } else { // 'right'
-                    finalX = window.innerWidth - controlsWidth - margin;
-                }
-            }
-        }
-
-        // Apply boundary constraints to the final calculated position
-        finalX = Math.max(margin, Math.min(finalX, window.innerWidth - controlsWidth - margin));
-        finalY = Math.max(margin, Math.min(finalY, window.innerHeight - controlsHeight - margin));
-
-        this.uiManager.elements.controls.style.left = `${finalX}px`;
-        this.uiManager.elements.controls.style.top = `${finalY}px`;
-
-        // Update layout class based on the setting
-        this.uiManager.updateControlsLayout(controlsPosition);
-    }
-
-    applyPinnedPosition() {
-        let { x, y } = this.stateManager.state.pinnedPosition;
-        const panel = this.uiManager.elements.panel;
-        const panelWidth = panel.offsetWidth;
-        const panelHeight = panel.offsetHeight;
-        const margin = 10;
-
-        // Ensure the pinned panel stays within the viewport boundaries, e.g., after content expands.
-        // This adjustment is now temporary and won't update the stored pinned position.
-        const boundedX = Math.max(margin, Math.min(x, window.innerWidth - panelWidth - margin));
-        const boundedY = Math.max(margin, Math.min(y, window.innerHeight - panelHeight - margin));
-
-        panel.style.left = `${boundedX}px`;
-        panel.style.top = `${boundedY}px`;
-    }
-
-    calculateNormalPosition() {
-        const magnifyGlass = window.comfyUIMagnifyGlass;
-        if (!magnifyGlass) return;
-
-        const settings = this.stateManager.state.settings;
-        const panelWidth = settings["🔍MagnifyGlass.InfoPanelWidth"];
-        const panelHeight = Math.min(settings["🔍MagnifyGlass.InfoPanelMaxHeight"], this.uiManager.elements.panel.scrollHeight);
-
-        let left, top;
-        const margin = 15;
-
-        if (!this.stateManager.state.isGlassPreviewVisible) {
-            // Position at mouse cursor when glass is hidden
-            left = magnifyGlass.lastKnownMousePosition.x - (panelWidth / 2);
-            top = magnifyGlass.lastKnownMousePosition.y - 20;
-        } else {
-            // Position relative to magnify glass
-            const glassRect = magnifyGlass.ui.glassDiv?.getBoundingClientRect();
-            if (glassRect) {
-                const position = settings["🔍MagnifyGlass.InfoPanelPosition"];
-
-                switch (position) {
-                    case "Right":
-                        left = glassRect.right + margin;
-                        top = glassRect.top;
-                        break;
-                    case "Left":
-                        left = glassRect.left - panelWidth - margin;
-                        top = glassRect.top;
-                        break;
-                    case "Top":
-                        left = glassRect.left;
-                        top = glassRect.top - panelHeight - margin;
-                        break;
-                    case "Bottom":
-                        left = glassRect.left;
-                        top = glassRect.bottom + margin;
-                        break;
-                    default:
-                        left = glassRect.right + margin;
-                        top = glassRect.top;
-                        break;
-                }
-            } else {
-                // Fallback to mouse position
-                left = magnifyGlass.lastKnownMousePosition.x - (panelWidth / 2);
-                top = magnifyGlass.lastKnownMousePosition.y - 20;
-            }
-        }
-
-        // Apply boundary constraints
-        left = Math.max(10, Math.min(left, window.innerWidth - panelWidth - 10));
-        top = Math.max(10, Math.min(top, window.innerHeight - panelHeight - 10));
-
-        this.uiManager.elements.panel.style.left = `${left}px`;
-        this.uiManager.elements.panel.style.top = `${top}px`;
+    left = Math.max(10, Math.min(left, window.innerWidth - panelWidth - 10));
+    top = Math.max(10, Math.min(top, window.innerHeight - panelHeight - 10));
+    this.panelElement.style.left = `${left}px`;
+    this.panelElement.style.top = `${top}px`;
+  }
+  /**
+   * Position the floating controls relative to the panel.
+   */
+  positionFloatingControls(controlsElement) {
+    if (!controlsElement || !this.panelElement) return;
+    const panelRect = this.panelElement.getBoundingClientRect();
+    const controlsPosition = this.stateManager.state.settings["🔍MagnifyGlass.ControlsPosition"] || "right";
+    const margin = 8;
+    let left;
+    let top;
+    switch (controlsPosition) {
+      case "left":
+        left = panelRect.left - controlsElement.offsetWidth - margin;
+        top = panelRect.top;
+        break;
+      case "right":
+        left = panelRect.right + margin;
+        top = panelRect.top;
+        break;
+      case "top":
+        left = panelRect.left;
+        top = panelRect.top - controlsElement.offsetHeight - margin;
+        break;
+      case "bottom":
+        left = panelRect.left;
+        top = panelRect.bottom + margin;
+        break;
+      case "top-right":
+        left = panelRect.right - controlsElement.offsetWidth;
+        top = panelRect.top - controlsElement.offsetHeight - margin;
+        break;
+      default:
+        left = panelRect.right + margin;
+        top = panelRect.top;
     }
+    left = Math.max(10, Math.min(left, window.innerWidth - controlsElement.offsetWidth - 10));
+    top = Math.max(10, Math.min(top, window.innerHeight - controlsElement.offsetHeight - 10));
+    controlsElement.style.left = `${left}px`;
+    controlsElement.style.top = `${top}px`;
+  }
 }
+export {
+  PositionManager
+};
+//# sourceMappingURL=PositionManager.js.map

web/info-panel/StateManager.js

@@ -1,402 +1,273 @@
-/**
- * ComfyUI MagnifyGlass - Info Panel State Manager
- * 
- * Centralized state management for the information panel.
- * Complete implementation extracted from magnify_info_panel.js
- */
-
-import { app } from "../../../../scripts/app.js";
-import { getSettingValue } from '../shared/utils.js';
-import { DEFAULT_PANEL_SETTINGS } from '../shared/settings.js';
-
-/**
- * State Manager class.
- * Handles all state-related operations and provides clean state transitions.
- */
-export class StateManager {
-    constructor() {
-        this.state = {
-            // Panel visibility and positioning
-            isPanelVisible: false,
-            isPanelMinimized: false,
-            isPanelPinned: false,
-            isPanelLocked: false, // New lock state
-            isAutoPinned: false, // Track if panel was auto-pinned by glass hide
-            pinnedPosition: { x: 0, y: 0 },
-            lastPinnedPosition: null, // Remember last pinned location
-
-            // Glass visibility
-            isGlassPreviewVisible: true,
-
-            // Section expansion
-            expandedSections: new Set(['node']),
-
-            // Interaction states
-            isPanelHovered: false,
-            isHoveringNode: false,
-
-            // Auto-collapse
-            autoExpandTimer: null,
-            lastNodeId: null,
-
-            // Update scheduling
-            updateScheduled: false,
-            isInitialLoading: false,
-
-            // Current data
-            currentInfo: {},
-
-            // Settings cache
-            settings: {},
-
-            // Auto-detected theme
-            currentTheme: 'dark' // Will be auto-detected
-        };
-
-        this.initThemeDetection();
-        this.loadSettings();
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { getSettingValue } from "../shared/utils.js";
+import { DEFAULT_PANEL_SETTINGS } from "../shared/settings.js";
+class StateManager {
+  constructor() {
+    __publicField(this, "state");
+    this.state = {
+      // Panel visibility and positioning
+      isPanelVisible: false,
+      isPanelMinimized: false,
+      isPanelPinned: false,
+      isPanelLocked: false,
+      // New lock state
+      isAutoPinned: false,
+      // Track if panel was auto-pinned by glass hide
+      pinnedPosition: { x: 0, y: 0 },
+      lastPinnedPosition: null,
+      // Remember last pinned location
+      // Glass visibility
+      isGlassPreviewVisible: true,
+      // Section expansion
+      expandedSections: /* @__PURE__ */ new Set(["node"]),
+      // Interaction states
+      isPanelHovered: false,
+      isHoveringNode: false,
+      // Auto-collapse
+      autoExpandTimer: null,
+      lastNodeId: null,
+      // Update scheduling
+      updateScheduled: false,
+      isInitialLoading: false,
+      // Current data
+      currentInfo: {},
+      // Settings cache
+      settings: {},
+      // Auto-detected theme
+      currentTheme: "dark"
+      // Will be auto-detected
+    };
+    this.initThemeDetection();
+    this.loadSettings();
+  }
+  initThemeDetection() {
+    this.detectCurrentTheme();
+    setTimeout(() => {
+      if (this.detectCurrentTheme()) {
+        this.notifyThemeChange();
+      }
+    }, 1e3);
+    this.setupThemeObserver();
+    if (window.matchMedia) {
+      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+      if (prefersDark.addListener) {
+        prefersDark.addListener(() => this.detectCurrentTheme());
+      } else if (prefersDark.addEventListener) {
+        prefersDark.addEventListener("change", () => this.detectCurrentTheme());
+      }
     }
-
-    initThemeDetection() {
-        // Detect ComfyUI's current theme
-        this.detectCurrentTheme();
-
-        // Force an immediate check in case we missed the initial state
+    this.setupThemeButtonListeners();
+  }
+  detectCurrentTheme() {
+    let detectedTheme = "dark";
+    const body = document.body;
+    const html = document.documentElement;
+    const vueApp = document.querySelector("#vue-app");
+    const sidebar = document.querySelector('.comfy-menu, .sidebar, .menu, [class*="sidebar"], [class*="menu"]');
+    const allElements = [body, html, vueApp, sidebar].filter(Boolean);
+    window.getComputedStyle(html);
+    window.getComputedStyle(body);
+    const backgrounds = allElements.map((el) => {
+      const styles = window.getComputedStyle(el);
+      return {
+        element: el.tagName || el.className,
+        backgroundColor: styles.backgroundColor,
+        color: styles.color
+      };
+    });
+    for (const bg of backgrounds) {
+      if (bg.backgroundColor && bg.backgroundColor !== "rgba(0, 0, 0, 0)" && bg.backgroundColor !== "transparent") {
+        const rgbMatch = bg.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (rgbMatch) {
+          const [, r, g, b] = rgbMatch.map(Number);
+          const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+          if (brightness > 180) {
+            detectedTheme = "light";
+            break;
+          }
+        }
+      }
+    }
+    if (detectedTheme === "dark") {
+      const lightElements = document.querySelectorAll("*");
+      for (let i = 0; i < Math.min(lightElements.length, 50); i++) {
+        const el = lightElements[i];
+        const styles = window.getComputedStyle(el);
+        const bgColor = styles.backgroundColor;
+        if (bgColor && bgColor !== "rgba(0, 0, 0, 0)" && bgColor !== "transparent") {
+          const rgbMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+          if (rgbMatch) {
+            const [, r, g, b] = rgbMatch.map(Number);
+            const brightness = (r * 299 + g * 587 + b * 114) / 1e3;
+            if (brightness > 200) {
+              detectedTheme = "light";
+              break;
+            }
+          }
+        }
+      }
+    }
+    if (this.state.currentTheme !== detectedTheme) {
+      this.state.currentTheme = detectedTheme;
+      return true;
+    }
+    return false;
+  }
+  setupThemeObserver() {
+    const observer = new MutationObserver((mutations) => {
+      let shouldCheck = false;
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes" && (mutation.attributeName === "class" || mutation.attributeName === "data-theme" || mutation.attributeName === "style")) {
+          shouldCheck = true;
+        }
+      });
+      if (shouldCheck && this.detectCurrentTheme()) {
+        this.notifyThemeChange();
+      }
+    });
+    observer.observe(document.body, { attributes: true, attributeOldValue: true });
+    observer.observe(document.documentElement, { attributes: true, attributeOldValue: true });
+    const vueApp = document.querySelector("#vue-app");
+    if (vueApp) {
+      observer.observe(vueApp, { attributes: true, attributeOldValue: true });
+    }
+    const themeElements = document.querySelectorAll('[class*="theme"], [class*="dark"], [class*="light"], [data-theme]');
+    themeElements.forEach((el) => {
+      observer.observe(el, { attributes: true, attributeOldValue: true });
+    });
+    setInterval(() => {
+      if (this.detectCurrentTheme()) {
+        this.notifyThemeChange();
+      }
+    }, 2e3);
+  }
+  setupThemeButtonListeners() {
+    document.addEventListener("click", (e) => {
+      var _a, _b, _c, _d, _e;
+      const target = e.target;
+      const isThemeButton = ((_a = target.textContent) == null ? void 0 : _a.toLowerCase().includes("theme")) || ((_b = target.textContent) == null ? void 0 : _b.toLowerCase().includes("light")) || ((_c = target.textContent) == null ? void 0 : _c.toLowerCase().includes("dark")) || ((_d = target.title) == null ? void 0 : _d.toLowerCase().includes("theme")) || ((_e = target.className) == null ? void 0 : _e.toLowerCase().includes("theme"));
+      if (isThemeButton) {
         setTimeout(() => {
-            if (this.detectCurrentTheme()) {
-                this.notifyThemeChange();
-            }
-        }, 1000);
-
-        // Set up mutation observer to watch for theme changes
-        this.setupThemeObserver();
-
-        // Listen for system theme changes as fallback
-        if (window.matchMedia) {
-            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-            prefersDark.addListener(() => this.detectCurrentTheme());
-        }
-
-        // Add click listener to theme toggle buttons for immediate detection
-        this.setupThemeButtonListeners();
+          if (this.detectCurrentTheme()) {
+            this.notifyThemeChange();
+          }
+        }, 100);
+      }
+    });
+  }
+  notifyThemeChange() {
+    this.state.settings["🔍MagnifyGlass.InfoPanelTheme"] = this.state.currentTheme;
+    if (window.infoPanelManager && window.infoPanelManager.uiManager) {
+      window.infoPanelManager.uiManager.updateTheme(this.state.currentTheme);
     }
-
-    detectCurrentTheme() {
-        let detectedTheme = 'dark'; // Default fallback
-
-        const body = document.body;
-        const html = document.documentElement;
-        const vueApp = document.querySelector('#vue-app');
-        const sidebar = document.querySelector('.comfy-menu, .sidebar, .menu, [class*="sidebar"], [class*="menu"]');
-
-        // Get all possible theme-related elements
-        const allElements = [body, html, vueApp, sidebar].filter(Boolean);
-
-        // Debug: Log current classes and attributes with more detail
-        const debugInfo = {
-            bodyClasses: Array.from(body.classList),
-            htmlClasses: Array.from(html.classList),
-            bodyDataTheme: body.getAttribute('data-theme'),
-            htmlDataTheme: html.getAttribute('data-theme'),
-            vueAppClasses: vueApp ? Array.from(vueApp.classList) : null,
-            sidebarClasses: sidebar ? Array.from(sidebar.classList) : null,
-            bodyBgColor: window.getComputedStyle(body).backgroundColor,
-            htmlBgColor: window.getComputedStyle(html).backgroundColor,
-            allComputedVars: {}
+  }
+  loadSettings() {
+    Object.keys(DEFAULT_PANEL_SETTINGS).forEach((key) => {
+      if (key !== "🔍MagnifyGlass.InfoPanelTheme") {
+        this.state.settings[key] = getSettingValue(key, DEFAULT_PANEL_SETTINGS[key]);
+      }
+    });
+    this.state.settings["🔍MagnifyGlass.InfoPanelTheme"] = this.state.currentTheme;
+  }
+  updateSettings() {
+    const oldSettings = { ...this.state.settings };
+    this.loadSettings();
+    const changes = {};
+    Object.keys(this.state.settings).forEach((key) => {
+      if (oldSettings[key] !== this.state.settings[key]) {
+        changes[key] = {
+          old: oldSettings[key],
+          new: this.state.settings[key]
         };
-
-        // Check CSS variables
-        const rootStyles = window.getComputedStyle(html);
-        const bodyStyles = window.getComputedStyle(body);
-
-        // Get all CSS custom properties
-        for (let i = 0; i < rootStyles.length; i++) {
-            const prop = rootStyles[i];
-            if (prop.startsWith('--')) {
-                debugInfo.allComputedVars[prop] = rootStyles.getPropertyValue(prop).trim();
-            }
+      }
+    });
+    return changes;
+  }
+  togglePanelVisibility() {
+    this.state.isPanelVisible = !this.state.isPanelVisible;
+    return this.state.isPanelVisible;
+  }
+  toggleGlassPreview() {
+    this.state.isGlassPreviewVisible = !this.state.isGlassPreviewVisible;
+    return this.state.isGlassPreviewVisible;
+  }
+  togglePinning() {
+    const wasPinned = this.state.isPanelPinned;
+    this.state.isPanelPinned = !this.state.isPanelPinned;
+    if (!this.state.isPanelPinned) {
+      this.state.isPanelLocked = false;
+      this.state.isAutoPinned = false;
+    }
+    if (this.state.isPanelPinned && this.state.lastPinnedPosition) {
+      this.state.pinnedPosition = { ...this.state.lastPinnedPosition };
+    } else if (!this.state.isPanelPinned && wasPinned) {
+      this.state.lastPinnedPosition = { ...this.state.pinnedPosition };
+    }
+    return this.state.isPanelPinned;
+  }
+  toggleLocking() {
+    if (!this.state.isPanelPinned) {
+      return false;
+    }
+    this.state.isPanelLocked = !this.state.isPanelLocked;
+    return this.state.isPanelLocked;
+  }
+  toggleMinimized() {
+    this.state.isPanelMinimized = !this.state.isPanelMinimized;
+    return this.state.isPanelMinimized;
+  }
+  toggleSection(sectionId) {
+    if (sectionId === "node") return false;
+    if (this.state.expandedSections.has(sectionId)) {
+      this.state.expandedSections.delete(sectionId);
+    } else {
+      this.state.expandedSections.add(sectionId);
+    }
+    return true;
+  }
+  setPinnedPosition(x, y) {
+    this.state.pinnedPosition = { x, y };
+    this.state.lastPinnedPosition = { x, y };
+  }
+  setCurrentInfo(info) {
+    this.state.currentInfo = info;
+  }
+  scheduleAutoCollapse() {
+    this.clearAutoExpandTimer();
+    if (this.state.settings["🔍MagnifyGlass.InfoPanelAnimations"]) {
+      this.state.autoExpandTimer = setTimeout(() => {
+        if (!this.state.isPanelHovered) {
+          this.collapseNodeSections();
         }
-
-        // Method 1: Look for specific light theme indicators in CSS variables
-        const primarySurface = rootStyles.getPropertyValue('--p-primary-color') ||
-            rootStyles.getPropertyValue('--primary-color') ||
-            bodyStyles.getPropertyValue('--p-primary-color') ||
-            bodyStyles.getPropertyValue('--primary-color');
-
-        const surfaceGround = rootStyles.getPropertyValue('--p-surface-ground') ||
-            rootStyles.getPropertyValue('--surface-ground') ||
-            bodyStyles.getPropertyValue('--p-surface-ground') ||
-            bodyStyles.getPropertyValue('--surface-ground');
-
-        const textColor = rootStyles.getPropertyValue('--p-text-color') ||
-            rootStyles.getPropertyValue('--text-color') ||
-            bodyStyles.getPropertyValue('--p-text-color') ||
-            bodyStyles.getPropertyValue('--text-color');
-
-        // Method 2: Analyze background colors of multiple elements
-        const backgrounds = allElements.map(el => {
-            const styles = window.getComputedStyle(el);
-            return {
-                element: el.tagName || el.className,
-                backgroundColor: styles.backgroundColor,
-                color: styles.color
-            };
-        });
-
-        // Method 3: Check for light backgrounds
-        for (const bg of backgrounds) {
-            if (bg.backgroundColor && bg.backgroundColor !== 'rgba(0, 0, 0, 0)' && bg.backgroundColor !== 'transparent') {
-                const rgbMatch = bg.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-                if (rgbMatch) {
-                    const [, r, g, b] = rgbMatch.map(Number);
-                    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-                    if (brightness > 180) { // Higher threshold for light detection
-                        detectedTheme = 'light';
-                        break;
-                    }
-                }
-            }
-        }
-
-        // Method 4: Check for theme toggle buttons state
-        const themeButtons = document.querySelectorAll('[class*="theme"], button[title*="theme"], button[title*="Theme"], .p-button[title*="light"], .p-button[title*="Light"]');
-
-        // Method 5: Force light theme detection if we see light backgrounds
-        if (detectedTheme === 'dark') {
-            // Look for any element with very light background
-            const lightElements = document.querySelectorAll('*');
-            for (let i = 0; i < Math.min(lightElements.length, 50); i++) { // Check first 50 elements
-                const el = lightElements[i];
-                const styles = window.getComputedStyle(el);
-                const bgColor = styles.backgroundColor;
-
-                if (bgColor && bgColor !== 'rgba(0, 0, 0, 0)' && bgColor !== 'transparent') {
-                    const rgbMatch = bgColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-                    if (rgbMatch) {
-                        const [, r, g, b] = rgbMatch.map(Number);
-                        const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-                        if (brightness > 200) { // Very light elements
-                            detectedTheme = 'light';
-                            break;
-                        }
-                    }
-                }
-            }
-        }
-
-        // Update theme if it changed
-        if (this.state.currentTheme !== detectedTheme) {
-            this.state.currentTheme = detectedTheme;
-            return true; // Theme changed
-        }
-
-        return false; // No change
+      }, 1500);
     }
-
-    setupThemeObserver() {
-        // Watch for changes to body/html classes and attributes
-        const observer = new MutationObserver((mutations) => {
-            let shouldCheck = false;
-            mutations.forEach((mutation) => {
-                if (mutation.type === 'attributes' &&
-                    (mutation.attributeName === 'class' ||
-                        mutation.attributeName === 'data-theme' ||
-                        mutation.attributeName === 'style')) {
-                    shouldCheck = true;
-                }
-            });
-
-            if (shouldCheck && this.detectCurrentTheme()) {
-                // Theme changed, update UI immediately
-                this.notifyThemeChange();
-            }
-        });
-
-        // Observe changes to body, html, and vue app
-        observer.observe(document.body, { attributes: true, attributeOldValue: true });
-        observer.observe(document.documentElement, { attributes: true, attributeOldValue: true });
-
-        const vueApp = document.querySelector('#vue-app');
-        if (vueApp) {
-            observer.observe(vueApp, { attributes: true, attributeOldValue: true });
-        }
-
-        // Also watch for changes to any element with theme-related classes
-        const themeElements = document.querySelectorAll('[class*="theme"], [class*="dark"], [class*="light"], [data-theme]');
-        themeElements.forEach(el => {
-            observer.observe(el, { attributes: true, attributeOldValue: true });
-        });
-
-        // Periodic fallback check every 2 seconds
-        setInterval(() => {
-            if (this.detectCurrentTheme()) {
-                this.notifyThemeChange();
-            }
-        }, 2000);
-    }
-
-    setupThemeButtonListeners() {
-        // Listen for clicks on theme toggle buttons
-        document.addEventListener('click', (e) => {
-            // Check if clicked element might be a theme toggle
-            const target = e.target;
-            const isThemeButton = target.textContent?.toLowerCase().includes('theme') ||
-                target.textContent?.toLowerCase().includes('light') ||
-                target.textContent?.toLowerCase().includes('dark') ||
-                target.title?.toLowerCase().includes('theme') ||
-                target.className?.toLowerCase().includes('theme');
-
-            if (isThemeButton) {
-                setTimeout(() => {
-                    if (this.detectCurrentTheme()) {
-                        this.notifyThemeChange();
-                    }
-                }, 100);
-            }
-        });
-    }
-
-    notifyThemeChange() {
-        // Update settings to reflect new theme
-        this.state.settings["🔍MagnifyGlass.InfoPanelTheme"] = this.state.currentTheme;
-
-        // Notify UI components of theme change immediately
-        if (window.infoPanelManager && window.infoPanelManager.uiManager) {
-            window.infoPanelManager.uiManager.updateTheme(this.state.currentTheme);
-        }
-    }
-
-    loadSettings() {
-        Object.keys(DEFAULT_PANEL_SETTINGS).forEach(key => {
-            // Skip the theme setting since we auto-detect it
-            if (key !== "🔍MagnifyGlass.InfoPanelTheme") {
-                this.state.settings[key] = getSettingValue(key, DEFAULT_PANEL_SETTINGS[key]);
-            }
-        });
-
-        // Set theme to auto-detected value
-        this.state.settings["🔍MagnifyGlass.InfoPanelTheme"] = this.state.currentTheme;
-    }
-
-    updateSettings() {
-        const oldSettings = { ...this.state.settings };
-        this.loadSettings();
-
-        // Return what changed for reactive updates
-        const changes = {};
-        Object.keys(this.state.settings).forEach(key => {
-            if (oldSettings[key] !== this.state.settings[key]) {
-                changes[key] = {
-                    old: oldSettings[key],
-                    new: this.state.settings[key]
-                };
-            }
-        });
-
-        return changes;
-    }
-
-    togglePanelVisibility() {
-        this.state.isPanelVisible = !this.state.isPanelVisible;
-        return this.state.isPanelVisible;
-    }
-
-    toggleGlassPreview() {
-        this.state.isGlassPreviewVisible = !this.state.isGlassPreviewVisible;
-        return this.state.isGlassPreviewVisible;
-    }
-
-    togglePinning() {
-        const wasPinned = this.state.isPanelPinned;
-        this.state.isPanelPinned = !this.state.isPanelPinned;
-
-        // When unpinning, also unlock and clear auto-pin flag
-        if (!this.state.isPanelPinned) {
-            this.state.isPanelLocked = false;
-            this.state.isAutoPinned = false; // Clear auto-pin flag when manually unpinning
-        }
-
-        if (this.state.isPanelPinned && this.state.lastPinnedPosition) {
-            // Restore to last pinned position
-            this.state.pinnedPosition = { ...this.state.lastPinnedPosition };
-        } else if (!this.state.isPanelPinned && wasPinned) {
-            // Save current position when unpinning
-            this.state.lastPinnedPosition = { ...this.state.pinnedPosition };
-        }
-
-        return this.state.isPanelPinned;
-    }
-
-    toggleLocking() {
-        // Only allow locking when pinned
-        if (!this.state.isPanelPinned) {
-            return false;
-        }
-
-        this.state.isPanelLocked = !this.state.isPanelLocked;
-        return this.state.isPanelLocked;
-    }
-
-    toggleMinimized() {
-        this.state.isPanelMinimized = !this.state.isPanelMinimized;
-        return this.state.isPanelMinimized;
-    }
-
-    toggleSection(sectionId) {
-        if (sectionId === 'node') return false; // Node section always expanded
-
-        if (this.state.expandedSections.has(sectionId)) {
-            this.state.expandedSections.delete(sectionId);
-        } else {
-            this.state.expandedSections.add(sectionId);
-        }
-        return true;
-    }
-
-    setPinnedPosition(x, y) {
-        this.state.pinnedPosition = { x, y };
-        // Also save as last pinned position for memory
-        this.state.lastPinnedPosition = { x, y };
-    }
-
-    setCurrentInfo(info) {
-        this.state.currentInfo = info;
-    }
-
-    scheduleAutoCollapse() {
-        this.clearAutoExpandTimer();
-        if (this.state.settings["🔍MagnifyGlass.InfoPanelAnimations"]) {
-            this.state.autoExpandTimer = setTimeout(() => {
-                if (!this.state.isPanelHovered) {
-                    this.collapseNodeSections();
-                }
-            }, 1500);
-        }
-    }
-
-    clearAutoExpandTimer() {
-        if (this.state.autoExpandTimer) {
-            clearTimeout(this.state.autoExpandTimer);
-            this.state.autoExpandTimer = null;
-        }
-    }
-
-    expandNodeSections() {
-        this.state.expandedSections.add('hoveredNode');
-        this.state.expandedSections.add('node');
-        this.state.expandedSections.add('cursor');
-        this.state.expandedSections.add('canvas');
-        this.state.expandedSections.add('magnifier');
-        this.clearAutoExpandTimer();
-    }
-
-    collapseNodeSections() {
-        this.state.expandedSections.delete('hoveredNode');
-        this.state.expandedSections.delete('node');
-        this.state.expandedSections.delete('widget');
-    }
-
-    cleanup() {
-        this.clearAutoExpandTimer();
+  }
+  clearAutoExpandTimer() {
+    if (this.state.autoExpandTimer) {
+      clearTimeout(this.state.autoExpandTimer);
+      this.state.autoExpandTimer = null;
     }
+  }
+  expandNodeSections() {
+    this.state.expandedSections.add("hoveredNode");
+    this.state.expandedSections.add("node");
+    this.state.expandedSections.add("cursor");
+    this.state.expandedSections.add("canvas");
+    this.state.expandedSections.add("magnifier");
+    this.clearAutoExpandTimer();
+  }
+  collapseNodeSections() {
+    this.state.expandedSections.delete("hoveredNode");
+    this.state.expandedSections.delete("node");
+    this.state.expandedSections.delete("widget");
+  }
+  cleanup() {
+    this.clearAutoExpandTimer();
+  }
 }
+export {
+  StateManager
+};
+//# sourceMappingURL=StateManager.js.map

web/info-panel/components/InfoPanel.vue.js

@@ -0,0 +1,56 @@
+import _sfc_main from "./InfoPanel.vue2.js";
+import "../../node_modules/.pnpm/vue@3.5.26_typescript@5.9.3/node_modules/vue/dist/vue.runtime.esm-bundler.js";
+/* empty css               */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+import { createElementBlock, createCommentVNode, createElementVNode as createBaseVNode, openBlock } from "../../node_modules/.pnpm/@vue_runtime-core@3.5.26/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js";
+import { normalizeClass, toDisplayString, normalizeStyle } from "../../node_modules/.pnpm/@vue_shared@3.5.26/node_modules/@vue/shared/dist/shared.esm-bundler.js";
+const _hoisted_1 = { class: "mag-panel-header" };
+const _hoisted_2 = { class: "mag-panel-controls" };
+const _hoisted_3 = { class: "mag-panel-content" };
+const _hoisted_4 = {
+  key: 0,
+  class: "mag-node-info"
+};
+const _hoisted_5 = { class: "mag-property-grid" };
+const _hoisted_6 = { class: "mag-prop-row" };
+const _hoisted_7 = { class: "mag-prop-value" };
+const _hoisted_8 = {
+  key: 1,
+  class: "mag-empty-state"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return _ctx.isVisible ? (openBlock(), createElementBlock("div", {
+    key: 0,
+    class: normalizeClass(["mag-info-panel", _ctx.themeClass]),
+    style: normalizeStyle(_ctx.panelStyle)
+  }, [
+    createBaseVNode("div", _hoisted_1, [
+      _cache[2] || (_cache[2] = createBaseVNode("div", { class: "mag-panel-title" }, "Magnify Info", -1)),
+      createBaseVNode("div", _hoisted_2, [
+        createBaseVNode("button", {
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.togglePin && _ctx.togglePin(...args)),
+          class: normalizeClass({ active: _ctx.isPinned })
+        }, "📌", 2),
+        createBaseVNode("button", {
+          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.close && _ctx.close(...args))
+        }, "✕")
+      ])
+    ]),
+    createBaseVNode("div", _hoisted_3, [
+      _ctx.nodeInfo ? (openBlock(), createElementBlock("div", _hoisted_4, [
+        createBaseVNode("h3", null, toDisplayString(_ctx.nodeInfo.title || _ctx.nodeInfo.type), 1),
+        createBaseVNode("div", _hoisted_5, [
+          createBaseVNode("div", _hoisted_6, [
+            _cache[3] || (_cache[3] = createBaseVNode("span", { class: "mag-prop-label" }, "ID:", -1)),
+            createBaseVNode("span", _hoisted_7, toDisplayString(_ctx.nodeInfo.id), 1)
+          ])
+        ])
+      ])) : (openBlock(), createElementBlock("div", _hoisted_8, " Hover over a node to see details "))
+    ])
+  ], 6)) : createCommentVNode("", true);
+}
+const InfoPanelComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-687c6e82"]]);
+export {
+  InfoPanelComponent as default
+};
+//# sourceMappingURL=InfoPanel.vue.js.map

web/info-panel/components/InfoPanel.vue2.js

@@ -0,0 +1,59 @@
+import "../../node_modules/.pnpm/vue@3.5.26_typescript@5.9.3/node_modules/vue/dist/vue.runtime.esm-bundler.js";
+import { defineComponent, computed } from "../../node_modules/.pnpm/@vue_runtime-core@3.5.26/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js";
+import { toRefs } from "../../node_modules/.pnpm/@vue_reactivity@3.5.26/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js";
+const _sfc_main = defineComponent({
+  name: "InfoPanel",
+  props: {
+    state: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const { state } = toRefs(props);
+    const isVisible = computed(() => {
+      var _a;
+      return ((_a = state.value) == null ? void 0 : _a.visible) ?? false;
+    });
+    const isPinned = computed(() => {
+      var _a;
+      return ((_a = state.value) == null ? void 0 : _a.pinned) ?? false;
+    });
+    const nodeInfo = computed(() => {
+      var _a;
+      return ((_a = state.value) == null ? void 0 : _a.hoveredNode) ?? null;
+    });
+    const theme = computed(() => {
+      var _a;
+      return ((_a = state.value) == null ? void 0 : _a.theme) ?? "dark";
+    });
+    const themeClass = computed(() => `theme-${theme.value}`);
+    const panelStyle = computed(() => ({
+      width: "300px",
+      opacity: 1
+    }));
+    const togglePin = () => {
+      if (state.value) {
+        state.value.pinned = !state.value.pinned;
+      }
+    };
+    const close = () => {
+      if (state.value) {
+        state.value.visible = false;
+      }
+    };
+    return {
+      isVisible,
+      isPinned,
+      nodeInfo,
+      themeClass,
+      panelStyle,
+      togglePin,
+      close
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=InfoPanel.vue2.js.map

web/info-panel/components/InfoPanel.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoPanel.vue2.js","sources":["../../../src/info-panel/components/InfoPanel.vue"],"sourcesContent":["<template>\n  <div v-if=\"isVisible\" class=\"mag-info-panel\" :class=\"themeClass\" :style=\"panelStyle\">\n    <div class=\"mag-panel-header\">\n      <div class=\"mag-panel-title\">Magnify Info</div>\n      <div class=\"mag-panel-controls\">\n        <button @click=\"togglePin\" :class=\"{ active: isPinned }\">📌</button>\n        <button @click=\"close\">✕</button>\n      </div>\n    </div>\n    \n    <div class=\"mag-panel-content\">\n      <div v-if=\"nodeInfo\" class=\"mag-node-info\">\n        <h3>{{ nodeInfo.title || nodeInfo.type }}</h3>\n        <div class=\"mag-property-grid\">\n           <div class=\"mag-prop-row\">\n             <span class=\"mag-prop-label\">ID:</span>\n             <span class=\"mag-prop-value\">{{ nodeInfo.id }}</span>\n           </div>\n           <!-- More properties will go here -->\n        </div>\n      </div>\n      <div v-else class=\"mag-empty-state\">\n        Hover over a node to see details\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, toRefs } from 'vue';\n\nexport default defineComponent({\n  name: 'InfoPanel',\n  props: {\n    state: {\n      type: Object,\n      required: true\n    }\n  },\n  setup(props) {\n    // Use toRefs to maintain reactivity from the parent's reactive state\n    const { state } = toRefs(props);\n    \n    const isVisible = computed(() => state.value?.visible ?? false);\n    const isPinned = computed(() => state.value?.pinned ?? false);\n    const nodeInfo = computed(() => state.value?.hoveredNode ?? null);\n    const theme = computed(() => state.value?.theme ?? 'dark');\n\n    const themeClass = computed(() => `theme-${theme.value}`);\n    const panelStyle = computed(() => ({\n      width: '300px',\n      opacity: 1\n    }));\n\n    const togglePin = () => {\n      if (state.value) {\n        state.value.pinned = !state.value.pinned;\n      }\n    };\n\n    const close = () => {\n      if (state.value) {\n        state.value.visible = false;\n      }\n    };\n\n    return {\n      isVisible,\n      isPinned,\n      nodeInfo,\n      themeClass,\n      panelStyle,\n      togglePin,\n      close\n    };\n  }\n});\n</script>\n\n<style scoped>\n.mag-info-panel {\n  position: fixed;\n  bottom: 20px;\n  left: 20px;\n  background: var(--comfy-menu-bg, #222);\n  color: var(--comfy-text-color, #fff);\n  border: 1px solid var(--border-color, #444);\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n  overflow: hidden;\n  font-family: sans-serif;\n  z-index: 1000;\n  pointer-events: auto;\n}\n\n.mag-panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 8px 12px;\n  background: rgba(255,255,255,0.05);\n  border-bottom: 1px solid rgba(255,255,255,0.1);\n  cursor: grab;\n}\n\n.mag-panel-header:active {\n  cursor: grabbing;\n}\n\n.mag-panel-title {\n  font-weight: bold;\n}\n\n.mag-panel-controls {\n  display: flex;\n  gap: 4px;\n}\n\n.mag-panel-controls button {\n  background: transparent;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  padding: 4px 8px;\n  border-radius: 4px;\n}\n\n.mag-panel-controls button:hover {\n  background: rgba(255,255,255,0.1);\n}\n\n.mag-panel-controls button.active {\n  background: rgba(59, 130, 246, 0.3);\n}\n\n.mag-panel-content {\n  padding: 12px;\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.mag-node-info h3 {\n  margin-top: 0;\n  margin-bottom: 10px;\n  border-bottom: 1px solid rgba(255,255,255,0.1);\n  padding-bottom: 5px;\n}\n\n.mag-property-grid {\n  display: grid;\n  gap: 4px;\n}\n\n.mag-prop-row {\n  display: flex;\n  justify-content: space-between;\n}\n\n.mag-prop-label {\n  opacity: 0.7;\n}\n\n.mag-empty-state {\n  opacity: 0.6;\n  text-align: center;\n  padding: 20px;\n}\n\n.theme-light {\n  background: #fff;\n  color: #333;\n  border-color: #ccc;\n}\n</style>\n"],"names":[],"mappings":";;;AA+BA,MAAA,YAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,EACZ;AAAA,EAEF,MAAM,OAAO;AAEX,UAAM,EAAE,MAAA,IAAU,OAAO,KAAK;AAE9B,UAAM,YAAY,SAAS,MAAA;;AAAM,0BAAM,UAAN,mBAAa,YAAW;AAAA,KAAK;AAC9D,UAAM,WAAW,SAAS,MAAA;;AAAM,0BAAM,UAAN,mBAAa,WAAU;AAAA,KAAK;AAC5D,UAAM,WAAW,SAAS,MAAA;;AAAM,0BAAM,UAAN,mBAAa,gBAAe;AAAA,KAAI;AAChE,UAAM,QAAQ,SAAS,MAAA;;AAAM,0BAAM,UAAN,mBAAa,UAAS;AAAA,KAAM;AAEzD,UAAM,aAAa,SAAS,MAAM,SAAS,MAAM,KAAK,EAAE;AACxD,UAAM,aAAa,SAAS,OAAO;AAAA,MACjC,OAAO;AAAA,MACP,SAAS;AAAA,IAAA,EACT;AAEF,UAAM,YAAY,MAAM;AACtB,UAAI,MAAM,OAAO;AACf,cAAM,MAAM,SAAS,CAAC,MAAM,MAAM;AAAA,MACpC;AAAA,IACF;AAEA,UAAM,QAAQ,MAAM;AAClB,UAAI,MAAM,OAAO;AACf,cAAM,MAAM,UAAU;AAAA,MACxB;AAAA,IACF;AAEA,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AACF,CAAC;"}

web/info-panel/styles.js

@@ -1,16 +1,5 @@
-/**
- * ComfyUI MagnifyGlass - Info Panel Styles
- * 
- * Complete CSS styles for the info panel component.
- * Extracted from magnify_info_panel.js getCSS() method.
- */
-
-/**
- * Get the complete CSS for the info panel.
- * @returns {string} CSS string
- */
-export function getInfoPanelCSS() {
-    return `
+function getInfoPanelCSS() {
+  return `
         .magnify-info-panel {
             border-radius: 12px;
             backdrop-filter: blur(20px);
@@ -573,3 +562,7 @@ export function getInfoPanelCSS() {
         }
     `;
 }
+export {
+  getInfoPanelCSS
+};
+//# sourceMappingURL=styles.js.map

web/magnify-glass/ConfigManager.js

@@ -1,108 +1,148 @@
-/**
- * ComfyUI MagnifyGlass - ConfigManager
- * 
- * Manages configuration and settings for the magnifying glass.
- */
-
-import { getSettingValue } from '../shared/utils.js';
-import { DEFAULT_GLASS_SETTINGS } from '../shared/settings.js';
-import { STORAGE_KEYS } from '../shared/constants.js';
-
-/**
- * Configuration manager class.
- * Reads settings from ComfyUI and manages persistent offsets.
- */
-export class ConfigManager {
-    constructor() {
-        // Initialize properties with defaults
-        this.zoomFactor = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ZoomFactor"] / 100;
-        this.glassSize = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.GlassSize"];
-        this.borderColor = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.BorderColor"];
-        this.borderWidth = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.BorderWidth"];
-        this.activationKey = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ActivationKey"];
-        this.altRequired = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.AltRequired"];
-        this.followCursor = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.FollowCursor"];
-        this.debugMode = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.DebugMode"];
-        this.offsetStep = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.OffsetStep"];
-        this.glassPosition = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.GlassPosition"];
-        this.resetKey = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ResetKey"];
-        this.glassShape = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.GlassShape"];
-        this.borderEnabled = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.BorderEnabled"];
-        this.textureFiltering = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.TextureFiltering"];
-        this.alwaysActiveMode = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.AlwaysActiveMode"];
-        this.toggleFollowCursorKey = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ToggleFollowCursorKey"];
-
-        // Alignment adjustment parameters - managed separately
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { getSettingValue } from "../shared/utils.js";
+import { STORAGE_KEYS } from "../shared/constants.js";
+const DEFAULT_GLASS_SETTINGS = {
+  "🔍MagnifyGlass.ZoomFactor": 300,
+  "🔍MagnifyGlass.GlassSize": 300,
+  "🔍MagnifyGlass.BorderColor": "#6b7280",
+  "🔍MagnifyGlass.BorderWidth": 1,
+  "🔍MagnifyGlass.ActivationKey": "x",
+  "🔍MagnifyGlass.AltRequired": false,
+  "🔍MagnifyGlass.FollowCursor": false,
+  "🔍MagnifyGlass.DebugMode": false,
+  "🔍MagnifyGlass.OffsetStep": 5,
+  "🔍MagnifyGlass.GlassPosition": "Top-Right",
+  "🔍MagnifyGlass.ResetKey": "o",
+  "🔍MagnifyGlass.GlassShape": "Rounded Square",
+  "🔍MagnifyGlass.BorderEnabled": true,
+  "🔍MagnifyGlass.TextureFiltering": "Linear",
+  "🔍MagnifyGlass.AlwaysActiveMode": true,
+  "🔍MagnifyGlass.ToggleFollowCursorKey": "h"
+};
+class ConfigManager {
+  constructor() {
+    /** Zoom factor (1.0 = 100%, 3.0 = 300%) */
+    __publicField(this, "zoomFactor");
+    /** Glass size in pixels */
+    __publicField(this, "glassSize");
+    /** Border color (CSS color string) */
+    __publicField(this, "borderColor");
+    /** Border width in pixels */
+    __publicField(this, "borderWidth");
+    /** Activation key (lowercase) */
+    __publicField(this, "activationKey");
+    /** Whether Alt key is required for activation */
+    __publicField(this, "altRequired");
+    /** Whether glass follows cursor */
+    __publicField(this, "followCursor");
+    /** Debug mode enabled */
+    __publicField(this, "debugMode");
+    /** Offset step for arrow key adjustments */
+    __publicField(this, "offsetStep");
+    /** Glass position relative to cursor */
+    __publicField(this, "glassPosition");
+    /** Reset key (lowercase) */
+    __publicField(this, "resetKey");
+    /** Glass shape */
+    __publicField(this, "glassShape");
+    /** Whether border is enabled */
+    __publicField(this, "borderEnabled");
+    /** Texture filtering mode */
+    __publicField(this, "textureFiltering");
+    /** Always active mode */
+    __publicField(this, "alwaysActiveMode");
+    /** Toggle follow cursor key */
+    __publicField(this, "toggleFollowCursorKey");
+    /** Manual offset X in graph units */
+    __publicField(this, "offsetX");
+    /** Manual offset Y in graph units */
+    __publicField(this, "offsetY");
+    this.zoomFactor = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ZoomFactor"] / 100;
+    this.glassSize = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.GlassSize"];
+    this.borderColor = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.BorderColor"];
+    this.borderWidth = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.BorderWidth"];
+    this.activationKey = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ActivationKey"];
+    this.altRequired = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.AltRequired"];
+    this.followCursor = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.FollowCursor"];
+    this.debugMode = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.DebugMode"];
+    this.offsetStep = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.OffsetStep"];
+    this.glassPosition = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.GlassPosition"];
+    this.resetKey = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ResetKey"];
+    this.glassShape = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.GlassShape"];
+    this.borderEnabled = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.BorderEnabled"];
+    this.textureFiltering = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.TextureFiltering"];
+    this.alwaysActiveMode = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.AlwaysActiveMode"];
+    this.toggleFollowCursorKey = DEFAULT_GLASS_SETTINGS["🔍MagnifyGlass.ToggleFollowCursorKey"];
+    this.offsetX = 0;
+    this.offsetY = 0;
+  }
+  /**
+   * Load settings from ComfyUI settings system.
+   */
+  loadSettings() {
+    this.zoomFactor = getSettingValue("🔍MagnifyGlass.ZoomFactor", this.zoomFactor * 100) / 100;
+    this.glassSize = getSettingValue("🔍MagnifyGlass.GlassSize", this.glassSize);
+    this.borderColor = getSettingValue("🔍MagnifyGlass.BorderColor", this.borderColor);
+    this.borderWidth = getSettingValue("🔍MagnifyGlass.BorderWidth", this.borderWidth);
+    this.activationKey = getSettingValue("🔍MagnifyGlass.ActivationKey", this.activationKey);
+    this.altRequired = getSettingValue("🔍MagnifyGlass.AltRequired", this.altRequired);
+    this.followCursor = getSettingValue("🔍MagnifyGlass.FollowCursor", this.followCursor);
+    this.debugMode = getSettingValue("🔍MagnifyGlass.DebugMode", this.debugMode);
+    this.offsetStep = getSettingValue("🔍MagnifyGlass.OffsetStep", this.offsetStep);
+    this.glassPosition = getSettingValue("🔍MagnifyGlass.GlassPosition", this.glassPosition);
+    this.resetKey = getSettingValue("🔍MagnifyGlass.ResetKey", this.resetKey);
+    this.glassShape = getSettingValue("🔍MagnifyGlass.GlassShape", this.glassShape);
+    this.borderEnabled = getSettingValue("🔍MagnifyGlass.BorderEnabled", this.borderEnabled);
+    this.textureFiltering = getSettingValue("🔍MagnifyGlass.TextureFiltering", this.textureFiltering);
+    this.alwaysActiveMode = getSettingValue("🔍MagnifyGlass.AlwaysActiveMode", this.alwaysActiveMode);
+    this.toggleFollowCursorKey = getSettingValue("🔍MagnifyGlass.ToggleFollowCursorKey", this.toggleFollowCursorKey);
+  }
+  /**
+   * Load saved offsets from localStorage.
+   */
+  loadSavedOffsets() {
+    try {
+      const savedOffsetX = localStorage.getItem(STORAGE_KEYS.OFFSET_X);
+      const savedOffsetY = localStorage.getItem(STORAGE_KEYS.OFFSET_Y);
+      if (savedOffsetX !== null) {
+        this.offsetX = parseInt(savedOffsetX, 10);
+      } else {
         this.offsetX = 0;
+      }
+      if (savedOffsetY !== null) {
+        this.offsetY = parseInt(savedOffsetY, 10);
+      } else {
         this.offsetY = 0;
+      }
+    } catch (e) {
+      console.error("ComfyUI Magnifying Glass ERROR: Error loading saved offsets:", e);
+      this.offsetX = 0;
+      this.offsetY = 0;
     }
-
-    /**
-     * Load settings from ComfyUI settings system.
-     */
-    loadSettings() {
-        this.zoomFactor = getSettingValue("🔍MagnifyGlass.ZoomFactor", this.zoomFactor * 100) / 100;
-        this.glassSize = getSettingValue("🔍MagnifyGlass.GlassSize", this.glassSize);
-        this.borderColor = getSettingValue("🔍MagnifyGlass.BorderColor", this.borderColor);
-        this.borderWidth = getSettingValue("🔍MagnifyGlass.BorderWidth", this.borderWidth);
-        this.activationKey = getSettingValue("🔍MagnifyGlass.ActivationKey", this.activationKey);
-        this.altRequired = getSettingValue("🔍MagnifyGlass.AltRequired", this.altRequired);
-        this.followCursor = getSettingValue("🔍MagnifyGlass.FollowCursor", this.followCursor);
-        this.debugMode = getSettingValue("🔍MagnifyGlass.DebugMode", this.debugMode);
-        this.offsetStep = getSettingValue("🔍MagnifyGlass.OffsetStep", this.offsetStep);
-        this.glassPosition = getSettingValue("🔍MagnifyGlass.GlassPosition", this.glassPosition);
-        this.resetKey = getSettingValue("🔍MagnifyGlass.ResetKey", this.resetKey);
-        this.glassShape = getSettingValue("🔍MagnifyGlass.GlassShape", this.glassShape);
-        this.borderEnabled = getSettingValue("🔍MagnifyGlass.BorderEnabled", this.borderEnabled);
-        this.textureFiltering = getSettingValue("🔍MagnifyGlass.TextureFiltering", this.textureFiltering);
-        this.alwaysActiveMode = getSettingValue("🔍MagnifyGlass.AlwaysActiveMode", this.alwaysActiveMode);
-        this.toggleFollowCursorKey = getSettingValue("🔍MagnifyGlass.ToggleFollowCursorKey", this.toggleFollowCursorKey);
-    }
-
-    /**
-     * Load saved offsets from localStorage.
-     */
-    loadSavedOffsets() {
-        try {
-            const savedOffsetX = localStorage.getItem(STORAGE_KEYS.OFFSET_X);
-            const savedOffsetY = localStorage.getItem(STORAGE_KEYS.OFFSET_Y);
-
-            if (savedOffsetX !== null) {
-                this.offsetX = parseInt(savedOffsetX, 10);
-            } else {
-                this.offsetX = 0;
-            }
-
-            if (savedOffsetY !== null) {
-                this.offsetY = parseInt(savedOffsetY, 10);
-            } else {
-                this.offsetY = 0;
-            }
-        } catch (e) {
-            console.error("ComfyUI Magnifying Glass ERROR: Error loading saved offsets:", e);
-            this.offsetX = 0;
-            this.offsetY = 0;
-        }
-    }
-
-    /**
-     * Save current offsets to localStorage.
-     */
-    saveOffsets() {
-        try {
-            localStorage.setItem(STORAGE_KEYS.OFFSET_X, this.offsetX.toString());
-            localStorage.setItem(STORAGE_KEYS.OFFSET_Y, this.offsetY.toString());
-        } catch (e) {
-            console.error("ComfyUI Magnifying Glass ERROR: Error saving offsets:", e);
-        }
-    }
-
-    /**
-     * Reset offsets to default (zero).
-     */
-    resetOffsets() {
-        this.offsetX = 0;
-        this.offsetY = 0;
-        this.saveOffsets();
+  }
+  /**
+   * Save current offsets to localStorage.
+   */
+  saveOffsets() {
+    try {
+      localStorage.setItem(STORAGE_KEYS.OFFSET_X, this.offsetX.toString());
+      localStorage.setItem(STORAGE_KEYS.OFFSET_Y, this.offsetY.toString());
+    } catch (e) {
+      console.error("ComfyUI Magnifying Glass ERROR: Error saving offsets:", e);
     }
+  }
+  /**
+   * Reset offsets to default (zero).
+   */
+  resetOffsets() {
+    this.offsetX = 0;
+    this.offsetY = 0;
+    this.saveOffsets();
+  }
 }
+export {
+  ConfigManager
+};
+//# sourceMappingURL=ConfigManager.js.map

web/magnify-glass/DebugManager.js

@@ -1,177 +1,128 @@
-/**
- * ComfyUI MagnifyGlass - DebugManager
- * 
- * Handles debug visualization and logging.
- */
-
-import { app } from "../../../../scripts/app.js";
-
-/**
- * Debug Manager class.
- * Provides debug logging and canvas visualization.
- */
-export class DebugManager {
-    /**
-     * @param {import('./ConfigManager.js').ConfigManager} config 
-     * @param {import('./MagnifierState.js').MagnifierState} state 
-     * @param {import('./UiManager.js').UiManager} ui 
-     */
-    constructor(config, state, ui) {
-        this.config = config;
-        this.state = state;
-        this.ui = ui;
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class DebugManager {
+  constructor(config, state, ui) {
+    __publicField(this, "config");
+    __publicField(this, "state");
+    __publicField(this, "ui");
+    this.config = config;
+    this.state = state;
+    this.ui = ui;
+  }
+  /**
+   * Log a message if debug mode is enabled.
+   */
+  log(...args) {
+    if (this.config.debugMode) {
+      console.log("ComfyUI Magnifying Glass:", ...args);
     }
-
-    /**
-     * Log a message if debug mode is enabled.
-     * @param  {...any} args 
-     */
-    log(...args) {
-        if (this.config.debugMode) {
-            console.log("ComfyUI Magnifying Glass:", ...args);
+  }
+  /**
+   * Log an error message.
+   */
+  error(...args) {
+    console.error("ComfyUI Magnifying Glass ERROR:", ...args);
+  }
+  /**
+   * Print detailed canvas information for debugging.
+   */
+  printCanvasInfo() {
+    if (!this.config.debugMode) return;
+    try {
+      const canvasManager = app.canvas;
+      const canvas = canvasManager == null ? void 0 : canvasManager.graph_canvas;
+      if (!canvas) {
+        this.log("Could not find graph canvas for detailed info");
+        return;
+      }
+      this.log("---- Canvas Information ----");
+      this.log(`Canvas dimensions: ${canvas.width}x${canvas.height}`);
+      this.log(`Canvas display size: ${canvas.clientWidth}x${canvas.clientHeight}`);
+      this.log(`Canvas CSS transform: ${canvas.style.transform || "none"}`);
+      const ds = canvasManager.ds;
+      if (ds) {
+        this.log(`Canvas DS scale: ${ds.scale}`);
+        if (ds.offset) {
+          this.log(`Canvas DS offset: [${ds.offset[0]}, ${ds.offset[1]}]`);
+        } else {
+          this.log("Canvas DS offset not found");
         }
+      } else {
+        this.log("Canvas DS object not found");
+      }
+      const screenWidth = window.innerWidth;
+      const screenHeight = window.innerHeight;
+      const canvasWidth = canvas.width;
+      const canvasHeight = canvas.height;
+      this.log(`Window dimensions: ${screenWidth}x${screenHeight}`);
+      this.log(`Resolution scale factor: X=${canvasWidth / screenWidth}, Y=${canvasHeight / screenHeight}`);
+      this.log("---- End Canvas Information ----");
+    } catch (e) {
+      this.log("Error in printCanvasInfo:", e);
     }
-
-    /**
-     * Log an error message.
-     * @param  {...any} args 
-     */
-    error(...args) {
-        console.error("ComfyUI Magnifying Glass ERROR:", ...args);
-    }
-
-    /**
-     * Print detailed canvas information for debugging.
-     */
-    printCanvasInfo() {
-        if (!this.config.debugMode) return;
-
-        try {
-            const canvas = app.canvas.graph_canvas;
-            if (!canvas) {
-                this.log("Could not find graph canvas for detailed info");
-                return;
-            }
-
-            this.log("---- Canvas Information ----");
-            this.log(`Canvas dimensions: ${canvas.width}x${canvas.height}`);
-            this.log(`Canvas display size: ${canvas.clientWidth}x${canvas.clientHeight}`);
-            this.log(`Canvas CSS transform: ${canvas.style.transform || 'none'}`);
-
-            if (app.canvas.ds) {
-                this.log(`Canvas DS scale: ${app.canvas.ds.scale}`);
-                if (app.canvas.ds.offset) {
-                    this.log(`Canvas DS offset: [${app.canvas.ds.offset[0]}, ${app.canvas.ds.offset[1]}]`);
-                } else {
-                    this.log("Canvas DS offset not found");
-                }
-            } else {
-                this.log("Canvas DS object not found");
-            }
-
-            const screenWidth = window.innerWidth;
-            const screenHeight = window.innerHeight;
-            const canvasWidth = canvas.width;
-            const canvasHeight = canvas.height;
-
-            this.log(`Window dimensions: ${screenWidth}x${screenHeight}`);
-            this.log(`Resolution scale factor: X=${canvasWidth / screenWidth}, Y=${canvasHeight / screenHeight}`);
-            this.log("---- End Canvas Information ----");
-        } catch (e) {
-            this.log("Error in printCanvasInfo:", e);
-        }
-    }
-
-    /**
-     * Update the debug visualization canvas.
-     */
-    updateDebugView() {
-        if (!this.config.debugMode || !this.ui || !this.ui.debugCanvas || !this.ui.debugCtx) return;
-
-        const debugCtx = this.ui.debugCtx;
-        const debugCanvas = this.ui.debugCanvas;
-
-        debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
-
-        // Draw background
-        debugCtx.fillStyle = 'rgba(0,0,0,0.8)';
-        debugCtx.fillRect(0, 0, debugCanvas.width, debugCanvas.height);
-
-        // Header
-        debugCtx.fillStyle = '#FFFFFF';
-        debugCtx.font = '14px monospace';
-        debugCtx.fillText('Magnify Glass Debug', 10, 20);
-
-        // Position info
-        debugCtx.font = '12px monospace';
-        debugCtx.fillText(`Cursor: (${this.state.x.toFixed(1)}, ${this.state.y.toFixed(1)})`, 10, 50);
-        debugCtx.fillText(`Source Rect: (${this.state.sourceX.toFixed(1)}, ${this.state.sourceY.toFixed(1)}, w:${this.state.sourceWidth.toFixed(1)}, h:${this.state.sourceHeight.toFixed(1)})`, 10, 70);
-
-        // Canvas transform
-        debugCtx.fillText(`Canvas Scale: ${this.state.canvasScale.toFixed(2)}`, 10, 90);
-        debugCtx.fillText(`Canvas Offset: (${this.state.canvasOffsetX.toFixed(1)}, ${this.state.canvasOffsetY.toFixed(1)})`, 10, 110);
-
-        // Offset information
-        debugCtx.fillStyle = '#FFFF00';
-        debugCtx.fillText(`MANUAL OFFSETS: X=${this.config.offsetX}, Y=${this.config.offsetY} (Use arrow keys to adjust)`, 10, 130);
-        debugCtx.fillStyle = '#FFFFFF';
-
-        // Visualization
-        this.drawCanvasVisualization(debugCtx, debugCanvas);
-    }
-
-    /**
-     * Draw a scaled visualization of the canvas and source region.
-     * @param {CanvasRenderingContext2D} debugCtx 
-     * @param {HTMLCanvasElement} debugCanvas 
-     */
-    drawCanvasVisualization(debugCtx, debugCanvas) {
-        const canvasScale = 0.1;
-        const canvasVisX = 10;
-        const canvasVisY = 170;
-        const canvasVisWidth = 380;
-        const canvasVisHeight = 150;
-
-        // Draw canvas representation
-        debugCtx.strokeStyle = '#AAAAAA';
-        debugCtx.strokeRect(canvasVisX, canvasVisY, canvasVisWidth, canvasVisHeight);
-        debugCtx.fillStyle = '#444444';
-        debugCtx.fillRect(canvasVisX, canvasVisY, canvasVisWidth, canvasVisHeight);
-
-        // Calculate cursor position in visualization
-        const cursorVisX = canvasVisX + (this.state.x * canvasScale);
-        const cursorVisY = canvasVisY + (this.state.y * canvasScale);
-
-        // Calculate source rect in visualization
-        const sourceRectVisX = canvasVisX + (this.state.sourceX * canvasScale);
-        const sourceRectVisY = canvasVisY + (this.state.sourceY * canvasScale);
-        const sourceRectVisWidth = this.state.sourceWidth * canvasScale;
-        const sourceRectVisHeight = this.state.sourceHeight * canvasScale;
-
-        // Draw source rect
-        debugCtx.strokeStyle = '#FF0000';
-        debugCtx.strokeRect(sourceRectVisX, sourceRectVisY, sourceRectVisWidth, sourceRectVisHeight);
-
-        // Draw cursor position
-        debugCtx.fillStyle = '#FFFF00';
-        debugCtx.beginPath();
-        debugCtx.arc(cursorVisX, cursorVisY, 3, 0, Math.PI * 2);
-        debugCtx.fill();
-
-        // Draw line from cursor to source rect center
-        debugCtx.strokeStyle = '#00FF00';
-        debugCtx.beginPath();
-        debugCtx.moveTo(cursorVisX, cursorVisY);
-        debugCtx.lineTo(sourceRectVisX + sourceRectVisWidth / 2, sourceRectVisY + sourceRectVisHeight / 2);
-        debugCtx.stroke();
-
-        // Label for visualization
-        debugCtx.fillStyle = '#FFFFFF';
-        debugCtx.fillText('Canvas Visualization (scaled)', canvasVisX, canvasVisY - 5);
-
-        // Offset values
-        const offsetX = this.state.sourceX - this.state.x + (this.state.sourceWidth / 2);
-        const offsetY = this.state.sourceY - this.state.y + (this.state.sourceHeight / 2);
-        debugCtx.fillText(`Alignment Offset: (${offsetX.toFixed(1)}, ${offsetY.toFixed(1)})`, 10, canvasVisY + canvasVisHeight + 20);
-    }
+  }
+  /**
+   * Update the debug visualization canvas.
+   */
+  updateDebugView() {
+    if (!this.config.debugMode || !this.ui || !this.ui.debugCanvas || !this.ui.debugCtx) return;
+    const debugCtx = this.ui.debugCtx;
+    const debugCanvas = this.ui.debugCanvas;
+    debugCtx.clearRect(0, 0, debugCanvas.width, debugCanvas.height);
+    debugCtx.fillStyle = "rgba(0,0,0,0.8)";
+    debugCtx.fillRect(0, 0, debugCanvas.width, debugCanvas.height);
+    debugCtx.fillStyle = "#FFFFFF";
+    debugCtx.font = "14px monospace";
+    debugCtx.fillText("Magnify Glass Debug", 10, 20);
+    debugCtx.font = "12px monospace";
+    debugCtx.fillText(`Cursor: (${this.state.x.toFixed(1)}, ${this.state.y.toFixed(1)})`, 10, 50);
+    debugCtx.fillText(`Source Rect: (${this.state.sourceX.toFixed(1)}, ${this.state.sourceY.toFixed(1)}, w:${this.state.sourceWidth.toFixed(1)}, h:${this.state.sourceHeight.toFixed(1)})`, 10, 70);
+    debugCtx.fillText(`Canvas Scale: ${this.state.canvasScale.toFixed(2)}`, 10, 90);
+    debugCtx.fillText(`Canvas Offset: (${this.state.canvasOffsetX.toFixed(1)}, ${this.state.canvasOffsetY.toFixed(1)})`, 10, 110);
+    debugCtx.fillStyle = "#FFFF00";
+    debugCtx.fillText(`MANUAL OFFSETS: X=${this.config.offsetX}, Y=${this.config.offsetY} (Use arrow keys to adjust)`, 10, 130);
+    debugCtx.fillStyle = "#FFFFFF";
+    this.drawCanvasVisualization(debugCtx, debugCanvas);
+  }
+  /**
+   * Draw a scaled visualization of the canvas and source region.
+   */
+  drawCanvasVisualization(debugCtx, debugCanvas) {
+    const canvasScale = 0.1;
+    const canvasVisX = 10;
+    const canvasVisY = 170;
+    const canvasVisWidth = 380;
+    const canvasVisHeight = 150;
+    debugCtx.strokeStyle = "#AAAAAA";
+    debugCtx.strokeRect(canvasVisX, canvasVisY, canvasVisWidth, canvasVisHeight);
+    debugCtx.fillStyle = "#444444";
+    debugCtx.fillRect(canvasVisX, canvasVisY, canvasVisWidth, canvasVisHeight);
+    const cursorVisX = canvasVisX + this.state.x * canvasScale;
+    const cursorVisY = canvasVisY + this.state.y * canvasScale;
+    const sourceRectVisX = canvasVisX + this.state.sourceX * canvasScale;
+    const sourceRectVisY = canvasVisY + this.state.sourceY * canvasScale;
+    const sourceRectVisWidth = this.state.sourceWidth * canvasScale;
+    const sourceRectVisHeight = this.state.sourceHeight * canvasScale;
+    debugCtx.strokeStyle = "#FF0000";
+    debugCtx.strokeRect(sourceRectVisX, sourceRectVisY, sourceRectVisWidth, sourceRectVisHeight);
+    debugCtx.fillStyle = "#FFFF00";
+    debugCtx.beginPath();
+    debugCtx.arc(cursorVisX, cursorVisY, 3, 0, Math.PI * 2);
+    debugCtx.fill();
+    debugCtx.strokeStyle = "#00FF00";
+    debugCtx.beginPath();
+    debugCtx.moveTo(cursorVisX, cursorVisY);
+    debugCtx.lineTo(sourceRectVisX + sourceRectVisWidth / 2, sourceRectVisY + sourceRectVisHeight / 2);
+    debugCtx.stroke();
+    debugCtx.fillStyle = "#FFFFFF";
+    debugCtx.fillText("Canvas Visualization (scaled)", canvasVisX, canvasVisY - 5);
+    const offsetX = this.state.sourceX - this.state.x + this.state.sourceWidth / 2;
+    const offsetY = this.state.sourceY - this.state.y + this.state.sourceHeight / 2;
+    debugCtx.fillText(`Alignment Offset: (${offsetX.toFixed(1)}, ${offsetY.toFixed(1)})`, 10, canvasVisY + canvasVisHeight + 20);
+  }
 }
+export {
+  DebugManager
+};
+//# sourceMappingURL=DebugManager.js.map

web/magnify-glass/EventHandler.js

@@ -1,233 +1,179 @@
-/**
- * ComfyUI MagnifyGlass - EventHandler
- * 
- * Handles keyboard and mouse events for the magnifying glass.
- */
-
-import { isUserTyping } from '../shared/utils.js';
-import { DEFAULT_PADDING } from '../shared/constants.js';
-
-/**
- * Event Handler class.
- * Manages all keyboard and mouse event handling for the magnifier.
- */
-export class EventHandler {
-    /**
-     * @param {import('./MagnifyGlass.js').MagnifyGlass} magnifyGlass 
-     */
-    constructor(magnifyGlass) {
-        this.magnifyGlass = magnifyGlass;
-
-        // Bind methods to maintain context
-        this.handleKeyDown = this.handleKeyDown.bind(this);
-        this.handleKeyUp = this.handleKeyUp.bind(this);
-        this.handleMouseMove = this.handleMouseMove.bind(this);
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { isUserTyping } from "../shared/utils.js";
+import { DEFAULT_PADDING } from "../shared/constants.js";
+class EventHandler {
+  constructor(magnifyGlass) {
+    __publicField(this, "magnifyGlass");
+    this.magnifyGlass = magnifyGlass;
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+  }
+  /**
+   * Attach all event listeners.
+   */
+  attachListeners() {
+    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keyup", this.handleKeyUp);
+    document.addEventListener("mousemove", this.handleMouseMove);
+  }
+  /**
+   * Detach all event listeners.
+   */
+  detachListeners() {
+    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keyup", this.handleKeyUp);
+    document.removeEventListener("mousemove", this.handleMouseMove);
+  }
+  /**
+   * Handle keydown events.
+   */
+  handleKeyDown(e) {
+    const config = this.magnifyGlass.config;
+    const state = this.magnifyGlass.state;
+    if (isUserTyping()) {
+      return;
     }
-
-    /**
-     * Attach all event listeners.
-     */
-    attachListeners() {
-        document.addEventListener("keydown", this.handleKeyDown);
-        document.addEventListener("keyup", this.handleKeyUp);
-        document.addEventListener("mousemove", this.handleMouseMove);
-    }
-
-    /**
-     * Detach all event listeners.
-     */
-    detachListeners() {
-        document.removeEventListener("keydown", this.handleKeyDown);
-        document.removeEventListener("keyup", this.handleKeyUp);
-        document.removeEventListener("mousemove", this.handleMouseMove);
-    }
-
-    /**
-     * Handle keydown events.
-     * @param {KeyboardEvent} e 
-     */
-    handleKeyDown(e) {
-        const config = this.magnifyGlass.config;
-        const state = this.magnifyGlass.state;
-
-        // Don't handle hotkeys if user is typing in an input field
-        if (isUserTyping()) {
-            return;
-        }
-
-        // Magnifier activation
-        if (e.key.toLowerCase() === config.activationKey &&
-            (!config.altRequired || e.altKey)) {
-            if (config.alwaysActiveMode) {
-                if (state.active) {
-                    state.active = false;
-                    this.magnifyGlass.ui.hide();
-                } else {
-                    state.active = true;
-                    this.magnifyGlass.ui.show();
-                    this.updateInitialPosition();
-                }
-            } else {
-                if (!state.active) {
-                    state.active = true;
-                    this.magnifyGlass.ui.show();
-                    this.updateInitialPosition();
-                }
-            }
-        }
-
-        // Manual offset adjustment keys (only when magnifier is active)
+    console.log(`[MagnifyGlass] KeyDown: ${e.key} (config: ${config.activationKey}, active: ${state.active})`);
+    if (e.key.toLowerCase() === config.activationKey && (!config.altRequired || e.altKey)) {
+      console.log("[MagnifyGlass] Activation key matched!");
+      if (config.alwaysActiveMode) {
         if (state.active) {
-            let offsetChanged = false;
-            const stepSize = e.shiftKey ? config.offsetStep * 5 : config.offsetStep;
-
-            if (e.key === "ArrowUp") {
-                config.offsetY -= stepSize;
-                offsetChanged = true;
-                e.preventDefault();
-            } else if (e.key === "ArrowDown") {
-                config.offsetY += stepSize;
-                offsetChanged = true;
-                e.preventDefault();
-            } else if (e.key === "ArrowLeft") {
-                config.offsetX -= stepSize;
-                offsetChanged = true;
-                e.preventDefault();
-            } else if (e.key === "ArrowRight") {
-                config.offsetX += stepSize;
-                offsetChanged = true;
-                e.preventDefault();
-            } else if (e.key.toLowerCase() === config.resetKey.toLowerCase() &&
-                (!config.altRequired || e.altKey)) {
-                this.magnifyGlass.resetOffsets();
-                offsetChanged = true;
-                e.preventDefault();
-            }
-
-            // Toggle Follow Cursor Key
-            if (e.key.toLowerCase() === config.toggleFollowCursorKey &&
-                (!config.altRequired || e.altKey)) {
-                config.followCursor = !config.followCursor;
-                this.magnifyGlass.debugger.log(`Follow Cursor Toggled: ${config.followCursor ? 'ON' : 'OFF'}`);
-                if (state.active && config.followCursor) {
-                    this.magnifyGlass.ui.positionGlass(
-                        this.magnifyGlass.lastKnownMousePosition.x,
-                        this.magnifyGlass.lastKnownMousePosition.y
-                    );
-                }
-                e.preventDefault();
-            }
-
-            if (offsetChanged) {
-                config.saveOffsets();
-                this.magnifyGlass.updateMagnifiedView();
-            }
+          state.active = false;
+          this.magnifyGlass.ui.hide();
+        } else {
+          state.active = true;
+          this.magnifyGlass.ui.show();
+          this.updateInitialPosition();
         }
-    }
-
-    /**
-     * Handle keyup events.
-     * @param {KeyboardEvent} e 
-     */
-    handleKeyUp(e) {
-        const config = this.magnifyGlass.config;
-        const state = this.magnifyGlass.state;
-
-        if (!config.alwaysActiveMode &&
-            (e.key.toLowerCase() === config.activationKey ||
-                (config.altRequired && e.key === "Alt"))) {
-
-            let shouldDeactivate = false;
-            if (config.altRequired) {
-                if (e.key === "Alt" || e.key.toLowerCase() === config.activationKey) {
-                    shouldDeactivate = true;
-                }
-            } else {
-                if (e.key.toLowerCase() === config.activationKey) {
-                    shouldDeactivate = true;
-                }
-            }
-
-            if (state.active && shouldDeactivate) {
-                state.active = false;
-                this.magnifyGlass.ui.hide();
-            }
+      } else {
+        if (!state.active) {
+          state.active = true;
+          this.magnifyGlass.ui.show();
+          this.updateInitialPosition();
         }
+      }
     }
-
-    /**
-     * Handle mousemove events.
-     * @param {MouseEvent} e 
-     */
-    handleMouseMove(e) {
-        // Always track mouse position
-        this.magnifyGlass.lastKnownMousePosition.x = e.clientX;
-        this.magnifyGlass.lastKnownMousePosition.y = e.clientY;
-
-        if (!this.magnifyGlass.state.active || !this.magnifyGlass.litegraphCanvas) return;
-
-        const rect = this.magnifyGlass.litegraphCanvas.getBoundingClientRect();
-        const cssMouseXOnCanvas = e.clientX - rect.left;
-        const cssMouseYOnCanvas = e.clientY - rect.top;
-
-        // Check if the cursor is over the canvas element
-        if (cssMouseXOnCanvas >= 0 && cssMouseXOnCanvas <= rect.width &&
-            cssMouseYOnCanvas >= 0 && cssMouseYOnCanvas <= rect.height) {
-
-            const canvasElement = this.magnifyGlass.litegraphCanvas;
-            const scaleX = rect.width > 0 ? canvasElement.width / rect.width : 1;
-            const scaleY = rect.height > 0 ? canvasElement.height / rect.height : 1;
-
-            const pixelX = cssMouseXOnCanvas * scaleX;
-            const pixelY = cssMouseYOnCanvas * scaleY;
-
-            this.magnifyGlass.state.x = pixelX;
-            this.magnifyGlass.state.y = pixelY;
-
-            this.magnifyGlass.ui.positionGlass(e.clientX, e.clientY);
-            this.magnifyGlass.updateMagnifiedView();
+    if (state.active) {
+      let offsetChanged = false;
+      const stepSize = e.shiftKey ? config.offsetStep * 5 : config.offsetStep;
+      if (e.key === "ArrowUp") {
+        config.offsetY -= stepSize;
+        offsetChanged = true;
+        e.preventDefault();
+      } else if (e.key === "ArrowDown") {
+        config.offsetY += stepSize;
+        offsetChanged = true;
+        e.preventDefault();
+      } else if (e.key === "ArrowLeft") {
+        config.offsetX -= stepSize;
+        offsetChanged = true;
+        e.preventDefault();
+      } else if (e.key === "ArrowRight") {
+        config.offsetX += stepSize;
+        offsetChanged = true;
+        e.preventDefault();
+      } else if (e.key.toLowerCase() === config.resetKey.toLowerCase() && (!config.altRequired || e.altKey)) {
+        this.magnifyGlass.resetOffsets();
+        offsetChanged = true;
+        e.preventDefault();
+      }
+      if (e.key.toLowerCase() === config.toggleFollowCursorKey && (!config.altRequired || e.altKey)) {
+        config.followCursor = !config.followCursor;
+        this.magnifyGlass.debugger.log(`Follow Cursor Toggled: ${config.followCursor ? "ON" : "OFF"}`);
+        if (state.active && config.followCursor) {
+          this.magnifyGlass.ui.positionGlass(
+            this.magnifyGlass.lastKnownMousePosition.x,
+            this.magnifyGlass.lastKnownMousePosition.y
+          );
         }
+        e.preventDefault();
+      }
+      if (offsetChanged) {
+        config.saveOffsets();
+        this.magnifyGlass.updateMagnifiedView();
+      }
     }
-
-    /**
-     * Update the initial position when magnifier is activated.
-     */
-    updateInitialPosition() {
-        if (!this.magnifyGlass.litegraphCanvas) return;
-
-        const rect = this.magnifyGlass.litegraphCanvas.getBoundingClientRect();
-        const clientX = this.magnifyGlass.lastKnownMousePosition.x;
-        const clientY = this.magnifyGlass.lastKnownMousePosition.y;
-
-        const isOverCanvas = clientX >= rect.left && clientX <= rect.right &&
-            clientY >= rect.top && clientY <= rect.bottom;
-
-        if (this.magnifyGlass.config.alwaysActiveMode || isOverCanvas) {
-            const cssMouseXOnCanvas = clientX - rect.left;
-            const cssMouseYOnCanvas = clientY - rect.top;
-
-            const canvasElement = this.magnifyGlass.litegraphCanvas;
-            const scaleX = rect.width > 0 ? canvasElement.width / rect.width : 1;
-            const scaleY = rect.height > 0 ? canvasElement.height / rect.height : 1;
-
-            const pixelX = cssMouseXOnCanvas * scaleX;
-            const pixelY = cssMouseYOnCanvas * scaleY;
-
-            this.magnifyGlass.state.x = pixelX;
-            this.magnifyGlass.state.y = pixelY;
-
-            const glassSize = this.magnifyGlass.config.glassSize;
-
-            if (!this.magnifyGlass.state.wasActivatedBefore) {
-                // First activation - position at top right of the window
-                this.magnifyGlass.ui.glassDiv.style.left = `${window.innerWidth - glassSize - DEFAULT_PADDING}px`;
-                this.magnifyGlass.ui.glassDiv.style.top = `${DEFAULT_PADDING}px`;
-                this.magnifyGlass.state.wasActivatedBefore = true;
-            } else {
-                this.magnifyGlass.ui.positionGlass(clientX, clientY);
-            }
-
-            this.magnifyGlass.updateMagnifiedView();
+  }
+  /**
+   * Handle keyup events.
+   */
+  handleKeyUp(e) {
+    const config = this.magnifyGlass.config;
+    const state = this.magnifyGlass.state;
+    if (!config.alwaysActiveMode && (e.key.toLowerCase() === config.activationKey || config.altRequired && e.key === "Alt")) {
+      let shouldDeactivate = false;
+      if (config.altRequired) {
+        if (e.key === "Alt" || e.key.toLowerCase() === config.activationKey) {
+          shouldDeactivate = true;
         }
+      } else {
+        if (e.key.toLowerCase() === config.activationKey) {
+          shouldDeactivate = true;
+        }
+      }
+      if (state.active && shouldDeactivate) {
+        state.active = false;
+        this.magnifyGlass.ui.hide();
+      }
     }
+  }
+  /**
+   * Handle mousemove events.
+   */
+  handleMouseMove(e) {
+    this.magnifyGlass.lastKnownMousePosition.x = e.clientX;
+    this.magnifyGlass.lastKnownMousePosition.y = e.clientY;
+    if (!this.magnifyGlass.state.active || !this.magnifyGlass.litegraphCanvas) return;
+    const rect = this.magnifyGlass.litegraphCanvas.getBoundingClientRect();
+    const cssMouseXOnCanvas = e.clientX - rect.left;
+    const cssMouseYOnCanvas = e.clientY - rect.top;
+    if (cssMouseXOnCanvas >= 0 && cssMouseXOnCanvas <= rect.width && cssMouseYOnCanvas >= 0 && cssMouseYOnCanvas <= rect.height) {
+      const canvasElement = this.magnifyGlass.litegraphCanvas;
+      const scaleX = rect.width > 0 ? canvasElement.width / rect.width : 1;
+      const scaleY = rect.height > 0 ? canvasElement.height / rect.height : 1;
+      const pixelX = cssMouseXOnCanvas * scaleX;
+      const pixelY = cssMouseYOnCanvas * scaleY;
+      this.magnifyGlass.state.x = pixelX;
+      this.magnifyGlass.state.y = pixelY;
+      this.magnifyGlass.ui.positionGlass(e.clientX, e.clientY);
+      this.magnifyGlass.updateMagnifiedView();
+    }
+  }
+  /**
+   * Update the initial position when magnifier is activated.
+   */
+  updateInitialPosition() {
+    if (!this.magnifyGlass.litegraphCanvas) return;
+    const rect = this.magnifyGlass.litegraphCanvas.getBoundingClientRect();
+    const clientX = this.magnifyGlass.lastKnownMousePosition.x;
+    const clientY = this.magnifyGlass.lastKnownMousePosition.y;
+    const isOverCanvas = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+    if (this.magnifyGlass.config.alwaysActiveMode || isOverCanvas) {
+      const cssMouseXOnCanvas = clientX - rect.left;
+      const cssMouseYOnCanvas = clientY - rect.top;
+      const canvasElement = this.magnifyGlass.litegraphCanvas;
+      const scaleX = rect.width > 0 ? canvasElement.width / rect.width : 1;
+      const scaleY = rect.height > 0 ? canvasElement.height / rect.height : 1;
+      const pixelX = cssMouseXOnCanvas * scaleX;
+      const pixelY = cssMouseYOnCanvas * scaleY;
+      this.magnifyGlass.state.x = pixelX;
+      this.magnifyGlass.state.y = pixelY;
+      const glassSize = this.magnifyGlass.config.glassSize;
+      if (!this.magnifyGlass.state.wasActivatedBefore && this.magnifyGlass.ui.glassDiv) {
+        this.magnifyGlass.ui.glassDiv.style.left = `${window.innerWidth - glassSize - DEFAULT_PADDING}px`;
+        this.magnifyGlass.ui.glassDiv.style.top = `${DEFAULT_PADDING}px`;
+        this.magnifyGlass.state.wasActivatedBefore = true;
+      } else {
+        this.magnifyGlass.ui.positionGlass(clientX, clientY);
+      }
+      this.magnifyGlass.updateMagnifiedView();
+    }
+  }
 }
+export {
+  EventHandler
+};
+//# sourceMappingURL=EventHandler.js.map

web/magnify-glass/MagnifierState.js

@@ -1,44 +1,64 @@
-/**
- * ComfyUI MagnifyGlass - MagnifierState
- * 
- * Manages the state of the magnifying glass.
- */
-
-/**
- * Magnifier state class.
- * Tracks activation state, cursor position, and canvas transforms.
- */
-export class MagnifierState {
-    constructor() {
-        this.active = false;
-        this.wasActivatedBefore = false; // Track if the glass has been activated before
-        this.x = 0; // Cursor X relative to litegraphCanvas
-        this.y = 0; // Cursor Y relative to litegraphCanvas
-        this.sourceX = 0; // Calculated source area X
-        this.sourceY = 0; // Calculated source area Y
-        this.sourceWidth = 0; // Calculated source area width
-        this.sourceHeight = 0; // Calculated source area height
-        this.canvasScale = 1.0; // Current canvas scale/zoom
-        this.canvasOffsetX = 0; // Canvas translation X
-        this.canvasOffsetY = 0; // Canvas translation Y
-        this.isRenderScheduled = false; // Flag to manage requestAnimationFrame
-    }
-
-    /**
-     * Reset state to initial values.
-     */
-    reset() {
-        this.active = false;
-        this.wasActivatedBefore = false;
-        this.x = 0;
-        this.y = 0;
-        this.sourceX = 0;
-        this.sourceY = 0;
-        this.sourceWidth = 0;
-        this.sourceHeight = 0;
-        this.canvasScale = 1.0;
-        this.canvasOffsetX = 0;
-        this.canvasOffsetY = 0;
-        this.isRenderScheduled = false;
-    }
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class MagnifierState {
+  constructor() {
+    /** Whether the magnifier is currently active */
+    __publicField(this, "active");
+    /** Track if the glass has been activated before */
+    __publicField(this, "wasActivatedBefore");
+    /** Cursor X relative to litegraphCanvas */
+    __publicField(this, "x");
+    /** Cursor Y relative to litegraphCanvas */
+    __publicField(this, "y");
+    /** Calculated source area X */
+    __publicField(this, "sourceX");
+    /** Calculated source area Y */
+    __publicField(this, "sourceY");
+    /** Calculated source area width */
+    __publicField(this, "sourceWidth");
+    /** Calculated source area height */
+    __publicField(this, "sourceHeight");
+    /** Current canvas scale/zoom */
+    __publicField(this, "canvasScale");
+    /** Canvas translation X */
+    __publicField(this, "canvasOffsetX");
+    /** Canvas translation Y */
+    __publicField(this, "canvasOffsetY");
+    /** Flag to manage requestAnimationFrame */
+    __publicField(this, "isRenderScheduled");
+    this.active = false;
+    this.wasActivatedBefore = false;
+    this.x = 0;
+    this.y = 0;
+    this.sourceX = 0;
+    this.sourceY = 0;
+    this.sourceWidth = 0;
+    this.sourceHeight = 0;
+    this.canvasScale = 1;
+    this.canvasOffsetX = 0;
+    this.canvasOffsetY = 0;
+    this.isRenderScheduled = false;
+  }
+  /**
+   * Reset state to initial values.
+   */
+  reset() {
+    this.active = false;
+    this.wasActivatedBefore = false;
+    this.x = 0;
+    this.y = 0;
+    this.sourceX = 0;
+    this.sourceY = 0;
+    this.sourceWidth = 0;
+    this.sourceHeight = 0;
+    this.canvasScale = 1;
+    this.canvasOffsetX = 0;
+    this.canvasOffsetY = 0;
+    this.isRenderScheduled = false;
+  }
 }
+export {
+  MagnifierState
+};
+//# sourceMappingURL=MagnifierState.js.map

web/magnify-glass/MagnifierState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagnifierState.js","sources":["../../src/magnify-glass/MagnifierState.ts"],"sourcesContent":["/**\n * ComfyUI MagnifyGlass - MagnifierState (TypeScript)\n * \n * Manages the state of the magnifying glass.\n */\n\n/**\n * Magnifier state class.\n * Tracks activation state, cursor position, and canvas transforms.\n */\nexport class MagnifierState {\n    /** Whether the magnifier is currently active */\n    active: boolean;\n\n    /** Track if the glass has been activated before */\n    wasActivatedBefore: boolean;\n\n    /** Cursor X relative to litegraphCanvas */\n    x: number;\n\n    /** Cursor Y relative to litegraphCanvas */\n    y: number;\n\n    /** Calculated source area X */\n    sourceX: number;\n\n    /** Calculated source area Y */\n    sourceY: number;\n\n    /** Calculated source area width */\n    sourceWidth: number;\n\n    /** Calculated source area height */\n    sourceHeight: number;\n\n    /** Current canvas scale/zoom */\n    canvasScale: number;\n\n    /** Canvas translation X */\n    canvasOffsetX: number;\n\n    /** Canvas translation Y */\n    canvasOffsetY: number;\n\n    /** Flag to manage requestAnimationFrame */\n    isRenderScheduled: boolean;\n\n    constructor() {\n        this.active = false;\n        this.wasActivatedBefore = false;\n        this.x = 0;\n        this.y = 0;\n        this.sourceX = 0;\n        this.sourceY = 0;\n        this.sourceWidth = 0;\n        this.sourceHeight = 0;\n        this.canvasScale = 1.0;\n        this.canvasOffsetX = 0;\n        this.canvasOffsetY = 0;\n        this.isRenderScheduled = false;\n    }\n\n    /**\n     * Reset state to initial values.\n     */\n    reset(): void {\n        this.active = false;\n        this.wasActivatedBefore = false;\n        this.x = 0;\n        this.y = 0;\n        this.sourceX = 0;\n        this.sourceY = 0;\n        this.sourceWidth = 0;\n        this.sourceHeight = 0;\n        this.canvasScale = 1.0;\n        this.canvasOffsetX = 0;\n        this.canvasOffsetY = 0;\n        this.isRenderScheduled = false;\n    }\n}\n"],"names":[],"mappings":";;;AAUO,MAAM,eAAe;AAAA,EAqCxB,cAAc;AAnCd;AAAA;AAGA;AAAA;AAGA;AAAA;AAGA;AAAA;AAGA;AAAA;AAGA;AAAA;AAGA;AAAA;AAGA;AAAA;AAGA;AAAA;AAGA;AAAA;AAGA;AAAA;AAGA;AAAA;AAGI,SAAK,SAAS;AACd,SAAK,qBAAqB;AAC1B,SAAK,IAAI;AACT,SAAK,IAAI;AACT,SAAK,UAAU;AACf,SAAK,UAAU;AACf,SAAK,cAAc;AACnB,SAAK,eAAe;AACpB,SAAK,cAAc;AACnB,SAAK,gBAAgB;AACrB,SAAK,gBAAgB;AACrB,SAAK,oBAAoB;AAAA,EAC7B;AAAA;AAAA;AAAA;AAAA,EAKA,QAAc;AACV,SAAK,SAAS;AACd,SAAK,qBAAqB;AAC1B,SAAK,IAAI;AACT,SAAK,IAAI;AACT,SAAK,UAAU;AACf,SAAK,UAAU;AACf,SAAK,cAAc;AACnB,SAAK,eAAe;AACpB,SAAK,cAAc;AACnB,SAAK,gBAAgB;AACrB,SAAK,gBAAgB;AACrB,SAAK,oBAAoB;AAAA,EAC7B;AACJ;"}

web/magnify-glass/MagnifyGlass.js

@@ -1,362 +1,322 @@
-/**
- * ComfyUI MagnifyGlass - Main Class
- * 
- * Orchestrates all components of the magnifying glass.
- */
-
-import { app } from "../../../../scripts/app.js";
-import { findLiteGraphCanvas, rectsOverlap } from '../shared/utils.js';
-import { DEFAULT_PADDING } from '../shared/constants.js';
-import { ConfigManager } from './ConfigManager.js';
-import { MagnifierState } from './MagnifierState.js';
-import { UiManager } from './UiManager.js';
-import { WebGLRenderer } from './WebGLRenderer.js';
-import { DebugManager } from './DebugManager.js';
-import { EventHandler } from './EventHandler.js';
-
-/**
- * Main MagnifyGlass class.
- * Orchestrates all components and provides the main API.
- */
-export class MagnifyGlass {
-    constructor() {
-        this.config = new ConfigManager();
-        this.state = new MagnifierState();
-        this.ui = new UiManager(this.config, this.state);
-        this.renderer = null;
-        this.debugger = new DebugManager(this.config, this.state, this.ui);
-        this.eventHandler = new EventHandler(this);
-
-        // The LiteGraph canvas
-        this.litegraphCanvas = null;
-
-        // Last known mouse position for better initial positioning
-        this.lastKnownMousePosition = { x: 0, y: 0 };
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { findLiteGraphCanvas, rectsOverlap } from "../shared/utils.js";
+import { DEFAULT_PADDING } from "../shared/constants.js";
+import { registerGlassSettings } from "../shared/settings.js";
+import { ConfigManager } from "./ConfigManager.js";
+import { MagnifierState } from "./MagnifierState.js";
+import { UiManager } from "./UiManager.js";
+import { WebGLRenderer } from "./WebGLRenderer.js";
+import { DebugManager } from "./DebugManager.js";
+import { EventHandler } from "./EventHandler.js";
+class MagnifyGlass {
+  constructor() {
+    __publicField(this, "config");
+    __publicField(this, "state");
+    __publicField(this, "ui");
+    __publicField(this, "renderer");
+    __publicField(this, "debugger");
+    __publicField(this, "eventHandler");
+    /** The LiteGraph canvas */
+    __publicField(this, "litegraphCanvas");
+    /** Last known mouse position for better initial positioning */
+    __publicField(this, "lastKnownMousePosition");
+    /** Whether we're currently over media (for info panel) */
+    __publicField(this, "isOverMedia");
+    /** Current media element under cursor */
+    __publicField(this, "currentMediaElement");
+    this.config = new ConfigManager();
+    this.state = new MagnifierState();
+    this.ui = new UiManager(this.config, this.state);
+    this.renderer = null;
+    this.debugger = new DebugManager(this.config, this.state, this.ui);
+    this.eventHandler = new EventHandler(this);
+    this.litegraphCanvas = null;
+    this.lastKnownMousePosition = { x: 0, y: 0 };
+    this.isOverMedia = false;
+    this.currentMediaElement = null;
+  }
+  /**
+   * Initialize the magnifying glass.
+   */
+  init() {
+    if (typeof LiteGraph === "undefined" || typeof app === "undefined" || !app.canvas) {
+      this.debugger.log("LiteGraph or app not ready, retrying in 100ms.");
+      setTimeout(() => this.init(), 100);
+      return;
     }
-
-    /**
-     * Initialize the magnifying glass.
-     */
-    init() {
-        if (typeof LiteGraph === 'undefined' || typeof app === 'undefined' || !app.canvas) {
-            this.debugger.log("LiteGraph or app not ready, retrying in 100ms.");
-            setTimeout(() => this.init(), 100);
-            return;
-        }
-        this.debugger.log("LiteGraph and app ready.");
-
-        // Load saved offsets first
-        this.config.loadSavedOffsets();
-
-        // Print detailed canvas information
-        this.debugger.printCanvasInfo();
-
-        // Create UI elements
-        this.ui.createElements();
-
-        // Setup WebGL renderer
-        this.renderer = new WebGLRenderer(this.config, this.state, this.ui);
-        if (!this.renderer.isValid()) {
-            this.ui.cleanup();
-            return;
-        }
-
-        // Find the LiteGraph canvas
-        this.litegraphCanvas = findLiteGraphCanvas();
-        this.debugger.log("LiteGraph canvas found:", this.litegraphCanvas);
-        if (!this.litegraphCanvas) {
-            this.debugger.error("Could not find LiteGraph canvas. Magnifier will not work.");
-            this.ui.cleanup();
-            return;
-        }
-
-        // Attach event handlers
-        this.eventHandler.attachListeners();
-
-        this.debugger.log(`Initialized (WebGL) with Smart Input Detection. Press ${this.config.altRequired ? 'Alt+' : ''}${this.config.activationKey.toUpperCase()} to activate.`);
+    this.debugger.log("LiteGraph and app ready.");
+    this.config.loadSavedOffsets();
+    this.debugger.printCanvasInfo();
+    this.ui.createElements();
+    this.renderer = new WebGLRenderer(this.config, this.state, this.ui);
+    if (!this.renderer.isValid()) {
+      this.ui.cleanup();
+      return;
     }
-
-    /**
-     * Update the magnified view.
-     */
-    updateMagnifiedView() {
+    this.litegraphCanvas = findLiteGraphCanvas();
+    this.debugger.log("LiteGraph canvas found:", this.litegraphCanvas);
+    if (!this.litegraphCanvas) {
+      this.debugger.error("Could not find LiteGraph canvas. Magnifier will not work.");
+      this.ui.cleanup();
+      return;
+    }
+    this.eventHandler.attachListeners();
+    registerGlassSettings(this);
+    this.debugger.log(`Initialized (WebGL) with Smart Input Detection. Press ${this.config.altRequired ? "Alt+" : ""}${this.config.activationKey.toUpperCase()} to activate.`);
+  }
+  /**
+   * Update the magnified view.
+   */
+  updateMagnifiedView() {
+    if (!this.state.active || !this.renderer || !this.litegraphCanvas) {
+      return;
+    }
+    this.updateCanvasTransformation();
+    this.calculateSourceRegion();
+    if (!this.state.isRenderScheduled) {
+      this.state.isRenderScheduled = true;
+      requestAnimationFrame(() => {
         if (!this.state.active || !this.renderer || !this.litegraphCanvas) {
-            return;
-        }
-
-        // Get canvas transformation info
-        this.updateCanvasTransformation();
-
-        // Calculate the source region
-        this.calculateSourceRegion();
-
-        // Schedule the rendering operation
-        if (!this.state.isRenderScheduled) {
-            this.state.isRenderScheduled = true;
-            requestAnimationFrame(() => {
-                if (!this.state.active || !this.renderer || !this.litegraphCanvas) {
-                    this.state.isRenderScheduled = false;
-                    return;
-                }
-                // Render the magnified view
-                this.renderer.render(this.litegraphCanvas);
-
-                // Update debug visualization
-                this.debugger.updateDebugView();
-
-                // Render HTML overlays
-                this.renderHtmlOverlays();
-
-                this.state.isRenderScheduled = false;
-            });
+          this.state.isRenderScheduled = false;
+          return;
         }
+        this.renderer.render(this.litegraphCanvas);
+        this.debugger.updateDebugView();
+        this.renderHtmlOverlays();
+        this.state.isRenderScheduled = false;
+      });
     }
-
-    /**
-     * Update canvas transformation state.
-     */
-    updateCanvasTransformation() {
-        this.state.canvasScale = 1.0;
-        this.state.canvasOffsetX = 0;
-        this.state.canvasOffsetY = 0;
-
-        if (app && app.canvas) {
-            if (app.canvas.ds) {
-                if (typeof app.canvas.ds.scale === 'number') {
-                    this.state.canvasScale = app.canvas.ds.scale;
-                }
-
-                if (app.canvas.ds.offset) {
-                    this.state.canvasOffsetX = app.canvas.ds.offset[0] || 0;
-                    this.state.canvasOffsetY = app.canvas.ds.offset[1] || 0;
-                }
+  }
+  /**
+   * Update canvas transformation state.
+   */
+  updateCanvasTransformation() {
+    this.state.canvasScale = 1;
+    this.state.canvasOffsetX = 0;
+    this.state.canvasOffsetY = 0;
+    if (app == null ? void 0 : app.canvas) {
+      const ds = app.canvas.ds;
+      if (ds) {
+        if (typeof ds.scale === "number") {
+          this.state.canvasScale = ds.scale;
+        }
+        if (ds.offset) {
+          this.state.canvasOffsetX = ds.offset[0] || 0;
+          this.state.canvasOffsetY = ds.offset[1] || 0;
+        }
+      }
+    }
+  }
+  /**
+   * Calculate the source region for magnification.
+   */
+  calculateSourceRegion() {
+    const cursorPixelX = this.state.x;
+    const cursorPixelY = this.state.y;
+    const canvasScale = this.state.canvasScale;
+    const canvasOffsetX = this.state.canvasOffsetX;
+    const canvasOffsetY = this.state.canvasOffsetY;
+    if (canvasScale === 0) return;
+    const cursorGraphX = (cursorPixelX - canvasOffsetX) / canvasScale;
+    const cursorGraphY = (cursorPixelY - canvasOffsetY) / canvasScale;
+    const targetGraphCenterX = cursorGraphX + this.config.offsetX;
+    const targetGraphCenterY = cursorGraphY + this.config.offsetY;
+    const sourceGraphWidth = this.config.glassSize / this.config.zoomFactor / canvasScale;
+    const sourceGraphHeight = this.config.glassSize / this.config.zoomFactor / canvasScale;
+    const sourceGraphX = targetGraphCenterX - sourceGraphWidth / 2;
+    const sourceGraphY = targetGraphCenterY - sourceGraphHeight / 2;
+    this.state.sourceX = sourceGraphX * canvasScale + canvasOffsetX;
+    this.state.sourceY = sourceGraphY * canvasScale + canvasOffsetY;
+    this.state.sourceWidth = sourceGraphWidth * canvasScale;
+    this.state.sourceHeight = sourceGraphHeight * canvasScale;
+  }
+  /**
+   * Render HTML overlays for text and media in the magnified view.
+   */
+  renderHtmlOverlays() {
+    const graph = app.graph;
+    if (!this.state.active || !this.ui.htmlOverlayContainer || !graph || !this.litegraphCanvas) {
+      if (this.ui.htmlOverlayContainer) this.ui.htmlOverlayContainer.innerHTML = "";
+      return;
+    }
+    this.ui.htmlOverlayContainer.innerHTML = "";
+    const magnifyRect = {
+      x: this.state.sourceX,
+      y: this.state.sourceY,
+      width: this.state.sourceWidth,
+      height: this.state.sourceHeight
+    };
+    const nodes = graph._nodes;
+    if (!nodes) return;
+    for (const node of nodes) {
+      const widgets = node.widgets;
+      if (!widgets) continue;
+      for (const widget of widgets) {
+        let isTextElement = false;
+        let isVideoElement = false;
+        let isImageElement = false;
+        let elementToProcess = null;
+        if (widget.element) {
+          const element = widget.element;
+          if (widget.type === "text" || widget.type === "string" || element.tagName === "TEXTAREA") {
+            isTextElement = true;
+            elementToProcess = element;
+          } else if (element.tagName === "VIDEO") {
+            isVideoElement = true;
+            elementToProcess = element;
+          } else if (element.tagName === "IMG") {
+            isImageElement = true;
+            elementToProcess = element;
+          } else {
+            const potentialVideo = element.querySelector("video");
+            if (potentialVideo) {
+              isVideoElement = true;
+              elementToProcess = potentialVideo;
+            } else {
+              const potentialImage = element.querySelector("img");
+              if (potentialImage) {
+                isImageElement = true;
+                elementToProcess = potentialImage;
+              }
             }
+          }
         }
-    }
-
-    /**
-     * Calculate the source region for magnification.
-     */
-    calculateSourceRegion() {
-        const cursorPixelX = this.state.x;
-        const cursorPixelY = this.state.y;
-        const canvasScale = this.state.canvasScale;
-        const canvasOffsetX = this.state.canvasOffsetX;
-        const canvasOffsetY = this.state.canvasOffsetY;
-
-        if (canvasScale === 0) return;
-
-        // Convert cursor canvas pixels to LiteGraph graph coordinates
-        const cursorGraphX = (cursorPixelX - canvasOffsetX) / canvasScale;
-        const cursorGraphY = (cursorPixelY - canvasOffsetY) / canvasScale;
-
-        // Apply manual offset
-        const targetGraphCenterX = cursorGraphX + this.config.offsetX;
-        const targetGraphCenterY = cursorGraphY + this.config.offsetY;
-
-        // Calculate source dimensions in graph units
-        const sourceGraphWidth = (this.config.glassSize / this.config.zoomFactor) / canvasScale;
-        const sourceGraphHeight = (this.config.glassSize / this.config.zoomFactor) / canvasScale;
-
-        // Calculate source top-left corner in graph coordinates
-        const sourceGraphX = targetGraphCenterX - (sourceGraphWidth / 2);
-        const sourceGraphY = targetGraphCenterY - (sourceGraphHeight / 2);
-
-        // Convert back to canvas pixel coordinates
-        this.state.sourceX = (sourceGraphX * canvasScale) + canvasOffsetX;
-        this.state.sourceY = (sourceGraphY * canvasScale) + canvasOffsetY;
-        this.state.sourceWidth = sourceGraphWidth * canvasScale;
-        this.state.sourceHeight = sourceGraphHeight * canvasScale;
-    }
-
-    /**
-     * Render HTML overlays for text and media in the magnified view.
-     */
-    renderHtmlOverlays() {
-        if (!this.state.active || !this.ui.htmlOverlayContainer || !app.graph || !this.litegraphCanvas) {
-            if (this.ui.htmlOverlayContainer) this.ui.htmlOverlayContainer.innerHTML = '';
-            return;
-        }
-
-        this.ui.htmlOverlayContainer.innerHTML = '';
-
-        const magnifyRect = {
-            x: this.state.sourceX,
-            y: this.state.sourceY,
-            width: this.state.sourceWidth,
-            height: this.state.sourceHeight
-        };
-
-        const nodes = app.graph._nodes;
-        if (!nodes) return;
-
-        for (const node of nodes) {
-            if (!node.widgets) continue;
-
-            for (const widget of node.widgets) {
-                let isTextElement = false;
-                let isVideoElement = false;
-                let isImageElement = false;
-                let elementToProcess = null;
-
-                if (widget.element) {
-                    if (widget.type === "text" || widget.type === "string" || widget.element.tagName === 'TEXTAREA') {
-                        isTextElement = true;
-                        elementToProcess = widget.element;
-                    } else if (widget.element.tagName === 'VIDEO') {
-                        isVideoElement = true;
-                        elementToProcess = widget.element;
-                    } else if (widget.element.tagName === 'IMG') {
-                        isImageElement = true;
-                        elementToProcess = widget.element;
-                    } else {
-                        const potentialVideo = widget.element.querySelector('video');
-                        if (potentialVideo) {
-                            isVideoElement = true;
-                            elementToProcess = potentialVideo;
-                        } else {
-                            const potentialImage = widget.element.querySelector('img');
-                            if (potentialImage) {
-                                isImageElement = true;
-                                elementToProcess = potentialImage;
-                            }
-                        }
-                    }
-                }
-
-                if (elementToProcess && (isTextElement || isVideoElement || isImageElement)) {
-                    const widgetRect = elementToProcess.getBoundingClientRect();
-                    const canvasRect = this.litegraphCanvas.getBoundingClientRect();
-
-                    const canvasToViewportScaleX = canvasRect.width > 0 ? (this.litegraphCanvas.width / canvasRect.width) : 1;
-                    const canvasToViewportScaleY = canvasRect.height > 0 ? (this.litegraphCanvas.height / canvasRect.height) : 1;
-
-                    const widgetCanvasX = (widgetRect.left - canvasRect.left) * canvasToViewportScaleX;
-                    const widgetCanvasY = (widgetRect.top - canvasRect.top) * canvasToViewportScaleY;
-                    const widgetCanvasWidth = widgetRect.width * canvasToViewportScaleX;
-                    const widgetCanvasHeight = widgetRect.height * canvasToViewportScaleY;
-
-                    const widgetSourceRect = {
-                        x: widgetCanvasX,
-                        y: widgetCanvasY,
-                        width: widgetCanvasWidth,
-                        height: widgetCanvasHeight
-                    };
-
-                    if (rectsOverlap(magnifyRect, widgetSourceRect)) {
-                        const clonedElement = elementToProcess.cloneNode(true);
-                        clonedElement.style.position = 'absolute';
-                        clonedElement.style.pointerEvents = 'none';
-
-                        if (isTextElement) {
-                            clonedElement.style.backgroundColor = elementToProcess.style.backgroundColor || '#222';
-                            clonedElement.style.color = elementToProcess.style.color || '#DDD';
-                            clonedElement.style.border = elementToProcess.style.border || '1px solid #555';
-                            clonedElement.disabled = true;
-                        } else if (isVideoElement) {
-                            clonedElement.src = elementToProcess.src;
-                            clonedElement.autoplay = elementToProcess.autoplay;
-                            clonedElement.loop = elementToProcess.loop;
-                            clonedElement.preload = elementToProcess.preload;
-                            clonedElement.crossOrigin = elementToProcess.crossOrigin;
-                            clonedElement.muted = true;
-                            if (!elementToProcess.paused) {
-                                clonedElement.play().catch(e => console.warn("Magnify Glass: Cloned video play failed", e));
-                            }
-                            clonedElement.currentTime = elementToProcess.currentTime;
-                        } else if (isImageElement) {
-                            clonedElement.src = elementToProcess.src;
-                            clonedElement.alt = elementToProcess.alt;
-                        }
-
-                        const relativeX = widgetSourceRect.x - magnifyRect.x;
-                        const relativeY = widgetSourceRect.y - magnifyRect.y;
-                        const magnifiedX = relativeX * this.config.zoomFactor;
-                        const magnifiedY = relativeY * this.config.zoomFactor;
-
-                        clonedElement.style.left = `${magnifiedX}px`;
-                        clonedElement.style.top = `${magnifiedY}px`;
-                        clonedElement.style.width = `${widgetSourceRect.width}px`;
-                        clonedElement.style.height = `${widgetSourceRect.height}px`;
-                        clonedElement.style.transformOrigin = 'top left';
-                        clonedElement.style.transform = `scale(${this.config.zoomFactor})`;
-
-                        if (isTextElement && clonedElement.style.fontSize) {
-                            const originalFontSize = parseFloat(window.getComputedStyle(elementToProcess).fontSize);
-                            clonedElement.style.fontSize = `${originalFontSize}px`;
-                        }
-
-                        this.ui.htmlOverlayContainer.appendChild(clonedElement);
-                    }
-                }
+        if (elementToProcess && (isTextElement || isVideoElement || isImageElement)) {
+          const widgetRect = elementToProcess.getBoundingClientRect();
+          const canvasRect = this.litegraphCanvas.getBoundingClientRect();
+          const canvasToViewportScaleX = canvasRect.width > 0 ? this.litegraphCanvas.width / canvasRect.width : 1;
+          const canvasToViewportScaleY = canvasRect.height > 0 ? this.litegraphCanvas.height / canvasRect.height : 1;
+          const widgetCanvasX = (widgetRect.left - canvasRect.left) * canvasToViewportScaleX;
+          const widgetCanvasY = (widgetRect.top - canvasRect.top) * canvasToViewportScaleY;
+          const widgetCanvasWidth = widgetRect.width * canvasToViewportScaleX;
+          const widgetCanvasHeight = widgetRect.height * canvasToViewportScaleY;
+          const widgetSourceRect = {
+            x: widgetCanvasX,
+            y: widgetCanvasY,
+            width: widgetCanvasWidth,
+            height: widgetCanvasHeight
+          };
+          if (rectsOverlap(magnifyRect, widgetSourceRect)) {
+            const clonedElement = elementToProcess.cloneNode(true);
+            clonedElement.style.position = "absolute";
+            clonedElement.style.pointerEvents = "none";
+            if (isTextElement) {
+              clonedElement.style.backgroundColor = elementToProcess.style.backgroundColor || "#222";
+              clonedElement.style.color = elementToProcess.style.color || "#DDD";
+              clonedElement.style.border = elementToProcess.style.border || "1px solid #555";
+              clonedElement.disabled = true;
+            } else if (isVideoElement) {
+              const video = clonedElement;
+              const originalVideo = elementToProcess;
+              video.src = originalVideo.src;
+              video.autoplay = originalVideo.autoplay;
+              video.loop = originalVideo.loop;
+              video.preload = originalVideo.preload;
+              video.crossOrigin = originalVideo.crossOrigin;
+              video.muted = true;
+              if (!originalVideo.paused) {
+                video.play().catch((e) => console.warn("Magnify Glass: Cloned video play failed", e));
+              }
+              video.currentTime = originalVideo.currentTime;
+            } else if (isImageElement) {
+              const img = clonedElement;
+              const originalImg = elementToProcess;
+              img.src = originalImg.src;
+              img.alt = originalImg.alt;
             }
+            const relativeX = widgetSourceRect.x - magnifyRect.x;
+            const relativeY = widgetSourceRect.y - magnifyRect.y;
+            const magnifiedX = relativeX * this.config.zoomFactor;
+            const magnifiedY = relativeY * this.config.zoomFactor;
+            clonedElement.style.left = `${magnifiedX}px`;
+            clonedElement.style.top = `${magnifiedY}px`;
+            clonedElement.style.width = `${widgetSourceRect.width}px`;
+            clonedElement.style.height = `${widgetSourceRect.height}px`;
+            clonedElement.style.transformOrigin = "top left";
+            clonedElement.style.transform = `scale(${this.config.zoomFactor})`;
+            if (isTextElement && clonedElement.style.fontSize) {
+              const originalFontSize = parseFloat(window.getComputedStyle(elementToProcess).fontSize);
+              clonedElement.style.fontSize = `${originalFontSize}px`;
+            }
+            this.ui.htmlOverlayContainer.appendChild(clonedElement);
+          }
         }
+      }
     }
-
-    /**
-     * Update config from current settings values.
-     */
-    updateConfigFromSettings() {
-        this.config.loadSettings();
+  }
+  /**
+   * Update config from current settings values.
+   */
+  updateConfigFromSettings() {
+    this.config.loadSettings();
+  }
+  /**
+   * Apply UI changes based on current config.
+   */
+  applyUiChanges() {
+    var _a;
+    this.ui.applyStyles();
+    if ((_a = this.renderer) == null ? void 0 : _a.gl) {
+      this.renderer.updateViewport();
     }
-
-    /**
-     * Apply UI changes based on current config.
-     */
-    applyUiChanges() {
-        this.ui.applyStyles();
-
-        if (this.renderer && this.renderer.gl) {
-            this.renderer.updateViewport();
+  }
+  /**
+   * Toggle the magnify glass on/off.
+   */
+  toggle() {
+    this.state.active = !this.state.active;
+    if (this.state.active) {
+      this.ui.show();
+    } else {
+      this.ui.hide();
+    }
+  }
+  /**
+   * Reset offsets and panel positions to defaults.
+   */
+  resetOffsets() {
+    this.config.resetOffsets();
+    if (this.state.active) {
+      this.updateMagnifiedView();
+    }
+    if (this.ui.glassDiv) {
+      const glassSize = this.config.glassSize;
+      this.ui.glassDiv.style.left = `${window.innerWidth - glassSize - DEFAULT_PADDING}px`;
+      this.ui.glassDiv.style.top = `${DEFAULT_PADDING}px`;
+      this.state.wasActivatedBefore = false;
+    }
+    const extensions = window.comfyUIMagnifyGlassExtensions;
+    if (extensions && extensions.length > 0) {
+      extensions.forEach((extension) => {
+        var _a;
+        if (extension == null ? void 0 : extension.stateManager) {
+          extension.stateManager.state.isPanelPinned = false;
+          extension.stateManager.state.isPanelLocked = false;
+          extension.stateManager.state.isAutoPinned = false;
+          extension.stateManager.state.pinnedPosition = { x: 0, y: 0 };
+          extension.stateManager.state.lastPinnedPosition = null;
+          if (extension.positionManager) {
+            extension.positionManager.positionPanel();
+          }
+          if ((_a = extension.uiManager) == null ? void 0 : _a.updateControlStates) {
+            extension.uiManager.updateControlStates();
+          }
         }
+      });
     }
-
-    /**
-     * Reset offsets and panel positions to defaults.
-     */
-    resetOffsets() {
-        this.config.resetOffsets();
-
-        if (this.state.active) {
-            this.updateMagnifiedView();
-        }
-
-        // Reset magnify glass position to top-right corner
-        if (this.ui.glassDiv) {
-            const glassSize = this.config.glassSize;
-            this.ui.glassDiv.style.left = `${window.innerWidth - glassSize - DEFAULT_PADDING}px`;
-            this.ui.glassDiv.style.top = `${DEFAULT_PADDING}px`;
-            this.state.wasActivatedBefore = false;
-        }
-
-        // Reset inspector panel position if exists
-        if (window.comfyUIMagnifyGlassExtensions && window.comfyUIMagnifyGlassExtensions.length > 0) {
-            window.comfyUIMagnifyGlassExtensions.forEach(extension => {
-                if (extension && extension.stateManager) {
-                    extension.stateManager.state.isPanelPinned = false;
-                    extension.stateManager.state.isPanelLocked = false;
-                    extension.stateManager.state.isAutoPinned = false;
-                    extension.stateManager.state.pinnedPosition = { x: 0, y: 0 };
-                    extension.stateManager.state.lastPinnedPosition = null;
-
-                    if (extension.positionManager) {
-                        extension.positionManager.positionPanel();
-                    }
-                    if (extension.uiManager && extension.uiManager.updateControlStates) {
-                        extension.uiManager.updateControlStates();
-                    }
-                }
-            });
-        }
-
-        this.debugger.log("Reset: Magnify glass and inspector panel positions restored to defaults");
-    }
-
-    /**
-     * Cleanup all resources.
-     */
-    cleanup() {
-        this.eventHandler.detachListeners();
-        this.ui.cleanup();
-    }
+    this.debugger.log("Reset: Magnify glass and inspector panel positions restored to defaults");
+  }
+  /**
+   * Cleanup all resources.
+   */
+  cleanup() {
+    this.eventHandler.detachListeners();
+    this.ui.cleanup();
+  }
 }
+export {
+  MagnifyGlass
+};
+//# sourceMappingURL=MagnifyGlass.js.map

web/magnify-glass/UiManager.js

@@ -1,43 +1,36 @@
-/**
- * ComfyUI MagnifyGlass - UiManager
- * 
- * Handles creation and management of DOM elements for the magnifying glass.
- */
-
-import { Z_INDEX, DEFAULT_PADDING } from '../shared/constants.js';
-
-/**
- * UI Manager class.
- * Manages all DOM elements for the magnifying glass.
- */
-export class UiManager {
-    /**
-     * @param {import('./ConfigManager.js').ConfigManager} config 
-     * @param {import('./MagnifierState.js').MagnifierState} state 
-     */
-    constructor(config, state) {
-        this.config = config;
-        this.state = state;
-        this.glassDiv = null;
-        this.glassCanvas = null;
-        this.debugCanvas = null;
-        this.debugCtx = null;
-        this.htmlOverlayContainer = null;
-    }
-
-    /**
-     * Create all DOM elements for the magnifying glass.
-     */
-    createElements() {
-        // Create magnifying glass container
-        this.glassDiv = document.createElement("div");
-        this.glassDiv.id = "comfyui-magnify-glass";
-        this.glassDiv.style.cssText = `
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { Z_INDEX, DEFAULT_PADDING } from "../shared/constants.js";
+class UiManager {
+  constructor(config, state) {
+    __publicField(this, "config");
+    __publicField(this, "state");
+    __publicField(this, "glassDiv");
+    __publicField(this, "glassCanvas");
+    __publicField(this, "debugCanvas");
+    __publicField(this, "debugCtx");
+    __publicField(this, "htmlOverlayContainer");
+    this.config = config;
+    this.state = state;
+    this.glassDiv = null;
+    this.glassCanvas = null;
+    this.debugCanvas = null;
+    this.debugCtx = null;
+    this.htmlOverlayContainer = null;
+  }
+  /**
+   * Create all DOM elements for the magnifying glass.
+   */
+  createElements() {
+    this.glassDiv = document.createElement("div");
+    this.glassDiv.id = "comfyui-magnify-glass";
+    this.glassDiv.style.cssText = `
             position: absolute;
             width: ${this.config.glassSize}px;
             height: ${this.config.glassSize}px;
             border-radius: ${this.config.glassShape === "Circle" ? "50%" : "0px"};
-            border: ${this.config.borderEnabled ? `${this.config.borderWidth}px solid ${this.config.borderColor}` : 'none'};
+            border: ${this.config.borderEnabled ? `${this.config.borderWidth}px solid ${this.config.borderColor}` : "none"};
             overflow: hidden;
             pointer-events: none;
             z-index: ${Z_INDEX.GLASS};
@@ -45,18 +38,14 @@ export class UiManager {
             box-shadow: 0 5px 15px rgba(0,0,0,0.3);
             background-color: rgba(255,255,255,0.1);
         `;
-
-        // Create WebGL canvas for the magnifying glass
-        this.glassCanvas = document.createElement("canvas");
-        this.glassCanvas.width = this.config.glassSize;
-        this.glassCanvas.height = this.config.glassSize;
-        this.glassCanvas.id = "comfyui-magnify-canvas";
-        this.glassDiv.appendChild(this.glassCanvas);
-
-        // Create HTML overlay container
-        this.htmlOverlayContainer = document.createElement("div");
-        this.htmlOverlayContainer.id = "comfyui-magnify-html-overlay";
-        this.htmlOverlayContainer.style.cssText = `
+    this.glassCanvas = document.createElement("canvas");
+    this.glassCanvas.width = this.config.glassSize;
+    this.glassCanvas.height = this.config.glassSize;
+    this.glassCanvas.id = "comfyui-magnify-canvas";
+    this.glassDiv.appendChild(this.glassCanvas);
+    this.htmlOverlayContainer = document.createElement("div");
+    this.htmlOverlayContainer.id = "comfyui-magnify-html-overlay";
+    this.htmlOverlayContainer.style.cssText = `
             position: absolute;
             top: 0;
             left: 0;
@@ -65,25 +54,21 @@ export class UiManager {
             pointer-events: none;
             overflow: hidden; 
         `;
-        this.glassDiv.appendChild(this.htmlOverlayContainer);
-
-        document.body.appendChild(this.glassDiv);
-
-        // Create debug canvas if debug mode is enabled
-        if (this.config.debugMode) {
-            this.createDebugCanvas();
-        }
+    this.glassDiv.appendChild(this.htmlOverlayContainer);
+    document.body.appendChild(this.glassDiv);
+    if (this.config.debugMode) {
+      this.createDebugCanvas();
     }
-
-    /**
-     * Create the debug canvas overlay.
-     */
-    createDebugCanvas() {
-        this.debugCanvas = document.createElement("canvas");
-        this.debugCanvas.id = "comfyui-magnify-debug";
-        this.debugCanvas.width = 400;
-        this.debugCanvas.height = 350;
-        this.debugCanvas.style.cssText = `
+  }
+  /**
+   * Create the debug canvas overlay.
+   */
+  createDebugCanvas() {
+    this.debugCanvas = document.createElement("canvas");
+    this.debugCanvas.id = "comfyui-magnify-debug";
+    this.debugCanvas.width = 400;
+    this.debugCanvas.height = 350;
+    this.debugCanvas.style.cssText = `
             position: fixed;
             top: 10px;
             right: 10px;
@@ -95,172 +80,154 @@ export class UiManager {
             font-family: monospace;
             display: none;
         `;
-        document.body.appendChild(this.debugCanvas);
-        this.debugCtx = this.debugCanvas.getContext('2d');
+    document.body.appendChild(this.debugCanvas);
+    this.debugCtx = this.debugCanvas.getContext("2d");
+  }
+  /**
+   * Show the magnifying glass.
+   */
+  show() {
+    if (this.glassDiv) {
+      this.glassDiv.style.display = "block";
     }
-
-    /**
-     * Show the magnifying glass.
-     */
-    show() {
-        this.glassDiv.style.display = "block";
-        if (this.config.debugMode && this.debugCanvas) {
-            this.debugCanvas.style.display = "block";
-        }
+    if (this.config.debugMode && this.debugCanvas) {
+      this.debugCanvas.style.display = "block";
     }
-
-    /**
-     * Hide the magnifying glass.
-     */
-    hide() {
-        this.glassDiv.style.display = "none";
-        if (this.config.debugMode && this.debugCanvas) {
-            this.debugCanvas.style.display = "none";
-        }
-        // Clear HTML overlays when hiding
-        if (this.htmlOverlayContainer) {
-            this.htmlOverlayContainer.innerHTML = '';
-        }
+  }
+  /**
+   * Hide the magnifying glass.
+   */
+  hide() {
+    if (this.glassDiv) {
+      this.glassDiv.style.display = "none";
     }
-
-    /**
-     * Position the glass relative to cursor.
-     * @param {number} clientX - Client X coordinate
-     * @param {number} clientY - Client Y coordinate
-     */
-    positionGlass(clientX, clientY) {
-        if (!this.config.followCursor) return;
-
-        const glassSize = this.config.glassSize;
-        const offsetAmount = DEFAULT_PADDING;
-        let newLeft, newTop;
-
-        switch (this.config.glassPosition) {
-            case "Top":
-                newLeft = clientX - (glassSize / 2);
-                newTop = clientY - glassSize - offsetAmount;
-                break;
-            case "Bottom":
-                newLeft = clientX - (glassSize / 2);
-                newTop = clientY + offsetAmount;
-                break;
-            case "Left":
-                newLeft = clientX - glassSize - offsetAmount;
-                newTop = clientY - (glassSize / 2);
-                break;
-            case "Right":
-                newLeft = clientX + offsetAmount;
-                newTop = clientY - (glassSize / 2);
-                break;
-            case "Top-Left":
-                newLeft = clientX - glassSize - offsetAmount;
-                newTop = clientY - glassSize - offsetAmount;
-                break;
-            case "Top-Right":
-                newLeft = clientX + offsetAmount;
-                newTop = clientY - glassSize - offsetAmount;
-                break;
-            case "Bottom-Left":
-                newLeft = clientX - glassSize - offsetAmount;
-                newTop = clientY + offsetAmount;
-                break;
-            case "Bottom-Right":
-                newLeft = clientX + offsetAmount;
-                newTop = clientY + offsetAmount;
-                break;
-            default:
-                newLeft = clientX - (glassSize / 2);
-                newTop = clientY + offsetAmount;
-                break;
-        }
-
-        this.glassDiv.style.left = `${newLeft}px`;
-        this.glassDiv.style.top = `${newTop}px`;
-
-        this.adjustForBoundaries(clientX, clientY);
+    if (this.config.debugMode && this.debugCanvas) {
+      this.debugCanvas.style.display = "none";
     }
-
-    /**
-     * Adjust glass position to stay within viewport boundaries.
-     * @param {number} clientX - Client X coordinate
-     * @param {number} clientY - Client Y coordinate
-     */
-    adjustForBoundaries(clientX, clientY) {
-        const glassRect = this.glassDiv.getBoundingClientRect();
-
-        // Check right boundary
-        if (glassRect.right > window.innerWidth) {
-            this.glassDiv.style.left = `${clientX - glassRect.width - DEFAULT_PADDING}px`;
-        }
-
-        // Check left boundary
-        const currentRectLeft = this.glassDiv.getBoundingClientRect();
-        if (currentRectLeft.left < 0) {
-            this.glassDiv.style.left = "10px";
-        }
-
-        // Check bottom boundary
-        if (glassRect.bottom > window.innerHeight) {
-            this.glassDiv.style.top = `${clientY - glassRect.height - DEFAULT_PADDING}px`;
-        }
-
-        // Check top boundary
-        const currentRectTop = this.glassDiv.getBoundingClientRect();
-        if (currentRectTop.top < 0) {
-            this.glassDiv.style.top = "10px";
-        }
+    if (this.htmlOverlayContainer) {
+      this.htmlOverlayContainer.innerHTML = "";
     }
-
-    /**
-     * Apply current config to UI elements.
-     */
-    applyStyles() {
-        if (this.glassDiv) {
-            this.glassDiv.style.width = `${this.config.glassSize}px`;
-            this.glassDiv.style.height = `${this.config.glassSize}px`;
-            this.glassDiv.style.border = this.config.borderEnabled
-                ? `${this.config.borderWidth}px solid ${this.config.borderColor}`
-                : 'none';
-
-            // Reset clip-path and set default border-radius
-            this.glassDiv.style.clipPath = 'none';
-            this.glassDiv.style.borderRadius = '0px';
-
-            switch (this.config.glassShape) {
-                case "Circle":
-                    this.glassDiv.style.borderRadius = "50%";
-                    break;
-                case "Square":
-                    // borderRadius is already '0px'
-                    break;
-                case "Rounded Square":
-                    this.glassDiv.style.borderRadius = "20%";
-                    break;
-                default:
-                    this.glassDiv.style.borderRadius = "50%";
-                    break;
-            }
-        }
-
-        if (this.glassCanvas) {
-            this.glassCanvas.width = this.config.glassSize;
-            this.glassCanvas.height = this.config.glassSize;
-        }
-
-        // Handle debug canvas show/hide
-        if (this.config.debugMode) {
-            if (!this.debugCanvas) this.createDebugCanvas();
-            if (this.state.active) this.debugCanvas.style.display = "block";
-        } else {
-            if (this.debugCanvas) this.debugCanvas.style.display = "none";
-        }
+  }
+  /**
+   * Position the glass relative to cursor.
+   * @param clientX - Client X coordinate
+   * @param clientY - Client Y coordinate
+   */
+  positionGlass(clientX, clientY) {
+    if (!this.config.followCursor || !this.glassDiv) return;
+    const glassSize = this.config.glassSize;
+    const offsetAmount = DEFAULT_PADDING;
+    let newLeft;
+    let newTop;
+    switch (this.config.glassPosition) {
+      case "Top":
+        newLeft = clientX - glassSize / 2;
+        newTop = clientY - glassSize - offsetAmount;
+        break;
+      case "Bottom":
+        newLeft = clientX - glassSize / 2;
+        newTop = clientY + offsetAmount;
+        break;
+      case "Left":
+        newLeft = clientX - glassSize - offsetAmount;
+        newTop = clientY - glassSize / 2;
+        break;
+      case "Right":
+        newLeft = clientX + offsetAmount;
+        newTop = clientY - glassSize / 2;
+        break;
+      case "Top-Left":
+        newLeft = clientX - glassSize - offsetAmount;
+        newTop = clientY - glassSize - offsetAmount;
+        break;
+      case "Top-Right":
+        newLeft = clientX + offsetAmount;
+        newTop = clientY - glassSize - offsetAmount;
+        break;
+      case "Bottom-Left":
+        newLeft = clientX - glassSize - offsetAmount;
+        newTop = clientY + offsetAmount;
+        break;
+      case "Bottom-Right":
+        newLeft = clientX + offsetAmount;
+        newTop = clientY + offsetAmount;
+        break;
+      default:
+        newLeft = clientX - glassSize / 2;
+        newTop = clientY + offsetAmount;
+        break;
     }
-
-    /**
-     * Cleanup DOM elements.
-     */
-    cleanup() {
-        if (this.glassDiv) this.glassDiv.remove();
-        if (this.debugCanvas) this.debugCanvas.remove();
+    this.glassDiv.style.left = `${newLeft}px`;
+    this.glassDiv.style.top = `${newTop}px`;
+    this.adjustForBoundaries(clientX, clientY);
+  }
+  /**
+   * Adjust glass position to stay within viewport boundaries.
+   * @param clientX - Client X coordinate
+   * @param clientY - Client Y coordinate
+   */
+  adjustForBoundaries(clientX, clientY) {
+    if (!this.glassDiv) return;
+    const glassRect = this.glassDiv.getBoundingClientRect();
+    if (glassRect.right > window.innerWidth) {
+      this.glassDiv.style.left = `${clientX - glassRect.width - DEFAULT_PADDING}px`;
     }
+    const currentRectLeft = this.glassDiv.getBoundingClientRect();
+    if (currentRectLeft.left < 0) {
+      this.glassDiv.style.left = "10px";
+    }
+    if (glassRect.bottom > window.innerHeight) {
+      this.glassDiv.style.top = `${clientY - glassRect.height - DEFAULT_PADDING}px`;
+    }
+    const currentRectTop = this.glassDiv.getBoundingClientRect();
+    if (currentRectTop.top < 0) {
+      this.glassDiv.style.top = "10px";
+    }
+  }
+  /**
+   * Apply current config to UI elements.
+   */
+  applyStyles() {
+    if (this.glassDiv) {
+      this.glassDiv.style.width = `${this.config.glassSize}px`;
+      this.glassDiv.style.height = `${this.config.glassSize}px`;
+      this.glassDiv.style.border = this.config.borderEnabled ? `${this.config.borderWidth}px solid ${this.config.borderColor}` : "none";
+      this.glassDiv.style.clipPath = "none";
+      this.glassDiv.style.borderRadius = "0px";
+      switch (this.config.glassShape) {
+        case "Circle":
+          this.glassDiv.style.borderRadius = "50%";
+          break;
+        case "Square":
+          break;
+        case "Rounded Square":
+          this.glassDiv.style.borderRadius = "20%";
+          break;
+        default:
+          this.glassDiv.style.borderRadius = "50%";
+          break;
+      }
+    }
+    if (this.glassCanvas) {
+      this.glassCanvas.width = this.config.glassSize;
+      this.glassCanvas.height = this.config.glassSize;
+    }
+    if (this.config.debugMode) {
+      if (!this.debugCanvas) this.createDebugCanvas();
+      if (this.state.active && this.debugCanvas) this.debugCanvas.style.display = "block";
+    } else {
+      if (this.debugCanvas) this.debugCanvas.style.display = "none";
+    }
+  }
+  /**
+   * Cleanup DOM elements.
+   */
+  cleanup() {
+    if (this.glassDiv) this.glassDiv.remove();
+    if (this.debugCanvas) this.debugCanvas.remove();
+  }
 }
+export {
+  UiManager
+};
+//# sourceMappingURL=UiManager.js.map

web/magnify-glass/WebGLRenderer.js

@@ -1,34 +1,33 @@
-/**
- * ComfyUI MagnifyGlass - WebGLRenderer
- * 
- * Handles WebGL-based rendering of the magnified view.
- */
-
-/**
- * WebGL Renderer class.
- * Provides efficient WebGL-based magnification rendering.
- */
-export class WebGLRenderer {
-    /**
-     * @param {import('./ConfigManager.js').ConfigManager} config 
-     * @param {import('./MagnifierState.js').MagnifierState} state 
-     * @param {import('./UiManager.js').UiManager} ui 
-     */
-    constructor(config, state, ui) {
-        this.config = config;
-        this.state = state;
-        this.ui = ui;
-
-        this.gl = null;
-        this.program = null;
-        this.texture = null;
-        this.positionBuffer = null;
-        this.texCoordBuffer = null;
-        this.uniformLocations = null;
-        this.attributeLocations = null;
-        this.currentFilteringMode = null;
-
-        this.vertexShaderSource = `
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class WebGLRenderer {
+  constructor(config, state, ui) {
+    __publicField(this, "config");
+    __publicField(this, "state");
+    __publicField(this, "ui");
+    __publicField(this, "gl");
+    __publicField(this, "program");
+    __publicField(this, "texture");
+    __publicField(this, "positionBuffer");
+    __publicField(this, "texCoordBuffer");
+    __publicField(this, "uniformLocations");
+    __publicField(this, "attributeLocations");
+    __publicField(this, "currentFilteringMode");
+    __publicField(this, "vertexShaderSource");
+    __publicField(this, "fragmentShaderSource");
+    this.config = config;
+    this.state = state;
+    this.ui = ui;
+    this.gl = null;
+    this.program = null;
+    this.texture = null;
+    this.positionBuffer = null;
+    this.texCoordBuffer = null;
+    this.uniformLocations = null;
+    this.attributeLocations = null;
+    this.currentFilteringMode = null;
+    this.vertexShaderSource = `
             attribute vec2 a_position;
             attribute vec2 a_texCoord;
             varying vec2 v_texCoord;
@@ -37,8 +36,7 @@ export class WebGLRenderer {
                 v_texCoord = a_texCoord;
             }
         `;
-
-        this.fragmentShaderSource = `
+    this.fragmentShaderSource = `
             precision mediump float;
             varying vec2 v_texCoord;
             uniform sampler2D u_sourceTexture;
@@ -52,205 +50,180 @@ export class WebGLRenderer {
                 gl_FragColor = color;
             }
         `;
-
-        this.initialize();
+    this.initialize();
+  }
+  /**
+   * Initialize WebGL context and resources.
+   */
+  initialize() {
+    if (!this.ui.glassCanvas) return;
+    this.gl = this.ui.glassCanvas.getContext("webgl", { preserveDrawingBuffer: true });
+    if (!this.gl) {
+      console.error("ComfyUI Magnifying Glass ERROR: WebGL not supported or context creation failed.");
+      return;
     }
-
-    /**
-     * Initialize WebGL context and resources.
-     */
-    initialize() {
-        // Get WebGL context
-        this.gl = this.ui.glassCanvas.getContext("webgl", { preserveDrawingBuffer: true });
-        if (!this.gl) {
-            console.error("ComfyUI Magnifying Glass ERROR: WebGL not supported or context creation failed.");
-            return;
-        }
-
-        // Create shader program
-        this.program = this.createShaderProgram(this.gl, this.vertexShaderSource, this.fragmentShaderSource);
-        if (!this.program) return;
-
-        // Create position buffer
-        this.positionBuffer = this.gl.createBuffer();
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
-        const positions = [-1, -1, 1, -1, -1, 1, 1, 1];
-        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);
-
-        // Create texture coordinate buffer
-        this.texCoordBuffer = this.gl.createBuffer();
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
-        const texCoords = [0, 1, 1, 1, 0, 0, 1, 0]; // Flipped Y for texCoords
-        this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(texCoords), this.gl.STATIC_DRAW);
-
-        // Create texture
-        this.texture = this.gl.createTexture();
-        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
-        this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false);
-        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
-        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
-        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
-        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
-        this.updateTextureFiltering(this.config.textureFiltering);
-
-        // Get uniform and attribute locations
-        this.uniformLocations = {
-            sourceTexture: this.gl.getUniformLocation(this.program, "u_sourceTexture"),
-            textureOffset: this.gl.getUniformLocation(this.program, "u_textureOffset"),
-            textureRepeat: this.gl.getUniformLocation(this.program, "u_textureRepeat"),
-            glassSize: this.gl.getUniformLocation(this.program, "u_glassSize"),
-        };
-
-        this.attributeLocations = {
-            position: this.gl.getAttribLocation(this.program, "a_position"),
-            texCoord: this.gl.getAttribLocation(this.program, "a_texCoord"),
-        };
+    this.program = this.createShaderProgram(this.gl, this.vertexShaderSource, this.fragmentShaderSource);
+    if (!this.program) return;
+    this.positionBuffer = this.gl.createBuffer();
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+    const positions = [-1, -1, 1, -1, -1, 1, 1, 1];
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);
+    this.texCoordBuffer = this.gl.createBuffer();
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
+    const texCoords = [0, 1, 1, 1, 0, 0, 1, 0];
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(texCoords), this.gl.STATIC_DRAW);
+    this.texture = this.gl.createTexture();
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+    this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+    this.updateTextureFiltering(this.config.textureFiltering);
+    this.uniformLocations = {
+      sourceTexture: this.gl.getUniformLocation(this.program, "u_sourceTexture"),
+      textureOffset: this.gl.getUniformLocation(this.program, "u_textureOffset"),
+      textureRepeat: this.gl.getUniformLocation(this.program, "u_textureRepeat"),
+      glassSize: this.gl.getUniformLocation(this.program, "u_glassSize")
+    };
+    this.attributeLocations = {
+      position: this.gl.getAttribLocation(this.program, "a_position"),
+      texCoord: this.gl.getAttribLocation(this.program, "a_texCoord")
+    };
+  }
+  /**
+   * Update texture filtering mode.
+   * @param filteringModeString - "Linear" or "Nearest"
+   */
+  updateTextureFiltering(filteringModeString) {
+    if (!this.gl || !this.texture) return;
+    let glFilterMode;
+    if (filteringModeString === "Nearest") {
+      glFilterMode = this.gl.NEAREST;
+    } else {
+      glFilterMode = this.gl.LINEAR;
     }
-
-    /**
-     * Update texture filtering mode.
-     * @param {string} filteringModeString - "Linear" or "Nearest"
-     */
-    updateTextureFiltering(filteringModeString) {
-        if (!this.gl) return;
-
-        let glFilterMode;
-        if (filteringModeString === "Nearest") {
-            glFilterMode = this.gl.NEAREST;
-        } else {
-            glFilterMode = this.gl.LINEAR;
-        }
-
-        if (this.currentFilteringMode === glFilterMode) return;
-
-        this.currentFilteringMode = glFilterMode;
-
-        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
-        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, glFilterMode);
-        this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, glFilterMode);
-        this.gl.bindTexture(this.gl.TEXTURE_2D, null);
+    if (this.currentFilteringMode === glFilterMode) return;
+    this.currentFilteringMode = glFilterMode;
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, glFilterMode);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, glFilterMode);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, null);
+  }
+  /**
+   * Check if renderer is valid and ready.
+   * @returns Boolean indicating if WebGL context and program are ready
+   */
+  isValid() {
+    return this.gl !== null && this.program !== null;
+  }
+  /**
+   * Create a WebGL shader program.
+   * @param gl - WebGL context
+   * @param vsSource - Vertex shader source
+   * @param fsSource - Fragment shader source
+   * @returns WebGL program or null on failure
+   */
+  createShaderProgram(gl, vsSource, fsSource) {
+    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    if (!vertexShader) return null;
+    gl.shaderSource(vertexShader, vsSource);
+    gl.compileShader(vertexShader);
+    if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+      console.error("ComfyUI Magnifying Glass ERROR: Vertex shader compilation error:", gl.getShaderInfoLog(vertexShader));
+      gl.deleteShader(vertexShader);
+      return null;
     }
-
-    /**
-     * Check if renderer is valid and ready.
-     * @returns {boolean}
-     */
-    isValid() {
-        return this.gl !== null && this.program !== null;
+    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    if (!fragmentShader) {
+      gl.deleteShader(vertexShader);
+      return null;
     }
-
-    /**
-     * Create a WebGL shader program.
-     * @param {WebGLRenderingContext} gl 
-     * @param {string} vsSource 
-     * @param {string} fsSource 
-     * @returns {WebGLProgram|null}
-     */
-    createShaderProgram(gl, vsSource, fsSource) {
-        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, vsSource);
-        gl.compileShader(vertexShader);
-        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
-            console.error('ComfyUI Magnifying Glass ERROR: Vertex shader compilation error:', gl.getShaderInfoLog(vertexShader));
-            gl.deleteShader(vertexShader);
-            return null;
-        }
-
-        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, fsSource);
-        gl.compileShader(fragmentShader);
-        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
-            console.error('ComfyUI Magnifying Glass ERROR: Fragment shader compilation error:', gl.getShaderInfoLog(fragmentShader));
-            gl.deleteShader(vertexShader);
-            gl.deleteShader(fragmentShader);
-            return null;
-        }
-
-        const program = gl.createProgram();
-        gl.attachShader(program, vertexShader);
-        gl.attachShader(program, fragmentShader);
-        gl.linkProgram(program);
-
-        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-            console.error('ComfyUI Magnifying Glass ERROR: Shader program linking error:', gl.getProgramInfoLog(program));
-            gl.deleteProgram(program);
-            gl.deleteShader(vertexShader);
-            gl.deleteShader(fragmentShader);
-            return null;
-        }
-
-        return program;
+    gl.shaderSource(fragmentShader, fsSource);
+    gl.compileShader(fragmentShader);
+    if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+      console.error("ComfyUI Magnifying Glass ERROR: Fragment shader compilation error:", gl.getShaderInfoLog(fragmentShader));
+      gl.deleteShader(vertexShader);
+      gl.deleteShader(fragmentShader);
+      return null;
     }
-
-    /**
-     * Render the magnified view.
-     * @param {HTMLCanvasElement} sourceCanvas 
-     */
-    render(sourceCanvas) {
-        // Bind texture and update with source canvas
-        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
-
-        try {
-            this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, sourceCanvas);
-        } catch (e) {
-            console.error("ComfyUI Magnifying Glass ERROR: Error in texImage2D:", e);
-            return;
-        }
-
-        // Calculate normalized texture coordinates (UV space: 0-1)
-        const uvX = this.state.sourceX / sourceCanvas.width;
-        const uvY = this.state.sourceY / sourceCanvas.height;
-        const uvWidth = this.state.sourceWidth / sourceCanvas.width;
-        const uvHeight = this.state.sourceHeight / sourceCanvas.height;
-
-        // Set up rendering
-        this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
-        this.gl.clearColor(0.0, 0.0, 0.0, 0.0);
-        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
-
-        this.gl.useProgram(this.program);
-
-        // Set uniforms
-        this.gl.activeTexture(this.gl.TEXTURE0);
-        this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
-        this.gl.uniform1i(this.uniformLocations.sourceTexture, 0);
-        this.gl.uniform2f(this.uniformLocations.textureOffset, uvX, uvY);
-        this.gl.uniform2f(this.uniformLocations.textureRepeat, uvWidth, uvHeight);
-        this.gl.uniform1f(this.uniformLocations.glassSize, this.config.glassSize);
-
-        // Set attributes
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
-        this.gl.vertexAttribPointer(this.attributeLocations.position, 2, this.gl.FLOAT, false, 0, 0);
-        this.gl.enableVertexAttribArray(this.attributeLocations.position);
-
-        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
-        this.gl.vertexAttribPointer(this.attributeLocations.texCoord, 2, this.gl.FLOAT, false, 0, 0);
-        this.gl.enableVertexAttribArray(this.attributeLocations.texCoord);
-
-        // Draw
-        this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+    const program = gl.createProgram();
+    if (!program) {
+      gl.deleteShader(vertexShader);
+      gl.deleteShader(fragmentShader);
+      return null;
     }
-
-    /**
-     * Check for WebGL errors.
-     * @param {string} label 
-     * @returns {boolean}
-     */
-    checkWebGLError(label) {
-        const err = this.gl.getError();
-        if (err !== this.gl.NO_ERROR) {
-            console.error(`ComfyUI Magnifying Glass ERROR: WebGL Error (${label}):`, err);
-            return true;
-        }
-        return false;
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      console.error("ComfyUI Magnifying Glass ERROR: Shader program linking error:", gl.getProgramInfoLog(program));
+      gl.deleteProgram(program);
+      gl.deleteShader(vertexShader);
+      gl.deleteShader(fragmentShader);
+      return null;
     }
-
-    /**
-     * Update viewport when glass size changes.
-     */
-    updateViewport() {
-        if (this.gl) {
-            this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
-        }
+    return program;
+  }
+  /**
+   * Render the magnified view.
+   * @param sourceCanvas - The source canvas to sample from
+   */
+  render(sourceCanvas) {
+    if (!this.gl || !this.program || !this.texture || !this.uniformLocations || !this.attributeLocations) return;
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+    try {
+      this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.gl.RGBA, this.gl.UNSIGNED_BYTE, sourceCanvas);
+    } catch (e) {
+      console.error("ComfyUI Magnifying Glass ERROR: Error in texImage2D:", e);
+      return;
     }
+    const uvX = this.state.sourceX / sourceCanvas.width;
+    const uvY = this.state.sourceY / sourceCanvas.height;
+    const uvWidth = this.state.sourceWidth / sourceCanvas.width;
+    const uvHeight = this.state.sourceHeight / sourceCanvas.height;
+    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+    this.gl.clearColor(0, 0, 0, 0);
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+    this.gl.useProgram(this.program);
+    this.gl.activeTexture(this.gl.TEXTURE0);
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+    this.gl.uniform1i(this.uniformLocations.sourceTexture, 0);
+    this.gl.uniform2f(this.uniformLocations.textureOffset, uvX, uvY);
+    this.gl.uniform2f(this.uniformLocations.textureRepeat, uvWidth, uvHeight);
+    this.gl.uniform1f(this.uniformLocations.glassSize, this.config.glassSize);
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
+    this.gl.vertexAttribPointer(this.attributeLocations.position, 2, this.gl.FLOAT, false, 0, 0);
+    this.gl.enableVertexAttribArray(this.attributeLocations.position);
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.texCoordBuffer);
+    this.gl.vertexAttribPointer(this.attributeLocations.texCoord, 2, this.gl.FLOAT, false, 0, 0);
+    this.gl.enableVertexAttribArray(this.attributeLocations.texCoord);
+    this.gl.drawArrays(this.gl.TRIANGLE_STRIP, 0, 4);
+  }
+  /**
+   * Check for WebGL errors.
+   * @param label - Debug label
+   * @returns True if error occurred
+   */
+  checkWebGLError(label) {
+    if (!this.gl) return false;
+    const err = this.gl.getError();
+    if (err !== this.gl.NO_ERROR) {
+      console.error(`ComfyUI Magnifying Glass ERROR: WebGL Error (${label}):`, err);
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Update viewport when glass size changes.
+   */
+  updateViewport() {
+    if (this.gl) {
+      this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height);
+    }
+  }
 }
+export {
+  WebGLRenderer
+};
+//# sourceMappingURL=WebGLRenderer.js.map

web/magnify-glass/index.js

@@ -1,13 +0,0 @@
-/**
- * ComfyUI MagnifyGlass - Index
- * 
- * Re-exports all magnify-glass module components for convenience.
- */
-
-export { MagnifyGlass } from './MagnifyGlass.js';
-export { ConfigManager } from './ConfigManager.js';
-export { MagnifierState } from './MagnifierState.js';
-export { UiManager } from './UiManager.js';
-export { WebGLRenderer } from './WebGLRenderer.js';
-export { DebugManager } from './DebugManager.js';
-export { EventHandler } from './EventHandler.js';

web/magnify_glass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnify_glass.js","sources":["../src/magnify_glass.ts"],"sourcesContent":["/**\n * ComfyUI Magnify Glass - Main Entry Point\n * \n * Initializes the Magnify Glass extension.\n */\n\nimport { MagnifyGlass } from './magnify-glass';\n// @ts-ignore\nimport { app } from \"/scripts/app.js\";\n\n// Global declaration handled in comfyui.d.ts\n\n// We rely on the global 'app' object provided by ComfyUI\n// Register extension\napp.registerExtension({\n    name: \"comfyui.magnify.glass\",\n    init() {\n        // Initialize the magnify glass\n        const magnifyGlass = new MagnifyGlass();\n        magnifyGlass.init();\n\n        // Expose to window for other extensions (like info panel) to access\n        window.comfyUIMagnifyGlass = magnifyGlass;\n\n        console.log(\"ComfyUI Magnify Glass: Extension initialized\");\n    }\n});\n"],"names":[],"mappings":";;AAcA,IAAI,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAEH,UAAM,eAAe,IAAI,aAAA;AACzB,iBAAa,KAAA;AAGb,WAAO,sBAAsB;AAE7B,YAAQ,IAAI,8CAA8C;AAAA,EAC9D;AACJ,CAAC;"}

web/magnify_glass_refactored.js

@@ -1,58 +0,0 @@
-/**
- * ComfyUI Magnifying Glass - Entry Point (Refactored)
- * 
- * This script adds a magnifying glass feature to ComfyUI.
- * Press X to activate the magnifying glass and see a zoomed view of the canvas.
- * 
- * This file has been refactored to use modular ES6 imports.
- * The actual implementation is split across the magnify-glass/ directory.
- */
-
-import { app } from "../../../scripts/app.js";
-import { MagnifyGlass } from './magnify-glass/MagnifyGlass.js';
-import { registerGlassSettings, DEFAULT_GLASS_SETTINGS } from './shared/settings.js';
-
-app.registerExtension({
-    name: "comfyui.magnify.glass",
-    async setup() {
-        // Instantiate the main magnify glass
-        const magnifyGlass = new MagnifyGlass();
-
-        // Register settings with ComfyUI
-        registerGlassSettings(magnifyGlass);
-
-        // Load settings into the config object
-        magnifyGlass.config.loadSettings();
-
-        // Initialize the magnifier
-        magnifyGlass.init();
-
-        // Apply UI changes
-        magnifyGlass.applyUiChanges();
-
-        // Expose magnifyGlass globally for extensions
-        window.comfyUIMagnifyGlass = magnifyGlass;
-
-        // Diagnostic Info
-        console.log("---- Enhanced Magnifier Diagnostic Info ----");
-        console.log("User Agent:", navigator.userAgent);
-        console.log("Device Pixel Ratio:", window.devicePixelRatio);
-
-        if (typeof app !== 'undefined' && app.canvas && app.canvas.ds) {
-            console.log("ComfyUI Canvas Scale:", app.canvas.ds.scale);
-            console.log("ComfyUI Canvas Offset:", app.canvas.ds.offset);
-        } else {
-            console.log("ComfyUI Canvas State: Could not access app.canvas.ds");
-        }
-
-        try {
-            const offsetX = localStorage.getItem('comfyui_magnify_offset_x') || 'Not Set (Will be 0)';
-            const offsetY = localStorage.getItem('comfyui_magnify_offset_y') || 'Not Set (Will be 0)';
-            console.log("Stored Manual Offset X:", offsetX);
-            console.log("Stored Manual Offset Y:", offsetY);
-        } catch (e) {
-            console.error("Error reading offsets from localStorage:", e);
-        }
-        console.log("---- End Diagnostic Info ----");
-    }
-});

web/magnify_info_panel.js

@@ -1,60 +1,36 @@
-/**
- * ComfyUI MagnifyGlass - Info Panel (Refactored Entry Point)
- * 
- * This is the refactored version of the info panel that uses modular imports.
- * The original magnify_info_panel.js is preserved as a backup.
- */
-
-import { app } from "../../../scripts/app.js";
-import { InfoPanel } from './info-panel/index.js';
-import { DEFAULT_PANEL_SETTINGS, getSettingConfig } from './shared/settings.js';
-
+import { app } from "/scripts/app.js";
+import { InfoPanel } from "./info-panel/InfoPanel.js";
 app.registerExtension({
-    name: "Comfy.MagnifyGlass.InfoPanel.Refactored",
-
-    async setup() {
-        // Wait for magnify glass to be ready
-        const checkForMagnifyGlass = () => {
-            return new Promise((resolve) => {
-                const check = () => {
-                    if (window.comfyUIMagnifyGlass) {
-                        resolve(window.comfyUIMagnifyGlass);
-                    } else {
-                        setTimeout(check, 100);
-                    }
-                };
-                check();
-            });
-        };
-
-        // Get magnify glass instance
-        const magnifyGlass = await checkForMagnifyGlass();
-
-        // Create info panel manager
-        const infoPanelManager = new InfoPanel(magnifyGlass);
-
-        // Store reference globally for cleanup and theme updates
-        if (!window.comfyUIMagnifyGlassExtensions) {
-            window.comfyUIMagnifyGlassExtensions = [];
-        }
-        window.comfyUIMagnifyGlassExtensions.push(infoPanelManager);
-
-        // Store main manager reference for theme updates
-        window.infoPanelManager = infoPanelManager;
-
-        // Register settings with ComfyUI
-        Object.keys(DEFAULT_PANEL_SETTINGS).forEach(settingKey => {
-            const settingConfig = getSettingConfig(settingKey, DEFAULT_PANEL_SETTINGS[settingKey]);
-            if (settingConfig) {
-                app.ui.settings.addSetting({
-                    ...settingConfig,
-                    onChange: (value) => {
-                        infoPanelManager.updateSettings();
-                    }
-                });
-            }
-        });
-
-        console.log("ComfyUI Magnify Info Panel (Refactored): Loaded successfully");
-    }
+  name: "comfyui.magnify.info.panel",
+  init() {
+    const checkDependencies = () => {
+      if (window.comfyUIMagnifyGlass) {
+        initializeInfoPanel();
+      } else {
+        setTimeout(checkDependencies, 100);
+      }
+    };
+    checkDependencies();
+  }
 });
+function initializeInfoPanel() {
+  const magnifyGlass = window.comfyUIMagnifyGlass;
+  if (!magnifyGlass) {
+    console.error("ComfyUI Magnify Info Panel: Failed to find MagnifyGlass instance.");
+    return;
+  }
+  try {
+    const infoPanel = new InfoPanel(magnifyGlass);
+    window.infoPanelManager = infoPanel;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.type = "text/css";
+    link.href = "extensions/comfyui-magnifyglass/style.css";
+    document.head.appendChild(link);
+    console.log("ComfyUI Magnify Info Panel: CSS loaded");
+    console.log("ComfyUI Magnify Info Panel: Extension initialized");
+  } catch (e) {
+    console.error("ComfyUI Magnify Info Panel: Error during initialization:", e);
+  }
+}
+//# sourceMappingURL=magnify_info_panel.js.map

web/magnify_info_panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"magnify_info_panel.js","sources":["../src/magnify_info_panel.ts"],"sourcesContent":["/**\n * ComfyUI Magnify Info Panel - Main Entry Point\n * \n * Initializes the Info Panel extension.\n */\n\nimport { InfoPanel } from './info-panel';\n// @ts-ignore\nimport { app } from \"/scripts/app.js\";\n\n// We rely on the global 'app' object provided by ComfyUI\n// No need to import it as it's global, but TypeScript needs to know about it.\n// We handled this in types/comfyui.d.ts\n\napp.registerExtension({\n    name: \"comfyui.magnify.info.panel\",\n    init() {\n        // Wait for magnify glass to be available\n        const checkDependencies = () => {\n            if (window.comfyUIMagnifyGlass) {\n                initializeInfoPanel();\n            } else {\n                setTimeout(checkDependencies, 100);\n            }\n        };\n\n        checkDependencies();\n    }\n});\n\nfunction initializeInfoPanel() {\n    const magnifyGlass = window.comfyUIMagnifyGlass;\n    if (!magnifyGlass) {\n        console.error(\"ComfyUI Magnify Info Panel: Failed to find MagnifyGlass instance.\");\n        return;\n    }\n\n    try {\n        // Initialize the info panel\n        const infoPanel = new InfoPanel(magnifyGlass);\n\n        // Expose orchestrator globally if needed\n        window.infoPanelManager = infoPanel as any;\n\n        // Load CSS\n        const link = document.createElement(\"link\");\n        link.rel = \"stylesheet\";\n        link.type = \"text/css\";\n        link.href = \"extensions/comfyui-magnifyglass/style.css\";\n        document.head.appendChild(link);\n        console.log(\"ComfyUI Magnify Info Panel: CSS loaded\");\n\n        console.log(\"ComfyUI Magnify Info Panel: Extension initialized\");\n    } catch (e) {\n        console.error(\"ComfyUI Magnify Info Panel: Error during initialization:\", e);\n    }\n}\n\n"],"names":[],"mappings":";;AAcA,IAAI,kBAAkB;AAAA,EAClB,MAAM;AAAA,EACN,OAAO;AAEH,UAAM,oBAAoB,MAAM;AAC5B,UAAI,OAAO,qBAAqB;AAC5B,4BAAA;AAAA,MACJ,OAAO;AACH,mBAAW,mBAAmB,GAAG;AAAA,MACrC;AAAA,IACJ;AAEA,sBAAA;AAAA,EACJ;AACJ,CAAC;AAED,SAAS,sBAAsB;AAC3B,QAAM,eAAe,OAAO;AAC5B,MAAI,CAAC,cAAc;AACf,YAAQ,MAAM,mEAAmE;AACjF;AAAA,EACJ;AAEA,MAAI;AAEA,UAAM,YAAY,IAAI,UAAU,YAAY;AAG5C,WAAO,mBAAmB;AAG1B,UAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,SAAK,MAAM;AACX,SAAK,OAAO;AACZ,SAAK,OAAO;AACZ,aAAS,KAAK,YAAY,IAAI;AAC9B,YAAQ,IAAI,wCAAwC;AAEpD,YAAQ,IAAI,mDAAmD;AAAA,EACnE,SAAS,GAAG;AACR,YAAQ,MAAM,4DAA4D,CAAC;AAAA,EAC/E;AACJ;"}

web/shared/constants.js

@@ -1,81 +1,61 @@
-/**
- * ComfyUI MagnifyGlass - Shared Constants
- * 
- * Configuration constants shared between magnify glass and info panel modules.
- */
-
-// Glass positioning options
-export const GLASS_POSITIONS = [
-    "Top",
-    "Bottom",
-    "Left",
-    "Right",
-    "Top-Left",
-    "Top-Right",
-    "Bottom-Left",
-    "Bottom-Right"
+const GLASS_POSITIONS = [
+  "Top",
+  "Bottom",
+  "Left",
+  "Right",
+  "Top-Left",
+  "Top-Right",
+  "Bottom-Left",
+  "Bottom-Right"
 ];
-
-// Glass shape options
-export const GLASS_SHAPES = [
-    "Circle",
-    "Square",
-    "Rounded Square"
+const GLASS_SHAPES = [
+  "Circle",
+  "Square",
+  "Rounded Square"
 ];
-
-// Texture filtering modes
-export const TEXTURE_FILTERS = [
-    "Linear",
-    "Nearest"
+const PANEL_POSITIONS = [
+  "Top",
+  "Bottom",
+  "Left",
+  "Right"
 ];
-
-// Info panel positions relative to glass
-export const PANEL_POSITIONS = [
-    "Top",
-    "Bottom",
-    "Left",
-    "Right"
-];
-
-// Available activation keys
-export const ACTIVATION_KEYS = ["x", "z", "m", "q", "v", "c"];
-
-// Available reset keys
-export const RESET_KEYS = ["r", "o", "p", "k", "l"];
-
-// Available toggle follow keys
-export const TOGGLE_FOLLOW_KEYS = ["f", "g", "h", "j", "k"];
-
-// UI Constants
-export const DEFAULT_PADDING = 20;
-export const DEFAULT_GLASS_SIZE = 300;
-export const DEFAULT_ZOOM_FACTOR = 300; // 3x as percentage
-export const DEFAULT_BORDER_WIDTH = 1;
-export const DEFAULT_BORDER_COLOR = "#6b7280";
-export const DEFAULT_OFFSET_STEP = 5;
-
-// Panel Constants
-export const DEFAULT_PANEL_WIDTH = 320;
-export const DEFAULT_PANEL_MAX_HEIGHT = 1000;
-export const DEFAULT_PANEL_OPACITY = 100;
-
-// Z-Index hierarchy
-export const Z_INDEX = {
-    GLASS: 98999,
-    DEBUG: 99000,
-    PANEL: 99999,
-    CONTROLS: 99998
+const ACTIVATION_KEYS = ["x", "z", "m", "q", "v", "c"];
+const RESET_KEYS = ["r", "o", "p", "k", "l"];
+const TOGGLE_FOLLOW_KEYS = ["f", "g", "h", "j", "k"];
+const DEFAULT_PADDING = 20;
+const DEFAULT_GLASS_SIZE = 300;
+const DEFAULT_ZOOM_FACTOR = 300;
+const DEFAULT_BORDER_WIDTH = 1;
+const DEFAULT_BORDER_COLOR = "#6b7280";
+const DEFAULT_OFFSET_STEP = 5;
+const DEFAULT_PANEL_WIDTH = 320;
+const DEFAULT_PANEL_MAX_HEIGHT = 1e3;
+const DEFAULT_PANEL_OPACITY = 100;
+const Z_INDEX = {
+  GLASS: 98999,
+  DEBUG: 99e3
 };
-
-// Animation durations (ms)
-export const ANIMATION = {
-    PANEL_TRANSITION: 300,
-    AUTO_COLLAPSE_DELAY: 1500,
-    THEME_DETECTION_INTERVAL: 2000
+const STORAGE_KEYS = {
+  OFFSET_X: "comfyui_magnify_offset_x",
+  OFFSET_Y: "comfyui_magnify_offset_y"
 };
-
-// LocalStorage keys
-export const STORAGE_KEYS = {
-    OFFSET_X: 'comfyui_magnify_offset_x',
-    OFFSET_Y: 'comfyui_magnify_offset_y'
+export {
+  ACTIVATION_KEYS,
+  DEFAULT_BORDER_COLOR,
+  DEFAULT_BORDER_WIDTH,
+  DEFAULT_GLASS_SIZE,
+  DEFAULT_OFFSET_STEP,
+  DEFAULT_PADDING,
+  DEFAULT_PANEL_MAX_HEIGHT,
+  DEFAULT_PANEL_OPACITY,
+  DEFAULT_PANEL_WIDTH,
+  DEFAULT_ZOOM_FACTOR,
+  GLASS_POSITIONS,
+  GLASS_SHAPES,
+  PANEL_POSITIONS,
+  RESET_KEYS,
+  STORAGE_KEYS,
+  TOGGLE_FOLLOW_KEYS,
+  Z_INDEX
 };
+//# sourceMappingURL=constants.js.map

web/shared/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../src/shared/constants.ts"],"sourcesContent":["/**\n * ComfyUI MagnifyGlass - Shared Constants\n * \n * Configuration constants shared between magnify glass and info panel modules.\n */\n\n// Glass positioning options\nexport const GLASS_POSITIONS = [\n    \"Top\",\n    \"Bottom\",\n    \"Left\",\n    \"Right\",\n    \"Top-Left\",\n    \"Top-Right\",\n    \"Bottom-Left\",\n    \"Bottom-Right\"\n] as const;\n\nexport type GlassPosition = typeof GLASS_POSITIONS[number];\n\n// Glass shape options\nexport const GLASS_SHAPES = [\n    \"Circle\",\n    \"Square\",\n    \"Rounded Square\"\n] as const;\n\nexport type GlassShape = typeof GLASS_SHAPES[number];\n\n// Texture filtering modes\nexport const TEXTURE_FILTERS = [\n    \"Linear\",\n    \"Nearest\"\n] as const;\n\nexport type TextureFilter = typeof TEXTURE_FILTERS[number];\n\n// Info panel positions relative to glass\nexport const PANEL_POSITIONS = [\n    \"Top\",\n    \"Bottom\",\n    \"Left\",\n    \"Right\"\n] as const;\n\nexport type PanelPosition = typeof PANEL_POSITIONS[number];\n\n// Available keys for settings\nexport const ACTIVATION_KEYS = [\"x\", \"z\", \"m\", \"q\", \"v\", \"c\"] as const;\nexport const RESET_KEYS = [\"r\", \"o\", \"p\", \"k\", \"l\"] as const;\nexport const TOGGLE_FOLLOW_KEYS = [\"f\", \"g\", \"h\", \"j\", \"k\"] as const;\n\n// UI Constants\nexport const DEFAULT_PADDING = 20;\nexport const DEFAULT_GLASS_SIZE = 300;\nexport const DEFAULT_ZOOM_FACTOR = 300; // 3x as percentage\nexport const DEFAULT_BORDER_WIDTH = 1;\nexport const DEFAULT_BORDER_COLOR = \"#6b7280\";\nexport const DEFAULT_OFFSET_STEP = 5;\n\n// Panel Constants\nexport const DEFAULT_PANEL_WIDTH = 320;\nexport const DEFAULT_PANEL_MAX_HEIGHT = 1000;\nexport const DEFAULT_PANEL_OPACITY = 100;\n\n// Z-Index hierarchy\nexport const Z_INDEX = {\n    GLASS: 98999,\n    DEBUG: 99000,\n    PANEL: 99999,\n    CONTROLS: 99998\n} as const;\n\n// Animation durations (ms)\nexport const ANIMATION = {\n    PANEL_TRANSITION: 300,\n    AUTO_COLLAPSE_DELAY: 1500,\n    THEME_DETECTION_INTERVAL: 2000\n} as const;\n\n// LocalStorage keys\nexport const STORAGE_KEYS = {\n    OFFSET_X: 'comfyui_magnify_offset_x',\n    OFFSET_Y: 'comfyui_magnify_offset_y'\n} as const;\n"],"names":[],"mappings":"AAOO,MAAM,kBAAkB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAKO,MAAM,eAAe;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACJ;AAaO,MAAM,kBAAkB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAKO,MAAM,kBAAkB,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AACrD,MAAM,aAAa,CAAC,KAAK,KAAK,KAAK,KAAK,GAAG;AAC3C,MAAM,qBAAqB,CAAC,KAAK,KAAK,KAAK,KAAK,GAAG;AAGnD,MAAM,kBAAkB;AACxB,MAAM,qBAAqB;AAC3B,MAAM,sBAAsB;AAC5B,MAAM,uBAAuB;AAC7B,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAG5B,MAAM,sBAAsB;AAC5B,MAAM,2BAA2B;AACjC,MAAM,wBAAwB;AAG9B,MAAM,UAAU;AAAA,EACnB,OAAO;AAAA,EACP,OAAO;AAGX;AAUO,MAAM,eAAe;AAAA,EACxB,UAAU;AAAA,EACV,UAAU;AACd;"}

web/shared/utils.js

@@ -1,120 +1,53 @@
-/**
- * ComfyUI MagnifyGlass - Shared Utilities
- * 
- * Common utility functions shared between magnify glass and info panel modules.
- */
-
-import { app } from "../../../../scripts/app.js";
-
-/**
- * Safely get a setting value from ComfyUI settings with fallback to default.
- * @param {string} key - The setting key
- * @param {*} defaultValue - Default value if setting not found
- * @returns {*} The setting value or default
- */
-export function getSettingValue(key, defaultValue) {
-    try {
-        const value = app.ui.settings.getSettingValue(key);
-        return value === undefined ? defaultValue : value;
-    } catch (e) {
-        console.warn(`ComfyUI Magnifying Glass: Could not get setting ${key}, using default ${defaultValue}. Error: ${e}`);
-        return defaultValue;
-    }
+import { app } from "/scripts/app.js";
+function getSettingValue(key, defaultValue) {
+  try {
+    const value = app.ui.settings.getSettingValue(key);
+    return value === void 0 ? defaultValue : value;
+  } catch (e) {
+    console.warn(`ComfyUI Magnifying Glass: Could not get setting ${key}, using default ${defaultValue}. Error: ${e}`);
+    return defaultValue;
+  }
 }
-
-/**
- * Check if the user is currently typing in an input field.
- * Used for smart input detection to avoid triggering hotkeys while typing.
- * @returns {boolean} True if user is typing in an input field
- */
-export function isUserTyping() {
-    const activeElement = document.activeElement;
-    if (!activeElement) return false;
-
-    // Check if the active element is an input, textarea, or contenteditable
-    const tagName = activeElement.tagName.toLowerCase();
-    if (tagName === 'input' || tagName === 'textarea') {
-        return true;
-    }
-
-    // Check for contenteditable elements
-    if (activeElement.contentEditable === 'true') {
-        return true;
-    }
-
-    // Check if it's inside a form or has input-like classes
-    if (activeElement.closest('form') ||
-        activeElement.classList.contains('cm-editor') || // CodeMirror editor
-        activeElement.classList.contains('monaco-editor') || // Monaco editor
-        activeElement.closest('.cm-editor') ||
-        activeElement.closest('.monaco-editor')) {
-        return true;
-    }
-
-    return false;
+function isUserTyping() {
+  const activeElement = document.activeElement;
+  if (!activeElement) return false;
+  const tagName = activeElement.tagName.toLowerCase();
+  if (tagName === "input" || tagName === "textarea") {
+    return true;
+  }
+  if (activeElement.contentEditable === "true") {
+    return true;
+  }
+  if (activeElement.closest("form") || activeElement.classList.contains("cm-editor") || // CodeMirror editor
+  activeElement.classList.contains("monaco-editor") || // Monaco editor
+  activeElement.closest(".cm-editor") || activeElement.closest(".monaco-editor")) {
+    return true;
+  }
+  return false;
 }
-
-/**
- * Check if two rectangles overlap.
- * @param {{x: number, y: number, width: number, height: number}} rect1 
- * @param {{x: number, y: number, width: number, height: number}} rect2 
- * @returns {boolean} True if rectangles overlap
- */
-export function rectsOverlap(rect1, rect2) {
-    return rect1.x < rect2.x + rect2.width &&
-        rect1.x + rect1.width > rect2.x &&
-        rect1.y < rect2.y + rect2.height &&
-        rect1.y + rect1.height > rect2.y;
+function rectsOverlap(rect1, rect2) {
+  return rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y;
 }
-
-/**
- * Find the LiteGraph canvas element in the DOM.
- * Tries multiple selectors for compatibility with different ComfyUI versions.
- * @returns {HTMLCanvasElement|null} The canvas element or null if not found
- */
-export function findLiteGraphCanvas() {
-    return document.getElementById("graph-canvas") ||
-        document.querySelector("canvas.graphcanvas") ||
-        app.canvas_manager?.container?.querySelector("canvas") ||
-        (app.canvas && app.canvas.graph_canvas ? app.canvas.graph_canvas : null);
-}
-
-/**
- * Normalize a color value to include the # symbol for CSS.
- * @param {string} color - The color value (with or without #)
- * @returns {string} The normalized color with # prefix
- */
-export function normalizeColor(color) {
-    if (!color) return color;
-    return color.startsWith('#') ? color : `#${color}`;
-}
-
-/**
- * Clamp a value between min and max bounds.
- * @param {number} value - The value to clamp
- * @param {number} min - Minimum bound
- * @param {number} max - Maximum bound
- * @returns {number} The clamped value
- */
-export function clamp(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
-
-/**
- * Create a debug logger that only logs when debug mode is enabled.
- * @param {string} prefix - Prefix for log messages
- * @param {function} isDebugEnabled - Function that returns whether debug is enabled
- * @returns {{log: function, error: function}} Logger object
- */
-export function createDebugLogger(prefix, isDebugEnabled) {
-    return {
-        log(...args) {
-            if (isDebugEnabled()) {
-                console.log(`${prefix}:`, ...args);
-            }
-        },
-        error(...args) {
-            console.error(`${prefix} ERROR:`, ...args);
-        }
-    };
+function findLiteGraphCanvas() {
+  var _a, _b;
+  const canvas = document.getElementById("graph-canvas");
+  if (canvas) return canvas;
+  const graphCanvas = document.querySelector("canvas.graphcanvas");
+  if (graphCanvas) return graphCanvas;
+  const appAny = app;
+  if ((_a = appAny == null ? void 0 : appAny.canvas_manager) == null ? void 0 : _a.container) {
+    const managerCanvas = appAny.canvas_manager.container.querySelector("canvas");
+    if (managerCanvas) return managerCanvas;
+  }
+  if ((_b = appAny == null ? void 0 : appAny.canvas) == null ? void 0 : _b.graph_canvas) {
+    return appAny.canvas.graph_canvas;
+  }
+  return null;
 }
+export {
+  findLiteGraphCanvas,
+  getSettingValue,
+  isUserTyping,
+  rectsOverlap
+};
+//# sourceMappingURL=utils.js.map

web/style.css

@@ -0,0 +1,80 @@
+
+.mag-info-panel[data-v-687c6e82] {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  background: var(--comfy-menu-bg, #222);
+  color: var(--comfy-text-color, #fff);
+  border: 1px solid var(--border-color, #444);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  overflow: hidden;
+  font-family: sans-serif;
+  z-index: 1000;
+  pointer-events: auto;
+}
+.mag-panel-header[data-v-687c6e82] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: rgba(255,255,255,0.05);
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  cursor: grab;
+}
+.mag-panel-header[data-v-687c6e82]:active {
+  cursor: grabbing;
+}
+.mag-panel-title[data-v-687c6e82] {
+  font-weight: bold;
+}
+.mag-panel-controls[data-v-687c6e82] {
+  display: flex;
+  gap: 4px;
+}
+.mag-panel-controls button[data-v-687c6e82] {
+  background: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+.mag-panel-controls button[data-v-687c6e82]:hover {
+  background: rgba(255,255,255,0.1);
+}
+.mag-panel-controls button.active[data-v-687c6e82] {
+  background: rgba(59, 130, 246, 0.3);
+}
+.mag-panel-content[data-v-687c6e82] {
+  padding: 12px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.mag-node-info h3[data-v-687c6e82] {
+  margin-top: 0;
+  margin-bottom: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  padding-bottom: 5px;
+}
+.mag-property-grid[data-v-687c6e82] {
+  display: grid;
+  gap: 4px;
+}
+.mag-prop-row[data-v-687c6e82] {
+  display: flex;
+  justify-content: space-between;
+}
+.mag-prop-label[data-v-687c6e82] {
+  opacity: 0.7;
+}
+.mag-empty-state[data-v-687c6e82] {
+  opacity: 0.6;
+  text-align: center;
+  padding: 20px;
+}
+.theme-light[data-v-687c6e82] {
+  background: #fff;
+  color: #333;
+  border-color: #ccc;
+}