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.
- 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.
- 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.
- Add `isHtml` flag to `Focus Node` button to bypass escaping
- Update `UIManager` to check for `isHtml` flag before formatting/escaping
- Add regression tests for trusted HTML rendering logic
Prevents excessive layout thrashing and calculations by syncing
updates to the browser's refresh rate.
- Wraps update logic in `EventHandler.ts` with `requestAnimationFrame`.
- Updates `lastKnownMousePosition` synchronously to ensure accuracy.
- Reduces CPU usage during rapid mouse movement.
- Properly cancels animation frame on cleanup.
- Updated `UIManager.createPanel` to call `updateMinimizedState()` if the panel is initialized in a minimized state.
- This ensures the `aria-expanded` attribute on the minimize button correctly reflects the initial state (false) instead of defaulting to true.
- Add `escapeHtml` utility to `src/shared/utils.ts`
- Sanitize rendered values in `src/info-panel/ValueFormatter.ts`
- Sanitize node titles, types, and labels in `src/info-panel/UIManager.ts`
- Add unit tests verifying XSS prevention in `tests/unit/Security.test.ts`
Prevents excessive layout thrashing and calculations by syncing
updates to the browser's refresh rate.
- Wraps update logic in `EventHandler.ts` with `requestAnimationFrame`.
- Updates `lastKnownMousePosition` synchronously to ensure accuracy.
- Reduces CPU usage during rapid mouse movement.
AEmotionStudio