Files
Aislo/B07_DesignDetail/openwebcad
eomsangdonandClaude Opus 5.5 b384fa0660 feat(CAD): 337-3b 나-2 구성선 · 글자 · 해치 — XLINE · TEXT · MTEXT · HATCH 오토캐드 물음 차례
- XLINE 「점 지정 또는 [수평(H)/수직(V)/각도(A)]:」 → 「통과점을 지정:」 되풀이 · 각도 기억(XLINE.ANGLE) · 이등분 · 간격띄우기 = 없는 옵션 안내 · 빈 Enter · Esc = 끝(그은 선 남음)
- RAY 통과점 되풀이(loopFrom)
- TEXT 시작점 → 높이 <TEXTSIZE> → 회전 각 <TEXT.ANGLE> → 줄마다 「문자 입력:」(Enter = 아래 새 줄 · 빈 줄 = 끝) · 시작점 Enter = 마지막 글 아래 이어 씀(높이 · 각 안 물음)
- MTEXT 첫 구석 → 「반대 구석 지정 또는 [높이(H)/폭(W)]:」 → 글(\P 줄바꿈) · 상자 왼쪽 위에서 · 줄 감기 없음
- HATCH 「내부 점 선택 또는 [객체 선택(S)/명령 취소(U)]:」 되풀이 · 품은 닫힌 객체 중 가장 작은 경계 · 빈 Enter = 만듦 · Esc = 안 만듦 · 손 머신(엔진은 직교가 둘째 내부 점을 끌어감)
- 시험 resources/tester/cad/text-acad.test.ts 12

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XWh5wNNycMkbwMpACz1rte
2026-10-16 00:10:42 +09:00
..

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.gif

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

  1. Clone the repository:

    git clone <repository-url>
    cd <repository-directory>
    
  2. 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.