Æmotion StudioandClaude Opus 5.5
4b06ee92bb
Restyle the panel on ComfyUI palette tokens and drop the built-in themes. Add a header with Back/Forward, Prev/Next, Focus, Lock and a searchable Go to node picker, a subgraph/group breadcrumb, and simplified modes: Follow glass or Float, plus Sticky, Follow selection and Lock to node (replaces Hold). Fix widget edits (step2 steps, INT/FLOAT, commit on Enter/blur, undo), subgraph lookups, orphaned dropdown menus, global arrow-key capture, the pop-out editor, and remove Google Fonts loading and dead code. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
212 lines
8.4 KiB
JavaScript
212 lines
8.4 KiB
JavaScript
import { app } from "/scripts/app.js";
|
|
import { PANEL_POSITIONS, PANEL_FONTS } from "../constants.js";
|
|
import { DEFAULT_PANEL_SETTINGS } from "./defaults.js";
|
|
function registerPanelSettings(setEnabled) {
|
|
const settings = DEFAULT_PANEL_SETTINGS;
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelPosition",
|
|
name: "🔍 [4] Info Panel: Position",
|
|
type: "combo",
|
|
options: PANEL_POSITIONS.map((p) => ({ value: p, text: p })),
|
|
defaultValue: settings["🔍MagnifyGlass.InfoPanelPosition"],
|
|
tooltip: "Position of the info panel relative to the magnifying glass.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelPosition"] = String(value);
|
|
panel.positionManager.positionPanel();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelPersist",
|
|
name: "🔍 [4] Info Panel: Sticky Mode (Persist)",
|
|
type: "boolean",
|
|
defaultValue: settings["🔍MagnifyGlass.InfoPanelPersist"],
|
|
tooltip: "Keep showing the last node while the cursor is over empty canvas. Its widgets can then be edited.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelPersist"] = !!value;
|
|
panel.uiManager.updateControlStates();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelFollowSelection",
|
|
name: "🔍 [4] Info Panel: Follow Selection",
|
|
type: "boolean",
|
|
defaultValue: settings["🔍MagnifyGlass.InfoPanelFollowSelection"],
|
|
tooltip: "Show the selected node instead of the hovered one while a node is selected. Its widgets can then be edited.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelFollowSelection"] = !!value;
|
|
panel.uiManager.updateControlStates();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.NodeHighlightEnabled",
|
|
name: "🔍 [4] Info Panel: Node Highlight Border",
|
|
type: "boolean",
|
|
defaultValue: settings["🔍MagnifyGlass.NodeHighlightEnabled"] ?? true,
|
|
tooltip: "Show a highlight border in the accent colour around the currently inspected node.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.NodeHighlightEnabled"] = !!value;
|
|
const app2 = window.app;
|
|
if (app2 && app2.canvas) {
|
|
app2.canvas.setDirty(true, true);
|
|
}
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.ShowHoveringControls",
|
|
name: "🔍 [4] Info Panel: Show Hover Controls",
|
|
type: "combo",
|
|
options: [{ value: true, text: "Yes" }, { value: false, text: "No" }],
|
|
defaultValue: settings["🔍MagnifyGlass.ShowHoveringControls"],
|
|
tooltip: "Show or hide hovering UI controls above the info panel.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.ShowHoveringControls"] = !!value;
|
|
if (panel.uiManager.elements.controls) {
|
|
panel.uiManager.elements.controls.style.display = value ? "flex" : "none";
|
|
}
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelWidth",
|
|
name: "🔍 [5] Panel Sizing: Width (px)",
|
|
type: "slider",
|
|
defaultValue: settings["🔍MagnifyGlass.InfoPanelWidth"],
|
|
min: 200,
|
|
max: 600,
|
|
step: 20,
|
|
tooltip: "Width of the information panel in pixels.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelWidth"] = parseInt(String(value), 10);
|
|
panel.uiManager.applyStyles();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelMaxHeight",
|
|
name: "🔍 [5] Panel Sizing: Max Height (px)",
|
|
type: "slider",
|
|
defaultValue: settings["🔍MagnifyGlass.InfoPanelMaxHeight"],
|
|
min: 200,
|
|
max: 1500,
|
|
step: 50,
|
|
tooltip: "Maximum height of the information panel in pixels.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelMaxHeight"] = parseInt(String(value), 10);
|
|
panel.uiManager.applyStyles();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelOpacity",
|
|
name: "🔍 [5] Panel Sizing: Opacity (%)",
|
|
type: "slider",
|
|
defaultValue: settings["🔍MagnifyGlass.InfoPanelOpacity"],
|
|
min: 10,
|
|
max: 100,
|
|
step: 5,
|
|
tooltip: "Opacity of the information panel background.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelOpacity"] = parseInt(String(value), 10);
|
|
panel.uiManager.applyStyles();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelFontSize",
|
|
name: "🔍 [6] Panel Style: 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) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelFontSize"] = parseInt(String(value), 10);
|
|
panel.uiManager.applyStyles();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelFontFamily",
|
|
name: "🔍 [6] Panel Style: Font Family",
|
|
type: "combo",
|
|
options: PANEL_FONTS.map((f) => ({ value: f, text: f === "monospace" ? "Monospace" : f })),
|
|
defaultValue: settings["🔍MagnifyGlass.InfoPanelFontFamily"],
|
|
tooltip: "Font family for the info panel text. A font that is not installed on this computer falls back to the default.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelFontFamily"] = String(value);
|
|
panel.uiManager.applyStyles();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelTextColor",
|
|
name: "🔍 [6] Panel Style: Text Color",
|
|
type: "color",
|
|
defaultValue: settings["🔍MagnifyGlass.InfoPanelTextColor"],
|
|
tooltip: "Custom text color for the info panel.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
const strValue = String(value);
|
|
const normalizedColor = strValue && !strValue.startsWith("#") ? `#${strValue}` : strValue;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelTextColor"] = normalizedColor;
|
|
panel.uiManager.applyStyles();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelAccentColor",
|
|
name: "🔍 [6] Panel Style: Accent Color",
|
|
type: "color",
|
|
defaultValue: settings["🔍MagnifyGlass.InfoPanelAccentColor"],
|
|
tooltip: "Custom accent color for the info panel.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
const strValue = String(value);
|
|
const normalizedColor = strValue && !strValue.startsWith("#") ? `#${strValue}` : strValue;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.InfoPanelAccentColor"] = normalizedColor;
|
|
panel.uiManager.applyStyles();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.HighContrastText",
|
|
name: "🔍 [6] Panel Style: High Contrast Text",
|
|
type: "boolean",
|
|
defaultValue: settings["🔍MagnifyGlass.HighContrastText"] ?? false,
|
|
tooltip: "Increase contrast for text in input fields for better legibility.",
|
|
onChange: (value) => {
|
|
const panel = window.infoPanelManager;
|
|
if (!panel) return;
|
|
panel.stateManager.state.settings["🔍MagnifyGlass.HighContrastText"] = !!value;
|
|
panel.uiManager.applyStyles();
|
|
}
|
|
});
|
|
app.ui.settings.addSetting({
|
|
id: "🔍MagnifyGlass.InfoPanelEnabled",
|
|
name: "🔍 [4] Info Panel: Enable",
|
|
type: "combo",
|
|
options: [{ value: true, text: "Yes" }, { value: false, text: "No" }],
|
|
defaultValue: settings["🔍MagnifyGlass.InfoPanelEnabled"],
|
|
tooltip: "Show the Inspector panel next to the glass. Off: glass only, with no panel or panel hotkeys.",
|
|
onChange: (value) => setEnabled(!!value)
|
|
});
|
|
}
|
|
export {
|
|
registerPanelSettings
|
|
};
|