- 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.
- 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.
- 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
Implements reactive position tracking, viewport culling, and event-driven
node management for Vue-based node rendering system.
Ready for demo and developer handoff.
