@newtil/drawing캡처 위에 그리는 그림판
화살표·상자·글자·번호 배지를 얹고, PNG(독자용) + JSON(재편집용)으로 돌려받는다. 프레임워크 없음, 순수 DOM, 자기 shadow root.
| 특징 | 설명 |
|---|---|
| 함수 하나 | await openDrawing({ background: file }) — 팝업이 뜨고, 완료하면 { data, png }, 취소하면 null |
| PNG + JSON | PNG 는 문서에 넣을 결과물, JSON(Drawing)은 도형이 살아 있는 원본. initial 로 다시 열면 그대로 고칠 수 있다 |
| 자기 완결 데이터 | 배경 캡처까지 data URL 로 품는다. 어디에 저장해 두든 다른 서버에서도 다시 열린다 |
| 저장 훅 | save(png, data) 를 주면 완료 시 팝업 안에서 호출. 실패하면 이유를 보이고 열린 채 기다린다 |
| 스타일 격리 | 자기 shadow root 에 뜬다. 호스트 CSS 와 섞이지 않고 단축키도 호스트로 새지 않는다 |
| 프레임워크 무관 | 순수 DOM. React·Vue·바닐라 어디서든 같은 함수 |
| 10가지 도구 | 선택·펜·형광펜·직선·화살표·양쪽 화살표·사각형·타원·글자·번호 배지 |
Drawing JSON 스키마, PNG 와의 관계save 계약, 실패 시 동작, 재편집 흐름lang·messages, 메시지 키@newtil/editor 가 그림판을 쓰는 방식| 패키지 | 역할 |
|---|---|
| @newtil/design-tokens | CSS 변수(토큰) — 색·간격·글꼴·모서리·그림자·층. 모든 패키지의 바닥 |
| @newtil/css | 실제 CSS 속성명 기반 유틸리티 클래스 + JIT |
| @newtil/components | n- 접두사 기본 컴포넌트 — prose·table·layout·resize-handle |
| @newtil/materials | Material Design 3 구현 m3- 컴포넌트 |
| @newtil/editor | 마크다운↔HTML 양방향 편집기 웹 컴포넌트(React/Vue 래퍼) |
| @newtil/drawing | 캡처 위에 화살표·상자·글자를 그리는 그림판(PNG+JSON) |