Interactive 2D Room Planner
Complex Product Engineering · Interactive Editor

Overview
Canvas-based planning application with drag-and-drop room creation, precision transforms, snap-to-grid behavior, undo and redo history, structured layout persistence, and JSON import and export.
Features
- Drag-and-drop room and object placement
- Precise move, rotate, resize, and alignment controls
- Snap-to-grid and geometry-based editing behavior
- Undo and redo support with structured state history
- JSON import and export for reusable room layouts
- Session persistence for restoring in-progress work
Technical highlights
- Interactive canvas rendering and object lifecycle with Fabric.js
- Modular application state and history management with Zustand
- Precision transforms, snapping, and object-normalization logic
- Structured layout data model with import, export, and persistence
- Performance-conscious rendering and state updates
Technologies
- React
- TypeScript
- Fabric.js
- Zustand
- Tailwind CSS