How sanya-shch/matrix-playground works
Matrix Playground is a browser-based NxM matrix editor: users set dimensions and nearest-value count, then generate and interact with a matrix. The central flow runs from the app shell and controls through Zustand state to matrix operations and the virtualized canvas; cell edits, sum visualizations, nearest highlighting, and row/column changes are distinct behaviors. README-described rendering and performance features are represented where supported by excerpts. Evidence is limited to the README and indexed excerpts; unsampled component details are not inferred.
Main entry points: useMatrixStore.ts Zustand store · Controls.tsx Dimension controls · MatrixCanvas.tsx Virtualized canvas · matrix.ts Matrix engine
Components 9
User interface
- App shell
src/App.tsx - Dimension controls
src/components/Controls.tsx - Virtualized canvas
src/components/MatrixCanvas.tsx - Debug snapshot
src/components/DebugState.tsx
Matrix state
- Zustand store
src/store/useMatrixStore.ts
Matrix logic
- Matrix engine
src/engine/matrix.ts
Shared support
- Matrix types
src/types/matrix.ts - Matrix constants
src/constants/matrix.ts
Other components
- User
Connections 15
- User → Dimension controls: sets dimensions
src/components/Controls.tsx - Dimension controls → Zustand store: updates settings
src/components/Controls.tsx - App shell → Dimension controls: renders
src/App.tsx - App shell → Virtualized canvas: renders
src/App.tsx - App shell → Debug snapshot: renders
src/App.tsx - User → Virtualized canvas: interacts
README.md - Virtualized canvas → Zustand store: reads and updates
src/components/MatrixCanvas.tsx - Virtualized canvas → Matrix engine: uses calculations
src/components/MatrixCanvas.tsx - Zustand store → Matrix engine: invokes operations
src/store/useMatrixStore.ts - Zustand store → Matrix types: uses state types
src/store/useMatrixStore.ts - Matrix engine → Matrix types: uses state type
src/engine/matrix.ts - Matrix engine → Matrix constants: uses value bounds
src/engine/matrix.ts - Zustand store → Matrix constants: uses limits
src/store/useMatrixStore.ts - Dimension controls → Matrix constants: uses dimension bounds
src/components/Controls.tsx - Debug snapshot → Zustand store: reads snapshot state
src/components/DebugState.tsx