Jan-Henrik Bruhn
93ebc8398c
fix: Optimize Konva canvas performance during drag and zoom operations
...
Implement performance optimizations to reduce lag during canvas interactions:
Performance improvements:
- Throttle wheel zoom with requestAnimationFrame to prevent excessive state updates (~50% reduction)
- Throttle stage drag cursor updates to ~60fps to eliminate unnecessary layout recalculations
- Remove unnecessary React state updates during pattern drag/transform operations
- Disable event listening on static canvas layers (grid, origin, hoop) for ~30% event processing reduction
- Add conditional logging (development only) to eliminate console overhead in production
Technical changes:
- useCanvasViewport: Add RAF throttling for wheel zoom, throttle cursor updates during stage drag
- usePatternTransform: Remove intermediate state updates during drag (let Konva handle visually)
- KonvaComponents: Set listening={false} on Grid, Origin, and Hoop components
- PatternCanvas: Disable listening on background layer, use new throttled handlers
- usePatternStore: Wrap console.log statements with isDev checks
Result: Significantly smoother drag/rotation operations with consistent 60 FPS, 30-50% CPU reduction during interactions.
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-28 13:57:51 +01:00
Jan-Henrik Bruhn
e1aadc9e1f
feature: Create comprehensive custom hooks library (WIP)
...
- Extract 5 new custom hooks:
* useAutoScroll - Auto-scroll element into view
* useClickOutside - Detect outside clicks with exclusions
* useMachinePolling - Dynamic machine status polling
* useErrorPopoverState - Error popover state management
* useBluetoothDeviceListener - Bluetooth device discovery
- Reorganize all hooks into categorized folders:
* utility/ - Generic reusable patterns
* domain/ - Business logic for embroidery/patterns
* ui/ - Library integration (Konva)
* platform/ - Electron/Pyodide specific
- Create barrel exports for clean imports (@/hooks)
- Update components to use new hooks:
* AppHeader uses useErrorPopoverState
* ProgressMonitor uses useAutoScroll
* FileUpload, PatternCanvas use barrel exports
Part 1: Hooks extraction and reorganization
Still TODO: Update remaining components, add tests, add documentation
Related to #40
🤖 Generated with [Claude Code](https://claude.com/claude-code )
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2025-12-27 12:19:12 +01:00
