eomsangdonandClaude Opus 5
e599884888
조사표 8~13절 검토에서 "기본 기능"으로 고른 것을 반영한다. - 좌표 입력: 절대·상대 좌표가 양수만 받아 `@-100,50`을 거부했다. 부호를 허용하고 극좌표 `@거리<각도`·`거리<각도`를 더했다. `-`·`+`가 확대·축소 단축키로 먼저 잡혀 음수의 첫 글자를 먹고 있어 그 두 단축키를 뺐다(줌은 휠·뷰 막대·명령). - 그립 편집: 선택 객체에 그립을 그리고 집어서 옮긴다. 선 끝점·중점, 폴리선 정점, 사각형 모서리, 원 중심·반지름, 문자·점 기준점. 폴리선은 세그먼트 중점을 끌면 정점이 늘고 정점 위 Ctrl+클릭이면 준다. 형상 필드가 private이라 공개 생성자로 다시 만들어 바꿔 끼우고 id·도면층·색·그룹을 물려받는다. - 자동 백업·복구: 5초 디바운스로 복구 전용 키에 저장하고, 시작할 때 백업이 있으면 눌러서 되살리는 안내를 띄운다. 저장(QSAVE)에 성공하면 백업을 지운다. - 선택 순환: 같은 자리를 다시 클릭하면 겹친 후보를 차례로 돌린다. - 상태막대: `극좌표 추적` 버튼이 `직교`와 같은 onClick이라 같은 일을 하고 있었다. 각각 45°·90°를 켜고 끄도록 고치고, 스냅 추적 토글과 F3·F7·F8·F10을 붙였다. - 문자 굵게·기울임을 캔버스·SVG·JSON·스타일 패널에 연결했다. - 조사표: 이미 되어 있던 5건의 표기를 정정하고, 출력·내보내기(9절)는 결재창 이후 PDF·DXF·DWG로 반영할 것이라 보류(P)로 구분해 사유를 남겼다. 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.