drawui-core 0.3.6 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +528 -486
  3. package/dist/index.cjs +30 -24
  4. package/dist/index.d.cts +689 -28
  5. package/dist/index.d.ts +689 -28
  6. package/dist/index.js +30 -24
  7. package/package.json +2 -2
package/README.md CHANGED
@@ -1,486 +1,528 @@
1
- # drawui-core
2
-
3
- **简体中文** ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
4
-
5
- 框架无关的核心画布绘图引擎（原生 TypeScript，无 UI 框架依赖）。
6
-
7
- 配套 React 封装见 [drawui-react](https://www.npmjs.com/package/drawui-react)。
8
-
9
- ## 安装
10
-
11
- ```bash
12
- npm install drawui-core
13
- ```
14
-
15
- ## 用法
16
-
17
- ```ts
18
- import { Editor } from 'drawui-core'
19
-
20
- const canvas = document.getElementById('board') as HTMLCanvasElement
21
- const editor = new Editor(canvas, { language: 'zh-CN' })
22
-
23
- editor.subscribe(() => console.log('changed'))
24
- editor.setShapes([
25
- {
26
- id: 'r1',
27
- type: 'rectangle',
28
- x: 80, y: 80, width: 160, height: 90, rotation: 0,
29
- text: 'Hello',
30
- style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
31
- },
32
- ])
33
- ```
34
-
35
- ## 主要导出
36
-
37
- - `Editor`（`new Editor(canvas, options?)`）、`EditorOptions`、`UiEvent`
38
- - 工具类：`SelectTool`、`HandTool`、`ShapeTool`、`LineTool`、`FreehandTool`、`ArrowTool`
39
- - 几何：`Vec`、`Mat2d`、`Camera`、`Renderer`
40
- - 主题：`THEME`、`getTheme`、`setTheme`、`subscribeTheme`、`hexToRgba`、`shadeColor`
41
- - 国际化：`LANGUAGES`、`setLanguage`、`getLanguage`、`subscribeLanguage`、`t`
42
- - 思维导图：`layoutMindMap`、`mindMapNodeColor`、`mindMapNodeSize` 等
43
- - 类型：`Shape`、`ShapeType`、`EditorData`、`ToolType`、`MindMapNode` 等
44
-
45
- ## 构造选项
46
-
47
- ```ts
48
- interface EditorOptions {
49
- theme?: Partial<DrawuiTheme>
50
- language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
51
- shapes?: Shape[]
52
- persist?: boolean // 是否写入 localStorage，默认 true（提供 shapes 时自动关闭）
53
- }
54
- ```
55
-
56
- > 可用语言清单也可直接从 `LANGUAGES` 读取（含各语言的本族语名称），便于自行渲染语言切换 UI。
57
-
58
- ## 使用 drawui 的项目
59
-
60
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基于 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文本 / 文档编辑器，已接入 drawui 画板：可在文档中直接插入并编辑画板，用于绘制图示、UML 类图、思维导图等，并随文档一起导出 / 下载。
61
-
62
- ## 更新日志
63
-
64
- ### v0.3.6
65
-
66
- - 🌏 国际化新增 5 种语言：`zh-TW`、`ja-JP`、`ko-KR`、`de-DE`、`fr-FR`（连同简体中文 / English 共 7 种）；界面文案（工具栏、状态栏、样式面板、生成菜单、小地图、思维导图）已全部翻译。
67
- - 📦 新增导出 `LANGUAGES`：`{ code, label }[]`，含各语言的本族语名称，便于宿主直接渲染语言切换 UI。
68
- - ℹ️ 语言字典改为 `Record<MessageKey, string>` 强约束，任一语言漏翻 key 会在编译期直接报错。
69
-
70
- > 更早版本的完整记录见仓库根目录 README。
71
-
72
- ## License
73
-
74
- MIT
75
-
76
- ---
77
-
78
- # 繁體中文
79
-
80
- [简体中文](#drawui-core) ｜ **繁體中文** ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
81
-
82
- 框架無關的核心畫布繪圖引擎（原生 TypeScript，無 UI 框架相依）。
83
-
84
- React 封裝請見 [drawui-react](https://www.npmjs.com/package/drawui-react)。
85
-
86
- ## 安裝
87
-
88
- ```bash
89
- npm install drawui-core
90
- ```
91
-
92
- ## 用法
93
-
94
- ```ts
95
- import { Editor } from 'drawui-core'
96
-
97
- const canvas = document.getElementById('board') as HTMLCanvasElement
98
- const editor = new Editor(canvas, { language: 'zh-TW' })
99
-
100
- editor.subscribe(() => console.log('changed'))
101
- editor.setShapes([
102
- {
103
- id: 'r1',
104
- type: 'rectangle',
105
- x: 80, y: 80, width: 160, height: 90, rotation: 0,
106
- text: 'Hello',
107
- style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
108
- },
109
- ])
110
- ```
111
-
112
- ## 主要匯出
113
-
114
- - `Editor`（`new Editor(canvas, options?)`）、`EditorOptions`、`UiEvent`
115
- - 工具類別：`SelectTool`、`HandTool`、`ShapeTool`、`LineTool`、`FreehandTool`、`ArrowTool`
116
- - 幾何：`Vec`、`Mat2d`、`Camera`、`Renderer`
117
- - 主題：`THEME`、`getTheme`、`setTheme`、`subscribeTheme`、`hexToRgba`、`shadeColor`
118
- - 國際化：`LANGUAGES`、`setLanguage`、`getLanguage`、`subscribeLanguage`、`t`
119
- - 心智圖：`layoutMindMap`、`mindMapNodeColor`、`mindMapNodeSize` 等
120
- - 型別：`Shape`、`ShapeType`、`EditorData`、`ToolType`、`MindMapNode` 等
121
-
122
- ## 建構選項
123
-
124
- ```ts
125
- interface EditorOptions {
126
- theme?: Partial<DrawuiTheme>
127
- language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
128
- shapes?: Shape[]
129
- persist?: boolean // 是否寫入 localStorage，預設 true（提供 shapes 時自動關閉）
130
- }
131
- ```
132
-
133
- > 可用語言清單也可直接從 `LANGUAGES` 讀取（含各語言的原生名稱），方便自行渲染語言切換 UI。
134
-
135
- ## 使用 drawui 的專案
136
-
137
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基於 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文字／文件編輯器，已整合 drawui 畫板：可在文件中直接插入並編輯畫板，用於繪製圖示、UML 類別圖、心智圖等，並隨文件一起匯出／下載。
138
-
139
- ## License
140
-
141
- MIT
142
-
143
- ---
144
-
145
- # English
146
-
147
- [简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ **English** ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
148
-
149
- Framework-agnostic core canvas drawing engine (vanilla TypeScript, no UI-framework dependency).
150
-
151
- React wrapper: [drawui-react](https://www.npmjs.com/package/drawui-react).
152
-
153
- ## Install
154
-
155
- ```bash
156
- npm install drawui-core
157
- ```
158
-
159
- ## Usage
160
-
161
- ```ts
162
- import { Editor } from 'drawui-core'
163
-
164
- const canvas = document.getElementById('board') as HTMLCanvasElement
165
- const editor = new Editor(canvas, { language: 'en-US' })
166
-
167
- editor.subscribe(() => console.log('changed'))
168
- editor.setShapes([
169
- {
170
- id: 'r1',
171
- type: 'rectangle',
172
- x: 80, y: 80, width: 160, height: 90, rotation: 0,
173
- text: 'Hello',
174
- style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
175
- },
176
- ])
177
- ```
178
-
179
- ## Main exports
180
-
181
- - `Editor` (`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
182
- - Tools: `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
183
- - Geometry: `Vec`, `Mat2d`, `Camera`, `Renderer`
184
- - Theme: `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
185
- - i18n: `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
186
- - Mind map: `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize`, …
187
- - Types: `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode`, …
188
-
189
- ## EditorOptions
190
-
191
- ```ts
192
- interface EditorOptions {
193
- theme?: Partial<DrawuiTheme>
194
- language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
195
- shapes?: Shape[]
196
- persist?: boolean // persist to localStorage; defaults to true (auto-off when `shapes` is given)
197
- }
198
- ```
199
-
200
- > The list of available languages is also exported as `LANGUAGES` (with each language's native name), handy for rendering your own language switcher.
201
-
202
- ## Projects using drawui
203
-
204
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — a rich-text / document editor built on [Slate.js](https://github.com/ianstormtaylor/slate). It embeds drawui boards: insert and edit a board right inside a document to draw diagrams, UML class diagrams and mind maps, and export / download them along with the document.
205
-
206
- ## Changelog
207
-
208
- ### v0.3.6
209
-
210
- - 🌏 Added 5 languages: `zh-TW`, `ja-JP`, `ko-KR`, `de-DE`, `fr-FR` (7 in total together with Simplified Chinese and English). All UI strings — toolbar, status bar, style panel, create-shape menu, minimap, mind map — are translated.
211
- - 📦 New export `LANGUAGES`: `{ code, label }[]` with each language's native name, handy for rendering your own language switcher.
212
- - ℹ️ Dictionaries are now typed as `Record<MessageKey, string>`, so a missing key in any language fails at compile time.
213
-
214
- > The full history lives in the repository root README.
215
-
216
- ## License
217
-
218
- MIT
219
-
220
- ---
221
-
222
- # 日本語
223
-
224
- [简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ **日本語** ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
225
-
226
- フレームワーク非依存のコア描画エンジン（ピュア TypeScript、UI フレームワークへの依存なし）。
227
-
228
- React ラッパーは [drawui-react](https://www.npmjs.com/package/drawui-react) をご覧ください。
229
-
230
- ## インストール
231
-
232
- ```bash
233
- npm install drawui-core
234
- ```
235
-
236
- ## 使い方
237
-
238
- ```ts
239
- import { Editor } from 'drawui-core'
240
-
241
- const canvas = document.getElementById('board') as HTMLCanvasElement
242
- const editor = new Editor(canvas, { language: 'ja-JP' })
243
-
244
- editor.subscribe(() => console.log('changed'))
245
- editor.setShapes([
246
- {
247
- id: 'r1',
248
- type: 'rectangle',
249
- x: 80, y: 80, width: 160, height: 90, rotation: 0,
250
- text: 'Hello',
251
- style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
252
- },
253
- ])
254
- ```
255
-
256
- ## 主なエクスポート
257
-
258
- - `Editor`（`new Editor(canvas, options?)`）、`EditorOptions`、`UiEvent`
259
- - ツール：`SelectTool`、`HandTool`、`ShapeTool`、`LineTool`、`FreehandTool`、`ArrowTool`
260
- - 幾何：`Vec`、`Mat2d`、`Camera`、`Renderer`
261
- - テーマ：`THEME`、`getTheme`、`setTheme`、`subscribeTheme`、`hexToRgba`、`shadeColor`
262
- - 国際化：`LANGUAGES`、`setLanguage`、`getLanguage`、`subscribeLanguage`、`t`
263
- - マインドマップ：`layoutMindMap`、`mindMapNodeColor`、`mindMapNodeSize` など
264
- - 型：`Shape`、`ShapeType`、`EditorData`、`ToolType`、`MindMapNode` など
265
-
266
- ## コンストラクタオプション
267
-
268
- ```ts
269
- interface EditorOptions {
270
- theme?: Partial<DrawuiTheme>
271
- language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
272
- shapes?: Shape[]
273
- persist?: boolean // localStorage に保存するか。既定は true（shapes を渡すと自動でオフ）
274
- }
275
- ```
276
-
277
- > 利用可能な言語の一覧は `LANGUAGES` としてもエクスポートされています（各言語のネイティブ表記つき）。独自の言語切り替え UI の実装に便利です。
278
-
279
- ## drawui を利用しているプロジェクト
280
-
281
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) ベースのリッチテキスト／ドキュメントエディタ。drawui のボードを組み込んでおり、ドキュメント内でボードを挿入・編集して図、UML クラス図、マインドマップなどを描画し、ドキュメントと一緒にエクスポート／ダウンロードできます。
282
-
283
- ## ライセンス
284
-
285
- MIT
286
-
287
- ---
288
-
289
- # 한국어
290
-
291
- [简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ **한국어** ｜ [Deutsch](#deutsch) ｜ [Français](#français)
292
-
293
- 프레임워크에 종속되지 않는 코어 캔버스 드로잉 엔진(순수 TypeScript, UI 프레임워크 의존성 없음).
294
-
295
- React 래퍼는 [drawui-react](https://www.npmjs.com/package/drawui-react)를 참고하세요.
296
-
297
- ## 설치
298
-
299
- ```bash
300
- npm install drawui-core
301
- ```
302
-
303
- ## 사용법
304
-
305
- ```ts
306
- import { Editor } from 'drawui-core'
307
-
308
- const canvas = document.getElementById('board') as HTMLCanvasElement
309
- const editor = new Editor(canvas, { language: 'ko-KR' })
310
-
311
- editor.subscribe(() => console.log('changed'))
312
- editor.setShapes([
313
- {
314
- id: 'r1',
315
- type: 'rectangle',
316
- x: 80, y: 80, width: 160, height: 90, rotation: 0,
317
- text: 'Hello',
318
- style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
319
- },
320
- ])
321
- ```
322
-
323
- ## 주요 내보내기
324
-
325
- - `Editor`(`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
326
- - 도구: `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
327
- - 기하: `Vec`, `Mat2d`, `Camera`, `Renderer`
328
- - 테마: `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
329
- - 국제화: `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
330
- - 마인드맵: `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize` 등
331
- - 타입: `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode` 등
332
-
333
- ## 생성자 옵션
334
-
335
- ```ts
336
- interface EditorOptions {
337
- theme?: Partial<DrawuiTheme>
338
- language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
339
- shapes?: Shape[]
340
- persist?: boolean // localStorage에 저장할지 여부. 기본값 true (shapes를 넘기면 자동으로 꺼짐)
341
- }
342
- ```
343
-
344
- > 사용 가능한 언어 목록은 `LANGUAGES`로도 내보내집니다(각 언어의 원어 표기 포함). 직접 언어 전환 UI를 만들 때 편리합니다.
345
-
346
- ## drawui를 사용하는 프로젝트
347
-
348
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) 기반의 리치 텍스트·문서 편집기. drawui 보드를 내장하여 문서 안에서 보드를 삽입·편집해 다이어그램, UML 클래스 다이어그램, 마인드맵 등을 그리고 문서와 함께 내보내기·다운로드할 수 있습니다.
349
-
350
- ## 라이선스
351
-
352
- MIT
353
-
354
- ---
355
-
356
- # Deutsch
357
-
358
- [简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ **Deutsch** ｜ [Français](#français)
359
-
360
- Framework-unabhängige Canvas-Zeichenbibliothek (reines TypeScript, keine Abhängigkeit von einem UI-Framework).
361
-
362
- React-Wrapper: [drawui-react](https://www.npmjs.com/package/drawui-react).
363
-
364
- ## Installation
365
-
366
- ```bash
367
- npm install drawui-core
368
- ```
369
-
370
- ## Verwendung
371
-
372
- ```ts
373
- import { Editor } from 'drawui-core'
374
-
375
- const canvas = document.getElementById('board') as HTMLCanvasElement
376
- const editor = new Editor(canvas, { language: 'de-DE' })
377
-
378
- editor.subscribe(() => console.log('changed'))
379
- editor.setShapes([
380
- {
381
- id: 'r1',
382
- type: 'rectangle',
383
- x: 80, y: 80, width: 160, height: 90, rotation: 0,
384
- text: 'Hello',
385
- style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
386
- },
387
- ])
388
- ```
389
-
390
- ## Wichtigste Exporte
391
-
392
- - `Editor` (`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
393
- - Werkzeuge: `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
394
- - Geometrie: `Vec`, `Mat2d`, `Camera`, `Renderer`
395
- - Theme: `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
396
- - i18n: `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
397
- - Mindmap: `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize`, …
398
- - Typen: `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode`, …
399
-
400
- ## EditorOptions
401
-
402
- ```ts
403
- interface EditorOptions {
404
- theme?: Partial<DrawuiTheme>
405
- language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
406
- shapes?: Shape[]
407
- persist?: boolean // in localStorage speichern; Standard true (automatisch aus, wenn `shapes` gesetzt ist)
408
- }
409
- ```
410
-
411
- > Die Liste der verfügbaren Sprachen wird ebenfalls als `LANGUAGES` exportiert (mit der jeweiligen Eigenbezeichnung) – praktisch für einen eigenen Sprachumschalter.
412
-
413
- ## Projekte, die drawui verwenden
414
-
415
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — ein Rich-Text-/Dokumenteneditor auf Basis von [Slate.js](https://github.com/ianstormtaylor/slate). Er bindet drawui-Boards ein: Boards direkt im Dokument einfügen und bearbeiten, um Diagramme, UML-Klassendiagramme und Mindmaps zu zeichnen und zusammen mit dem Dokument zu exportieren / herunterzuladen.
416
-
417
- ## Lizenz
418
-
419
- MIT
420
-
421
- ---
422
-
423
- # Français
424
-
425
- [简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ **Français**
426
-
427
- Moteur de dessin sur canvas indépendant du framework (TypeScript pur, sans dépendance à un framework UI).
428
-
429
- Wrapper React : [drawui-react](https://www.npmjs.com/package/drawui-react).
430
-
431
- ## Installation
432
-
433
- ```bash
434
- npm install drawui-core
435
- ```
436
-
437
- ## Utilisation
438
-
439
- ```ts
440
- import { Editor } from 'drawui-core'
441
-
442
- const canvas = document.getElementById('board') as HTMLCanvasElement
443
- const editor = new Editor(canvas, { language: 'fr-FR' })
444
-
445
- editor.subscribe(() => console.log('changed'))
446
- editor.setShapes([
447
- {
448
- id: 'r1',
449
- type: 'rectangle',
450
- x: 80, y: 80, width: 160, height: 90, rotation: 0,
451
- text: 'Hello',
452
- style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
453
- },
454
- ])
455
- ```
456
-
457
- ## Principaux exports
458
-
459
- - `Editor` (`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
460
- - Outils : `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
461
- - Géométrie : `Vec`, `Mat2d`, `Camera`, `Renderer`
462
- - Thème : `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
463
- - i18n : `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
464
- - Carte mentale : `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize`, …
465
- - Types : `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode`, …
466
-
467
- ## Options de l'éditeur
468
-
469
- ```ts
470
- interface EditorOptions {
471
- theme?: Partial<DrawuiTheme>
472
- language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
473
- shapes?: Shape[]
474
- persist?: boolean // écrire dans localStorage ; par défaut true (désactivé si `shapes` est fourni)
475
- }
476
- ```
477
-
478
- > La liste des langues disponibles est également exportée sous `LANGUAGES` (avec le nom natif de chaque langue), pratique pour construire votre propre sélecteur de langue.
479
-
480
- ## Projets utilisant drawui
481
-
482
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — un éditeur de texte enrichi / de documents basé sur [Slate.js](https://github.com/ianstormtaylor/slate). Il intègre les tableaux drawui : insérez et modifiez un tableau directement dans le document pour dessiner des schémas, des diagrammes de classes UML et des cartes mentales, puis exportez / téléchargez le tout avec le document.
483
-
484
- ## Licence
485
-
486
- MIT
1
+ # drawui-core
2
+
3
+ **简体中文** ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
4
+
5
+ 框架无关的核心画布绘图引擎（原生 TypeScript，无 UI 框架依赖）。
6
+
7
+ 配套 React 封装见 [drawui-react](https://www.npmjs.com/package/drawui-react)。
8
+
9
+ ## 安装
10
+
11
+ ```bash
12
+ npm install drawui-core
13
+ ```
14
+
15
+ ## 用法
16
+
17
+ ```ts
18
+ import { Editor } from 'drawui-core'
19
+
20
+ const canvas = document.getElementById('board') as HTMLCanvasElement
21
+ const editor = new Editor(canvas, { language: 'zh-CN' })
22
+
23
+ editor.subscribe(() => console.log('changed'))
24
+ editor.setShapes([
25
+ {
26
+ id: 'r1',
27
+ type: 'rectangle',
28
+ x: 80, y: 80, width: 160, height: 90, rotation: 0,
29
+ text: 'Hello',
30
+ style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
31
+ },
32
+ ])
33
+ ```
34
+
35
+ ## 主要导出
36
+
37
+ - `Editor`（`new Editor(canvas, options?)`）、`EditorOptions`、`UiEvent`
38
+ - 工具类：`SelectTool`、`HandTool`、`ShapeTool`、`LineTool`、`FreehandTool`、`ArrowTool`
39
+ - 几何：`Vec`、`Mat2d`、`Camera`、`Renderer`
40
+ - 主题：`THEME`、`getTheme`、`setTheme`、`subscribeTheme`、`hexToRgba`、`shadeColor`
41
+ - 国际化：`LANGUAGES`、`setLanguage`、`getLanguage`、`subscribeLanguage`、`t`
42
+ - 思维导图：`layoutMindMap`、`mindMapNodeColor`、`mindMapNodeSize` 等
43
+ - 类型：`Shape`、`ShapeType`、`EditorData`、`ToolType`、`MindMapNode` 等
44
+
45
+ ## 构造选项
46
+
47
+ ```ts
48
+ interface EditorOptions {
49
+ theme?: Partial<DrawuiTheme>
50
+ language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
51
+ shapes?: Shape[]
52
+ persist?: boolean // 是否写入 localStorage，默认 true（提供 shapes 时自动关闭）
53
+ }
54
+ ```
55
+
56
+ > 可用语言清单也可直接从 `LANGUAGES` 读取（含各语言的本族语名称），便于自行渲染语言切换 UI。
57
+
58
+ ## 使用 drawui 的项目
59
+
60
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基于 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文本 / 文档编辑器，已接入 drawui 画板：可在文档中直接插入并编辑画板，用于绘制图示、UML 类图、思维导图等，并随文档一起导出 / 下载。
61
+
62
+ ## 更新日志
63
+
64
+ ### v0.4.1
65
+
66
+ - 📊 **新增图形「表格」（`table`）**：工具栏独立按钮 + 8×6 选择器一键插入，双击单元格就地编辑。
67
+ - **飞书式交互**：表格内拖拽 = 框选单元格（拖到表格外自动扩成整行 / 整列），只有左上角六点把手能移动整张表；选区浅蓝高亮，点合并块内任意一格即选中整块。
68
+ - **合并 / 拆分**：选区永远吸附完整合并块（不会再出现「选左边却合并右边」），合并**保留全部单元格内容**（按行优先拼接），拆分一次拆掉选区内所有合并区。
69
+ - **插入 / 删除行列可指定位置**：`insertTableRowRelative` / `insertTableColumnRelative`（`above` / `below` / `left` / `right`）、`deleteTableRowsInSelection` / `deleteTableColsInSelection`；插入的行列继承邻居的样式（底色 / 加粗 / 字号 / 对齐 / 文字色）与列宽行高，删除按选区批量进行且只占一步撤销。
70
+ - **单元格文字自动换行 + 行高按内容增高**：画布与 SVG / PNG 导出共用同一套折行规则；增删行列表格左上角保持不动。
71
+ - 表格缩放自动等比拉伸列宽 / 行高，撤销重做完整支持（一个编辑会话 = 一个撤销点）。
72
+ - ✨ **体验优化**：
73
+ - 网格线对齐到物理像素，非 100% 缩放不再出现摩尔纹「发花」。
74
+ - 悬停弹出的「全文提示块」只在文字真的被截断时出现，显示得下就不再打扰。
75
+ - 撤销粒度修正：连续编辑多个单元格后撤销，只回退最后一个编辑会话，不会一路退到第一次编辑之前。
76
+ - 界面文字不再被拖蓝选中复制（状态栏 / 工具栏 / 小地图等），输入框不受影响。
77
+ - 🐞 **UML 修复**：行文字统一由 `uml.ts` 生成（画布 / SVG 导出 / 尺寸计算同源，`umlAttrRowText` / `umlMethodRowText` 已导出）；整行可自由删除（连可见性符号 `+ - # ~` 一起删），删空即空白、不会自己长回预设文字；就地编辑不再「删到冒号就删不动」。
78
+
79
+ ### v0.4.0
80
+
81
+ - 💾 **新增 `exportJSON()` / `importJSON()`**：把**完整文档**（全部图形 + 相机位置 + 版本号）序列化 / 反序列化，宿主可用它实现「导出数据 → 下次导入继续绘制」的跨会话存档；`exportJSON()` 返回带版本号的 JSON 数据，`importJSON()` 校验格式后整体恢复（含相机），非法数据返回失败结果、不破坏现有文档。
82
+ - 🎛️ **图标库扩展**：新增「表情」分类（113 个 Twemoji 表情，CC BY 4.0 可免费商用）与 Lucide（ISC）补充分类（天气 / 交通 / 自然 / 建筑 / 医疗 / 购物 / 科学 / 动物 / 时间 / 编辑 / 食物 / 通讯），全套图标共用搜索 / 分类 / 最近使用；**移除全部商业品牌图标**（商标侵权风险）；新增 `EMOJI_ICONS` 导出。
83
+ - 🔧 图标数据自检：剔除视觉重复的表情条目（如「强」与「加一」原为同一图形）。
84
+
85
+ ### v0.3.6
86
+
87
+ - 🌏 国际化新增 5 种语言：`zh-TW`、`ja-JP`、`ko-KR`、`de-DE`、`fr-FR`（连同简体中文 / English 共 7 种）；界面文案（工具栏、状态栏、样式面板、生成菜单、小地图、思维导图）已全部翻译。
88
+ - 📦 新增导出 `LANGUAGES`：`{ code, label }[]`，含各语言的本族语名称，便于宿主直接渲染语言切换 UI。
89
+ - ℹ️ 语言字典改为 `Record<MessageKey, string>` 强约束，任一语言漏翻 key 会在编译期直接报错。
90
+
91
+ > 更早版本的完整记录见仓库根目录 README。
92
+
93
+ ## License
94
+
95
+ MIT
96
+
97
+ ---
98
+
99
+ # 繁體中文
100
+
101
+ [简体中文](#drawui-core) ｜ **繁體中文** ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
102
+
103
+ 框架無關的核心畫布繪圖引擎（原生 TypeScript，無 UI 框架相依）。
104
+
105
+ React 封裝請見 [drawui-react](https://www.npmjs.com/package/drawui-react)。
106
+
107
+ ## 安裝
108
+
109
+ ```bash
110
+ npm install drawui-core
111
+ ```
112
+
113
+ ## 用法
114
+
115
+ ```ts
116
+ import { Editor } from 'drawui-core'
117
+
118
+ const canvas = document.getElementById('board') as HTMLCanvasElement
119
+ const editor = new Editor(canvas, { language: 'zh-TW' })
120
+
121
+ editor.subscribe(() => console.log('changed'))
122
+ editor.setShapes([
123
+ {
124
+ id: 'r1',
125
+ type: 'rectangle',
126
+ x: 80, y: 80, width: 160, height: 90, rotation: 0,
127
+ text: 'Hello',
128
+ style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
129
+ },
130
+ ])
131
+ ```
132
+
133
+ ## 主要匯出
134
+
135
+ - `Editor`（`new Editor(canvas, options?)`）、`EditorOptions`、`UiEvent`
136
+ - 工具類別：`SelectTool`、`HandTool`、`ShapeTool`、`LineTool`、`FreehandTool`、`ArrowTool`
137
+ - 幾何：`Vec`、`Mat2d`、`Camera`、`Renderer`
138
+ - 主題：`THEME`、`getTheme`、`setTheme`、`subscribeTheme`、`hexToRgba`、`shadeColor`
139
+ - 國際化：`LANGUAGES`、`setLanguage`、`getLanguage`、`subscribeLanguage`、`t`
140
+ - 心智圖：`layoutMindMap`、`mindMapNodeColor`、`mindMapNodeSize` 等
141
+ - 型別：`Shape`、`ShapeType`、`EditorData`、`ToolType`、`MindMapNode` 等
142
+
143
+ ## 建構選項
144
+
145
+ ```ts
146
+ interface EditorOptions {
147
+ theme?: Partial<DrawuiTheme>
148
+ language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
149
+ shapes?: Shape[]
150
+ persist?: boolean // 是否寫入 localStorage，預設 true（提供 shapes 時自動關閉）
151
+ }
152
+ ```
153
+
154
+ > 可用語言清單也可直接從 `LANGUAGES` 讀取（含各語言的原生名稱），方便自行渲染語言切換 UI。
155
+
156
+ ## 使用 drawui 的專案
157
+
158
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基於 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文字／文件編輯器，已整合 drawui 畫板：可在文件中直接插入並編輯畫板，用於繪製圖示、UML 類別圖、心智圖等，並隨文件一起匯出／下載。
159
+
160
+ ## License
161
+
162
+ MIT
163
+
164
+ ---
165
+
166
+ # English
167
+
168
+ [简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ **English** ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
169
+
170
+ Framework-agnostic core canvas drawing engine (vanilla TypeScript, no UI-framework dependency).
171
+
172
+ React wrapper: [drawui-react](https://www.npmjs.com/package/drawui-react).
173
+
174
+ ## Install
175
+
176
+ ```bash
177
+ npm install drawui-core
178
+ ```
179
+
180
+ ## Usage
181
+
182
+ ```ts
183
+ import { Editor } from 'drawui-core'
184
+
185
+ const canvas = document.getElementById('board') as HTMLCanvasElement
186
+ const editor = new Editor(canvas, { language: 'en-US' })
187
+
188
+ editor.subscribe(() => console.log('changed'))
189
+ editor.setShapes([
190
+ {
191
+ id: 'r1',
192
+ type: 'rectangle',
193
+ x: 80, y: 80, width: 160, height: 90, rotation: 0,
194
+ text: 'Hello',
195
+ style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
196
+ },
197
+ ])
198
+ ```
199
+
200
+ ## Main exports
201
+
202
+ - `Editor` (`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
203
+ - Tools: `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
204
+ - Geometry: `Vec`, `Mat2d`, `Camera`, `Renderer`
205
+ - Theme: `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
206
+ - i18n: `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
207
+ - Mind map: `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize`, …
208
+ - Types: `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode`, …
209
+
210
+ ## EditorOptions
211
+
212
+ ```ts
213
+ interface EditorOptions {
214
+ theme?: Partial<DrawuiTheme>
215
+ language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
216
+ shapes?: Shape[]
217
+ persist?: boolean // persist to localStorage; defaults to true (auto-off when `shapes` is given)
218
+ }
219
+ ```
220
+
221
+ > The list of available languages is also exported as `LANGUAGES` (with each language's native name), handy for rendering your own language switcher.
222
+
223
+ ## Projects using drawui
224
+
225
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — a rich-text / document editor built on [Slate.js](https://github.com/ianstormtaylor/slate). It embeds drawui boards: insert and edit a board right inside a document to draw diagrams, UML class diagrams and mind maps, and export / download them along with the document.
226
+
227
+ ## Changelog
228
+
229
+ ### v0.4.1
230
+
231
+ - 📊 **New `table` shape**: insert one from its own toolbar button with an 8×6 picker, then double-click any cell to edit in place.
232
+ - **Feishu-style interaction**: dragging inside the table selects a cell range (dragging past the edge extends it to full rows / columns); only the six-dot handle at the top-left moves the whole table. The selection is highlighted in light blue, and clicking any cell inside a merged block selects the entire block.
233
+ - **Merge / split**: the selection always snaps to whole merged blocks (no more "selected the left, merged the right"), merging **keeps every cell's text** (joined row-major) and splitting clears all merged blocks in the selection.
234
+ - **Insert / delete rows & columns at a chosen position**: `insertTableRowRelative` / `insertTableColumnRelative` (`above` / `below` / `left` / `right`) and `deleteTableRowsInSelection` / `deleteTableColsInSelection`. Inserted rows / columns inherit their neighbour's style (fill / bold / font size / align / text color) and width / height; deletion is a single undo step.
235
+ - **Cell text wraps and rows grow to fit** — canvas and SVG / PNG export share the same wrapping rules. Adding or removing rows / columns keeps the table's top-left corner anchored.
236
+ - Resizing scales column widths and row heights proportionally; undo / redo fully supported (one editing session = one undo step).
237
+ - ✨ **Experience polish**:
238
+ - Grid lines snap to physical pixels, so non-100% zoom levels no longer show moiré artifacts.
239
+ - The hover "full text" tooltip now appears **only when the text is actually truncated**.
240
+ - Undo granularity fixed: after editing several cells in a row, undo rolls back just the last editing session.
241
+ - UI text can no longer be accidentally selected / copied (status bar, toolbar, minimap); inputs are unaffected.
242
+ - 🐞 **UML fixes**: row text is now produced by `uml.ts` only (canvas, SVG export and size calculation share `umlAttrRowText` / `umlMethodRowText`, both exported). A whole row can be deleted freely — including the visibility marker `+ - # ~` — and an emptied row stays empty instead of growing the preset text back. In-place editing no longer gets stuck at the colon.
243
+
244
+ ### v0.4.0
245
+
246
+ - 💾 **New `exportJSON()` / `importJSON()`**: serialize / restore the **full document** (all shapes + camera + version). Hosts can use them for cross-session persistence ("export data now, import and keep drawing later"). `exportJSON()` returns versioned JSON; `importJSON()` validates and restores everything (camera included) — invalid input fails cleanly without touching the current document.
247
+ - 🎛️ **Icon library extended**: new "Emoji" category (113 Twemoji glyphs, CC BY 4.0 free for commercial use) plus Lucide (ISC) supplemental categories (weather / transport / nature / building / medical / shopping / science / animal / time / edit / food / communication). All icons share the same search / category / recent picker. **All commercial brand icons removed** (trademark risk). New `EMOJI_ICONS` export.
248
+ - 🔧 Icon data self-check: dropped visually duplicated emoji entries (e.g. "Thumbs up" and "Plus one" were the same glyph).
249
+
250
+ ### v0.3.6
251
+
252
+ - 🌏 Added 5 languages: `zh-TW`, `ja-JP`, `ko-KR`, `de-DE`, `fr-FR` (7 in total together with Simplified Chinese and English). All UI strings — toolbar, status bar, style panel, create-shape menu, minimap, mind map — are translated.
253
+ - 📦 New export `LANGUAGES`: `{ code, label }[]` with each language's native name, handy for rendering your own language switcher.
254
+ - ℹ️ Dictionaries are now typed as `Record<MessageKey, string>`, so a missing key in any language fails at compile time.
255
+
256
+ > The full history lives in the repository root README.
257
+
258
+ ## License
259
+
260
+ MIT
261
+
262
+ ---
263
+
264
+ # 日本語
265
+
266
+ [简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ **日本語** ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
267
+
268
+ フレームワーク非依存のコア描画エンジン（ピュア TypeScript、UI フレームワークへの依存なし）。
269
+
270
+ React ラッパーは [drawui-react](https://www.npmjs.com/package/drawui-react) をご覧ください。
271
+
272
+ ## インストール
273
+
274
+ ```bash
275
+ npm install drawui-core
276
+ ```
277
+
278
+ ## 使い方
279
+
280
+ ```ts
281
+ import { Editor } from 'drawui-core'
282
+
283
+ const canvas = document.getElementById('board') as HTMLCanvasElement
284
+ const editor = new Editor(canvas, { language: 'ja-JP' })
285
+
286
+ editor.subscribe(() => console.log('changed'))
287
+ editor.setShapes([
288
+ {
289
+ id: 'r1',
290
+ type: 'rectangle',
291
+ x: 80, y: 80, width: 160, height: 90, rotation: 0,
292
+ text: 'Hello',
293
+ style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
294
+ },
295
+ ])
296
+ ```
297
+
298
+ ## 主なエクスポート
299
+
300
+ - `Editor`（`new Editor(canvas, options?)`）、`EditorOptions`、`UiEvent`
301
+ - ツール：`SelectTool`、`HandTool`、`ShapeTool`、`LineTool`、`FreehandTool`、`ArrowTool`
302
+ - 幾何：`Vec`、`Mat2d`、`Camera`、`Renderer`
303
+ - テーマ：`THEME`、`getTheme`、`setTheme`、`subscribeTheme`、`hexToRgba`、`shadeColor`
304
+ - 国際化：`LANGUAGES`、`setLanguage`、`getLanguage`、`subscribeLanguage`、`t`
305
+ - マインドマップ：`layoutMindMap`、`mindMapNodeColor`、`mindMapNodeSize` など
306
+ - 型：`Shape`、`ShapeType`、`EditorData`、`ToolType`、`MindMapNode` など
307
+
308
+ ## コンストラクタオプション
309
+
310
+ ```ts
311
+ interface EditorOptions {
312
+ theme?: Partial<DrawuiTheme>
313
+ language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
314
+ shapes?: Shape[]
315
+ persist?: boolean // localStorage に保存するか。既定は true（shapes を渡すと自動でオフ）
316
+ }
317
+ ```
318
+
319
+ > 利用可能な言語の一覧は `LANGUAGES` としてもエクスポートされています（各言語のネイティブ表記つき）。独自の言語切り替え UI の実装に便利です。
320
+
321
+ ## drawui を利用しているプロジェクト
322
+
323
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) ベースのリッチテキスト／ドキュメントエディタ。drawui のボードを組み込んでおり、ドキュメント内でボードを挿入・編集して図、UML クラス図、マインドマップなどを描画し、ドキュメントと一緒にエクスポート／ダウンロードできます。
324
+
325
+ ## ライセンス
326
+
327
+ MIT
328
+
329
+ ---
330
+
331
+ # 한국어
332
+
333
+ [简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ **한국어** ｜ [Deutsch](#deutsch) ｜ [Français](#français)
334
+
335
+ 프레임워크에 종속되지 않는 코어 캔버스 드로잉 엔진(순수 TypeScript, UI 프레임워크 의존성 없음).
336
+
337
+ React 래퍼는 [drawui-react](https://www.npmjs.com/package/drawui-react)를 참고하세요.
338
+
339
+ ## 설치
340
+
341
+ ```bash
342
+ npm install drawui-core
343
+ ```
344
+
345
+ ## 사용법
346
+
347
+ ```ts
348
+ import { Editor } from 'drawui-core'
349
+
350
+ const canvas = document.getElementById('board') as HTMLCanvasElement
351
+ const editor = new Editor(canvas, { language: 'ko-KR' })
352
+
353
+ editor.subscribe(() => console.log('changed'))
354
+ editor.setShapes([
355
+ {
356
+ id: 'r1',
357
+ type: 'rectangle',
358
+ x: 80, y: 80, width: 160, height: 90, rotation: 0,
359
+ text: 'Hello',
360
+ style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
361
+ },
362
+ ])
363
+ ```
364
+
365
+ ## 주요 내보내기
366
+
367
+ - `Editor`(`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
368
+ - 도구: `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
369
+ - 기하: `Vec`, `Mat2d`, `Camera`, `Renderer`
370
+ - 테마: `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
371
+ - 국제화: `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
372
+ - 마인드맵: `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize` 등
373
+ - 타입: `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode` 등
374
+
375
+ ## 생성자 옵션
376
+
377
+ ```ts
378
+ interface EditorOptions {
379
+ theme?: Partial<DrawuiTheme>
380
+ language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
381
+ shapes?: Shape[]
382
+ persist?: boolean // localStorage에 저장할지 여부. 기본값 true (shapes를 넘기면 자동으로 꺼짐)
383
+ }
384
+ ```
385
+
386
+ > 사용 가능한 언어 목록은 `LANGUAGES`로도 내보내집니다(각 언어의 원어 표기 포함). 직접 언어 전환 UI를 만들 때 편리합니다.
387
+
388
+ ## drawui를 사용하는 프로젝트
389
+
390
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) 기반의 리치 텍스트·문서 편집기. drawui 보드를 내장하여 문서 안에서 보드를 삽입·편집해 다이어그램, UML 클래스 다이어그램, 마인드맵 등을 그리고 문서와 함께 내보내기·다운로드할 수 있습니다.
391
+
392
+ ## 라이선스
393
+
394
+ MIT
395
+
396
+ ---
397
+
398
+ # Deutsch
399
+
400
+ [简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ **Deutsch** ｜ [Français](#français)
401
+
402
+ Framework-unabhängige Canvas-Zeichenbibliothek (reines TypeScript, keine Abhängigkeit von einem UI-Framework).
403
+
404
+ React-Wrapper: [drawui-react](https://www.npmjs.com/package/drawui-react).
405
+
406
+ ## Installation
407
+
408
+ ```bash
409
+ npm install drawui-core
410
+ ```
411
+
412
+ ## Verwendung
413
+
414
+ ```ts
415
+ import { Editor } from 'drawui-core'
416
+
417
+ const canvas = document.getElementById('board') as HTMLCanvasElement
418
+ const editor = new Editor(canvas, { language: 'de-DE' })
419
+
420
+ editor.subscribe(() => console.log('changed'))
421
+ editor.setShapes([
422
+ {
423
+ id: 'r1',
424
+ type: 'rectangle',
425
+ x: 80, y: 80, width: 160, height: 90, rotation: 0,
426
+ text: 'Hello',
427
+ style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
428
+ },
429
+ ])
430
+ ```
431
+
432
+ ## Wichtigste Exporte
433
+
434
+ - `Editor` (`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
435
+ - Werkzeuge: `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
436
+ - Geometrie: `Vec`, `Mat2d`, `Camera`, `Renderer`
437
+ - Theme: `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
438
+ - i18n: `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
439
+ - Mindmap: `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize`, …
440
+ - Typen: `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode`, …
441
+
442
+ ## EditorOptions
443
+
444
+ ```ts
445
+ interface EditorOptions {
446
+ theme?: Partial<DrawuiTheme>
447
+ language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
448
+ shapes?: Shape[]
449
+ persist?: boolean // in localStorage speichern; Standard true (automatisch aus, wenn `shapes` gesetzt ist)
450
+ }
451
+ ```
452
+
453
+ > Die Liste der verfügbaren Sprachen wird ebenfalls als `LANGUAGES` exportiert (mit der jeweiligen Eigenbezeichnung) – praktisch für einen eigenen Sprachumschalter.
454
+
455
+ ## Projekte, die drawui verwenden
456
+
457
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — ein Rich-Text-/Dokumenteneditor auf Basis von [Slate.js](https://github.com/ianstormtaylor/slate). Er bindet drawui-Boards ein: Boards direkt im Dokument einfügen und bearbeiten, um Diagramme, UML-Klassendiagramme und Mindmaps zu zeichnen und zusammen mit dem Dokument zu exportieren / herunterzuladen.
458
+
459
+ ## Lizenz
460
+
461
+ MIT
462
+
463
+ ---
464
+
465
+ # Français
466
+
467
+ [简体中文](#drawui-core) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ **Français**
468
+
469
+ Moteur de dessin sur canvas indépendant du framework (TypeScript pur, sans dépendance à un framework UI).
470
+
471
+ Wrapper React : [drawui-react](https://www.npmjs.com/package/drawui-react).
472
+
473
+ ## Installation
474
+
475
+ ```bash
476
+ npm install drawui-core
477
+ ```
478
+
479
+ ## Utilisation
480
+
481
+ ```ts
482
+ import { Editor } from 'drawui-core'
483
+
484
+ const canvas = document.getElementById('board') as HTMLCanvasElement
485
+ const editor = new Editor(canvas, { language: 'fr-FR' })
486
+
487
+ editor.subscribe(() => console.log('changed'))
488
+ editor.setShapes([
489
+ {
490
+ id: 'r1',
491
+ type: 'rectangle',
492
+ x: 80, y: 80, width: 160, height: 90, rotation: 0,
493
+ text: 'Hello',
494
+ style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
495
+ },
496
+ ])
497
+ ```
498
+
499
+ ## Principaux exports
500
+
501
+ - `Editor` (`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
502
+ - Outils : `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
503
+ - Géométrie : `Vec`, `Mat2d`, `Camera`, `Renderer`
504
+ - Thème : `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
505
+ - i18n : `LANGUAGES`, `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
506
+ - Carte mentale : `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize`, …
507
+ - Types : `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode`, …
508
+
509
+ ## Options de l'éditeur
510
+
511
+ ```ts
512
+ interface EditorOptions {
513
+ theme?: Partial<DrawuiTheme>
514
+ language?: 'zh-CN' | 'zh-TW' | 'en-US' | 'ja-JP' | 'ko-KR' | 'de-DE' | 'fr-FR'
515
+ shapes?: Shape[]
516
+ persist?: boolean // écrire dans localStorage ; par défaut true (désactivé si `shapes` est fourni)
517
+ }
518
+ ```
519
+
520
+ > La liste des langues disponibles est également exportée sous `LANGUAGES` (avec le nom natif de chaque langue), pratique pour construire votre propre sélecteur de langue.
521
+
522
+ ## Projets utilisant drawui
523
+
524
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — un éditeur de texte enrichi / de documents basé sur [Slate.js](https://github.com/ianstormtaylor/slate). Il intègre les tableaux drawui : insérez et modifiez un tableau directement dans le document pour dessiner des schémas, des diagrammes de classes UML et des cartes mentales, puis exportez / téléchargez le tout avec le document.
525
+
526
+ ## Licence
527
+
528
+ MIT