Project Structure
The codebase follows a modular architecture with clear separation of concerns:Component Architecture
The main application layout is defined inApp.tsx:47-85, which orchestrates the view hierarchy:
1
Toolbar
Top navigation bar providing view mode controls (2D, 3D, split), camera presets, and export buttons
2
Sidebar
Left panel containing bin presets, active bin list, bill of materials, and utility tools (auto-fill, optimize, print labels)
3
Canvas Area
Dynamic split view that can show:
- 2D Mode: Interactive SVG grid (
GridCanvas2D) - 3D Mode: Three.js viewport (
Viewport3D) - Split Mode: Both views side-by-side with draggable divider
App.tsx:15-44) that allows users to adjust the viewport ratio by dragging the divider.
State Management with Zustand
Gridfinity Builder uses Zustand for centralized state management. The store (store/useStore.ts) manages:
- Bin Collection: Array of bin configurations with unique IDs
- Grid Settings: Baseplate dimensions, printer presets
- View State: Active view mode, selected bin, camera settings
- History: Undo/redo stack for user actions
App.tsx:9
Data Flow
The application follows a unidirectional data flow:- User Input → Component event handlers
- State Update → Zustand store mutation
- Reactive Listeners → Components observe state changes
- Side Effects → Geometry regeneration triggered via Web Worker
- View Update → 2D/3D viewports reflect new state
Technology Stack
Performance Characteristics
- Client-Side Only: All computation runs in the browser, no server required
- Offline-First: PWA architecture with Service Worker caching
- Non-Blocking: Heavy CSG operations run in Web Worker threads
- Cached Geometry: Mesh results cached by configuration hash to avoid redundant computation
- Transferable Objects: Mesh buffers transferred between worker and main thread with zero-copy semantics
