jan-henrik/respira

257 commits 46 branches 16 tags 3.7 MiB

Author	SHA1	Message	Date
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	381d8e672d	fix: Optimize stitch rendering performance for large patterns Separate static stitch grouping (by color/type) from dynamic completion status to prevent recalculating all groups on every progress update during active sewing. This dramatically reduces computational overhead during 500ms polling intervals. Key optimizations: - Static groups memo: Only recalculates when stitches/colors change - Dynamic completion: Only checks group boundaries, not full rebuild - Custom React.memo comparison: Prevents unnecessary re-renders - Added comments for future optimization paths (virtualization, LOD, Web Workers) Performance improvement: O(n) every 500ms -> O(g) where g = number of groups (typically << n for patterns with multiple colors) Fixes #32 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2025-12-26 22:57:40 +01:00
Jan-Henrik Bruhn	a97439da7b	fix: Refactor KonvaComponents and remove unused rotation code Moved KonvaComponents.tsx into PatternCanvas subfolder for better organization and removed the unused RotationHandle component (143 lines) that was replaced by Konva's native Transformer. Updated import paths accordingly. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2025-12-25 21:37:34 +01:00

Author

SHA1

Message

Date

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

381d8e672d

fix: Optimize stitch rendering performance for large patterns

Separate static stitch grouping (by color/type) from dynamic completion
status to prevent recalculating all groups on every progress update during
active sewing. This dramatically reduces computational overhead during
500ms polling intervals.

Key optimizations:
- Static groups memo: Only recalculates when stitches/colors change
- Dynamic completion: Only checks group boundaries, not full rebuild
- Custom React.memo comparison: Prevents unnecessary re-renders
- Added comments for future optimization paths (virtualization, LOD, Web Workers)

Performance improvement: O(n) every 500ms -> O(g) where g = number of groups
(typically << n for patterns with multiple colors)

Fixes #32

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

2025-12-26 22:57:40 +01:00

Jan-Henrik Bruhn

a97439da7b

fix: Refactor KonvaComponents and remove unused rotation code

Moved KonvaComponents.tsx into PatternCanvas subfolder for better organization and removed the unused RotationHandle component (143 lines) that was replaced by Konva's native Transformer. Updated import paths accordingly.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

2025-12-25 21:37:34 +01:00

Renamed from src/components/KonvaComponents.tsx (Browse further)

3 commits