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

feat: Add info panel font size setting and display node's Python module path instead of author.

Browse Source
This commit is contained in:
AEmotionStudio
2026-01-02 14:36:56 -08:00
parent 5226e52dde
commit ea6b800b32
18 changed files with 119 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/info-panel/InformationGatherer.ts
+10 -4
View File
@@ -144,12 +144,14 @@ export class InformationGatherer {
let author: string | undefined;
let category: string | undefined;
let executionOrder: number | undefined;
let pythonModule: string | undefined;
try {
// Check for node.constructor.nodeData (ComfyUI stores metadata here)
const nodeData = (node as any).constructor?.nodeData;
if (nodeData) {
author = nodeData.author || nodeData.python_module?.split('.')[0];
pythonModule = nodeData.python_module;
author = nodeData.author || pythonModule?.split('.')[0];
category = nodeData.category;
}
@@ -159,6 +161,9 @@ export class InformationGatherer {
if (nodeType) {
author = nodeType.nodeData?.author || nodeType.author;
category = nodeType.category || category;
if (!pythonModule && nodeType.nodeData?.python_module) {
pythonModule = nodeType.nodeData.python_module;
}
}
}
@@ -203,9 +208,10 @@ export class InformationGatherer {
outputs: node.outputs || [],
properties: node.properties || {},
hoverRegion: this.detectNodeRegion(localPos, node),
executionOrder,
author,
category
executionOrder: executionOrder,
author: author,
category: category,
pythonModule: pythonModule
};
}
src/info-panel/UIManager.ts
+8 -3
View File
@@ -411,6 +411,10 @@ export class UIManager {
this.elements.panel.style.userSelect = 'none';
this.elements.panel.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
// Apply Font Size
const fontSize = settings["🔍MagnifyGlass.InfoPanelFontSize"] || 14;
this.elements.panel.style.fontSize = `${fontSize}px`;
// 3. Apply transition
this.elements.panel.style.transition = settings["🔍MagnifyGlass.InfoPanelAnimations"]
? 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)'
@@ -591,9 +595,10 @@ export class UIManager {
nodeContent.push({ label: 'Category', value: info.hoveredNode.category });
}
// Add author if available
if (info.hoveredNode.author) {
nodeContent.push({ label: 'Author', value: info.hoveredNode.author });
// Add python module path if available
if (info.hoveredNode.pythonModule) {
const path = info.hoveredNode.pythonModule.replace(/\./g, '/') + '.py';
nodeContent.push({ label: 'Path', value: path });
}
// Check if this is a complex node that shows all widgets
src/shared/settings/defaults.ts
+1
View File
@@ -56,4 +56,5 @@ export const DEFAULT_PANEL_SETTINGS: PanelSettings = {
"🔍MagnifyGlass.ControlsPosition": "left",
"🔍MagnifyGlass.InfoPanelTextColor": "#6b7280",
"🔍MagnifyGlass.InfoPanelAccentColor": "#3b82f6",
"🔍MagnifyGlass.InfoPanelFontSize": 14,
};
src/shared/settings/panelSettings.ts
+19
View File
@@ -109,6 +109,25 @@ export function registerPanelSettings(stateManager: any, uiManager: any, positio
}
});
app.ui.settings.addSetting({
id: "🔍MagnifyGlass.InfoPanelFontSize",
name: "📊 Info Panel: Font Size (px)",
type: "slider",
defaultValue: settings["🔍MagnifyGlass.InfoPanelFontSize"],
min: 8,
max: 24,
step: 1,
tooltip: "Font size of the information panel text.",
onChange: (value: any) => {
if (stateManager) {
stateManager.state.settings["🔍MagnifyGlass.InfoPanelFontSize"] = parseInt(String(value), 10);
if (uiManager) {
uiManager.applyStyles();
}
}
}
});
app.ui.settings.addSetting({
id: "🔍MagnifyGlass.InfoPanelAnimations",
name: "📊 Info Panel: Animations",
src/shared/settings/types.ts
+1
View File
@@ -44,6 +44,7 @@ export interface PanelSettings {
"🔍MagnifyGlass.ControlsPosition": string;
"🔍MagnifyGlass.InfoPanelTextColor": string;
"🔍MagnifyGlass.InfoPanelAccentColor": string;
"🔍MagnifyGlass.InfoPanelFontSize": number;
[key: string]: string | number | boolean; // Allow indexing
}
src/sidebar/SidebarSettings.ts
+14
View File
@@ -498,6 +498,19 @@ export function renderSettingsPanel(container: HTMLElement): void {
}
));
panelSection.body.appendChild(createSlider('Font Size',
getSettingValue('🔍MagnifyGlass.InfoPanelFontSize', 14), 8, 24, 1, 'px',
(value) => setSettingValue('🔍MagnifyGlass.InfoPanelFontSize', value),
'Font size of text in the info panel',
(value) => {
const infoPanel = (window as any).infoPanelManager;
if (infoPanel?.stateManager?.state?.settings) {
infoPanel.stateManager.state.settings['🔍MagnifyGlass.InfoPanelFontSize'] = value;
infoPanel.uiManager.applyStyles();
}
}
));
panelSection.body.appendChild(createSlider('Opacity',
getSettingValue('🔍MagnifyGlass.InfoPanelOpacity', 95), 10, 100, 5, '%',
(value) => setSettingValue('🔍MagnifyGlass.InfoPanelOpacity', value),
@@ -676,6 +689,7 @@ export function renderSettingsPanel(container: HTMLElement): void {
setSettingValue('🔍MagnifyGlass.InfoPanelWidth', 300);
setSettingValue('🔍MagnifyGlass.InfoPanelMaxHeight', 300);
setSettingValue('🔍MagnifyGlass.InfoPanelOpacity', 100);
setSettingValue('🔍MagnifyGlass.InfoPanelFontSize', 14);
setSettingValue('🔍MagnifyGlass.InfoPanelTextColor', '#6b7280');
setSettingValue('🔍MagnifyGlass.InfoPanelAccentColor', '#3b82f6');
setSettingValue('🔍MagnifyGlass.InfoPanelAnimations', false);
src/types/comfyui.d.ts
Vendored
+1
View File
@@ -325,6 +325,7 @@ export interface NodeInfo {
executionOrder?: number;
author?: string;
category?: string;
pythonModule?: string;
}
/**
web/info-panel.css
+6 -6
View File
@@ -347,11 +347,11 @@
.header-title {
font-weight: 600;
font-size: 18px;
font-size: 1.125em;
}
.header-subtitle {
font-size: 14px;
font-size: 0.875em;
opacity: 0.7;
font-style: italic;
}
@@ -531,7 +531,7 @@
.section-title {
flex: 1;
font-size: 16px;
font-size: 1em;
font-weight: 600;
letter-spacing: 0.3px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -542,7 +542,7 @@
color: #8bb3ff;
padding: 3px 10px;
border-radius: 10px;
font-size: 13px;
font-size: 0.81em;
font-weight: 500;
}
@@ -614,7 +614,7 @@
.info-label {
font-weight: 500;
opacity: 0.85;
font-size: 15px;
font-size: 0.94em;
min-width: 80px;
padding-right: 12px;
line-height: 1.5;
@@ -622,7 +622,7 @@
.info-value {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 14px;
font-size: 0.88em;
color: var(--info-panel-accent-color, #a0d468);
background: rgba(160, 212, 104, 0.12);
padding: 4px 10px;
web/info-panel/InformationGatherer.js
+10 -4
View File
@@ -109,17 +109,22 @@ class InformationGatherer {
let author;
let category;
let executionOrder;
let pythonModule;
try {
const nodeData = (_a = node.constructor) == null ? void 0 : _a.nodeData;
if (nodeData) {
author = nodeData.author || ((_b = nodeData.python_module) == null ? void 0 : _b.split(".")[0]);
pythonModule = nodeData.python_module;
author = nodeData.author || (pythonModule == null ? void 0 : pythonModule.split(".")[0]);
category = nodeData.category;
}
if (!author && typeof LiteGraph !== "undefined") {
const nodeType = (_c = LiteGraph.registered_node_types) == null ? void 0 : _c[node.type];
const nodeType = (_b = LiteGraph.registered_node_types) == null ? void 0 : _b[node.type];
if (nodeType) {
author = ((_d = nodeType.nodeData) == null ? void 0 : _d.author) || nodeType.author;
author = ((_c = nodeType.nodeData) == null ? void 0 : _c.author) || nodeType.author;
category = nodeType.category || category;
if (!pythonModule && ((_d = nodeType.nodeData) == null ? void 0 : _d.python_module)) {
pythonModule = nodeType.nodeData.python_module;
}
}
}
executionOrder = node.order;
@@ -162,7 +167,8 @@ class InformationGatherer {
hoverRegion: this.detectNodeRegion(localPos, node),
executionOrder,
author,
category
category,
pythonModule
};
}
getNodeInfo(node) {
web/info-panel/InformationGatherer.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
web/info-panel/UIManager.js
+5 -2
View File
@@ -268,6 +268,8 @@ class UIManager {
this.elements.panel.style.pointerEvents = "auto";
this.elements.panel.style.userSelect = "none";
this.elements.panel.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
const fontSize = settings["🔍MagnifyGlass.InfoPanelFontSize"] || 14;
this.elements.panel.style.fontSize = `${fontSize}px`;
this.elements.panel.style.transition = settings["🔍MagnifyGlass.InfoPanelAnimations"] ? "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)" : "none";
const textColor = settings["🔍MagnifyGlass.InfoPanelTextColor"];
if (textColor && typeof textColor === "string") {
@@ -405,8 +407,9 @@ class UIManager {
if (info.hoveredNode.category) {
nodeContent.push({ label: "Category", value: info.hoveredNode.category });
}
if (info.hoveredNode.author) {
nodeContent.push({ label: "Author", value: info.hoveredNode.author });
if (info.hoveredNode.pythonModule) {
const path = info.hoveredNode.pythonModule.replace(/\./g, "/") + ".py";
nodeContent.push({ label: "Path", value: path });
}
const nodeType = info.hoveredNode.type ? info.hoveredNode.type.toLowerCase() : "";
const isSaveNode = nodeType.includes("save") && !nodeType.includes("checkpoint") && !nodeType.includes("model") && !nodeType.includes("preview");
web/info-panel/UIManager.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
web/shared/settings/defaults.js
+2 -1
View File
@@ -31,7 +31,8 @@ const DEFAULT_PANEL_SETTINGS = {
"🔍MagnifyGlass.ShowHoveringControls": true,
"🔍MagnifyGlass.ControlsPosition": "left",
"🔍MagnifyGlass.InfoPanelTextColor": "#6b7280",
"🔍MagnifyGlass.InfoPanelAccentColor": "#3b82f6"
"🔍MagnifyGlass.InfoPanelAccentColor": "#3b82f6",
"🔍MagnifyGlass.InfoPanelFontSize": 14
};
export {
DEFAULT_GLASS_SETTINGS,
web/shared/settings/defaults.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"defaults.js","sources":["../../../src/shared/settings/defaults.ts"],"sourcesContent":["/**\n * ComfyUI MagnifyGlass - Default Settings Values\n * \n * Default values for all magnify glass and info panel settings.\n */\n\nimport {\n DEFAULT_GLASS_SIZE,\n DEFAULT_ZOOM_FACTOR,\n DEFAULT_BORDER_WIDTH,\n DEFAULT_BORDER_COLOR,\n DEFAULT_OFFSET_STEP,\n DEFAULT_PANEL_WIDTH,\n DEFAULT_PANEL_MAX_HEIGHT,\n DEFAULT_PANEL_OPACITY\n} from '../constants';\nimport type { GlassSettings, PanelSettings } from './types';\n\n/**\n * Default settings for the magnify glass component.\n */\nexport const DEFAULT_GLASS_SETTINGS: GlassSettings = {\n \"🔍MagnifyGlass.ZoomFactor\": DEFAULT_ZOOM_FACTOR,\n \"🔍MagnifyGlass.GlassSize\": DEFAULT_GLASS_SIZE,\n \"🔍MagnifyGlass.BorderColor\": DEFAULT_BORDER_COLOR,\n \"🔍MagnifyGlass.BorderWidth\": DEFAULT_BORDER_WIDTH,\n \"🔍MagnifyGlass.ActivationKey\": \"x\",\n \"🔍MagnifyGlass.AltRequired\": false,\n \"🔍MagnifyGlass.FollowCursor\": false,\n \"🔍MagnifyGlass.DebugMode\": false,\n \"🔍MagnifyGlass.OffsetStep\": DEFAULT_OFFSET_STEP,\n \"🔍MagnifyGlass.GlassPosition\": \"Top-Right\",\n \"🔍MagnifyGlass.ResetKey\": \"o\",\n \"🔍MagnifyGlass.GlassShape\": \"Rounded Square\",\n \"🔍MagnifyGlass.BorderEnabled\": true,\n \"🔍MagnifyGlass.TextureFiltering\": \"Linear\",\n \"🔍MagnifyGlass.AlwaysActiveMode\": true,\n \"🔍MagnifyGlass.ToggleFollowCursorKey\": \"h\",\n};\n\n/**\n * Default settings for the info panel component.\n */\nexport const DEFAULT_PANEL_SETTINGS: PanelSettings = {\n \"🔍MagnifyGlass.InfoPanelEnabled\": true,\n \"🔍MagnifyGlass.InfoPanelPosition\": \"Bottom\",\n \"🔍MagnifyGlass.InfoPanelWidth\": DEFAULT_PANEL_WIDTH,\n \"🔍MagnifyGlass.InfoPanelOpacity\": DEFAULT_PANEL_OPACITY,\n \"🔍MagnifyGlass.InfoPanelMaxHeight\": DEFAULT_PANEL_MAX_HEIGHT,\n \"🔍MagnifyGlass.InfoPanelAnimations\": false,\n \"🔍MagnifyGlass.ShowInspectorTab\": false,\n \"🔍MagnifyGlass.ToggleHotkey\": \"i\",\n \"🔍MagnifyGlass.GlassPreviewToggleHotkey\": \"g\",\n \"🔍MagnifyGlass.PinPanelHotkey\": \"u\",\n \"🔍MagnifyGlass.ShowHoveringControls\": true,\n \"🔍MagnifyGlass.ControlsPosition\": \"left\",\n \"🔍MagnifyGlass.InfoPanelTextColor\": \"#6b7280\",\n \"🔍MagnifyGlass.InfoPanelAccentColor\": \"#3b82f6\",\n};\n"],"names":[],"mappings":";AAqBO,MAAM,yBAAwC;AAAA,EACjD,6BAA6B;AAAA,EAC7B,4BAA4B;AAAA,EAC5B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,mCAAmC;AAAA,EACnC,mCAAmC;AAAA,EACnC,wCAAwC;AAC5C;AAKO,MAAM,yBAAwC;AAAA,EACjD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,iCAAiC;AAAA,EACjC,mCAAmC;AAAA,EACnC,qCAAqC;AAAA,EACrC,sCAAsC;AAAA,EACtC,mCAAmC;AAAA,EACnC,+BAA+B;AAAA,EAC/B,2CAA2C;AAAA,EAC3C,iCAAiC;AAAA,EACjC,uCAAuC;AAAA,EACvC,mCAAmC;AAAA,EACnC,qCAAqC;AAAA,EACrC,uCAAuC;AAC3C;"}
{"version":3,"file":"defaults.js","sources":["../../../src/shared/settings/defaults.ts"],"sourcesContent":["/**\n * ComfyUI MagnifyGlass - Default Settings Values\n * \n * Default values for all magnify glass and info panel settings.\n */\n\nimport {\n DEFAULT_GLASS_SIZE,\n DEFAULT_ZOOM_FACTOR,\n DEFAULT_BORDER_WIDTH,\n DEFAULT_BORDER_COLOR,\n DEFAULT_OFFSET_STEP,\n DEFAULT_PANEL_WIDTH,\n DEFAULT_PANEL_MAX_HEIGHT,\n DEFAULT_PANEL_OPACITY\n} from '../constants';\nimport type { GlassSettings, PanelSettings } from './types';\n\n/**\n * Default settings for the magnify glass component.\n */\nexport const DEFAULT_GLASS_SETTINGS: GlassSettings = {\n \"🔍MagnifyGlass.ZoomFactor\": DEFAULT_ZOOM_FACTOR,\n \"🔍MagnifyGlass.GlassSize\": DEFAULT_GLASS_SIZE,\n \"🔍MagnifyGlass.BorderColor\": DEFAULT_BORDER_COLOR,\n \"🔍MagnifyGlass.BorderWidth\": DEFAULT_BORDER_WIDTH,\n \"🔍MagnifyGlass.ActivationKey\": \"x\",\n \"🔍MagnifyGlass.AltRequired\": false,\n \"🔍MagnifyGlass.FollowCursor\": false,\n \"🔍MagnifyGlass.DebugMode\": false,\n \"🔍MagnifyGlass.OffsetStep\": DEFAULT_OFFSET_STEP,\n \"🔍MagnifyGlass.GlassPosition\": \"Top-Right\",\n \"🔍MagnifyGlass.ResetKey\": \"o\",\n \"🔍MagnifyGlass.GlassShape\": \"Rounded Square\",\n \"🔍MagnifyGlass.BorderEnabled\": true,\n \"🔍MagnifyGlass.TextureFiltering\": \"Linear\",\n \"🔍MagnifyGlass.AlwaysActiveMode\": true,\n \"🔍MagnifyGlass.ToggleFollowCursorKey\": \"h\",\n};\n\n/**\n * Default settings for the info panel component.\n */\nexport const DEFAULT_PANEL_SETTINGS: PanelSettings = {\n \"🔍MagnifyGlass.InfoPanelEnabled\": true,\n \"🔍MagnifyGlass.InfoPanelPosition\": \"Bottom\",\n \"🔍MagnifyGlass.InfoPanelWidth\": DEFAULT_PANEL_WIDTH,\n \"🔍MagnifyGlass.InfoPanelOpacity\": DEFAULT_PANEL_OPACITY,\n \"🔍MagnifyGlass.InfoPanelMaxHeight\": DEFAULT_PANEL_MAX_HEIGHT,\n \"🔍MagnifyGlass.InfoPanelAnimations\": false,\n \"🔍MagnifyGlass.ShowInspectorTab\": false,\n \"🔍MagnifyGlass.ToggleHotkey\": \"i\",\n \"🔍MagnifyGlass.GlassPreviewToggleHotkey\": \"g\",\n \"🔍MagnifyGlass.PinPanelHotkey\": \"u\",\n \"🔍MagnifyGlass.ShowHoveringControls\": true,\n \"🔍MagnifyGlass.ControlsPosition\": \"left\",\n \"🔍MagnifyGlass.InfoPanelTextColor\": \"#6b7280\",\n \"🔍MagnifyGlass.InfoPanelAccentColor\": \"#3b82f6\",\n \"🔍MagnifyGlass.InfoPanelFontSize\": 14,\n};\n"],"names":[],"mappings":";AAqBO,MAAM,yBAAwC;AAAA,EACjD,6BAA6B;AAAA,EAC7B,4BAA4B;AAAA,EAC5B,8BAA8B;AAAA,EAC9B,8BAA8B;AAAA,EAC9B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,2BAA2B;AAAA,EAC3B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,mCAAmC;AAAA,EACnC,mCAAmC;AAAA,EACnC,wCAAwC;AAC5C;AAKO,MAAM,yBAAwC;AAAA,EACjD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,iCAAiC;AAAA,EACjC,mCAAmC;AAAA,EACnC,qCAAqC;AAAA,EACrC,sCAAsC;AAAA,EACtC,mCAAmC;AAAA,EACnC,+BAA+B;AAAA,EAC/B,2CAA2C;AAAA,EAC3C,iCAAiC;AAAA,EACjC,uCAAuC;AAAA,EACvC,mCAAmC;AAAA,EACnC,qCAAqC;AAAA,EACrC,uCAAuC;AAAA,EACvC,oCAAoC;AACxC;"}
web/shared/settings/panelSettings.js
+18
View File
@@ -89,6 +89,24 @@ function registerPanelSettings(stateManager, uiManager, positionManager) {
}
}
});
app.ui.settings.addSetting({
id: "🔍MagnifyGlass.InfoPanelFontSize",
name: "📊 Info Panel: Font Size (px)",
type: "slider",
defaultValue: settings["🔍MagnifyGlass.InfoPanelFontSize"],
min: 8,
max: 24,
step: 1,
tooltip: "Font size of the information panel text.",
onChange: (value) => {
if (stateManager) {
stateManager.state.settings["🔍MagnifyGlass.InfoPanelFontSize"] = parseInt(String(value), 10);
if (uiManager) {
uiManager.applyStyles();
}
}
}
});
app.ui.settings.addSetting({
id: "🔍MagnifyGlass.InfoPanelAnimations",
name: "📊 Info Panel: Animations",
web/shared/settings/panelSettings.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
web/sidebar/SidebarSettings.js
+19
View File
@@ -380,6 +380,24 @@ function renderSettingsPanel(container) {
}
}
));
panelSection.body.appendChild(createSlider(
"Font Size",
getSettingValue("🔍MagnifyGlass.InfoPanelFontSize", 14),
8,
24,
1,
"px",
(value) => setSettingValue("🔍MagnifyGlass.InfoPanelFontSize", value),
"Font size of text in the info panel",
(value) => {
var _a, _b;
const infoPanel = window.infoPanelManager;
if ((_b = (_a = infoPanel == null ? void 0 : infoPanel.stateManager) == null ? void 0 : _a.state) == null ? void 0 : _b.settings) {
infoPanel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelFontSize"] = value;
infoPanel.uiManager.applyStyles();
}
}
));
panelSection.body.appendChild(createSlider(
"Opacity",
getSettingValue("🔍MagnifyGlass.InfoPanelOpacity", 95),
@@ -546,6 +564,7 @@ function renderSettingsPanel(container) {
setSettingValue("🔍MagnifyGlass.InfoPanelWidth", 300);
setSettingValue("🔍MagnifyGlass.InfoPanelMaxHeight", 300);
setSettingValue("🔍MagnifyGlass.InfoPanelOpacity", 100);
setSettingValue("🔍MagnifyGlass.InfoPanelFontSize", 14);
setSettingValue("🔍MagnifyGlass.InfoPanelTextColor", "#6b7280");
setSettingValue("🔍MagnifyGlass.InfoPanelAccentColor", "#3b82f6");
setSettingValue("🔍MagnifyGlass.InfoPanelAnimations", false);
web/sidebar/SidebarSettings.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long