A JavaScript library for creating interactive 2D floor plans. This library allows users to design floor plans by adding and manipulating walls, doors, windows, and other elements.
- Add and manipulate walls, doors, and windows.
- Draw walls by clicking, dragging, and releasing on the canvas.
- Seamlessly connect walls at angles.
- Undo and redo actions.
- Zoom in and out of the canvas.
- Display dimensions and rotation of walls in a properties panel.
To get started with the Floor Plan Designer library, follow these instructions.
- Node.js and npm (or Yarn) installed on your system.
-
Clone the repository:
git clone https://github.com/rsquareGT/OT-Design-Tool.git
-
Navigate to the project directory:
cd floor-plan-designer
-
Install the dependencies:
npm install # or yarn install
-
Build the project:
npm run build # or yarn build
-
Start the development server:
npm start # or yarn start
-
Open your browser and go to
http://localhost:8080
to view the application.
- Click on the "Draw Wall" button in the sidebar.
- Click and drag on the canvas to draw a wall.
- Release the mouse button to finalize the wall.
- Click on a wall to select it.
- The properties panel will display the dimensions and rotation of the selected wall.
- You can adjust the length and rotation of the wall using the inputs in the properties panel.
- Use the "Undo" and "Redo" buttons to revert or reapply changes.
- Use the "Zoom In" and "Zoom Out" buttons to adjust the zoom level.
- Click "Reset Zoom" to return to the default zoom level.
- Select a wall and click the "Delete Selected" button to remove it.
Contributions are welcome! Please submit issues and pull requests to the repository.
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature
). - Make your changes and commit (
git commit -am 'Add new feature'
). - Push to the branch (
git push origin feature/your-feature
). - Create a new Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Fabric.js for the canvas manipulation.
- [Your Other Acknowledgements]
For any issues or questions, please contact [Your Contact Information].