150 lines
3.8 KiB
Markdown
150 lines
3.8 KiB
Markdown
# Aislo B07 2D Drawing
|
|
|
|
This directory is maintained as part of the Aislo project and is not connected
|
|
to an upstream Git repository. It provides the independent browser-based 2D
|
|
drawing workspace used only by the B07 page.
|
|
|
|
The drawing engine is based on OpenWebCAD by Bert Verhelst and retains its MIT
|
|
license notice in `LICENSE.md` and `public/THIRD_PARTY_LICENSES.txt`.
|
|
|
|
## Aislo integration boundary
|
|
|
|
- Business drawings enter the iframe only as same-origin JSON messages with
|
|
type `aislo:b07:load-drawing`.
|
|
- Browser-side DXF/DWG parsing is intentionally excluded.
|
|
- DXF, DWG and PDF input/output are separate future modules and require a new
|
|
dependency-license review before implementation.
|
|
|
|
## Original project description
|
|
|
|
This is a React-based canvas drawing application that allows users to draw various shapes, such as lines, rectangles, and circles, on a fullscreen canvas. The application also includes features for selecting and erasing shapes, as well as exporting the drawing as an SVG file.
|
|
|
|
|
|
|
|
## DEMO: [https://bertyhell.github.io/openwebcad](https://bertyhell.github.io/openwebcad)
|
|
|
|
## Features
|
|
|
|
- Fullscreen canvas with a black background
|
|
- Drawing tools: Line, Rectangle, Circle, measurements
|
|
- Zoom and pan
|
|
- Eraser tool to delete segments
|
|
- Undo and redo
|
|
- Choose angle guides
|
|
- Draw with snap points for
|
|
- endpoints
|
|
- midpoints
|
|
- intersections
|
|
- circle centers
|
|
- circle quadrants
|
|
- Selection tool to highlight and modify shapes
|
|
- Use CTRL to toggle selection
|
|
- Use shift to add to the current selection
|
|
- drag left, to select by intersecting
|
|
- drag right, to select by containing
|
|
- Move
|
|
- Rotate
|
|
- Scale
|
|
- Align shapes to each other
|
|
- Array copy linear
|
|
- Array copy radial
|
|
- Import images into the drawing
|
|
- Import SVG files
|
|
- Export to PDF
|
|
- Export drawing as an SVG file
|
|
- Export drawing as an PNG file
|
|
- Save and load drawings from/to json files
|
|
- Select line color and thickness
|
|
- Eraser tool to delete segments
|
|
|
|
|
|
### Possible future feature ideas (TODO) in order of likelihood
|
|
- Eraser tool to delete segments
|
|
- Max distance to delete
|
|
- Layers for drawing shapes in different layers that can be toggled on or off
|
|
- Mirror
|
|
- Offset
|
|
- Add text
|
|
- Ellipses
|
|
- Regular polygons (pentagon, hexagon, etc)
|
|
- Combine lines into a polygon
|
|
- Explode polygons into lines
|
|
- Polygon circumference
|
|
- Polygon area
|
|
- Chamfer, Round corners
|
|
- Draw with snap points for
|
|
- circle tangents
|
|
- nearest point on line
|
|
- prioritize certain snap points over others (eg: midpoint over nearest)
|
|
- Edit existing lines and circles by dragging endpoints/middle points
|
|
- Hatching and fill areas
|
|
- gradient fills
|
|
- Import DXF files
|
|
- Import DWG files
|
|
- Export to DWG
|
|
- Export to DXF
|
|
- Export drawing to ASCII code
|
|
|
|
### Maintenance
|
|
|
|
- replace react with webcomponents (Lit)
|
|
|
|
|
|
## Technologies Used
|
|
|
|
- TypeScript
|
|
- JavaScript
|
|
- React
|
|
- NPM
|
|
- HTML canvas
|
|
- SVG
|
|
- SCSS
|
|
- Tailwind CSS
|
|
|
|
|
|
## Demo
|
|
Visit https://bertyhell.github.io/openwebcad
|
|
|
|
|
|
## Installation
|
|
|
|
1. Clone the repository:
|
|
```sh
|
|
git clone <repository-url>
|
|
cd <repository-directory>
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```sh
|
|
npm install
|
|
```
|
|
|
|
## Usage
|
|
Start the development server:
|
|
```sh
|
|
npm dev
|
|
```
|
|
|
|
Open your browser and navigate to http://localhost:5173
|
|
|
|
|
|
## Development
|
|
Available Scripts
|
|
* npm dev: Runs the app in development mode.
|
|
* npm run build: Builds the app for production.
|
|
* npm preview: Runs the production build in a local server.
|
|
|
|
|
|
## Project Structure
|
|
* src/: Contains the source code of the application.
|
|
* docs/: Contains the github pages site.
|
|
* public/: Contains assets that need to be accessible from the url. Like favicon.
|
|
|
|
|
|
## Contributing
|
|
Contributions are welcome! Please open an issue or submit a pull request for any changes.
|
|
|
|
|
|
## License
|
|
This project is licensed under the MIT License.
|