Added Dockable Info Panel
This commit is contained in:
Æmotion
@@ -1,6 +1,6 @@
|
||||
# ComfyUI-MagnifyGlass
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -12,11 +12,17 @@ ComfyUI-MagnifyGlass adds an intuitive magnifying glass to your ComfyUI canvas,
|
||||
> [!TIP]
|
||||
> Perfect for inspecting fine details in your generated images, node connections, or any part of the ComfyUI canvas!
|
||||
|
||||
|
||||
|
||||
|
||||
## 🚀 Latest Updates
|
||||
|
||||
**6/12/25 (v1.3.0)**
|
||||
|
||||
- **Inspector Information Panel:** I've introduced a new dockable panel that provides real-time data about whatever you're hovering over on the canvas. It includes detailed node analysis, media information, and a technical "Inspector" tab. Check out the "Features" and "Configuration" sections below for more details!
|
||||
|
||||
## ✨ Features
|
||||
|
||||
|
||||
|
||||
|
||||
- **🔍 Smooth Zooming**: Magnify any part of the ComfyUI canvas with a configurable zoom factor.
|
||||
- **🖱️ Cursor Interaction**:
|
||||
@@ -39,8 +45,13 @@ ComfyUI-MagnifyGlass adds an intuitive magnifying glass to your ComfyUI canvas,
|
||||
- **🖼️ Texture Filtering**: Choose between Linear (smooth) and Nearest (pixelated) texture filtering for the magnified view.
|
||||
- **🔒 Always Active Mode**: Toggle the magnifier to stay on/off without holding keys.
|
||||
- **🔑 Toggle Follow Key**: Use a configurable key (default 'H') to toggle the 'Follow Cursor' behavior on the fly.
|
||||
- **📊 Information Panel**: An optional, dockable panel that provides real-time data about the object you are hovering over.
|
||||
- **Node Analysis**: See detailed information about nodes, including title, type, important parameters (like seed, steps, CFG), and content from text boxes.
|
||||
- **Media Details**: Get information on images and other media.
|
||||
- **Inspector Tab**: A special tab showing technical details like cursor coordinates, canvas scale, and magnifier zoom level.
|
||||
- **Highly Customizable**: Pin, lock, and move the panel. Change its appearance, opacity, and more through settings.
|
||||
|
||||
|
||||
|
||||
*(🔒 Always Active & 🔑 Toggle Follow Key Showcase: you can essentially set the glass preview where ever you want on the canvas and toggle it off and on.)*
|
||||
|
||||
## 📥 Installation
|
||||
@@ -78,7 +89,7 @@ Restart ComfyUI after installation. No additional `pip install` steps are typica
|
||||
4. **Configuration**:
|
||||
- Access all settings by clicking the ⚙️ (Settings) icon in ComfyUI, then find the "🔍 Magnify Glass" section.
|
||||
|
||||
|
||||
|
||||
*(🐞 Debug Mode & Arrow Keys Showcase: ⚠️ some flickering may occur with the VHS Combine Node Preview when moving the glass across the preview service while active.)*
|
||||
|
||||
## ⚙️ Configuration Options
|
||||
@@ -104,6 +115,28 @@ All options are available in the ComfyUI settings dialog under the "🔍 Magnify
|
||||
| **Always Active Mode** | If Yes, activating the magnifier keeps it on until activated again. If No, it deactivates on key release. | `Yes (true)` |
|
||||
| **Toggle Follow Key** | The key to toggle 'Follow Cursor' behavior. Works with Alt/Option if 'Require Alt/Option Key' is Yes. | `h` |
|
||||
|
||||
### 📊 Information Panel Options
|
||||
|
||||
|
||||
|
||||
These settings control the behavior and appearance of the optional Info Panel.
|
||||
|
||||
| Option | Description | Default Value |
|
||||
| --- | --- | --- |
|
||||
| **Info Panel** | Enable or disable the professional information panel. | `Enabled` |
|
||||
| **Info Panel Position** | Position of the info panel relative to the magnifying glass. | `Left` |
|
||||
| **Info Panel Width** | Width of the information panel in pixels. | `320` |
|
||||
| **Info Panel Opacity** | Opacity of the information panel background. | `0.95` |
|
||||
| **Info Panel Max Height** | Maximum height of the information panel in pixels. | `500` |
|
||||
| **Info Panel Theme** | Color theme for the information panel. | `Dark` |
|
||||
| **Info Panel Animations**| Enable or disable animations for the info panel. | `Enabled` |
|
||||
| **Show Inspector Tab** | Show or hide the Inspector tab with cursor and canvas information. | `Disabled` |
|
||||
| **Info Panel Toggle Hotkey**| Key to toggle the info panel visibility while the magnifier is active. | `i` |
|
||||
| **Preview Toggle Hotkey**| Key to toggle the magnifying glass preview visibility. | `g` |
|
||||
| **Pin Panel Hotkey** | Key to use with Alt to pin the info panel at mouse location (e.g., Alt+P). | `p` |
|
||||
| **Show Hover Controls**| Show or hide hovering UI controls above the info panel. | `Enabled` |
|
||||
| **Controls Position** | Position of the floating control buttons relative to the info panel. | `bottom-centered` |
|
||||
|
||||
## ❓ Troubleshooting
|
||||
|
||||
- **Magnifier not appearing**:
|
||||
|
||||
+1
-1
@@ -6,7 +6,7 @@ NODE_CLASS_MAPPINGS = {}
|
||||
NODE_DISPLAY_NAME_MAPPINGS = {}
|
||||
|
||||
# List of JS files to be loaded
|
||||
__js_files__ = ["magnify_glass.js"]
|
||||
__js_files__ = ["magnify_glass.js", "magnify_info_panel.js"]
|
||||
|
||||
# List of exported elements
|
||||
__all__ = ['NODE_CLASS_MAPPINGS', 'NODE_DISPLAY_NAME_MAPPINGS', 'WEB_DIRECTORY', '__js_files__']
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:30bc23a030e6905aa8427cf554b4939a72b6767a30180f05e7993e548b2d218d
|
||||
size 3139153
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
[project]
|
||||
name = "comfyui-magnifyglass"
|
||||
description = "ComfyUI-MagnifyGlass: A powerful & customizable magnifying glass for ComfyUI. Zoom into canvas details with smooth controls, configurable activation, custom styles (shape, size, border) & WebGL performance."
|
||||
version = "1.2.0"
|
||||
version = "1.3.0"
|
||||
license = {file = "LICENSE"}
|
||||
|
||||
[project.urls]
|
||||
|
||||
+24
-30
@@ -21,7 +21,7 @@ app.registerExtension({
|
||||
"🔍MagnifyGlass.FollowCursor": true,
|
||||
"🔍MagnifyGlass.DebugMode": false,
|
||||
"🔍MagnifyGlass.OffsetStep": 5,
|
||||
"🔍MagnifyGlass.GlassPosition": "Bottom",
|
||||
"🔍MagnifyGlass.GlassPosition": "Top-Right",
|
||||
"🔍MagnifyGlass.ResetKey": "o",
|
||||
"🔍MagnifyGlass.GlassShape": "Rounded Square",
|
||||
"🔍MagnifyGlass.BorderEnabled": true,
|
||||
@@ -505,6 +505,7 @@ app.registerExtension({
|
||||
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
|
||||
@@ -581,7 +582,7 @@ app.registerExtension({
|
||||
this.debugCanvas = document.createElement("canvas");
|
||||
this.debugCanvas.id = "comfyui-magnify-debug";
|
||||
this.debugCanvas.width = 400;
|
||||
this.debugCanvas.height = 320;
|
||||
this.debugCanvas.height = 350; // Increased height to 350px
|
||||
this.debugCanvas.style.cssText = `
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
@@ -1107,8 +1108,21 @@ app.registerExtension({
|
||||
this.magnifyGlass.state.x = pixelX;
|
||||
this.magnifyGlass.state.y = pixelY;
|
||||
|
||||
// Position the glass immediately based on current cursor
|
||||
this.magnifyGlass.ui.positionGlass(clientX, clientY);
|
||||
// Position the glass initially at the top right corner of the window instead of at cursor
|
||||
// when first activated
|
||||
const glassSize = this.magnifyGlass.config.glassSize;
|
||||
const padding = 20; // Padding from window edges
|
||||
|
||||
if (!this.magnifyGlass.state.wasActivatedBefore) {
|
||||
// First activation - position at top right of the window
|
||||
this.magnifyGlass.ui.glassDiv.style.left = `${window.innerWidth - glassSize - padding}px`;
|
||||
this.magnifyGlass.ui.glassDiv.style.top = `${padding}px`;
|
||||
this.magnifyGlass.state.wasActivatedBefore = true; // Mark as activated once
|
||||
} else {
|
||||
// For subsequent activations, use normal positioning based on cursor and settings
|
||||
this.magnifyGlass.ui.positionGlass(clientX, clientY);
|
||||
}
|
||||
|
||||
this.magnifyGlass.updateMagnifiedView();
|
||||
}
|
||||
}
|
||||
@@ -1550,34 +1564,14 @@ app.registerExtension({
|
||||
// Initialize the magnifier (reads config, creates UI, attaches listeners)
|
||||
magnifyGlass.init();
|
||||
|
||||
// Optional: Apply default settings if any are missing (similar to link_animations)
|
||||
// This ensures that if new settings are added later, they get a default value
|
||||
// without needing a full reset from the user.
|
||||
// You might want a more sophisticated version check later.
|
||||
// Object.entries(DEFAULT_SETTINGS).forEach(([key, value]) => {
|
||||
// const fullKey = `MagnifyGlass.${key.split('.')[1]}`; // Construct full ID
|
||||
// const setting = app.ui.settings.items.find(s => s.id === fullKey);
|
||||
// if (setting && app.ui.settings.getSettingValue(fullKey) === undefined) {
|
||||
// app.ui.settings.setSettingValue(fullKey, value);
|
||||
// // Manually update the config if a default was just applied
|
||||
// const configKey = key.split('.')[1].charAt(0).toLowerCase() + key.split('.')[1].slice(1); // e.g., ZoomFactor -> zoomFactor
|
||||
// if (magnifyGlass.config.hasOwnProperty(configKey)) {
|
||||
// magnifyGlass.config[configKey] = value;
|
||||
// console.log(`Applied default for ${fullKey}`);
|
||||
// }
|
||||
// // Apply immediate UI changes if needed for the defaulted setting
|
||||
// if(setting.onChange) {
|
||||
// setting.onChange(value);
|
||||
// } else {
|
||||
// magnifyGlass.applyUiChanges();
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
magnifyGlass.applyUiChanges(); // Ensure UI reflects loaded/default settings initially
|
||||
// Apply UI changes
|
||||
magnifyGlass.applyUiChanges();
|
||||
|
||||
// Expose magnifyGlass globally for extensions
|
||||
window.comfyUIMagnifyGlass = magnifyGlass;
|
||||
|
||||
// --- Diagnostic Info (moved inside setup) ---
|
||||
console.log("---- Magnifier Diagnostic Info ----");
|
||||
// Diagnostic Info
|
||||
console.log("---- Enhanced Magnifier Diagnostic Info ----");
|
||||
// Browser Info
|
||||
console.log("User Agent:", navigator.userAgent);
|
||||
console.log("Device Pixel Ratio:", window.devicePixelRatio);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user