- Added '*' hotkey to focus the currently inspected node
- Added 'ArrowLeft' and 'ArrowRight' hotkeys to navigate nodes by execution order
- Updated README.md and CHANGELOG.md with the new hotkeys and navigation features
- Added full keyboard support (Arrows, Enter, Esc) for all dropdown types
- Implemented global '*' hotkey to center canvas on currently inspected node
- Improved event handling to reliably intercept keys before ComfyUI canvas
- Fixed memory leaks in dropdown event listeners
- Allow precise value input by removing automatic step rounding in sync manager
- Standardize stepper button increment to 1 for finer control
- Ensure dropdowns close when clicking the canvas
Ensures `htmlOverlayContainer` is cleared when exiting `renderHtmlOverlays` early (e.g. no nodes or zero scale), preventing stale content from persisting.
- Replaced `innerHTML` with `textContent` for dynamic titles in `SidebarSettings.ts` to prevent potential XSS.
- Maintained `innerHTML` usage only for trusted static SVG icons.
- Added defense-in-depth against future changes that might introduce user-controlled titles.
Refactors `renderHtmlOverlays` to eliminate layout thrashing by separating DOM read operations (getBoundingClientRect, getComputedStyle) from DOM write operations.
- Creates a `RenderTask` interface to store read data.
- Implements a Read Phase to collect measurements and cull nodes.
- Implements a Write Phase to batch DOM updates using a DocumentFragment.
- Preserves video tracking logic to ensure animation loop continuity.
- Reduces browser reflows from O(n) to O(1) per frame.
- Replaced native select elements with a viewport-aware 'CustomDropdown' for better reliability and positioning.
- Added 'High Contrast Text' mode for improved legibility in inputs and values.
- Implemented parameter value deduplication in 'NodeDataExtractor' to reduce panel clutter.
- Expanded Google Font selection with 10+ new styles.
- Switched UI dimensions to relative units (em) for consistent scaling.
- Fixed layout 'bouncing' in sticky mode by removing hover transforms.
- Added a copy-to-clipboard button for 'Category' and 'Path' node details in the Inspector panel.
- Enhanced dropdown interaction stability by using 'mousedown' capture phase and broad event propagation prevention in 'InlineControlFactory'.
- Updated 'build' script to ensure CSS files are correctly synchronized from 'css/' to 'web/'.
- Standardized copy icon and styling, including a subtle checkmark feedback on success.
- Fixed an issue where the Inspector panel would 'bounce' due to hover transforms while in sticky mode.
- Improved dropdown closure logic to handle clicks both outside and within the panel content area.
- Optimized 'persist-active' mode to use viewport-based height limits and proper flex scrolling.
- Enhanced event propagation handling in 'InlineControlFactory' for better dropdown stability.
- Standardized panel font sizes and updated inline dropdowns to match the green theme.
- Added theme-specific CSS overrides for Light and GitHub themes in widget editors.
- Simplified copy-to-clipboard UI feedback.
- Changed accent color to #a0d468 for select inputs.
- Updated background colors, borders, and box-shadows to align with the green-themed info panel.
- Refined the custom dropdown arrow color to match the new accent.
- Standardized font-family and spacing for a more consistent look.
- Added 'InlineControlFactory' to create inline toggle switches and combo boxes for supported widget types, replacing the click-to-edit modal for these types.
- Added 'DragValueController' to enable adjusting numeric values by dragging on the value display.
- Updated 'UIManager' to integrate these new controls, manage their lifecycle, and properly clean them up.
- Enhanced 'WidgetEditorFactory' to handle Enter key for confirming edits.
- Removed the copy button from string values to reduce clutter.
- Updated 'index.ts' to export the new components.
- Removed 'popout' scaling and transform animations from '.focus-node-btn' hover/active states for a more stable, subtle UI feel.
- Reduced box-shadow intensity on focus buttons to align with the flatter design.
- Removed icon scaling on hover for focus buttons.
- Added 'appearance: textfield' to number inputs to standardize rendering across browsers.
- Minor whitespace cleanup in toggle slider CSS.
- Implemented a continuous animation loop in 'MagnifyGlass' that activates automatically when video widgets are detected, ensuring smooth playback for standard videos and VHS previews.
- Added robust validation to 'StateManager' for loading settings, including bounds checking for dimensions/opacity and format verification for colors and enums.
- Updated widget detection logic to correctly identify and handle 'videopreview' and 'audiopreview' widgets.
- Ensured animation loops are properly stopped when the glass is hidden or destroyed to preserve resources.
- Moves `litegraphCanvas.getBoundingClientRect()` call outside the widget loop in `renderHtmlOverlays`.
- Reuses the `dpr` calculated at the top level.
- Adds regression test `tests/unit/MagnifyGlassRenderOptim.test.ts`.
Improves rendering performance by reducing forced reflows during magnification.
Add validation for all InfoPanel settings loaded in StateManager to prevent
injection of invalid values (e.g. out-of-bounds numbers, invalid colors).
This mitigates risks of degraded stability or potential injection via
manipulated settings storage.
- Add validateNumber, validateColor, validateStringOption helpers
- Update StateManager.loadSettings to validate all keys
- Add unit tests for validation logic
- Export form creation helpers for testing
- Add unique ID generation for sliders, selects, and color pickers
- Associate labels with inputs using `htmlFor`
- Add unit tests to verify accessibility attributes
- Pass event object to handleToggle from keydown listener
- Ensure stopPropagation() is called for keyboard events
- Maintain consistency between mouse and keyboard interaction behavior
- Update Require Alt Key toggle sync to include aria-checked attribute
- Update Reset Position button to clear aria-checked on Follow Cursor toggle
- Add regression tests for sidebar interaction state synchronization
- Add `role="switch"` and `aria-checked` to toggle elements
- Add `tabIndex="0"` for keyboard focus
- Add keyboard event listeners for Enter and Space keys
- Add `aria-labelledby` to associate toggles with their labels
- Enable toggling by clicking the label text
- Export `createToggle` for testing
- Add unit tests for accessibility and interaction logic
Reduces layout thrashing by filtering nodes based on their graph position before accessing their DOM widgets. This significantly improves performance on large graphs when using the magnifying glass.
- Calculates visible graph area based on cursor position and zoom.
- Checks intersection of node bounding box with visible area.
- Skips widget processing for off-screen nodes.
- Implement `validateNumber` and `validateColor` in `ConfigManager`.
- Clamp numeric settings (zoom, size, borders) to safe ranges.
- Validate color settings against hex regex.
- Update `ConfigManager` unit tests to cover validation logic.
This enhancement prevents invalid configuration states and potential stability issues caused by malformed or extreme setting values.
AEmotionStudio