- Move TransformPane tests from .test.ts to .spec.ts format
- Relocate useWidgetValue tests to tests-ui directory
- Move QuadTree tests to tests-ui/tests/utils/spatial directory
- Add comprehensive tests for new composables:
- useCanvasTransformSync tests
- useTransformSettling tests
- Update test imports and paths
Tests now follow consistent organization patterns and cover the
refactored transform sync functionality.
- Create useCanvasTransformSync for clean RAF-based transform synchronization
- Add useTransformSettling for detecting when transforms have stabilized
- Refactor TransformPane to use extracted composables
- Update GraphCanvas to use new transform sync composable
- Add VueNodeDebugPanel for transform visualization and debugging
- Improve separation of concerns and reusability
This refactoring makes the transform sync logic more maintainable and
testable while preserving all existing functionality.
- Move TYPE_TO_ENUM_MAP outside function to prevent recreation
- Add WIDGET_SUPPORT_MAP for O(1) widget type lookups
- Add ESSENTIAL_WIDGET_TYPES Set for fast LOD filtering
- Refactor NodeWidgets to use single processedWidgets computed property
- Eliminate object creation in render loops
- Pre-resolve Vue components to avoid runtime lookups
These optimizations reduce GC pressure and improve rendering performance
for workflows with many widgets.
- Import useWidgetValue function to fix TypeScript errors
- Maintains comprehensive test coverage for widget value composable
- Ensures all widget value functions are properly tested
Fixes TypeScript errors in test files without affecting functionality.
- Comment out unused viewport culling feature flags
- Remove unused cullingMargin variable
- Clean up imports to eliminate TypeScript lint warnings
These variables were part of experimental culling features that are now handled differently.
- Add wheel event handling with debounced interaction state
- Use capture phase event listeners to intercept before LiteGraph
- Implement proper cleanup with matching capture phase removal
- Add dedicated wheel timeout separate from pointer interactions
- Simplify interaction state management for better responsiveness
Improves GPU optimization timing and prevents interaction state conflicts.
- Create QuadNodeDebugInfo and SpatialIndexDebugInfo interfaces
- Update QuadTree to use typed debug info instead of any
- Provides structured debug information for spatial index performance analysis
- Enables better debugging of viewport culling performance
These types improve type safety for debug functionality without affecting runtime performance.
- Add lg-node--lod-full, lg-node--lod-reduced, lg-node--lod-minimal classes
- Reduced detail level uses smaller fonts and reduced padding
- Minimal detail level hides controls and uses compact header
- Smooth transitions between LOD levels to prevent jarring changes
- User select disabled on nodes to prevent text selection issues
These classes enable progressive detail reduction at different zoom levels for better performance.
- Create WidgetValue union type for all valid widget values
- Replace 'any' types with proper generic constraints in SimplifiedWidget
- Add runtime validation for widget values in useGraphNodeManager
- Update WidgetSelect to use constrained generics instead of any
- Fix type assertions with proper validation functions
- Ensure SafeWidgetData uses WidgetValue type consistently
This eliminates most 'any' usage while maintaining runtime safety through validation.
- Test transform synchronization with mocked canvas interactions
- Verify viewport and debug overlay functionality
- Test interaction state management and pointer event delegation
- Cover error handling for missing canvas properties
- Ensure proper cleanup and event listener management
- Add useTransformState tests covering coordinate conversion, viewport culling
- Add useSpatialIndex tests for QuadTree operations and spatial queries
- Test camera state management and transform synchronization
- Verify spatial indexing performance and correctness
- Cover edge cases and error conditions for robust testing
- Add nodeTestHelpers.ts with mock factories for widgets, nodes, and canvas
- Include mock utilities for VueNodeData, LiteGraph nodes, and canvas contexts
- Provide createBounds helper for spatial testing
- Foundation for comprehensive testing of Vue node system components
- Add nodeManager.cleanup() call in onUnmounted hook
- Set nodeManager to null after cleanup to clear reference
- Improve type safety by removing 'any' types and using proper interfaces
- Fix LGraphCanvas type import and usage
This ensures all event listeners and resources managed by useGraphNodeManager
are properly cleaned up when the GraphCanvas component unmounts, preventing
memory accumulation in long-running sessions.
- Remove recursive requestAnimationFrame loop that was causing memory leaks
- Remove startFPSTracking, stopFPSTracking, and updateFPS functions
- Remove FPS tracking variables and initialization
- Refactor code structure with extracted helper functions for better maintainability
The FPS tracking was only used for debugging and created an infinite RAF loop
that accumulated memory over time in long-running sessions.
Complete Vue node lifecycle management system that safely extracts data from LiteGraph and renders nodes with working widgets in Vue components.
Key features:
- Safe data extraction pattern to avoid Vue proxy issues with LiteGraph private fields
- Event-driven lifecycle management using onNodeAdded/onNodeRemoved hooks
- Widget system integration with functional dropdowns, inputs, and controls
- Performance optimizations including viewport culling and RAF batching
- Transform container pattern for O(1) scaling regardless of node count
- QuadTree spatial indexing for efficient visibility queries
- Debug tools and performance monitoring
- Feature flag system for safe rollout
Architecture:
- LiteGraph remains source of truth for all graph logic and data
- Vue components render nodes positioned over canvas using CSS transforms
- Widget updates flow through LiteGraph callbacks to maintain consistency
- Reactive state separated from node references to prevent proxy overhead
Components:
- useGraphNodeManager: Core lifecycle management with safe data extraction
- TransformPane: Performance-optimized viewport container
- LGraphNode.vue: Vue node component with widget rendering
- Widget system: PrimeVue-based components for all widget types
- Implements efficient O(log n) spatial queries for large node graphs
- Supports dynamic insertion, removal, and updates
- Configurable depth and capacity parameters
- Comprehensive test suite covering performance scenarios
- Benchmark tools for performance validation
- Designed for viewport culling optimization in 100+ node workflows
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Widget callbacks now explicitly set widget.value (fixes empty LiteGraph callbacks)
- Created useWidgetValue composable for consistent widget patterns
- Updated all widget components to use proper props/emit pattern
- Callbacks are set up before data extraction to ensure proper state sync
- Add optional red border overlay showing viewport bounds with 10px inset
- Display viewport dimensions and device pixel ratio in overlay
- Enable via "Show Performance Overlay" checkbox in debug panel
- Helps visualize actual culling boundaries during development
- Chain widget callbacks to trigger immediate Vue state updates
- Remove need for RAF polling of widget values
- Add performance tracking for callback vs RAF updates
- Implement proper FPS tracking with 1-second intervals
This change makes widget updates reactive and immediate rather than
waiting for the next RAF cycle, improving responsiveness.
- Add useFeatureFlags composable for Vue nodes
- Update coreSettings with Vue nodes feature flag
- Minor typing improvements in useTransformState
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Support nodeData prop with VueNodeData interface
- Update emit types to use VueNodeData instead of LGraphNode
- Remove unnecessary imports and debug comments
- Proper color calculations for node headers
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Use SafeWidgetData interface instead of raw LiteGraph widgets
- Proper TypeScript typing without any types
- Use widget registry for component resolution
- Remove unnecessary imports and debug comments
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Map LiteGraph widget types to Vue components
- Support text, combo, number, boolean widget types
- Check if widgets should render as Vue components
- Proper TypeScript interfaces instead of any
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements reactive position tracking, viewport culling, and event-driven
node management for Vue-based node rendering system.
Ready for demo and developer handoff.
- LGraphNode: Main container with transform-based positioning
- NodeHeader: Collapsible title bar with dynamic coloring
- NodeSlots: Input/output connection visualization
- NodeWidgets: Integration with existing widget system
- NodeContent: Extensibility placeholder
- Error boundaries and performance optimizations (v-memo, CSS containment)
