drawui-react 0.5.0 → 0.5.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.
- package/README.md +564 -544
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,546 +1,566 @@
|
|
|
1
|
-
# drawui-react
|
|
2
|
-
|
|
3
|
-
**简体中文** ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
|
|
4
|
-
|
|
1
|
+
# drawui-react
|
|
2
|
+
|
|
3
|
+
**简体中文** ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
|
|
4
|
+
|
|
5
5
|
基于 [drawui-core](https://www.npmjs.com/package/drawui-core) 的 React 封装，提供开箱即用的画布组件。
|
|
6
6
|
|
|
7
|
-
> 🛠 **图片上传对接**（接 OSS / 自建后端）请看 [`../core/IMAGE_UPLOAD.md`](../core/IMAGE_UPLOAD.md)：含 `imageUpload` prop 的两种通道（`ImageUploadConfig` 与 `ImageUploader` 函数）、30 MB 体积上限、60 s 超时、OSS CORS 与 STS 直传示例。
|
|
8
|
-
|
|
9
|
-
## 安装
|
|
10
|
-
|
|
11
|
-
```bash
|
|
12
|
-
npm install drawui-react # 自动安装 drawui-core
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## 用法
|
|
16
|
-
|
|
17
|
-
```tsx
|
|
18
|
-
import { CanvasBoard } from 'drawui-react'
|
|
19
|
-
import 'drawui-react/styles.css'
|
|
20
|
-
import type { Editor, EditorData } from 'drawui-core'
|
|
21
|
-
|
|
22
|
-
export function App() {
|
|
23
|
-
return (
|
|
24
|
-
<CanvasBoard
|
|
25
|
-
themeColor="#3b82f6"
|
|
26
|
-
language="zh-CN"
|
|
27
|
-
onChange={(data: EditorData) => console.log(data.shapes.length)}
|
|
28
|
-
onReady={(editor: Editor) => editor.setShapes([])}
|
|
29
|
-
/>
|
|
30
|
-
)
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
> 样式需单独引入：`import 'drawui-react/styles.css'`
|
|
35
|
-
|
|
36
|
-
## `<CanvasBoard>` 主要属性
|
|
37
|
-
|
|
38
|
-
| 属性 | 类型 | 说明 |
|
|
39
|
-
| --- | --- | --- |
|
|
40
|
-
| `initialTool` | `ToolType` | 初始工具，默认 `'select'` |
|
|
41
|
-
| `themeColor` | `string` | 主题主色（选中态 / 手柄 / 强调色），默认 `#3b82f6` |
|
|
42
|
-
| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | 界面语言，默认 `'zh-CN'` |
|
|
43
|
-
| `data` | `Shape[]` | 初始图形；传入后不读写 localStorage |
|
|
44
|
-
| `onChange` | `(data: EditorData) => void` | 图形 / 相机变化时回调 |
|
|
45
|
-
| `onReady` | `(editor: Editor) => void` | 编辑器实例就绪，可拿到 `Editor` 完全控制 |
|
|
46
|
-
|
|
47
|
-
## 导出组件
|
|
48
|
-
|
|
49
|
-
- `CanvasBoard` — 主画布（含工具栏 / 缩放 / 样式面板 / 思维导图面板等）
|
|
50
|
-
- `Toolbar` — 工具栏
|
|
51
|
-
- `ZoomControl` — 缩放控件
|
|
52
|
-
|
|
53
|
-
## 依赖
|
|
54
|
-
|
|
55
|
-
- `react` / `react-dom` ^18.3（peerDependencies）
|
|
56
|
-
- `drawui-core`（自动安装）
|
|
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.5.
|
|
65
|
-
|
|
66
|
-
>
|
|
67
|
-
|
|
68
|
-
-
|
|
69
|
-
-
|
|
70
|
-
-
|
|
71
|
-
-
|
|
72
|
-
-
|
|
73
|
-
|
|
74
|
-
### v0.
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
-
|
|
79
|
-
-
|
|
80
|
-
-
|
|
81
|
-
-
|
|
82
|
-
-
|
|
83
|
-
|
|
84
|
-
### v0.4.
|
|
85
|
-
|
|
86
|
-
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
-
|
|
91
|
-
-
|
|
92
|
-
- 📦 依赖的 `drawui-core` 同步升级到 `0.4.
|
|
93
|
-
|
|
94
|
-
### v0.4.
|
|
95
|
-
|
|
96
|
-
-
|
|
97
|
-
-
|
|
98
|
-
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
### v0.
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
-
|
|
255
|
-
-
|
|
256
|
-
-
|
|
257
|
-
-
|
|
258
|
-
- 📦 Bundled `drawui-core` is bumped to `0.
|
|
259
|
-
|
|
260
|
-
### v0.
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
-
|
|
267
|
-
-
|
|
268
|
-
-
|
|
269
|
-
|
|
270
|
-
### v0.4.
|
|
271
|
-
|
|
272
|
-
-
|
|
273
|
-
-
|
|
274
|
-
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
7
|
+
> 🛠 **图片上传对接**（接 OSS / 自建后端）请看 [`../core/IMAGE_UPLOAD.md`](../core/IMAGE_UPLOAD.md)：含 `imageUpload` prop 的两种通道（`ImageUploadConfig` 与 `ImageUploader` 函数）、30 MB 体积上限、60 s 超时、OSS CORS 与 STS 直传示例。
|
|
8
|
+
|
|
9
|
+
## 安装
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install drawui-react # 自动安装 drawui-core
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## 用法
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { CanvasBoard } from 'drawui-react'
|
|
19
|
+
import 'drawui-react/styles.css'
|
|
20
|
+
import type { Editor, EditorData } from 'drawui-core'
|
|
21
|
+
|
|
22
|
+
export function App() {
|
|
23
|
+
return (
|
|
24
|
+
<CanvasBoard
|
|
25
|
+
themeColor="#3b82f6"
|
|
26
|
+
language="zh-CN"
|
|
27
|
+
onChange={(data: EditorData) => console.log(data.shapes.length)}
|
|
28
|
+
onReady={(editor: Editor) => editor.setShapes([])}
|
|
29
|
+
/>
|
|
30
|
+
)
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
> 样式需单独引入：`import 'drawui-react/styles.css'`
|
|
35
|
+
|
|
36
|
+
## `<CanvasBoard>` 主要属性
|
|
37
|
+
|
|
38
|
+
| 属性 | 类型 | 说明 |
|
|
39
|
+
| --- | --- | --- |
|
|
40
|
+
| `initialTool` | `ToolType` | 初始工具，默认 `'select'` |
|
|
41
|
+
| `themeColor` | `string` | 主题主色（选中态 / 手柄 / 强调色），默认 `#3b82f6` |
|
|
42
|
+
| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | 界面语言，默认 `'zh-CN'` |
|
|
43
|
+
| `data` | `Shape[]` | 初始图形；传入后不读写 localStorage |
|
|
44
|
+
| `onChange` | `(data: EditorData) => void` | 图形 / 相机变化时回调 |
|
|
45
|
+
| `onReady` | `(editor: Editor) => void` | 编辑器实例就绪，可拿到 `Editor` 完全控制 |
|
|
46
|
+
|
|
47
|
+
## 导出组件
|
|
48
|
+
|
|
49
|
+
- `CanvasBoard` — 主画布（含工具栏 / 缩放 / 样式面板 / 思维导图面板等）
|
|
50
|
+
- `Toolbar` — 工具栏
|
|
51
|
+
- `ZoomControl` — 缩放控件
|
|
52
|
+
|
|
53
|
+
## 依赖
|
|
54
|
+
|
|
55
|
+
- `react` / `react-dom` ^18.3（peerDependencies）
|
|
56
|
+
- `drawui-core`（自动安装）
|
|
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.5.1
|
|
65
|
+
|
|
66
|
+
> 主题：**思维导图四方向布局与交互重做**（依赖 `drawui-core@0.5.1`）
|
|
67
|
+
|
|
68
|
+
- 🧭 **思维导图核心图支持四方向生长**：根节点上下左右都能加子节点，子节点继承父方向；连线四面同构、对齐。
|
|
69
|
+
- 🔒 **拖拽改为同方向重排序**：跨方向互不交换，需拖过邻节点中心才换位。
|
|
70
|
+
- 🟦 **拖拽落点预览**：重排时显示虚线圆角占位框（与被拖节点等大）。
|
|
71
|
+
- ✋ **点「+」加号不再进入文本编辑态**：`MindMapPanel` 移除「+ 子节点」「+ 兄弟节点」两个按钮，加节点统一走画布加号（与 core 新交互一致）。
|
|
72
|
+
- 📦 依赖的 `drawui-core` 同步升级到 `0.5.1`。
|
|
73
|
+
|
|
74
|
+
### v0.5.0
|
|
75
|
+
|
|
76
|
+
> 主题：**图片上传通道**（OSS / 自建后端友好）
|
|
77
|
+
|
|
78
|
+
- 🛡️ **单张图片体积上限 30 MB**：超过上限直接拒绝（抛 `image.tooLarge`），不会真的发请求；接入方可按需通过 `imageUpload.maxSizeBytes` 自定义。
|
|
79
|
+
- ⏱ **上传超时 30 s → 60 s**：默认 `timeoutMs` 从 30000 调整为 60000。
|
|
80
|
+
- 🧰 **`imageUpload` 现在支持两种通道**：`ImageUploadConfig`（配 `{ url, method, headers, responseUrlPath, timeoutMs, maxSizeBytes }`）或 `ImageUploader` 函数（`(file: File) => Promise<string>`），函数优先级高于配置。
|
|
81
|
+
- 🌐 **多语言新增 `image.tooLarge` 文案**：7 种语言全部同步，体积超限时 toast 用对应语言提示用户。
|
|
82
|
+
- 📄 **图片上传对接指南**：[`../core/IMAGE_UPLOAD.md`](../core/IMAGE_UPLOAD.md)。
|
|
83
|
+
|
|
84
|
+
### v0.4.2
|
|
85
|
+
|
|
86
|
+
- 🖱️ **画布右键菜单（新增 `ContextMenu` 组件）**：选中图形右键弹出飞书式菜单 —— 复制 / 复制为图片 / 粘贴 / 创建副本 / **层级**（置于顶层 / 上移一层 / 下移一层 / 置于底层，悬停展开子菜单）/ 复制样式 / 粘贴样式 / 水平翻转 / 垂直翻转 / 旋转 / **成组 · 解组** / 锁定 / 删除，每项带快捷键标注，无操作能力的项自动置灰；空白处右键只显示「粘贴」，右键锁定的图形只显示「解锁 / 解组」。菜单自动贴边避让视口，点击外部或 `Esc` 关闭，文案随语言切换（7 种语言已补齐）。
|
|
87
|
+
- 🚫 **接管全部右键**：画板容器与 canvas 两层拦截 `contextmenu`，工具栏、样式面板、小地图上右键都不再弹出浏览器原生菜单（不会再出现「图片另存为」）。
|
|
88
|
+
- 🔒 **锁定**：锁定的图形由 core 在包围盒右上角画出**挂锁标记**（20×20 屏幕像素，随缩放不变），一眼可知「为什么点不动」。
|
|
89
|
+
- 👥 **分组 = 给多个图形绑一把锁**：选中多个图形右键「**成组**」`Ctrl+G` 后整组锁定，点不中拖不动；右键组内成员 → 「解锁本组 / 解组」解锁；解锁后点任一成员即选中整组，画布上有**虚线组框**。`Ctrl+Shift+G` 解组。
|
|
90
|
+
- ↔️ **水平 / 垂直翻转** `Shift+H` / `Shift+V`（菜单里也有入口），画布与导出同源呈现。
|
|
91
|
+
- 🖐️ **按住拖拽生成图形**：绘制工具按下后拖过 5px 即随手势放大缩小，圆形取拖拽长边做直径，矩形 / 圆角矩形等支持 `Shift` 锁定默认宽高比。
|
|
92
|
+
- 📦 依赖的 `drawui-core` 同步升级到 `0.4.2`。
|
|
93
|
+
|
|
94
|
+
### v0.4.1
|
|
95
|
+
|
|
96
|
+
- 📊 **新增「表格」图形与完整编辑体验**：工具栏独立「表格」按钮 + 8×6 选择器插入；选中后浮出**表格悬浮工具条**（插入 / 删除行列、合并 / 拆分单元格），双击单元格进入就地编辑。
|
|
97
|
+
- **飞书式选区**：表格内拖拽 = 框选单元格（拖到表格外自动扩成整行 / 整列），只有左上角六点把手能拖动整张表；选区浅蓝高亮，点合并块内任意一格即选中整块。
|
|
98
|
+
- **插入 / 删除可指定位置**：主体按钮 = 下方 / 右侧插入，箭头展开「上方 / 下方 / 左侧 / 右侧」位置菜单；删除作用于选区覆盖的所有行列，且只占一步撤销。
|
|
99
|
+
- **文字自动换行 + 行高按内容增高**：就地编辑框改为自动增高的 textarea，编辑时的折行与画布、SVG 导出完全一致。
|
|
100
|
+
- ✨ **体验优化**：网格线对齐物理像素（非 100% 缩放不再「发花」）；悬停全文提示只在文字被截断时弹出；撤销粒度修正为「一个编辑会话 = 一步」；界面文字不再被拖蓝选中复制；工具栏下拉 / 弹层层级高于画布浮层，不再被样式面板盖住。
|
|
101
|
+
- 🐞 **UML 修复**：行文字统一由 `drawui-core` 的 `uml.ts` 生成（画布 / 导出 / 尺寸同源）；整行可自由删除（含可见性符号），删空即空白；就地编辑不再「删到冒号就删不动」。
|
|
102
|
+
- 📦 依赖的 `drawui-core` 同步升级到 `0.4.1`。
|
|
103
|
+
|
|
104
|
+
### v0.4.0
|
|
105
|
+
|
|
106
|
+
- 💾 **工具栏新增「导出数据 / 导入数据」**：把完整文档（图形 + 相机 + 版本号）存成 JSON，下次导入即可继续绘制；导入成功提示「已恢复 N 个图形」，导入失败（选错文件 / 格式不对）显示红色 ✕ 提示，不再无声无息（基于 `drawui-core` 的 `exportJSON` / `importJSON`）。
|
|
107
|
+
- 🎛️ **图标库面板大幅扩展**：新增「表情」分类（113 个 Twemoji 表情，CC BY 4.0 可免费商用）与 12 个 Lucide 补充分类（天气 / 交通 / 自然 / 建筑 / 医疗 / 购物 / 科学 / 动物 / 时间 / 编辑 / 食物 / 通讯）；**移除全部商业品牌图标**（商标侵权风险）；工具栏入口图标改为线稿**笑脸**，语义更直观。
|
|
108
|
+
- 📦 依赖的 `drawui-core` 同步升级到 `0.4.0`。
|
|
109
|
+
|
|
110
|
+
### v0.3.6
|
|
111
|
+
|
|
112
|
+
- 🌏 `language` 新增 5 种语言：`zh-TW`、`ja-JP`、`ko-KR`、`de-DE`、`fr-FR`（连同简体中文 / English 共 7 种），画布内所有界面文案同步翻译。
|
|
113
|
+
- 📦 依赖的 `drawui-core` 同步升级到 `0.3.6`（新增 `LANGUAGES` 导出，含各语言本族语名称）。
|
|
114
|
+
- ℹ️ 语言字典改为 `Record<MessageKey, string>` 强约束，任一语言漏翻 key 会在编译期直接报错。
|
|
115
|
+
|
|
116
|
+
> 更早版本的完整记录见仓库根目录 README。
|
|
117
|
+
|
|
118
|
+
## License
|
|
119
|
+
|
|
120
|
+
MIT
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
# 繁體中文
|
|
125
|
+
|
|
126
|
+
[简体中文](#drawui-react) ｜ **繁體中文** ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
|
|
127
|
+
|
|
128
|
+
以 [drawui-core](https://www.npmjs.com/package/drawui-core) 為基礎的 React 封裝，提供開箱即用的畫布元件。
|
|
129
|
+
|
|
130
|
+
## 安裝
|
|
131
|
+
|
|
132
|
+
```bash
|
|
133
|
+
npm install drawui-react # 會自動安裝 drawui-core
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## 用法
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
import { CanvasBoard } from 'drawui-react'
|
|
140
|
+
import 'drawui-react/styles.css'
|
|
141
|
+
import type { Editor, EditorData } from 'drawui-core'
|
|
142
|
+
|
|
143
|
+
export function App() {
|
|
144
|
+
return (
|
|
145
|
+
<CanvasBoard
|
|
146
|
+
themeColor="#3b82f6"
|
|
147
|
+
language="zh-TW"
|
|
148
|
+
onChange={(data: EditorData) => console.log(data.shapes.length)}
|
|
149
|
+
onReady={(editor: Editor) => editor.setShapes([])}
|
|
150
|
+
/>
|
|
151
|
+
)
|
|
152
|
+
}
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
> 樣式需單獨引入：`import 'drawui-react/styles.css'`
|
|
156
|
+
|
|
157
|
+
## `<CanvasBoard>` 主要屬性
|
|
158
|
+
|
|
159
|
+
| 屬性 | 型別 | 說明 |
|
|
160
|
+
| --- | --- | --- |
|
|
161
|
+
| `initialTool` | `ToolType` | 初始工具，預設 `'select'` |
|
|
162
|
+
| `themeColor` | `string` | 主題主色（選取態／手柄／強調色），預設 `#3b82f6` |
|
|
163
|
+
| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | 介面語言，預設 `'zh-CN'` |
|
|
164
|
+
| `data` | `Shape[]` | 初始圖形；傳入後不讀寫 localStorage |
|
|
165
|
+
| `onChange` | `(data: EditorData) => void` | 圖形／相機變化時回呼 |
|
|
166
|
+
| `onReady` | `(editor: Editor) => void` | 編輯器實例就緒，可取得 `Editor` 完全控制 |
|
|
167
|
+
|
|
168
|
+
## 匯出元件
|
|
169
|
+
|
|
170
|
+
- `CanvasBoard` — 主畫布（含工具列／縮放／樣式面板／心智圖面板等）
|
|
171
|
+
- `Toolbar` — 工具列
|
|
172
|
+
- `ZoomControl` — 縮放控制項
|
|
173
|
+
|
|
174
|
+
## 相依
|
|
175
|
+
|
|
176
|
+
- `react` / `react-dom` ^18.3（peerDependencies）
|
|
177
|
+
- `drawui-core`（自動安裝）
|
|
178
|
+
|
|
179
|
+
## 使用 drawui 的專案
|
|
180
|
+
|
|
181
|
+
- **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基於 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文字／文件編輯器，已整合 drawui 畫板：可在文件中直接插入並編輯畫板，用於繪製圖示、UML 類別圖、心智圖等，並隨文件一起匯出／下載。
|
|
182
|
+
|
|
183
|
+
## License
|
|
184
|
+
|
|
185
|
+
MIT
|
|
186
|
+
|
|
187
|
+
---
|
|
188
|
+
|
|
189
|
+
# English
|
|
190
|
+
|
|
191
|
+
[简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ **English** ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
|
|
192
|
+
|
|
193
|
+
React wrapper for [drawui-core](https://www.npmjs.com/package/drawui-core), with drop-in canvas components.
|
|
194
|
+
|
|
195
|
+
## Install
|
|
196
|
+
|
|
197
|
+
```bash
|
|
198
|
+
npm install drawui-react # installs drawui-core automatically
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Usage
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
import { CanvasBoard } from 'drawui-react'
|
|
205
|
+
import 'drawui-react/styles.css'
|
|
206
|
+
import type { Editor, EditorData } from 'drawui-core'
|
|
207
|
+
|
|
208
|
+
export function App() {
|
|
209
|
+
return (
|
|
210
|
+
<CanvasBoard
|
|
211
|
+
themeColor="#3b82f6"
|
|
212
|
+
language="en-US"
|
|
213
|
+
onChange={(data: EditorData) => console.log(data.shapes.length)}
|
|
214
|
+
onReady={(editor: Editor) => editor.setShapes([])}
|
|
215
|
+
/>
|
|
216
|
+
)
|
|
217
|
+
}
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
> The stylesheet must be imported separately: `import 'drawui-react/styles.css'`
|
|
221
|
+
|
|
222
|
+
## `<CanvasBoard>` props
|
|
223
|
+
|
|
224
|
+
| Prop | Type | Description |
|
|
225
|
+
| --- | --- | --- |
|
|
226
|
+
| `initialTool` | `ToolType` | Initial tool, defaults to `'select'` |
|
|
227
|
+
| `themeColor` | `string` | Theme accent (selection / handles / highlights), defaults to `#3b82f6` |
|
|
228
|
+
| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI language, defaults to `'zh-CN'` |
|
|
229
|
+
| `data` | `Shape[]` | Initial shapes; when provided, localStorage is not read or written |
|
|
230
|
+
| `onChange` | `(data: EditorData) => void` | Called when shapes / camera change |
|
|
231
|
+
| `onReady` | `(editor: Editor) => void` | Called once the editor is ready (full `Editor` access) |
|
|
232
|
+
|
|
233
|
+
## Exported components
|
|
234
|
+
|
|
235
|
+
- `CanvasBoard` — the main board (toolbar / zoom / style panel / mind-map panel, …)
|
|
236
|
+
- `Toolbar` — the toolbar
|
|
237
|
+
- `ZoomControl` — the zoom control
|
|
238
|
+
|
|
239
|
+
## Dependencies
|
|
240
|
+
|
|
241
|
+
- `react` / `react-dom` ^18.3 (peerDependencies)
|
|
242
|
+
- `drawui-core` (installed automatically)
|
|
243
|
+
|
|
244
|
+
## Projects using drawui
|
|
245
|
+
|
|
246
|
+
- **[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.
|
|
247
|
+
|
|
248
|
+
## Changelog
|
|
249
|
+
|
|
250
|
+
### v0.5.1
|
|
251
|
+
|
|
252
|
+
> Theme: **Mind map four-direction layout & interaction rework** (depends on `drawui-core@0.5.1`)
|
|
253
|
+
|
|
254
|
+
- 🧭 **Mind map root grows in all four directions**: add children up/down/left/right from the root; children inherit the parent's direction; connections are isomorphic and aligned on all four sides.
|
|
255
|
+
- 🔒 **Drag = same-direction reordering**: cross-direction groups never swap; a swap only happens once the pointer passes a neighbour's center.
|
|
256
|
+
- 🟦 **Reorder drop preview**: a dashed rounded placeholder the same size as the dragged node shows where it will land.
|
|
257
|
+
- ✋ **Clicking "+" no longer enters text-edit**: `MindMapPanel` drops the "+ child" / "+ sibling" buttons; adding nodes goes through the on-canvas "+" handles (matching the new core behaviour).
|
|
258
|
+
- 📦 Bundled `drawui-core` is bumped to `0.5.1`.
|
|
259
|
+
|
|
260
|
+
### v0.5.0
|
|
261
|
+
|
|
262
|
+
> Theme: **Image upload channel** (OSS / custom backend friendly)
|
|
263
|
+
|
|
264
|
+
- 🛡️ **30 MB per-image size cap**: oversized images are rejected before any request is sent (throws `image.tooLarge`); overridable via `imageUpload.maxSizeBytes`.
|
|
265
|
+
- ⏱ **Upload timeout 30 s → 60 s**: default `timeoutMs` bumped from 30000 to 60000.
|
|
266
|
+
- 🧰 **`imageUpload` now accepts two channels**: `ImageUploadConfig` (with `{ url, method, headers, responseUrlPath, timeoutMs, maxSizeBytes }`) **or** an `ImageUploader` function (`(file: File) => Promise<string>`); the function takes priority over the config.
|
|
267
|
+
- 🌐 **`image.tooLarge` localized**: added in all 7 supported languages so the size-cap toast always uses the user's language.
|
|
268
|
+
- 📄 **Image upload integration guide**: see [`../core/IMAGE_UPLOAD.md`](../core/IMAGE_UPLOAD.md).
|
|
269
|
+
|
|
270
|
+
### v0.4.2
|
|
271
|
+
|
|
272
|
+
- 🖱️ **Canvas context menu (new `ContextMenu` component)**: right-clicking a selected shape opens a Feishu-style menu — copy / copy as image / paste / duplicate / **layer** (hover to expand: bring to front / forward / backward / send to back) / copy style / paste style / flip horizontal / flip vertical / rotate / **group · ungroup** / lock / delete, each with its shortcut, unavailable entries greyed out. Right-clicking empty space shows only "Paste"; right-clicking a locked shape shows only "Unlock / Ungroup". The menu clamps itself into the viewport and closes on outside click or `Esc`; all copy is translated into 7 languages.
|
|
273
|
+
- 🚫 **Right-click fully taken over**: the board container and the canvas both intercept `contextmenu`, so right-clicking the toolbar, style panel or minimap no longer opens the browser's native menu (no more "Save image as").
|
|
274
|
+
- 🔒 **Locking**: locked shapes get a **padlock badge** drawn by core at the top-right of their bounds (20×20 screen pixels, zoom-independent) — you can see at a glance why a shape won't respond.
|
|
275
|
+
- 👥 **Groups = one lock shared by several shapes**: select several shapes and pick "**Group**" (`Ctrl+G`) to lock the whole group at once — it can't be picked, dragged or deleted. Right-click any member → "Unlock group / Ungroup" to release it. Once unlocked, clicking any member selects the entire group, and the canvas draws a **dashed frame** around it. `Ctrl+Shift+G` ungroups.
|
|
276
|
+
- ↔️ **Flip horizontal / vertical** with `Shift+H` / `Shift+V` (also available in the menu), rendered identically on canvas and in exports.
|
|
277
|
+
- 🖐️ **Drag to size while drawing**: press and drag past 5px on any shape tool to grow the shape live; circles take the longer drag edge as their diameter, and `Shift` locks each shape's default aspect ratio.
|
|
278
|
+
- 📦 Bundled `drawui-core` is bumped to `0.4.2`.
|
|
279
|
+
|
|
280
|
+
### v0.4.1
|
|
281
|
+
|
|
282
|
+
- 📊 **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.
|
|
283
|
+
- **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.
|
|
284
|
+
- **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.
|
|
285
|
+
- **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.
|
|
286
|
+
- ✨ **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.
|
|
287
|
+
- 🐞 **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.
|
|
288
|
+
- 📦 Bundled `drawui-core` is bumped to `0.4.1`.
|
|
289
|
+
|
|
290
|
+
### v0.4.0
|
|
291
|
+
|
|
292
|
+
- 💾 **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`).
|
|
293
|
+
- 🎛️ **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.
|
|
294
|
+
- 📦 Bundled `drawui-core` is bumped to `0.4.0`.
|
|
295
|
+
|
|
296
|
+
### v0.3.6
|
|
297
|
+
|
|
298
|
+
- 🌏 `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.
|
|
299
|
+
- 📦 The bundled `drawui-core` is bumped to `0.3.6` (adds the `LANGUAGES` export with each language's native name).
|
|
300
|
+
- ℹ️ Dictionaries are now typed as `Record<MessageKey, string>`, so a missing key in any language fails at compile time.
|
|
301
|
+
|
|
302
|
+
> The full history lives in the repository root README.
|
|
303
|
+
|
|
304
|
+
## License
|
|
305
|
+
|
|
306
|
+
MIT
|
|
307
|
+
|
|
308
|
+
---
|
|
309
|
+
|
|
310
|
+
# 日本語
|
|
311
|
+
|
|
312
|
+
[简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ **日本語** ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ [Français](#français)
|
|
313
|
+
|
|
314
|
+
[drawui-core](https://www.npmjs.com/package/drawui-core) の React ラッパー。すぐに使えるキャンバスコンポーネントを提供します。
|
|
315
|
+
|
|
316
|
+
## インストール
|
|
317
|
+
|
|
318
|
+
```bash
|
|
319
|
+
npm install drawui-react # drawui-core も自動でインストールされます
|
|
320
|
+
```
|
|
321
|
+
|
|
322
|
+
## 使い方
|
|
323
|
+
|
|
324
|
+
```tsx
|
|
325
|
+
import { CanvasBoard } from 'drawui-react'
|
|
326
|
+
import 'drawui-react/styles.css'
|
|
327
|
+
import type { Editor, EditorData } from 'drawui-core'
|
|
328
|
+
|
|
329
|
+
export function App() {
|
|
330
|
+
return (
|
|
331
|
+
<CanvasBoard
|
|
332
|
+
themeColor="#3b82f6"
|
|
333
|
+
language="ja-JP"
|
|
334
|
+
onChange={(data: EditorData) => console.log(data.shapes.length)}
|
|
335
|
+
onReady={(editor: Editor) => editor.setShapes([])}
|
|
336
|
+
/>
|
|
337
|
+
)
|
|
338
|
+
}
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
> スタイルは別途インポートが必要です：`import 'drawui-react/styles.css'`
|
|
342
|
+
|
|
343
|
+
## `<CanvasBoard>` の主な props
|
|
344
|
+
|
|
345
|
+
| props | 型 | 説明 |
|
|
346
|
+
| --- | --- | --- |
|
|
347
|
+
| `initialTool` | `ToolType` | 初期ツール。既定は `'select'` |
|
|
348
|
+
| `themeColor` | `string` | テーマのメインカラー（選択状態／ハンドル／強調色）。既定は `#3b82f6` |
|
|
349
|
+
| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI の言語。既定は `'zh-CN'` |
|
|
350
|
+
| `data` | `Shape[]` | 初期図形。渡した場合 localStorage の読み書きは行いません |
|
|
351
|
+
| `onChange` | `(data: EditorData) => void` | 図形／カメラの変化時に呼ばれます |
|
|
352
|
+
| `onReady` | `(editor: Editor) => void` | エディタの準備完了時に呼ばれ、`Editor` を完全に操作できます |
|
|
353
|
+
|
|
354
|
+
## エクスポートされるコンポーネント
|
|
355
|
+
|
|
356
|
+
- `CanvasBoard` — メインのボード（ツールバー／ズーム／スタイルパネル／マインドマップパネルなど）
|
|
357
|
+
- `Toolbar` — ツールバー
|
|
358
|
+
- `ZoomControl` — ズームコントロール
|
|
359
|
+
|
|
360
|
+
## 依存関係
|
|
361
|
+
|
|
362
|
+
- `react` / `react-dom` ^18.3（peerDependencies）
|
|
363
|
+
- `drawui-core`（自動でインストール）
|
|
364
|
+
|
|
365
|
+
## drawui を利用しているプロジェクト
|
|
366
|
+
|
|
367
|
+
- **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) ベースのリッチテキスト／ドキュメントエディタ。drawui のボードを組み込んでおり、ドキュメント内でボードを挿入・編集して図、UML クラス図、マインドマップなどを描画し、ドキュメントと一緒にエクスポート／ダウンロードできます。
|
|
368
|
+
|
|
369
|
+
## ライセンス
|
|
370
|
+
|
|
371
|
+
MIT
|
|
372
|
+
|
|
373
|
+
---
|
|
374
|
+
|
|
375
|
+
# 한국어
|
|
376
|
+
|
|
377
|
+
[简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ **한국어** ｜ [Deutsch](#deutsch) ｜ [Français](#français)
|
|
378
|
+
|
|
379
|
+
[drawui-core](https://www.npmjs.com/package/drawui-core) 기반의 React 래퍼로, 바로 쓸 수 있는 캔버스 컴포넌트를 제공합니다.
|
|
380
|
+
|
|
381
|
+
## 설치
|
|
382
|
+
|
|
383
|
+
```bash
|
|
384
|
+
npm install drawui-react # drawui-core도 자동으로 설치됩니다
|
|
385
|
+
```
|
|
386
|
+
|
|
387
|
+
## 사용법
|
|
388
|
+
|
|
389
|
+
```tsx
|
|
390
|
+
import { CanvasBoard } from 'drawui-react'
|
|
391
|
+
import 'drawui-react/styles.css'
|
|
392
|
+
import type { Editor, EditorData } from 'drawui-core'
|
|
393
|
+
|
|
394
|
+
export function App() {
|
|
395
|
+
return (
|
|
396
|
+
<CanvasBoard
|
|
397
|
+
themeColor="#3b82f6"
|
|
398
|
+
language="ko-KR"
|
|
399
|
+
onChange={(data: EditorData) => console.log(data.shapes.length)}
|
|
400
|
+
onReady={(editor: Editor) => editor.setShapes([])}
|
|
401
|
+
/>
|
|
402
|
+
)
|
|
403
|
+
}
|
|
404
|
+
```
|
|
405
|
+
|
|
406
|
+
> 스타일은 별도로 불러와야 합니다: `import 'drawui-react/styles.css'`
|
|
407
|
+
|
|
408
|
+
## `<CanvasBoard>` 주요 props
|
|
409
|
+
|
|
410
|
+
| props | 타입 | 설명 |
|
|
411
|
+
| --- | --- | --- |
|
|
412
|
+
| `initialTool` | `ToolType` | 초기 도구, 기본값 `'select'` |
|
|
413
|
+
| `themeColor` | `string` | 테마 기본 색상(선택 상태／핸들／강조색), 기본값 `#3b82f6` |
|
|
414
|
+
| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI 언어, 기본값 `'zh-CN'` |
|
|
415
|
+
| `data` | `Shape[]` | 초기 도형. 넘기면 localStorage를 읽거나 쓰지 않습니다 |
|
|
416
|
+
| `onChange` | `(data: EditorData) => void` | 도형／카메라 변경 시 호출 |
|
|
417
|
+
| `onReady` | `(editor: Editor) => void` | 에디터 준비 완료 시 호출되며 `Editor`를 완전히 제어할 수 있습니다 |
|
|
418
|
+
|
|
419
|
+
## 내보내는 컴포넌트
|
|
420
|
+
|
|
421
|
+
- `CanvasBoard` — 메인 보드(툴바／확대·축소／스타일 패널／마인드맵 패널 등)
|
|
422
|
+
- `Toolbar` — 툴바
|
|
423
|
+
- `ZoomControl` — 확대·축소 컨트롤
|
|
424
|
+
|
|
425
|
+
## 의존성
|
|
426
|
+
|
|
427
|
+
- `react` / `react-dom` ^18.3 (peerDependencies)
|
|
428
|
+
- `drawui-core` (자동 설치)
|
|
429
|
+
|
|
430
|
+
## drawui를 사용하는 프로젝트
|
|
431
|
+
|
|
432
|
+
- **[myBookEditor](https://github.com/weishell/myBookEditor)** — [Slate.js](https://github.com/ianstormtaylor/slate) 기반의 리치 텍스트·문서 편집기. drawui 보드를 내장하여 문서 안에서 보드를 삽입·편집해 다이어그램, UML 클래스 다이어그램, 마인드맵 등을 그리고 문서와 함께 내보내기·다운로드할 수 있습니다.
|
|
433
|
+
|
|
434
|
+
## 라이선스
|
|
435
|
+
|
|
436
|
+
MIT
|
|
437
|
+
|
|
438
|
+
---
|
|
439
|
+
|
|
440
|
+
# Deutsch
|
|
441
|
+
|
|
442
|
+
[简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ **Deutsch** ｜ [Français](#français)
|
|
443
|
+
|
|
444
|
+
React-Wrapper für [drawui-core](https://www.npmjs.com/package/drawui-core) mit sofort einsetzbaren Canvas-Komponenten.
|
|
445
|
+
|
|
446
|
+
## Installation
|
|
447
|
+
|
|
448
|
+
```bash
|
|
449
|
+
npm install drawui-react # installiert drawui-core automatisch
|
|
450
|
+
```
|
|
451
|
+
|
|
452
|
+
## Verwendung
|
|
453
|
+
|
|
454
|
+
```tsx
|
|
455
|
+
import { CanvasBoard } from 'drawui-react'
|
|
456
|
+
import 'drawui-react/styles.css'
|
|
457
|
+
import type { Editor, EditorData } from 'drawui-core'
|
|
458
|
+
|
|
459
|
+
export function App() {
|
|
460
|
+
return (
|
|
461
|
+
<CanvasBoard
|
|
462
|
+
themeColor="#3b82f6"
|
|
463
|
+
language="de-DE"
|
|
464
|
+
onChange={(data: EditorData) => console.log(data.shapes.length)}
|
|
465
|
+
onReady={(editor: Editor) => editor.setShapes([])}
|
|
466
|
+
/>
|
|
467
|
+
)
|
|
468
|
+
}
|
|
469
|
+
```
|
|
470
|
+
|
|
471
|
+
> Das Stylesheet muss separat importiert werden: `import 'drawui-react/styles.css'`
|
|
472
|
+
|
|
473
|
+
## `<CanvasBoard>`-Props
|
|
474
|
+
|
|
475
|
+
| Prop | Typ | Beschreibung |
|
|
476
|
+
| --- | --- | --- |
|
|
477
|
+
| `initialTool` | `ToolType` | Startwerkzeug, Standard `'select'` |
|
|
478
|
+
| `themeColor` | `string` | Akzentfarbe des Themes (Auswahl / Griffe / Hervorhebungen), Standard `#3b82f6` |
|
|
479
|
+
| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | UI-Sprache, Standard `'zh-CN'` |
|
|
480
|
+
| `data` | `Shape[]` | Anfangsformen; wenn gesetzt, wird localStorage nicht gelesen oder geschrieben |
|
|
481
|
+
| `onChange` | `(data: EditorData) => void` | Wird bei Änderungen an Formen / Kamera aufgerufen |
|
|
482
|
+
| `onReady` | `(editor: Editor) => void` | Wird aufgerufen, sobald der Editor bereit ist (voller Zugriff auf `Editor`) |
|
|
483
|
+
|
|
484
|
+
## Exportierte Komponenten
|
|
485
|
+
|
|
486
|
+
- `CanvasBoard` — das Hauptboard (Toolbar / Zoom / Stil-Panel / Mindmap-Panel, …)
|
|
487
|
+
- `Toolbar` — die Toolbar
|
|
488
|
+
- `ZoomControl` — die Zoom-Steuerung
|
|
489
|
+
|
|
490
|
+
## Abhängigkeiten
|
|
491
|
+
|
|
492
|
+
- `react` / `react-dom` ^18.3 (peerDependencies)
|
|
493
|
+
- `drawui-core` (wird automatisch installiert)
|
|
494
|
+
|
|
495
|
+
## Projekte, die drawui verwenden
|
|
496
|
+
|
|
497
|
+
- **[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.
|
|
498
|
+
|
|
499
|
+
## Lizenz
|
|
500
|
+
|
|
501
|
+
MIT
|
|
502
|
+
|
|
503
|
+
---
|
|
504
|
+
|
|
505
|
+
# Français
|
|
506
|
+
|
|
507
|
+
[简体中文](#drawui-react) ｜ [繁體中文](#繁體中文) ｜ [English](#english) ｜ [日本語](#日本語) ｜ [한국어](#한국어) ｜ [Deutsch](#deutsch) ｜ **Français**
|
|
508
|
+
|
|
509
|
+
Wrapper React pour [drawui-core](https://www.npmjs.com/package/drawui-core), avec des composants canvas prêts à l'emploi.
|
|
510
|
+
|
|
511
|
+
## Installation
|
|
512
|
+
|
|
513
|
+
```bash
|
|
514
|
+
npm install drawui-react # installe drawui-core automatiquement
|
|
515
|
+
```
|
|
516
|
+
|
|
517
|
+
## Utilisation
|
|
518
|
+
|
|
519
|
+
```tsx
|
|
520
|
+
import { CanvasBoard } from 'drawui-react'
|
|
521
|
+
import 'drawui-react/styles.css'
|
|
522
|
+
import type { Editor, EditorData } from 'drawui-core'
|
|
523
|
+
|
|
524
|
+
export function App() {
|
|
525
|
+
return (
|
|
526
|
+
<CanvasBoard
|
|
527
|
+
themeColor="#3b82f6"
|
|
528
|
+
language="fr-FR"
|
|
529
|
+
onChange={(data: EditorData) => console.log(data.shapes.length)}
|
|
530
|
+
onReady={(editor: Editor) => editor.setShapes([])}
|
|
531
|
+
/>
|
|
532
|
+
)
|
|
533
|
+
}
|
|
534
|
+
```
|
|
535
|
+
|
|
536
|
+
> La feuille de style doit être importée séparément : `import 'drawui-react/styles.css'`
|
|
537
|
+
|
|
538
|
+
## Props de `<CanvasBoard>`
|
|
539
|
+
|
|
540
|
+
| Prop | Type | Description |
|
|
541
|
+
| --- | --- | --- |
|
|
542
|
+
| `initialTool` | `ToolType` | Outil initial, `'select'` par défaut |
|
|
543
|
+
| `themeColor` | `string` | Couleur d'accentuation du thème (sélection / poignées / surlignage), `#3b82f6` par défaut |
|
|
544
|
+
| `language` | `'zh-CN' \| 'zh-TW' \| 'en-US' \| 'ja-JP' \| 'ko-KR' \| 'de-DE' \| 'fr-FR'` | Langue de l'interface, `'zh-CN'` par défaut |
|
|
545
|
+
| `data` | `Shape[]` | Formes initiales ; si fourni, localStorage n'est ni lu ni écrit |
|
|
546
|
+
| `onChange` | `(data: EditorData) => void` | Appelé lors des changements de formes / caméra |
|
|
547
|
+
| `onReady` | `(editor: Editor) => void` | Appelé dès que l'éditeur est prêt (accès complet à `Editor`) |
|
|
548
|
+
|
|
549
|
+
## Composants exportés
|
|
550
|
+
|
|
551
|
+
- `CanvasBoard` — le tableau principal (barre d'outils / zoom / panneau de style / panneau de carte mentale, …)
|
|
552
|
+
- `Toolbar` — la barre d'outils
|
|
553
|
+
- `ZoomControl` — le contrôle de zoom
|
|
554
|
+
|
|
555
|
+
## Dépendances
|
|
556
|
+
|
|
557
|
+
- `react` / `react-dom` ^18.3 (peerDependencies)
|
|
558
|
+
- `drawui-core` (installé automatiquement)
|
|
559
|
+
|
|
560
|
+
## Projets utilisant drawui
|
|
561
|
+
|
|
562
|
+
- **[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.
|
|
563
|
+
|
|
564
|
+
## Licence
|
|
565
|
+
|
|
566
|
+
MIT
|