eomsangdonandClaude Opus 5
b1593bce83
사용자 지시(2026-09-02) — 로고·서명을 임의로 만들어 표제란에 넣고, 위치·크기는
도각을 고치면 따라오게 하며, 시행청·과업책임자 등은 DB를 넓혀 채울 것.
도각(표제란)
- `00_template_A1.json` 에 그림 자리 2개 추가 — 회사 로고는 용역회사 칸 왼쪽
(316~348 × 20~36mm), 설계자 서명은 설계 칸 아래(638~680 × 17.5~25.5mm).
자리·크기가 **템플릿 좌표로만** 정해지므로 도각을 고치면 그대로 따라옴.
- `_fill_placeholders` 가 그림 자리(`imageData`)의 `{{키}}` 도 채움. 값을 못 구하면
빈 문자열을 남기지 않고 **엔티티째 제거** — 빈 값은 CAD 가 깨진 그림으로 그림.
- `_transform_entity` 가 `points` 배열도 옮김. 그림(로고·서명)과 띠(Hatch)가 이 키를
쓰는데 여태 변환 대상이 아니라 도각을 옮기면 제자리에 남았음.
DB (`011_title_block.sql`, 전부 ADD COLUMN·NULL 허용)
- `projects` — `client_org`(시행청), `pm_user_id`·`field_lead_user_id`·`designer_user_id`
- `companies.logo_path` · `users.signature_path` — 그림은 파일로 두고 경로만 담음
(기존 `storage_path`·`input_files` 와 같은 방식)
- FK 는 걸지 않음 — 사유를 파일 머리말에 적음(소프트 삭제·LEFT JOIN·4환경 공유).
배선
- `_title_block_fields` 가 시행청·과업책임자·분야별책임자·설계자(배정 없으면 소유자)와
로고·서명 data URL 까지 실어 보냄.
- `read_stored_asset()` 신설 — `storage/` 기준 상대 경로의 **파일**을 읽음.
`resolve_stored_project_path()` 는 폴더를 만드는 프로젝트 루트용이라 파일에 못 씀.
CAD 결함 1건 (이번 작업에서 드러남)
- `screenCanvas.drawController.drawImage` 가 `(width, height)` 를 좌표처럼 변환해
화면 오프셋과 y 뒤집기가 섞여 들어갔음 — 그림이 제 자리를 벗어나고 비율이 무너짐.
크기는 배율만 곱하고 자리는 세계 중심으로 잡도록 고침(SVG 컨트롤러와 같은 방식).
- 검증 창구 `__aisloCad.screen(x, y)` 추가 — 세계→화면 좌표. 그림·글자가 제 자리에
그려졌는지 픽셀로 판정할 때 씀.
검증: `pytest tmp/tests/ -q` 135 passed / 0 failed(그림 자리 3건 신규),
`npx vitest run` 87 passed / 0 failed, `check-types`·`build` 통과.
화면 실측(5174, wdw): 표준도 API Text 24개 `{{` 잔존 0, Image 2개가 도각 좌표
(316,20)-(348,36)·(638,18)-(680,26)에 실림. 캔버스 픽셀 판정 — 두 자리 모두 배경색
외 픽셀이 그려짐(로고 88px·서명 64px), 로고 파랑(20,70,140)이 슬롯 안에서만 검출.
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.