표제란(도각) 값 공급 - `use_title_fields()` 문맥 변수 신설 — 회사 도각 폴더와 같은 방식이라 작도 엔진 6개의 서명을 고치지 않음. `frame_entities` 가 문맥값 위에 호출부 값(도면명)을 얹음. - 라우터가 도면 한 건을 그리기 전에 DB 값을 세움: 공사명·위치(projects), 용역회사(companies), 설계자(users). 못 채운 자리는 빈칸 — 도각 원본의 남의 값이 도면으로 나가지 않음. - 미공급 항목과 사유를 `_title_block_fields` 주석에 명시: 시행청·과업책임자· 분야별책임자는 DB 칸 부재(B02 마이그레이션 대기), 축척·사업량·연도기번은 임의 수치 금지, 설계일자는 채울 시점 정의 미결. CAD 회귀 6건 (87건 중 81 passed → 87 passed) - `window` 부재 5건: `notifyWindow()` 한 곳으로 모으고 `window` 없는 Node 시험에서는 통지를 건너뜀. `triggerReactUpdate` 가 이미 같은 이유로 시험을 건너뛰던 것과 같은 결. - `find-closest-entity`: 목의 호가 90°까지만 돌아 클릭점에서 147px 떨어져 있었음 — 시험 의도(호가 가장 가깝다)대로 3/4바퀴로 되돌림. - 선색 기대값 4건: 앱 기본 선색이 흰 종이 배경에 맞춰 검정으로 바뀐 뒤 상류 기대값 `#fff` 가 남아 있었음 — `getActiveLineColor()` 대조로 교체. - 좌표 NaN: 없어진 `TOOLBAR_WIDTH` 를 시험 보조가 아직 참조 — 입력 컨트롤러가 캔버스 bounding rect 를 쓰도록 바뀐 현행에 맞춤. - 호 각도 비교: 같은 각의 음수·2π 표기 차이라 [0, 2π) 정규화 후 대조. 검증: `npx vitest run` 87 passed / 0 failed, `npm run check-types`·`npm run build` 통과, `pytest tmp/tests/ -q` 131 passed / 0 failed(신규 `test_b07_title_block_fields.py` 4건 포함). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Aislo B08 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 B08 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:b08: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
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
-
Clone the repository:
git clone <repository-url> cd <repository-directory> -
Install dependencies:
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.
