@newtil/drawing 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,255 @@
+type Lang = "ko" | "en";
+interface Messages {
+    title: string;
+    toolSelect: string;
+    toolPen: string;
+    toolHighlighter: string;
+    toolLine: string;
+    toolArrow: string;
+    toolArrow2: string;
+    toolRect: string;
+    toolEllipse: string;
+    toolText: string;
+    toolBadge: string;
+    color: string;
+    customColor: string;
+    strokeWidth: string;
+    fillNone: string;
+    fillTranslucent: string;
+    fillSolid: string;
+    dashed: string;
+    opacity: string;
+    undo: string;
+    redo: string;
+    delete: string;
+    duplicate: string;
+    bringForward: string;
+    sendBackward: string;
+    background: string;
+    clearBackground: string;
+    zoomFit: string;
+    done: string;
+    cancel: string;
+    saving: string;
+    textPrompt: string;
+    pasteHint: string;
+    discardConfirm: string;
+    exportFailed: string;
+    saveFailed: (reason: string) => string;
+}
+declare const ko: Messages;
+declare const en: Messages;
+
+/**
+ * 그림 데이터 — 편집기(@newtil/editor)가 곁파일로 저장하던 DrawingData v1 과 같은 모양이라 기존 곁파일이 그대로 열린다.
+ * 좌표는 항상 "판 크기(width×height)" 기준. 화면 확대/축소는 표시일 뿐이다.
+ */
+type ToolName = "select" | "pen" | "highlighter" | "line" | "arrow" | "arrow2" | "rect" | "ellipse" | "text" | "badge";
+type Fill = "translucent" | "solid";
+interface ShapeBase {
+    id: string;
+    color: string;
+    stroke: number;
+    /** 채우기 — 사각형·타원·배지 */
+    fill?: Fill | null;
+    /** 점선 */
+    dashed?: boolean;
+    /** 전체 투명도 0~1. 없으면 1 */
+    opacity?: number;
+}
+type Shape = (ShapeBase & {
+    type: "rect";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    radius?: number;
+}) | (ShapeBase & {
+    type: "ellipse";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}) | (ShapeBase & {
+    type: "line" | "arrow" | "arrow2";
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}) | (ShapeBase & {
+    type: "pen" | "highlighter";
+    points: number[];
+}) | (ShapeBase & {
+    type: "text";
+    x: number;
+    y: number;
+    text: string;
+    size: number;
+}) | (ShapeBase & {
+    type: "badge";
+    x: number;
+    y: number;
+    n: number;
+    size: number;
+});
+interface Drawing {
+    version: 1;
+    width: number;
+    height: number;
+    /** 배경 캡처 — data URL. 없으면 흰 판 */
+    background: string | null;
+    shapes: Shape[];
+}
+type Box = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+declare function emptyDrawing(width?: number, height?: number): Drawing;
+/** 도형의 바깥 상자 — 선택 표시·손잡이 자리. 글자는 대략(폰트 폭 0.6em 어림) */
+declare function bounds(s: Shape): Box;
+
+/**
+ * 그림판 팝업 — 캡처(배경) 위에 도형을 그리고 PNG + 데이터(재편집용)로 돌려준다.
+ *
+ * 자기 shadow root 안에 뜬다(스타일 격리). 좌표는 판 크기 기준이고 화면은 scale 로만 줄인다.
+ * 선택 도구: 클릭·Shift 클릭·러버밴드로 고르고, 끌어 옮기고, 손잡이(상자 8개 / 선 양 끝)로 고친다. 고른 채로 색·굵기·채우기·점선·투명도를 바꾸면 그 도형들이 바뀐다.
+ * 글자는 판 위에서 바로 친다(textarea 겹침), 두 번 클릭해 다시 고친다.
+ * 완료 = 굽기 + (있으면) 저장 훅까지 팝업 안에서. 실패하면 이유를 알리고 열어 둔다 — 조용히 다른 형태로 넘기지 않는다.
+ */
+interface OpenOptions {
+    /** 다시 고칠 그림. 없으면 빈 판 */
+    initial?: Drawing | null;
+    /** 시작 배경 — 캡처 파일(Blob) 또는 같은 출처 이미지 주소. initial 이 있으면 무시 */
+    background?: Blob | string | null;
+    /** 완료 때 부른다 — 저장하고 문서에 넣을 주소 등을 돌려준다. 던지면 팝업이 열린 채 이유를 보인다 */
+    save?: (png: Blob, data: Drawing) => Promise<string | void>;
+    /** 열 때 잠깐 보일 안내 */
+    notice?: string;
+    lang?: string;
+    messages?: Partial<Messages>;
+    /** 팝업을 붙일 자리. 기본 document.body */
+    mount?: HTMLElement;
+}
+interface OpenResult {
+    data: Drawing;
+    png: Blob; /** save 가 돌려준 값(주소 등) */
+    saved?: string;
+}
+declare class DrawingBoard {
+    private readonly opts;
+    private readonly host;
+    private readonly backdrop;
+    private readonly dialog;
+    private readonly stage;
+    private readonly canvasEl;
+    private readonly bgImg;
+    private readonly svg;
+    private readonly hintEl;
+    private readonly noticeEl;
+    private readonly statusEl;
+    private readonly toolBtns;
+    private readonly colorBtns;
+    private readonly fillBtns;
+    private colorInput;
+    private strokeRange;
+    private strokePreview;
+    private opacityRange;
+    private dashedBtn;
+    private undoBtn;
+    private redoBtn;
+    private deleteBtn;
+    private dupBtn;
+    private fwdBtn;
+    private backBtn;
+    private doneBtn;
+    private textEdit;
+    private data;
+    private tool;
+    private color;
+    private stroke;
+    private fill;
+    private dashed;
+    private opacity;
+    private scale;
+    private selected;
+    private drag;
+    /** 두 번 클릭 판정 — pointerdown 을 preventDefault 하면 브라우저가 click/dblclick 을 안 만들어 직접 잰다 */
+    private lastDown;
+    private past;
+    private future;
+    private dirty;
+    private saving;
+    private readonly m;
+    private done;
+    private readonly onResize;
+    constructor(opts: OpenOptions);
+    open(): Promise<OpenResult | null>;
+    private buildToolbar;
+    /** 툴바가 지금 값(또는 고른 도형의 값)을 비추게 */
+    private reflectStyle;
+    private fit;
+    private applyBackground;
+    private showNotice;
+    private setTool;
+    private selectedShapes;
+    /** 고른 도형들에 스타일을 적용 — 고른 게 없으면 다음 도형의 기본값만 바뀐다 */
+    private applyStyle;
+    private setColor;
+    private setStroke;
+    private setFill;
+    private setDashed;
+    private setOpacity;
+    private select;
+    private commit;
+    private undo;
+    private redo;
+    private deleteSelected;
+    private duplicate;
+    /** 앞으로/뒤로 — 고른 도형들의 그리는 순서를 한 칸 옮긴다 */
+    private reorder;
+    private nudge;
+    private updateButtons;
+    private pickBackground;
+    private setBackground;
+    private onPaste;
+    private toPoint;
+    private shapeAt;
+    private handleAt;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onKeyDown;
+    private startTextEdit;
+    private commitTextEdit;
+    private render;
+    private renderShape;
+    /** 고른 도형의 점선 상자 + 손잡이(하나만 골랐을 때: 상자 8개 / 선 양 끝) */
+    private renderSelection;
+    private cancel;
+    private finish;
+    private close;
+}
+/** 그림판을 연다 — 완료면 데이터·PNG(·저장 결과), 취소면 null */
+declare function openDrawing(opts?: OpenOptions): Promise<OpenResult | null>;
+
+/** 이미지 로드 — data URL 또는 같은 출처 주소. 교차 출처는 캔버스에 못 굽는다(tainted) */
+declare function loadImage(src: string): Promise<HTMLImageElement>;
+declare function blobToDataURL(blob: Blob): Promise<string>;
+/** 그림 전체를 PNG 로 — 배경 + 도형. 배경이 없으면 흰 판 */
+declare function renderToPng(data: Drawing): Promise<Blob>;
+
+/**
+ * @newtil/drawing — 캡처 위에 화살표·상자·글자를 그리는 그림판. 프레임워크 없음, 순수 DOM, 자기 shadow root 에 뜬다.
+ *
+ *   import { openDrawing } from "@newtil/drawing";
+ *   const r = await openDrawing({ background: file });          // 새로 그리기 → { data, png } | null
+ *   const r2 = await openDrawing({ initial: r.data });          // 다시 고치기(도형 살아 있음)
+ *
+ * data(Drawing)는 자기 완결적(배경도 data URL)이라 어디든 저장해 두면 다시 열린다. png 는 독자용 결과물.
+ */
+
+declare const VERSION = "0.1.0";
+
+export { type Drawing, DrawingBoard, type Fill, type Lang, type Messages, type OpenOptions, type OpenResult, type Shape, type ToolName, VERSION, blobToDataURL, bounds, emptyDrawing, loadImage, en as messagesEn, ko as messagesKo, openDrawing, renderToPng };