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

feat: Add font family selection to the info panel settings.

Browse Source
This commit is contained in:
AEmotionStudio
2026-01-03 01:31:15 -08:00
parent 4c89147d09
commit 257c77fcee
13 changed files with 162 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/info-panel/UIManager.ts
+31 -1
View File
@@ -418,6 +418,25 @@ export class UIManager {
}
}
/**
* Load a Google Font dynamically.
* @param fontName - Name of the font to load
*/
loadGoogleFont(fontName: string): void {
// Skip if already loaded
const linkId = `google-font-${fontName.replace(/\s+/g, '-').toLowerCase()}`;
if (document.getElementById(linkId)) return;
// Create link element for Google Fonts
const link = document.createElement('link');
link.id = linkId;
link.rel = 'stylesheet';
link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontName)}:wght@400;500;600;700&display=swap`;
document.head.appendChild(link);
Logger.debug(`[UIManager] Loaded Google Font: ${fontName}`);
}
/**
* Apply current styles to elements.
*/
@@ -442,7 +461,18 @@ export class UIManager {
this.elements.panel.style.transform = 'translateY(-10px)';
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";
// Apply Font Family
const fontFamily = settings["🔍MagnifyGlass.InfoPanelFontFamily"] as string || "System Default";
if (fontFamily === "System Default" || fontFamily === "system-ui") {
this.elements.panel.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
} else if (fontFamily === "monospace") {
this.elements.panel.style.fontFamily = "'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace";
} else {
// Load Google Font dynamically
this.loadGoogleFont(fontFamily);
this.elements.panel.style.fontFamily = `'${fontFamily}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`;
}
// Apply Font Size
const fontSize = settings["🔍MagnifyGlass.InfoPanelFontSize"] || 14;
src/shared/settings/defaults.ts
+1
View File
@@ -57,5 +57,6 @@ export const DEFAULT_PANEL_SETTINGS: PanelSettings = {
"🔍MagnifyGlass.InfoPanelTextColor": "#6b7280",
"🔍MagnifyGlass.InfoPanelAccentColor": "#3b82f6",
"🔍MagnifyGlass.InfoPanelFontSize": 14,
"🔍MagnifyGlass.InfoPanelFontFamily": "System Default",
"🔍MagnifyGlass.InfoPanelPersist": false,
};
src/shared/settings/panelSettings.ts
+28
View File
@@ -128,6 +128,34 @@ export function registerPanelSettings(stateManager: any, uiManager: any, positio
}
});
app.ui.settings.addSetting({
id: "🔍MagnifyGlass.InfoPanelFontFamily",
name: "📊 Info Panel: Font Family",
type: "combo",
options: [
{ value: "System Default", text: "System Default" },
{ value: "Inter", text: "Inter" },
{ value: "Roboto", text: "Roboto" },
{ value: "JetBrains Mono", text: "JetBrains Mono" },
{ value: "Fira Code", text: "Fira Code" },
{ value: "IBM Plex Sans", text: "IBM Plex Sans" },
{ value: "Space Grotesk", text: "Space Grotesk" },
{ value: "Lexend", text: "Lexend" },
{ value: "Outfit", text: "Outfit" },
{ value: "monospace", text: "Monospace" },
],
defaultValue: settings["🔍MagnifyGlass.InfoPanelFontFamily"],
tooltip: "Font family for the info panel text.",
onChange: (value: any) => {
if (stateManager) {
stateManager.state.settings["🔍MagnifyGlass.InfoPanelFontFamily"] = String(value);
if (uiManager) {
uiManager.applyStyles();
}
}
}
});
app.ui.settings.addSetting({
id: "🔍MagnifyGlass.InfoPanelPersist",
name: "📊 Info Panel: Persist Node Info",
src/shared/settings/types.ts
+1
View File
@@ -45,6 +45,7 @@ export interface PanelSettings {
"🔍MagnifyGlass.InfoPanelTextColor": string;
"🔍MagnifyGlass.InfoPanelAccentColor": string;
"🔍MagnifyGlass.InfoPanelFontSize": number;
"🔍MagnifyGlass.InfoPanelFontFamily": string;
"🔍MagnifyGlass.InfoPanelPersist": boolean;
[key: string]: string | number | boolean; // Allow indexing
}
src/sidebar/SidebarSettings.ts
+18
View File
@@ -554,6 +554,23 @@ export function renderSettingsPanel(container: HTMLElement): void {
}
));
const fontFamilyOptions = [
'System Default', 'Inter', 'Roboto', 'JetBrains Mono', 'Fira Code',
'IBM Plex Sans', 'Space Grotesk', 'Lexend', 'Outfit', 'monospace'
];
panelSection.body.appendChild(createSelect('Font Family',
getSettingValue('🔍MagnifyGlass.InfoPanelFontFamily', 'System Default'), fontFamilyOptions,
(value) => setSettingValue('🔍MagnifyGlass.InfoPanelFontFamily', value),
'Font family for the info panel text',
(value) => {
const infoPanel = (window as any).infoPanelManager;
if (infoPanel?.stateManager?.state?.settings) {
infoPanel.stateManager.state.settings['🔍MagnifyGlass.InfoPanelFontFamily'] = value;
infoPanel.uiManager.applyStyles();
}
}
));
panelSection.body.appendChild(createColorPicker('Text Color',
getSettingValue('🔍MagnifyGlass.InfoPanelTextColor', '#6b7280'),
(value) => setSettingValue('🔍MagnifyGlass.InfoPanelTextColor', value),
@@ -714,6 +731,7 @@ export function renderSettingsPanel(container: HTMLElement): void {
setSettingValue('🔍MagnifyGlass.InfoPanelMaxHeight', 300);
setSettingValue('🔍MagnifyGlass.InfoPanelOpacity', 100);
setSettingValue('🔍MagnifyGlass.InfoPanelFontSize', 14);
setSettingValue('🔍MagnifyGlass.InfoPanelFontFamily', 'System Default');
setSettingValue('🔍MagnifyGlass.InfoPanelPersist', false);
setSettingValue('🔍MagnifyGlass.InfoPanelTextColor', '#6b7280');
setSettingValue('🔍MagnifyGlass.InfoPanelAccentColor', '#3b82f6');
web/info-panel/UIManager.js
+23 -1
View File
@@ -277,6 +277,20 @@ class UIManager {
this.elements.controls.classList.add("vertical-layout");
}
}
/**
* Load a Google Font dynamically.
* @param fontName - Name of the font to load
*/
loadGoogleFont(fontName) {
const linkId = `google-font-${fontName.replace(/\s+/g, "-").toLowerCase()}`;
if (document.getElementById(linkId)) return;
const link = document.createElement("link");
link.id = linkId;
link.rel = "stylesheet";
link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontName)}:wght@400;500;600;700&display=swap`;
document.head.appendChild(link);
Logger.debug(`[UIManager] Loaded Google Font: ${fontName}`);
}
/**
* Apply current styles to elements.
*/
@@ -293,7 +307,15 @@ class UIManager {
this.elements.panel.style.transform = "translateY(-10px)";
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 fontFamily = settings["🔍MagnifyGlass.InfoPanelFontFamily"] || "System Default";
if (fontFamily === "System Default" || fontFamily === "system-ui") {
this.elements.panel.style.fontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
} else if (fontFamily === "monospace") {
this.elements.panel.style.fontFamily = "'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, monospace";
} else {
this.loadGoogleFont(fontFamily);
this.elements.panel.style.fontFamily = `'${fontFamily}', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`;
}
const fontSize = settings["🔍MagnifyGlass.InfoPanelFontSize"] || 14;
this.elements.panel.style.fontSize = `${fontSize}px`;
this.elements.panel.style.transition = "none";
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
+1
View File
@@ -33,6 +33,7 @@ const DEFAULT_PANEL_SETTINGS = {
"🔍MagnifyGlass.InfoPanelTextColor": "#6b7280",
"🔍MagnifyGlass.InfoPanelAccentColor": "#3b82f6",
"🔍MagnifyGlass.InfoPanelFontSize": 14,
"🔍MagnifyGlass.InfoPanelFontFamily": "System Default",
"🔍MagnifyGlass.InfoPanelPersist": false
};
export {
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 \"🔍MagnifyGlass.InfoPanelFontSize\": 14,\n \"🔍MagnifyGlass.InfoPanelPersist\": false,\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;AAAA,EACpC,mCAAmC;AACvC;"}
{"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 \"🔍MagnifyGlass.InfoPanelFontFamily\": \"System Default\",\n \"🔍MagnifyGlass.InfoPanelPersist\": false,\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;AAAA,EACpC,sCAAsC;AAAA,EACtC,mCAAmC;AACvC;"}
web/shared/settings/panelSettings.js
+27
View File
@@ -107,6 +107,33 @@ function registerPanelSettings(stateManager, uiManager, positionManager) {
}
}
});
app.ui.settings.addSetting({
id: "🔍MagnifyGlass.InfoPanelFontFamily",
name: "📊 Info Panel: Font Family",
type: "combo",
options: [
{ value: "System Default", text: "System Default" },
{ value: "Inter", text: "Inter" },
{ value: "Roboto", text: "Roboto" },
{ value: "JetBrains Mono", text: "JetBrains Mono" },
{ value: "Fira Code", text: "Fira Code" },
{ value: "IBM Plex Sans", text: "IBM Plex Sans" },
{ value: "Space Grotesk", text: "Space Grotesk" },
{ value: "Lexend", text: "Lexend" },
{ value: "Outfit", text: "Outfit" },
{ value: "monospace", text: "Monospace" }
],
defaultValue: settings["🔍MagnifyGlass.InfoPanelFontFamily"],
tooltip: "Font family for the info panel text.",
onChange: (value) => {
if (stateManager) {
stateManager.state.settings["🔍MagnifyGlass.InfoPanelFontFamily"] = String(value);
if (uiManager) {
uiManager.applyStyles();
}
}
}
});
app.ui.settings.addSetting({
id: "🔍MagnifyGlass.InfoPanelPersist",
name: "📊 Info Panel: Persist Node Info",
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
+28
View File
@@ -440,6 +440,33 @@ function renderSettingsPanel(container) {
}
}
));
const fontFamilyOptions = [
"System Default",
"Inter",
"Roboto",
"JetBrains Mono",
"Fira Code",
"IBM Plex Sans",
"Space Grotesk",
"Lexend",
"Outfit",
"monospace"
];
panelSection.body.appendChild(createSelect(
"Font Family",
getSettingValue("🔍MagnifyGlass.InfoPanelFontFamily", "System Default"),
fontFamilyOptions,
(value) => setSettingValue("🔍MagnifyGlass.InfoPanelFontFamily", value),
"Font family for the info panel text",
(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.InfoPanelFontFamily"] = value;
infoPanel.uiManager.applyStyles();
}
}
));
panelSection.body.appendChild(createColorPicker(
"Text Color",
getSettingValue("🔍MagnifyGlass.InfoPanelTextColor", "#6b7280"),
@@ -583,6 +610,7 @@ function renderSettingsPanel(container) {
setSettingValue("🔍MagnifyGlass.InfoPanelMaxHeight", 300);
setSettingValue("🔍MagnifyGlass.InfoPanelOpacity", 100);
setSettingValue("🔍MagnifyGlass.InfoPanelFontSize", 14);
setSettingValue("🔍MagnifyGlass.InfoPanelFontFamily", "System Default");
setSettingValue("🔍MagnifyGlass.InfoPanelPersist", false);
setSettingValue("🔍MagnifyGlass.InfoPanelTextColor", "#6b7280");
setSettingValue("🔍MagnifyGlass.InfoPanelAccentColor", "#3b82f6");
web/sidebar/SidebarSettings.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long