feat: Reimplement magnify info panel with state management and theme detection, and add browser console errors documentation.
This commit is contained in:
AEmotionStudio
+49
-3024
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,60 +0,0 @@
|
||||
/**
|
||||
* 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';
|
||||
|
||||
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");
|
||||
}
|
||||
});
|
||||
@@ -513,3 +513,146 @@ export function registerPanelSettings(stateManager, uiManager, positionManager)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a setting configuration object for ComfyUI settings registration.
|
||||
* This function generates the setting config based on the key and default value.
|
||||
*
|
||||
* @param {string} key - The setting key
|
||||
* @param {*} defaultValue - The default value for the setting
|
||||
* @returns {object|null} - The setting configuration or null if not found
|
||||
*/
|
||||
export function getSettingConfig(key, defaultValue) {
|
||||
const configs = {
|
||||
"🔍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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user