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

feat: Enhance magnify glass UI and sidebar settings management.

Browse Source
This commit is contained in:
AEmotionStudio
2026-01-04 01:11:31 -08:00
parent b9ec480dea
commit 0454e17f32
9 changed files with 69 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/magnify-glass/UiManager.ts
+1 -1
View File
@@ -437,7 +437,7 @@ export class UiManager {
btn.style.minHeight = computed.minHeight;
// btn.style.width = computed.width; // Don't copy width, let it adapt
btn.title = "Toggle Magnify Glass";
btn.title = "Toggle Magnify Glass (X)";
btn.innerHTML = Icons.magnifyGlass;
// Ensure specific display props
src/sidebar/SidebarSettings.ts
+34 -16
View File
@@ -407,22 +407,13 @@ export function renderSettingsPanel(container: HTMLElement): void {
// The condition `if (getSettingValue("🔍MagnifyGlass.InfoPanelEnabled", true))` is removed
// as it doesn't make sense for a glass setting to depend on info panel being enabled.
// The tooltip and callback logic are kept as provided.
glassSection.body.appendChild(createToggle('Persist Info',
getSettingValue('🔍MagnifyGlass.InfoPanelPersist', false),
(checked) => {
setSettingValue('🔍MagnifyGlass.InfoPanelPersist', checked);
// Sync with UI controls if needed
const infoPanel = (window as any).infoPanelManager;
if (infoPanel?.uiManager) {
infoPanel.uiManager.updateControlStates();
}
}, 'Keep displaying the last node info when hovering empty space'
));
// Moved to panel settings section
// glassSection.body.appendChild(createToggle('Persist Info'...));
container.appendChild(glassSection.section);
// ===== Hotkeys Section =====
const hotkeySection = createSection('Hotkeys', true);
// ===== Glass Hotkeys Section =====
const hotkeySection = createSection('Glass Hotkeys', true);
hotkeySection.body.appendChild(createSelect('Activation Key',
getSettingValue('🔍MagnifyGlass.ActivationKey', 'x'), ACTIVATION_KEYS,
@@ -442,11 +433,23 @@ export function renderSettingsPanel(container: HTMLElement): void {
'Key to toggle follow cursor mode'
));
hotkeySection.body.appendChild(createToggle('Require Alt Key',
const glassAltToggle = createToggle('Require Alt Key',
getSettingValue('🔍MagnifyGlass.AltRequired', false),
(checked) => setSettingValue('🔍MagnifyGlass.AltRequired', checked),
(checked) => {
setSettingValue('🔍MagnifyGlass.AltRequired', checked);
// Sync all alt toggles
container.querySelectorAll('.magnify-alt-toggle .magnify-toggle').forEach(t => {
if (checked) t.classList.add('active');
else t.classList.remove('active');
});
},
'Require Alt key to be held with activation key'
));
);
glassAltToggle.classList.add('magnify-alt-toggle');
hotkeySection.body.appendChild(glassAltToggle);
// Moved to Panel Hotkeys section
// hotkeySection.body.appendChild(createToggle('Require Alt Key'...));
hotkeySection.body.appendChild(createSlider('Offset Step',
getSettingValue('🔍MagnifyGlass.OffsetStep', 10), 1, 50, 1, 'px',
@@ -650,6 +653,21 @@ export function renderSettingsPanel(container: HTMLElement): void {
'Key to pin/unpin the info panel position'
));
const panelAltToggle = createToggle('Require Alt Key',
getSettingValue('🔍MagnifyGlass.AltRequired', false),
(checked) => {
setSettingValue('🔍MagnifyGlass.AltRequired', checked);
// Sync all alt toggles
container.querySelectorAll('.magnify-alt-toggle .magnify-toggle').forEach(t => {
if (checked) t.classList.add('active');
else t.classList.remove('active');
});
},
'Require Alt key to be held with hotkeys'
);
panelAltToggle.classList.add('magnify-alt-toggle');
panelHotkeySection.body.appendChild(panelAltToggle);
container.appendChild(panelHotkeySection.section);
src/sidebar/sidebar.ts
+2 -2
View File
@@ -58,7 +58,7 @@ function renderSidebar(container: HTMLElement): void {
// Header
const header = document.createElement('div');
header.className = 'magnify-sidebar-header';
header.innerHTML = `${MAGNIFY_ICON}<h2>Magnify G.</h2>`;
header.innerHTML = `${MAGNIFY_ICON}<h2>Magnify</h2>`;
sidebar.appendChild(header);
// Content area
@@ -101,7 +101,7 @@ export function registerSidebar(): void {
app.extensionManager.registerSidebarTab({
id: 'magnifyglass',
icon: 'pi pi-search',
title: 'Magnify G.',
title: 'Magnify',
tooltip: 'MagnifyGlass Settings',
type: 'custom',
render: (el: HTMLElement) => {
web/magnify-glass/UiManager.js
+1 -1
View File
@@ -321,7 +321,7 @@ class UiManager {
const computed = window.getComputedStyle(anchorBtn);
btn.style.height = computed.height;
btn.style.minHeight = computed.minHeight;
btn.title = "Toggle Magnify Glass";
btn.title = "Toggle Magnify Glass (X)";
btn.innerHTML = Icons.magnifyGlass;
btn.style.display = "inline-flex";
btn.style.alignItems = "center";
web/magnify-glass/UiManager.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
web/sidebar/SidebarSettings.js
+26 -16
View File
@@ -275,20 +275,8 @@ function renderSettingsPanel(container) {
(checked) => setSettingValue("🔍MagnifyGlass.AlwaysActiveMode", checked),
`When enabled, glass stays visible. Toggle with ${activationKey}`
));
glassSection.body.appendChild(createToggle(
"Persist Info",
getSettingValue("🔍MagnifyGlass.InfoPanelPersist", false),
(checked) => {
setSettingValue("🔍MagnifyGlass.InfoPanelPersist", checked);
const infoPanel = window.infoPanelManager;
if (infoPanel == null ? void 0 : infoPanel.uiManager) {
infoPanel.uiManager.updateControlStates();
}
},
"Keep displaying the last node info when hovering empty space"
));
container.appendChild(glassSection.section);
const hotkeySection = createSection("Hotkeys", true);
const hotkeySection = createSection("Glass Hotkeys", true);
hotkeySection.body.appendChild(createSelect(
"Activation Key",
getSettingValue("🔍MagnifyGlass.ActivationKey", "x"),
@@ -310,12 +298,20 @@ function renderSettingsPanel(container) {
(value) => setSettingValue("🔍MagnifyGlass.ToggleFollowCursorKey", value),
"Key to toggle follow cursor mode"
));
hotkeySection.body.appendChild(createToggle(
const glassAltToggle = createToggle(
"Require Alt Key",
getSettingValue("🔍MagnifyGlass.AltRequired", false),
(checked) => setSettingValue("🔍MagnifyGlass.AltRequired", checked),
(checked) => {
setSettingValue("🔍MagnifyGlass.AltRequired", checked);
container.querySelectorAll(".magnify-alt-toggle .magnify-toggle").forEach((t) => {
if (checked) t.classList.add("active");
else t.classList.remove("active");
});
},
"Require Alt key to be held with activation key"
));
);
glassAltToggle.classList.add("magnify-alt-toggle");
hotkeySection.body.appendChild(glassAltToggle);
hotkeySection.body.appendChild(createSlider(
"Offset Step",
getSettingValue("🔍MagnifyGlass.OffsetStep", 10),
@@ -546,6 +542,20 @@ function renderSettingsPanel(container) {
(value) => setSettingValue("🔍MagnifyGlass.PinPanelHotkey", value),
"Key to pin/unpin the info panel position"
));
const panelAltToggle = createToggle(
"Require Alt Key",
getSettingValue("🔍MagnifyGlass.AltRequired", false),
(checked) => {
setSettingValue("🔍MagnifyGlass.AltRequired", checked);
container.querySelectorAll(".magnify-alt-toggle .magnify-toggle").forEach((t) => {
if (checked) t.classList.add("active");
else t.classList.remove("active");
});
},
"Require Alt key to be held with hotkeys"
);
panelAltToggle.classList.add("magnify-alt-toggle");
panelHotkeySection.body.appendChild(panelAltToggle);
container.appendChild(panelHotkeySection.section);
const buttonRow = document.createElement("div");
buttonRow.style.padding = "16px";
web/sidebar/SidebarSettings.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
web/sidebar/sidebar.js
+2 -2
View File
@@ -27,7 +27,7 @@ function renderSidebar(container) {
sidebar.style.opacity = "0";
const header = document.createElement("div");
header.className = "magnify-sidebar-header";
header.innerHTML = `${MAGNIFY_ICON}<h2>Magnify G.</h2>`;
header.innerHTML = `${MAGNIFY_ICON}<h2>Magnify</h2>`;
sidebar.appendChild(header);
const content = document.createElement("div");
content.className = "magnify-sidebar-content";
@@ -54,7 +54,7 @@ function registerSidebar() {
app.extensionManager.registerSidebarTab({
id: "magnifyglass",
icon: "pi pi-search",
title: "Magnify G.",
title: "Magnify",
tooltip: "MagnifyGlass Settings",
type: "custom",
render: (el) => {
web/sidebar/sidebar.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long