drawui-react 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 (8) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +504 -472
  3. package/dist/index.cjs +1 -1
  4. package/dist/index.d.cts +10 -0
  5. package/dist/index.d.ts +10 -0
  6. package/dist/index.js +1 -1
  7. package/dist/styles.css +383 -2
  8. package/package.json +3 -3
package/README.md CHANGED
@@ -1,472 +1,504 @@
1
- # drawui-react
2
-
3
- **简体中文** ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
4
-
5
- 基于 [drawui-core](https://www.npmjs.com/package/drawui-core) 的 React 封装，提供开箱即用的画布组件。
6
-
7
- ## 安装
8
-
9
- ```bash
10
- npm install drawui-react # 自动安装 drawui-core
11
- ```
12
-
13
- ## 用法
14
-
15
- ```tsx
16
- import { CanvasBoard } from 'drawui-react'
17
- import 'drawui-react/styles.css'
18
- import type { Editor, EditorData } from 'drawui-core'
19
-
20
- export function App() {
21
- return (
22
- <CanvasBoard
23
- themeColor="#3b82f6"
24
- language="zh-CN"
25
- onChange={(data: EditorData) => console.log(data.shapes.length)}
26
- onReady={(editor: Editor) => editor.setShapes([])}
27
- />
28
- )
29
- }
30
- ```
31
-
32
- > 样式需单独引入：`import 'drawui-react/styles.css'`
33
-
34
- ## `<CanvasBoard>` 主要属性
35
-
36
- | 属性 | 类型 | 说明 |
37
- | --- | --- | --- |
38
- | `initialTool` | `ToolType` | 初始工具，默认 `'select'` |
39
- | `themeColor` | `string` | 主题主色（选中态 / 手柄 / 强调色），默认 `#3b82f6` |
40
- | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | 界面语言，默认 `'zh-CN'` |
41
- | `data` | `Shape[]` | 初始图形；传入后不读写 localStorage |
42
- | `onChange` | `(data: EditorData) => void` | 图形 / 相机变化时回调 |
43
- | `onReady` | `(editor: Editor) => void` | 编辑器实例就绪，可拿到 `Editor` 完全控制 |
44
-
45
- ## 导出组件
46
-
47
- - `CanvasBoard` — 主画布（含工具栏 / 缩放 / 样式面板 / 思维导图面板等）
48
- - `Toolbar` — 工具栏
49
- - `ZoomControl` — 缩放控件
50
-
51
- ## 依赖
52
-
53
- - `react` / `react-dom` ^18.3（peerDependencies）
54
- - `drawui-core`（自动安装）
55
-
56
- ## 使用 drawui 的项目
57
-
58
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基于 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文本 / 文档编辑器，已接入 drawui 画板：可在文档中直接插入并编辑画板，用于绘制图示、UML 类图、思维导图等，并随文档一起导出 / 下载。
59
-
60
- ## 更新日志
61
-
62
- ### v0.3.6
63
-
64
- - 🌏 `language` 新增 5 种语言：`zh-TW`、`ja-JP`、`ko-KR`、`de-DE`、`fr-FR`（连同简体中文 / English 共 7 种），画布内所有界面文案同步翻译。
65
- - 📦 依赖的 `drawui-core` 同步升级到 `0.3.6`（新增 `LANGUAGES` 导出，含各语言本族语名称）。
66
- - ℹ️ 语言字典改为 `Record<MessageKey, string>` 强约束，任一语言漏翻 key 会在编译期直接报错。
67
-
68
- > 更早版本的完整记录见仓库根目录 README。
69
-
70
- ## License
71
-
72
- MIT
73
-
74
- ---
75
-
76
- # 繁體中文
77
-
78
- [简体中文](#drawui-react) ｜ **繁體中文** ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
79
-
80
- 以 [drawui-core](https://www.npmjs.com/package/drawui-core) 為基礎的 React 封裝，提供開箱即用的畫布元件。
81
-
82
- ## 安裝
83
-
84
- ```bash
85
- npm install drawui-react # 會自動安裝 drawui-core
86
- ```
87
-
88
- ## 用法
89
-
90
- ```tsx
91
- import { CanvasBoard } from 'drawui-react'
92
- import 'drawui-react/styles.css'
93
- import type { Editor, EditorData } from 'drawui-core'
94
-
95
- export function App() {
96
- return (
97
- <CanvasBoard
98
- themeColor="#3b82f6"
99
- language="zh-TW"
100
- onChange={(data: EditorData) => console.log(data.shapes.length)}
101
- onReady={(editor: Editor) => editor.setShapes([])}
102
- />
103
- )
104
- }
105
- ```
106
-
107
- > 樣式需單獨引入：`import 'drawui-react/styles.css'`
108
-
109
- ## `<CanvasBoard>` 主要屬性
110
-
111
- | 屬性 | 型別 | 說明 |
112
- | --- | --- | --- |
113
- | `initialTool` | `ToolType` | 初始工具，預設 `'select'` |
114
- | `themeColor` | `string` | 主題主色（選取態／手柄／強調色），預設 `#3b82f6` |
115
- | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | 介面語言，預設 `'zh-CN'` |
116
- | `data` | `Shape[]` | 初始圖形；傳入後不讀寫 localStorage |
117
- | `onChange` | `(data: EditorData) => void` | 圖形／相機變化時回呼 |
118
- | `onReady` | `(editor: Editor) => void` | 編輯器實例就緒，可取得 `Editor` 完全控制 |
119
-
120
- ## 匯出元件
121
-
122
- - `CanvasBoard` — 主畫布（含工具列／縮放／樣式面板／心智圖面板等）
123
- - `Toolbar` — 工具列
124
- - `ZoomControl` — 縮放控制項
125
-
126
- ## 相依
127
-
128
- - `react` / `react-dom` ^18.3（peerDependencies）
129
- - `drawui-core`（自動安裝）
130
-
131
- ## 使用 drawui 的專案
132
-
133
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基於 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文字／文件編輯器，已整合 drawui 畫板：可在文件中直接插入並編輯畫板，用於繪製圖示、UML 類別圖、心智圖等，並隨文件一起匯出／下載。
134
-
135
- ## License
136
-
137
- MIT
138
-
139
- ---
140
-
141
- # English
142
-
143
- [简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ **English** ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
144
-
145
- React wrapper for [drawui-core](https://www.npmjs.com/package/drawui-core), with drop-in canvas components.
146
-
147
- ## Install
148
-
149
- ```bash
150
- npm install drawui-react # installs drawui-core automatically
151
- ```
152
-
153
- ## Usage
154
-
155
- ```tsx
156
- import { CanvasBoard } from 'drawui-react'
157
- import 'drawui-react/styles.css'
158
- import type { Editor, EditorData } from 'drawui-core'
159
-
160
- export function App() {
161
- return (
162
- <CanvasBoard
163
- themeColor="#3b82f6"
164
- language="en-US"
165
- onChange={(data: EditorData) => console.log(data.shapes.length)}
166
- onReady={(editor: Editor) => editor.setShapes([])}
167
- />
168
- )
169
- }
170
- ```
171
-
172
- > The stylesheet must be imported separately: `import 'drawui-react/styles.css'`
173
-
174
- ## `<CanvasBoard>` props
175
-
176
- | Prop | Type | Description |
177
- | --- | --- | --- |
178
- | `initialTool` | `ToolType` | Initial tool, defaults to `'select'` |
179
- | `themeColor` | `string` | Theme accent (selection / handles / highlights), defaults to `#3b82f6` |
180
- | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI language, defaults to `'zh-CN'` |
181
- | `data` | `Shape[]` | Initial shapes; when provided, localStorage is not read or written |
182
- | `onChange` | `(data: EditorData) => void` | Called when shapes / camera change |
183
- | `onReady` | `(editor: Editor) => void` | Called once the editor is ready (full `Editor` access) |
184
-
185
- ## Exported components
186
-
187
- - `CanvasBoard` — the main board (toolbar / zoom / style panel / mind-map panel, …)
188
- - `Toolbar` — the toolbar
189
- - `ZoomControl` — the zoom control
190
-
191
- ## Dependencies
192
-
193
- - `react` / `react-dom` ^18.3 (peerDependencies)
194
- - `drawui-core` (installed automatically)
195
-
196
- ## Projects using drawui
197
-
198
- - **[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.
199
-
200
- ## Changelog
201
-
202
- ### v0.3.6
203
-
204
- - 🌏 `language` now accepts 5 more languages: `zh-TW`, `ja-JP`, `ko-KR`, `de-DE`, `fr-FR` (7 in total together with Simplified Chinese and English); every UI string inside the board is translated.
205
- - 📦 The bundled `drawui-core` is bumped to `0.3.6` (adds the `LANGUAGES` export with each language's native name).
206
- - ℹ️ Dictionaries are now typed as `Record<MessageKey, string>`, so a missing key in any language fails at compile time.
207
-
208
- > The full history lives in the repository root README.
209
-
210
- ## License
211
-
212
- MIT
213
-
214
- ---
215
-
216
- # 日本語
217
-
218
- [简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ **日本語** ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
219
-
220
- [drawui-core](https://www.npmjs.com/package/drawui-core) の React ラッパー。すぐに使えるキャンバスコンポーネントを提供します。
221
-
222
- ## インストール
223
-
224
- ```bash
225
- npm install drawui-react # drawui-core も自動でインストールされます
226
- ```
227
-
228
- ## 使い方
229
-
230
- ```tsx
231
- import { CanvasBoard } from 'drawui-react'
232
- import 'drawui-react/styles.css'
233
- import type { Editor, EditorData } from 'drawui-core'
234
-
235
- export function App() {
236
- return (
237
- <CanvasBoard
238
- themeColor="#3b82f6"
239
- language="ja-JP"
240
- onChange={(data: EditorData) => console.log(data.shapes.length)}
241
- onReady={(editor: Editor) => editor.setShapes([])}
242
- />
243
- )
244
- }
245
- ```
246
-
247
- > スタイルは別途インポートが必要です：`import 'drawui-react/styles.css'`
248
-
249
- ## `<CanvasBoard>` の主な props
250
-
251
- | props | 型 | 説明 |
252
- | --- | --- | --- |
253
- | `initialTool` | `ToolType` | 初期ツール。既定は `'select'` |
254
- | `themeColor` | `string` | テーマのメインカラー（選択状態／ハンドル／強調色）。既定は `#3b82f6` |
255
- | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI の言語。既定は `'zh-CN'` |
256
- | `data` | `Shape[]` | 初期図形。渡した場合 localStorage の読み書きは行いません |
257
- | `onChange` | `(data: EditorData) => void` | 図形／カメラの変化時に呼ばれます |
258
- | `onReady` | `(editor: Editor) => void` | エディタの準備完了時に呼ばれ、`Editor` を完全に操作できます |
259
-
260
- ## エクスポートされるコンポーネント
261
-
262
- - `CanvasBoard` — メインのボード（ツールバー／ズーム／スタイルパネル／マインドマップパネルなど）
263
- - `Toolbar` — ツールバー
264
- - `ZoomControl` — ズームコントロール
265
-
266
- ## 依存関係
267
-
268
- - `react` / `react-dom` ^18.3（peerDependencies）
269
- - `drawui-core`（自動でインストール）
270
-
271
- ## drawui を利用しているプロジェクト
272
-
273
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) ベースのリッチテキスト／ドキュメントエディタ。drawui のボードを組み込んでおり、ドキュメント内でボードを挿入・編集して図、UML クラス図、マインドマップなどを描画し、ドキュメントと一緒にエクスポート／ダウンロードできます。
274
-
275
- ## ライセンス
276
-
277
- MIT
278
-
279
- ---
280
-
281
- # 한국어
282
-
283
- [简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ **한국어** ｜ [Deutsch](#deutsch) ｜ [Français](#français)
284
-
285
- [drawui-core](https://www.npmjs.com/package/drawui-core) 기반의 React 래퍼로, 바로 쓸 수 있는 캔버스 컴포넌트를 제공합니다.
286
-
287
- ## 설치
288
-
289
- ```bash
290
- npm install drawui-react # drawui-core도 자동으로 설치됩니다
291
- ```
292
-
293
- ## 사용법
294
-
295
- ```tsx
296
- import { CanvasBoard } from 'drawui-react'
297
- import 'drawui-react/styles.css'
298
- import type { Editor, EditorData } from 'drawui-core'
299
-
300
- export function App() {
301
- return (
302
- <CanvasBoard
303
- themeColor="#3b82f6"
304
- language="ko-KR"
305
- onChange={(data: EditorData) => console.log(data.shapes.length)}
306
- onReady={(editor: Editor) => editor.setShapes([])}
307
- />
308
- )
309
- }
310
- ```
311
-
312
- > 스타일은 별도로 불러와야 합니다: `import 'drawui-react/styles.css'`
313
-
314
- ## `<CanvasBoard>` 주요 props
315
-
316
- | props | 타입 | 설명 |
317
- | --- | --- | --- |
318
- | `initialTool` | `ToolType` | 초기 도구, 기본값 `'select'` |
319
- | `themeColor` | `string` | 테마 기본 색상(선택 상태／핸들／강조색), 기본값 `#3b82f6` |
320
- | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI 언어, 기본값 `'zh-CN'` |
321
- | `data` | `Shape[]` | 초기 도형. 넘기면 localStorage를 읽거나 쓰지 않습니다 |
322
- | `onChange` | `(data: EditorData) => void` | 도형／카메라 변경 시 호출 |
323
- | `onReady` | `(editor: Editor) => void` | 에디터 준비 완료 시 호출되며 `Editor`를 완전히 제어할 수 있습니다 |
324
-
325
- ## 내보내는 컴포넌트
326
-
327
- - `CanvasBoard` — 메인 보드(툴바／확대·축소／스타일 패널／마인드맵 패널 등)
328
- - `Toolbar` — 툴바
329
- - `ZoomControl` — 확대·축소 컨트롤
330
-
331
- ## 의존성
332
-
333
- - `react` / `react-dom` ^18.3 (peerDependencies)
334
- - `drawui-core` (자동 설치)
335
-
336
- ## drawui를 사용하는 프로젝트
337
-
338
- - **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) 기반의 리치 텍스트·문서 편집기. drawui 보드를 내장하여 문서 안에서 보드를 삽입·편집해 다이어그램, UML 클래스 다이어그램, 마인드맵 등을 그리고 문서와 함께 내보내기·다운로드할 수 있습니다.
339
-
340
- ## 라이선스
341
-
342
- MIT
343
-
344
- ---
345
-
346
- # Deutsch
347
-
348
- [简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ **Deutsch** ｜ [Français](#français)
349
-
350
- React-Wrapper für [drawui-core](https://www.npmjs.com/package/drawui-core) mit sofort einsetzbaren Canvas-Komponenten.
351
-
352
- ## Installation
353
-
354
- ```bash
355
- npm install drawui-react # installiert drawui-core automatisch
356
- ```
357
-
358
- ## Verwendung
359
-
360
- ```tsx
361
- import { CanvasBoard } from 'drawui-react'
362
- import 'drawui-react/styles.css'
363
- import type { Editor, EditorData } from 'drawui-core'
364
-
365
- export function App() {
366
- return (
367
- <CanvasBoard
368
- themeColor="#3b82f6"
369
- language="de-DE"
370
- onChange={(data: EditorData) => console.log(data.shapes.length)}
371
- onReady={(editor: Editor) => editor.setShapes([])}
372
- />
373
- )
374
- }
375
- ```
376
-
377
- > Das Stylesheet muss separat importiert werden: `import 'drawui-react/styles.css'`
378
-
379
- ## `<CanvasBoard>`-Props
380
-
381
- | Prop | Typ | Beschreibung |
382
- | --- | --- | --- |
383
- | `initialTool` | `ToolType` | Startwerkzeug, Standard `'select'` |
384
- | `themeColor` | `string` | Akzentfarbe des Themes (Auswahl / Griffe / Hervorhebungen), Standard `#3b82f6` |
385
- | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI-Sprache, Standard `'zh-CN'` |
386
- | `data` | `Shape[]` | Anfangsformen; wenn gesetzt, wird localStorage nicht gelesen oder geschrieben |
387
- | `onChange` | `(data: EditorData) => void` | Wird bei Änderungen an Formen / Kamera aufgerufen |
388
- | `onReady` | `(editor: Editor) => void` | Wird aufgerufen, sobald der Editor bereit ist (voller Zugriff auf `Editor`) |
389
-
390
- ## Exportierte Komponenten
391
-
392
- - `CanvasBoard` — das Hauptboard (Toolbar / Zoom / Stil-Panel / Mindmap-Panel, …)
393
- - `Toolbar` — die Toolbar
394
- - `ZoomControl` — die Zoom-Steuerung
395
-
396
- ## Abhängigkeiten
397
-
398
- - `react` / `react-dom` ^18.3 (peerDependencies)
399
- - `drawui-core` (wird automatisch installiert)
400
-
401
- ## Projekte, die drawui verwenden
402
-
403
- - **[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.
404
-
405
- ## Lizenz
406
-
407
- MIT
408
-
409
- ---
410
-
411
- # Français
412
-
413
- [简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ **Français**
414
-
415
- Wrapper React pour [drawui-core](https://www.npmjs.com/package/drawui-core), avec des composants canvas prêts à l'emploi.
416
-
417
- ## Installation
418
-
419
- ```bash
420
- npm install drawui-react # installe drawui-core automatiquement
421
- ```
422
-
423
- ## Utilisation
424
-
425
- ```tsx
426
- import { CanvasBoard } from 'drawui-react'
427
- import 'drawui-react/styles.css'
428
- import type { Editor, EditorData } from 'drawui-core'
429
-
430
- export function App() {
431
- return (
432
- <CanvasBoard
433
- themeColor="#3b82f6"
434
- language="fr-FR"
435
- onChange={(data: EditorData) => console.log(data.shapes.length)}
436
- onReady={(editor: Editor) => editor.setShapes([])}
437
- />
438
- )
439
- }
440
- ```
441
-
442
- > La feuille de style doit être importée séparément : `import 'drawui-react/styles.css'`
443
-
444
- ## Props de `<CanvasBoard>`
445
-
446
- | Prop | Type | Description |
447
- | --- | --- | --- |
448
- | `initialTool` | `ToolType` | Outil initial, `'select'` par défaut |
449
- | `themeColor` | `string` | Couleur d'accentuation du thème (sélection / poignées / surlignage), `#3b82f6` par défaut |
450
- | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | Langue de l'interface, `'zh-CN'` par défaut |
451
- | `data` | `Shape[]` | Formes initiales ; si fourni, localStorage n'est ni lu ni écrit |
452
- | `onChange` | `(data: EditorData) => void` | Appelé lors des changements de formes / caméra |
453
- | `onReady` | `(editor: Editor) => void` | Appelé dès que l'éditeur est prêt (accès complet à `Editor`) |
454
-
455
- ## Composants exportés
456
-
457
- - `CanvasBoard` — le tableau principal (barre d'outils / zoom / panneau de style / panneau de carte mentale, …)
458
- - `Toolbar` — la barre d'outils
459
- - `ZoomControl` — le contrôle de zoom
460
-
461
- ## Dépendances
462
-
463
- - `react` / `react-dom` ^18.3 (peerDependencies)
464
- - `drawui-core` (installé automatiquement)
465
-
466
- ## Projets utilisant drawui
467
-
468
- - **[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.
469
-
470
- ## Licence
471
-
472
- MIT
1
+ # drawui-react
2
+
3
+ **简体中文** ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
4
+
5
+ 基于 [drawui-core](https://www.npmjs.com/package/drawui-core) 的 React 封装，提供开箱即用的画布组件。
6
+
7
+ ## 安装
8
+
9
+ ```bash
10
+ npm install drawui-react # 自动安装 drawui-core
11
+ ```
12
+
13
+ ## 用法
14
+
15
+ ```tsx
16
+ import { CanvasBoard } from 'drawui-react'
17
+ import 'drawui-react/styles.css'
18
+ import type { Editor, EditorData } from 'drawui-core'
19
+
20
+ export function App() {
21
+ return (
22
+ <CanvasBoard
23
+ themeColor="#3b82f6"
24
+ language="zh-CN"
25
+ onChange={(data: EditorData) => console.log(data.shapes.length)}
26
+ onReady={(editor: Editor) => editor.setShapes([])}
27
+ />
28
+ )
29
+ }
30
+ ```
31
+
32
+ > 样式需单独引入：`import 'drawui-react/styles.css'`
33
+
34
+ ## `<CanvasBoard>` 主要属性
35
+
36
+ | 属性 | 类型 | 说明 |
37
+ | --- | --- | --- |
38
+ | `initialTool` | `ToolType` | 初始工具，默认 `'select'` |
39
+ | `themeColor` | `string` | 主题主色（选中态 / 手柄 / 强调色），默认 `#3b82f6` |
40
+ | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | 界面语言，默认 `'zh-CN'` |
41
+ | `data` | `Shape[]` | 初始图形；传入后不读写 localStorage |
42
+ | `onChange` | `(data: EditorData) => void` | 图形 / 相机变化时回调 |
43
+ | `onReady` | `(editor: Editor) => void` | 编辑器实例就绪，可拿到 `Editor` 完全控制 |
44
+
45
+ ## 导出组件
46
+
47
+ - `CanvasBoard` — 主画布（含工具栏 / 缩放 / 样式面板 / 思维导图面板等）
48
+ - `Toolbar` — 工具栏
49
+ - `ZoomControl` — 缩放控件
50
+
51
+ ## 依赖
52
+
53
+ - `react` / `react-dom` ^18.3（peerDependencies）
54
+ - `drawui-core`（自动安装）
55
+
56
+ ## 使用 drawui 的项目
57
+
58
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基于 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文本 / 文档编辑器，已接入 drawui 画板：可在文档中直接插入并编辑画板，用于绘制图示、UML 类图、思维导图等，并随文档一起导出 / 下载。
59
+
60
+ ## 更新日志
61
+
62
+ ### v0.4.1
63
+
64
+ - 📊 **新增「表格」图形与完整编辑体验**：工具栏独立「表格」按钮 + 8×6 选择器插入；选中后浮出**表格悬浮工具条**（插入 / 删除行列、合并 / 拆分单元格），双击单元格进入就地编辑。
65
+ - **飞书式选区**：表格内拖拽 = 框选单元格（拖到表格外自动扩成整行 / 整列），只有左上角六点把手能拖动整张表；选区浅蓝高亮，点合并块内任意一格即选中整块。
66
+ - **插入 / 删除可指定位置**：主体按钮 = 下方 / 右侧插入，箭头展开「上方 / 下方 / 左侧 / 右侧」位置菜单；删除作用于选区覆盖的所有行列，且只占一步撤销。
67
+ - **文字自动换行 + 行高按内容增高**：就地编辑框改为自动增高的 textarea，编辑时的折行与画布、SVG 导出完全一致。
68
+ - ✨ **体验优化**：网格线对齐物理像素（非 100% 缩放不再「发花」）；悬停全文提示只在文字被截断时弹出；撤销粒度修正为「一个编辑会话 = 一步」；界面文字不再被拖蓝选中复制；工具栏下拉 / 弹层层级高于画布浮层，不再被样式面板盖住。
69
+ - 🐞 **UML 修复**：行文字统一由 `drawui-core` 的 `uml.ts` 生成（画布 / 导出 / 尺寸同源）；整行可自由删除（含可见性符号），删空即空白；就地编辑不再「删到冒号就删不动」。
70
+ - 📦 依赖的 `drawui-core` 同步升级到 `0.4.1`。
71
+
72
+ ### v0.4.0
73
+
74
+ - 💾 **工具栏新增「导出数据 / 导入数据」**：把完整文档（图形 + 相机 + 版本号）存成 JSON，下次导入即可继续绘制；导入成功提示「已恢复 N 个图形」，导入失败（选错文件 / 格式不对）显示红色 ✕ 提示，不再无声无息（基于 `drawui-core` 的 `exportJSON` / `importJSON`）。
75
+ - 🎛️ **图标库面板大幅扩展**：新增「表情」分类（113 个 Twemoji 表情，CC BY 4.0 可免费商用）与 12 个 Lucide 补充分类（天气 / 交通 / 自然 / 建筑 / 医疗 / 购物 / 科学 / 动物 / 时间 / 编辑 / 食物 / 通讯）；**移除全部商业品牌图标**（商标侵权风险）；工具栏入口图标改为线稿**笑脸**，语义更直观。
76
+ - 📦 依赖的 `drawui-core` 同步升级到 `0.4.0`。
77
+
78
+ ### v0.3.6
79
+
80
+ - 🌏 `language` 新增 5 种语言：`zh-TW`、`ja-JP`、`ko-KR`、`de-DE`、`fr-FR`（连同简体中文 / English 共 7 种），画布内所有界面文案同步翻译。
81
+ - 📦 依赖的 `drawui-core` 同步升级到 `0.3.6`（新增 `LANGUAGES` 导出，含各语言本族语名称）。
82
+ - ℹ️ 语言字典改为 `Record<MessageKey, string>` 强约束，任一语言漏翻 key 会在编译期直接报错。
83
+
84
+ > 更早版本的完整记录见仓库根目录 README。
85
+
86
+ ## License
87
+
88
+ MIT
89
+
90
+ ---
91
+
92
+ # 繁體中文
93
+
94
+ [简体中文](#drawui-react) ｜ **繁體中文** ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
95
+
96
+ 以 [drawui-core](https://www.npmjs.com/package/drawui-core) 為基礎的 React 封裝，提供開箱即用的畫布元件。
97
+
98
+ ## 安裝
99
+
100
+ ```bash
101
+ npm install drawui-react # 會自動安裝 drawui-core
102
+ ```
103
+
104
+ ## 用法
105
+
106
+ ```tsx
107
+ import { CanvasBoard } from 'drawui-react'
108
+ import 'drawui-react/styles.css'
109
+ import type { Editor, EditorData } from 'drawui-core'
110
+
111
+ export function App() {
112
+ return (
113
+ <CanvasBoard
114
+ themeColor="#3b82f6"
115
+ language="zh-TW"
116
+ onChange={(data: EditorData) => console.log(data.shapes.length)}
117
+ onReady={(editor: Editor) => editor.setShapes([])}
118
+ />
119
+ )
120
+ }
121
+ ```
122
+
123
+ > 樣式需單獨引入：`import 'drawui-react/styles.css'`
124
+
125
+ ## `<CanvasBoard>` 主要屬性
126
+
127
+ | 屬性 | 型別 | 說明 |
128
+ | --- | --- | --- |
129
+ | `initialTool` | `ToolType` | 初始工具，預設 `'select'` |
130
+ | `themeColor` | `string` | 主題主色（選取態／手柄／強調色），預設 `#3b82f6` |
131
+ | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | 介面語言，預設 `'zh-CN'` |
132
+ | `data` | `Shape[]` | 初始圖形；傳入後不讀寫 localStorage |
133
+ | `onChange` | `(data: EditorData) => void` | 圖形／相機變化時回呼 |
134
+ | `onReady` | `(editor: Editor) => void` | 編輯器實例就緒，可取得 `Editor` 完全控制 |
135
+
136
+ ## 匯出元件
137
+
138
+ - `CanvasBoard` — 主畫布（含工具列／縮放／樣式面板／心智圖面板等）
139
+ - `Toolbar` — 工具列
140
+ - `ZoomControl` — 縮放控制項
141
+
142
+ ## 相依
143
+
144
+ - `react` / `react-dom` ^18.3（peerDependencies）
145
+ - `drawui-core`（自動安裝）
146
+
147
+ ## 使用 drawui 的專案
148
+
149
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基於 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文字／文件編輯器，已整合 drawui 畫板：可在文件中直接插入並編輯畫板，用於繪製圖示、UML 類別圖、心智圖等，並隨文件一起匯出／下載。
150
+
151
+ ## License
152
+
153
+ MIT
154
+
155
+ ---
156
+
157
+ # English
158
+
159
+ [简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ **English** ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
160
+
161
+ React wrapper for [drawui-core](https://www.npmjs.com/package/drawui-core), with drop-in canvas components.
162
+
163
+ ## Install
164
+
165
+ ```bash
166
+ npm install drawui-react # installs drawui-core automatically
167
+ ```
168
+
169
+ ## Usage
170
+
171
+ ```tsx
172
+ import { CanvasBoard } from 'drawui-react'
173
+ import 'drawui-react/styles.css'
174
+ import type { Editor, EditorData } from 'drawui-core'
175
+
176
+ export function App() {
177
+ return (
178
+ <CanvasBoard
179
+ themeColor="#3b82f6"
180
+ language="en-US"
181
+ onChange={(data: EditorData) => console.log(data.shapes.length)}
182
+ onReady={(editor: Editor) => editor.setShapes([])}
183
+ />
184
+ )
185
+ }
186
+ ```
187
+
188
+ > The stylesheet must be imported separately: `import 'drawui-react/styles.css'`
189
+
190
+ ## `<CanvasBoard>` props
191
+
192
+ | Prop | Type | Description |
193
+ | --- | --- | --- |
194
+ | `initialTool` | `ToolType` | Initial tool, defaults to `'select'` |
195
+ | `themeColor` | `string` | Theme accent (selection / handles / highlights), defaults to `#3b82f6` |
196
+ | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI language, defaults to `'zh-CN'` |
197
+ | `data` | `Shape[]` | Initial shapes; when provided, localStorage is not read or written |
198
+ | `onChange` | `(data: EditorData) => void` | Called when shapes / camera change |
199
+ | `onReady` | `(editor: Editor) => void` | Called once the editor is ready (full `Editor` access) |
200
+
201
+ ## Exported components
202
+
203
+ - `CanvasBoard` — the main board (toolbar / zoom / style panel / mind-map panel, …)
204
+ - `Toolbar` — the toolbar
205
+ - `ZoomControl` — the zoom control
206
+
207
+ ## Dependencies
208
+
209
+ - `react` / `react-dom` ^18.3 (peerDependencies)
210
+ - `drawui-core` (installed automatically)
211
+
212
+ ## Projects using drawui
213
+
214
+ - **[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.
215
+
216
+ ## Changelog
217
+
218
+ ### v0.4.1
219
+
220
+ - 📊 **New `table` shape with a full editing experience**: a dedicated toolbar button with an 8×6 picker inserts a table; selecting it reveals a **floating table toolbar** (insert / delete rows & columns, merge / split cells), and double-clicking a cell opens the in-place editor.
221
+ - **Feishu-style selection**: 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.
222
+ - **Insert / delete at a chosen position**: the main button inserts below / to the right, the caret opens a position menu (above / below / left / right); deletion applies to every row / column covered by the selection and costs a single undo step.
223
+ - **Text wraps and rows grow to fit**: the in-place editor is now an auto-growing textarea whose wrapping matches the canvas and the SVG export exactly.
224
+ - ✨ **Experience polish**: grid lines snap to physical pixels (no more moiré at non-100% zoom); the hover "full text" tooltip only shows when the text is actually truncated; undo granularity is now "one editing session = one step"; UI text can no longer be selected / copied by dragging; toolbar dropdowns now sit above canvas overlays instead of being covered by the style panel.
225
+ - 🐞 **UML fixes**: row text comes solely from `uml.ts` in `drawui-core` (canvas, export and sizing share one source); a row can be deleted freely — visibility marker included — and stays empty once cleared; in-place editing no longer gets stuck at the colon.
226
+ - 📦 Bundled `drawui-core` is bumped to `0.4.1`.
227
+
228
+ ### v0.4.0
229
+
230
+ - 💾 **New "Export data / Import data" toolbar actions**: save the full document (shapes + camera + version) as JSON and import it later to keep drawing. Successful import shows "restored N shapes"; a wrong file / bad format shows a red ✕ failure toast — no more silent no-ops (backed by `exportJSON` / `importJSON` from `drawui-core`).
231
+ - 🎛️ **Icon picker greatly extended**: new "Emoji" category (113 Twemoji glyphs, CC BY 4.0 free for commercial use) plus 12 supplemental Lucide categories (weather / transport / nature / building / medical / shopping / science / animal / time / edit / food / communication). **All commercial brand icons removed** (trademark risk). The toolbar entry icon is now a line-art **smiley**, clearer at a glance.
232
+ - 📦 Bundled `drawui-core` is bumped to `0.4.0`.
233
+
234
+ ### v0.3.6
235
+
236
+ - 🌏 `language` now accepts 5 more languages: `zh-TW`, `ja-JP`, `ko-KR`, `de-DE`, `fr-FR` (7 in total together with Simplified Chinese and English); every UI string inside the board is translated.
237
+ - 📦 The bundled `drawui-core` is bumped to `0.3.6` (adds the `LANGUAGES` export with each language's native name).
238
+ - ℹ️ Dictionaries are now typed as `Record<MessageKey, string>`, so a missing key in any language fails at compile time.
239
+
240
+ > The full history lives in the repository root README.
241
+
242
+ ## License
243
+
244
+ MIT
245
+
246
+ ---
247
+
248
+ # 日本語
249
+
250
+ [简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ **日本語** ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
251
+
252
+ [drawui-core](https://www.npmjs.com/package/drawui-core) の React ラッパー。すぐに使えるキャンバスコンポーネントを提供します。
253
+
254
+ ## インストール
255
+
256
+ ```bash
257
+ npm install drawui-react # drawui-core も自動でインストールされます
258
+ ```
259
+
260
+ ## 使い方
261
+
262
+ ```tsx
263
+ import { CanvasBoard } from 'drawui-react'
264
+ import 'drawui-react/styles.css'
265
+ import type { Editor, EditorData } from 'drawui-core'
266
+
267
+ export function App() {
268
+ return (
269
+ <CanvasBoard
270
+ themeColor="#3b82f6"
271
+ language="ja-JP"
272
+ onChange={(data: EditorData) => console.log(data.shapes.length)}
273
+ onReady={(editor: Editor) => editor.setShapes([])}
274
+ />
275
+ )
276
+ }
277
+ ```
278
+
279
+ > スタイルは別途インポートが必要です：`import 'drawui-react/styles.css'`
280
+
281
+ ## `<CanvasBoard>` の主な props
282
+
283
+ | props | 型 | 説明 |
284
+ | --- | --- | --- |
285
+ | `initialTool` | `ToolType` | 初期ツール。既定は `'select'` |
286
+ | `themeColor` | `string` | テーマのメインカラー（選択状態／ハンドル／強調色）。既定は `#3b82f6` |
287
+ | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI の言語。既定は `'zh-CN'` |
288
+ | `data` | `Shape[]` | 初期図形。渡した場合 localStorage の読み書きは行いません |
289
+ | `onChange` | `(data: EditorData) => void` | 図形／カメラの変化時に呼ばれます |
290
+ | `onReady` | `(editor: Editor) => void` | エディタの準備完了時に呼ばれ、`Editor` を完全に操作できます |
291
+
292
+ ## エクスポートされるコンポーネント
293
+
294
+ - `CanvasBoard` — メインのボード（ツールバー／ズーム／スタイルパネル／マインドマップパネルなど）
295
+ - `Toolbar` — ツールバー
296
+ - `ZoomControl` — ズームコントロール
297
+
298
+ ## 依存関係
299
+
300
+ - `react` / `react-dom` ^18.3（peerDependencies）
301
+ - `drawui-core`（自動でインストール）
302
+
303
+ ## drawui を利用しているプロジェクト
304
+
305
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) ベースのリッチテキスト／ドキュメントエディタ。drawui のボードを組み込んでおり、ドキュメント内でボードを挿入・編集して図、UML クラス図、マインドマップなどを描画し、ドキュメントと一緒にエクスポート／ダウンロードできます。
306
+
307
+ ## ライセンス
308
+
309
+ MIT
310
+
311
+ ---
312
+
313
+ # 한국어
314
+
315
+ [简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ **한국어** ｜ [Deutsch](#deutsch) ｜ [Français](#français)
316
+
317
+ [drawui-core](https://www.npmjs.com/package/drawui-core) 기반의 React 래퍼로, 바로 쓸 수 있는 캔버스 컴포넌트를 제공합니다.
318
+
319
+ ## 설치
320
+
321
+ ```bash
322
+ npm install drawui-react # drawui-core도 자동으로 설치됩니다
323
+ ```
324
+
325
+ ## 사용법
326
+
327
+ ```tsx
328
+ import { CanvasBoard } from 'drawui-react'
329
+ import 'drawui-react/styles.css'
330
+ import type { Editor, EditorData } from 'drawui-core'
331
+
332
+ export function App() {
333
+ return (
334
+ <CanvasBoard
335
+ themeColor="#3b82f6"
336
+ language="ko-KR"
337
+ onChange={(data: EditorData) => console.log(data.shapes.length)}
338
+ onReady={(editor: Editor) => editor.setShapes([])}
339
+ />
340
+ )
341
+ }
342
+ ```
343
+
344
+ > 스타일은 별도로 불러와야 합니다: `import 'drawui-react/styles.css'`
345
+
346
+ ## `<CanvasBoard>` 주요 props
347
+
348
+ | props | 타입 | 설명 |
349
+ | --- | --- | --- |
350
+ | `initialTool` | `ToolType` | 초기 도구, 기본값 `'select'` |
351
+ | `themeColor` | `string` | 테마 기본 색상(선택 상태／핸들／강조색), 기본값 `#3b82f6` |
352
+ | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI 언어, 기본값 `'zh-CN'` |
353
+ | `data` | `Shape[]` | 초기 도형. 넘기면 localStorage를 읽거나 쓰지 않습니다 |
354
+ | `onChange` | `(data: EditorData) => void` | 도형／카메라 변경 시 호출 |
355
+ | `onReady` | `(editor: Editor) => void` | 에디터 준비 완료 시 호출되며 `Editor`를 완전히 제어할 수 있습니다 |
356
+
357
+ ## 내보내는 컴포넌트
358
+
359
+ - `CanvasBoard` — 메인 보드(툴바／확대·축소／스타일 패널／마인드맵 패널 등)
360
+ - `Toolbar` — 툴바
361
+ - `ZoomControl` — 확대·축소 컨트롤
362
+
363
+ ## 의존성
364
+
365
+ - `react` / `react-dom` ^18.3 (peerDependencies)
366
+ - `drawui-core` (자동 설치)
367
+
368
+ ## drawui를 사용하는 프로젝트
369
+
370
+ - **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) 기반의 리치 텍스트·문서 편집기. drawui 보드를 내장하여 문서 안에서 보드를 삽입·편집해 다이어그램, UML 클래스 다이어그램, 마인드맵 등을 그리고 문서와 함께 내보내기·다운로드할 수 있습니다.
371
+
372
+ ## 라이선스
373
+
374
+ MIT
375
+
376
+ ---
377
+
378
+ # Deutsch
379
+
380
+ [简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ **Deutsch** ｜ [Français](#français)
381
+
382
+ React-Wrapper für [drawui-core](https://www.npmjs.com/package/drawui-core) mit sofort einsetzbaren Canvas-Komponenten.
383
+
384
+ ## Installation
385
+
386
+ ```bash
387
+ npm install drawui-react # installiert drawui-core automatisch
388
+ ```
389
+
390
+ ## Verwendung
391
+
392
+ ```tsx
393
+ import { CanvasBoard } from 'drawui-react'
394
+ import 'drawui-react/styles.css'
395
+ import type { Editor, EditorData } from 'drawui-core'
396
+
397
+ export function App() {
398
+ return (
399
+ <CanvasBoard
400
+ themeColor="#3b82f6"
401
+ language="de-DE"
402
+ onChange={(data: EditorData) => console.log(data.shapes.length)}
403
+ onReady={(editor: Editor) => editor.setShapes([])}
404
+ />
405
+ )
406
+ }
407
+ ```
408
+
409
+ > Das Stylesheet muss separat importiert werden: `import 'drawui-react/styles.css'`
410
+
411
+ ## `<CanvasBoard>`-Props
412
+
413
+ | Prop | Typ | Beschreibung |
414
+ | --- | --- | --- |
415
+ | `initialTool` | `ToolType` | Startwerkzeug, Standard `'select'` |
416
+ | `themeColor` | `string` | Akzentfarbe des Themes (Auswahl / Griffe / Hervorhebungen), Standard `#3b82f6` |
417
+ | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI-Sprache, Standard `'zh-CN'` |
418
+ | `data` | `Shape[]` | Anfangsformen; wenn gesetzt, wird localStorage nicht gelesen oder geschrieben |
419
+ | `onChange` | `(data: EditorData) => void` | Wird bei Änderungen an Formen / Kamera aufgerufen |
420
+ | `onReady` | `(editor: Editor) => void` | Wird aufgerufen, sobald der Editor bereit ist (voller Zugriff auf `Editor`) |
421
+
422
+ ## Exportierte Komponenten
423
+
424
+ - `CanvasBoard` — das Hauptboard (Toolbar / Zoom / Stil-Panel / Mindmap-Panel, …)
425
+ - `Toolbar` — die Toolbar
426
+ - `ZoomControl` — die Zoom-Steuerung
427
+
428
+ ## Abhängigkeiten
429
+
430
+ - `react` / `react-dom` ^18.3 (peerDependencies)
431
+ - `drawui-core` (wird automatisch installiert)
432
+
433
+ ## Projekte, die drawui verwenden
434
+
435
+ - **[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.
436
+
437
+ ## Lizenz
438
+
439
+ MIT
440
+
441
+ ---
442
+
443
+ # Français
444
+
445
+ [简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ **Français**
446
+
447
+ Wrapper React pour [drawui-core](https://www.npmjs.com/package/drawui-core), avec des composants canvas prêts à l'emploi.
448
+
449
+ ## Installation
450
+
451
+ ```bash
452
+ npm install drawui-react # installe drawui-core automatiquement
453
+ ```
454
+
455
+ ## Utilisation
456
+
457
+ ```tsx
458
+ import { CanvasBoard } from 'drawui-react'
459
+ import 'drawui-react/styles.css'
460
+ import type { Editor, EditorData } from 'drawui-core'
461
+
462
+ export function App() {
463
+ return (
464
+ <CanvasBoard
465
+ themeColor="#3b82f6"
466
+ language="fr-FR"
467
+ onChange={(data: EditorData) => console.log(data.shapes.length)}
468
+ onReady={(editor: Editor) => editor.setShapes([])}
469
+ />
470
+ )
471
+ }
472
+ ```
473
+
474
+ > La feuille de style doit être importée séparément : `import 'drawui-react/styles.css'`
475
+
476
+ ## Props de `<CanvasBoard>`
477
+
478
+ | Prop | Type | Description |
479
+ | --- | --- | --- |
480
+ | `initialTool` | `ToolType` | Outil initial, `'select'` par défaut |
481
+ | `themeColor` | `string` | Couleur d'accentuation du thème (sélection / poignées / surlignage), `#3b82f6` par défaut |
482
+ | `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | Langue de l'interface, `'zh-CN'` par défaut |
483
+ | `data` | `Shape[]` | Formes initiales ; si fourni, localStorage n'est ni lu ni écrit |
484
+ | `onChange` | `(data: EditorData) => void` | Appelé lors des changements de formes / caméra |
485
+ | `onReady` | `(editor: Editor) => void` | Appelé dès que l'éditeur est prêt (accès complet à `Editor`) |
486
+
487
+ ## Composants exportés
488
+
489
+ - `CanvasBoard` — le tableau principal (barre d'outils / zoom / panneau de style / panneau de carte mentale, …)
490
+ - `Toolbar` — la barre d'outils
491
+ - `ZoomControl` — le contrôle de zoom
492
+
493
+ ## Dépendances
494
+
495
+ - `react` / `react-dom` ^18.3 (peerDependencies)
496
+ - `drawui-core` (installé automatiquement)
497
+
498
+ ## Projets utilisant drawui
499
+
500
+ - **[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.
501
+
502
+ ## Licence
503
+
504
+ MIT