drawui-core 0.3.0 → 0.3.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 +72 -1
- package/dist/index.cjs +17 -17
- package/dist/index.d.cts +178 -5
- package/dist/index.d.ts +178 -5
- package/dist/index.js +17 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
# drawui-core
|
|
2
2
|
|
|
3
|
+
**简体中文** ｜ [English](#english)
|
|
4
|
+
|
|
3
5
|
框架无关的核心画布绘图引擎（原生 TypeScript，无 UI 框架依赖）。
|
|
4
6
|
|
|
5
|
-
配套 React 封装见 [
|
|
7
|
+
配套 React 封装见 [drawui-react](https://www.npmjs.com/package/drawui-react)。
|
|
6
8
|
|
|
7
9
|
## 安装
|
|
8
10
|
|
|
@@ -51,6 +53,75 @@ interface EditorOptions {
|
|
|
51
53
|
}
|
|
52
54
|
```
|
|
53
55
|
|
|
56
|
+
## 使用 drawui 的项目
|
|
57
|
+
|
|
58
|
+
- **[myBookEditor](https://github.com/weishell/myBookEditor)** — 基于 [Slate.js](https://github.com/ianstormtaylor/slate) 的富文本 / 文档编辑器，已接入 drawui 画板：可在文档中直接插入并编辑画板，用于绘制图示、UML 类图、思维导图等，并随文档一起导出 / 下载。
|
|
59
|
+
|
|
60
|
+
## License
|
|
61
|
+
|
|
62
|
+
MIT
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
# English
|
|
67
|
+
|
|
68
|
+
[简体中文](#drawui-core) ｜ **English**
|
|
69
|
+
|
|
70
|
+
Framework-agnostic core canvas drawing engine (vanilla TypeScript, no UI-framework dependency).
|
|
71
|
+
|
|
72
|
+
React wrapper: [drawui-react](https://www.npmjs.com/package/drawui-react).
|
|
73
|
+
|
|
74
|
+
## Install
|
|
75
|
+
|
|
76
|
+
```bash
|
|
77
|
+
npm install drawui-core
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Usage
|
|
81
|
+
|
|
82
|
+
```ts
|
|
83
|
+
import { Editor } from 'drawui-core'
|
|
84
|
+
|
|
85
|
+
const canvas = document.getElementById('board') as HTMLCanvasElement
|
|
86
|
+
const editor = new Editor(canvas, { language: 'en-US' })
|
|
87
|
+
|
|
88
|
+
editor.subscribe(() => console.log('changed'))
|
|
89
|
+
editor.setShapes([
|
|
90
|
+
{
|
|
91
|
+
id: 'r1',
|
|
92
|
+
type: 'rectangle',
|
|
93
|
+
x: 80, y: 80, width: 160, height: 90, rotation: 0,
|
|
94
|
+
text: 'Hello',
|
|
95
|
+
style: { strokeColor: '#3b82f6', fillColor: '#eff6ff', strokeWidth: 2, strokeDash: null },
|
|
96
|
+
},
|
|
97
|
+
])
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Main exports
|
|
101
|
+
|
|
102
|
+
- `Editor` (`new Editor(canvas, options?)`), `EditorOptions`, `UiEvent`
|
|
103
|
+
- Tools: `SelectTool`, `HandTool`, `ShapeTool`, `LineTool`, `FreehandTool`, `ArrowTool`
|
|
104
|
+
- Geometry: `Vec`, `Mat2d`, `Camera`, `Renderer`
|
|
105
|
+
- Theme: `THEME`, `getTheme`, `setTheme`, `subscribeTheme`, `hexToRgba`, `shadeColor`
|
|
106
|
+
- i18n: `setLanguage`, `getLanguage`, `subscribeLanguage`, `t`
|
|
107
|
+
- Mind map: `layoutMindMap`, `mindMapNodeColor`, `mindMapNodeSize`, …
|
|
108
|
+
- Types: `Shape`, `ShapeType`, `EditorData`, `ToolType`, `MindMapNode`, …
|
|
109
|
+
|
|
110
|
+
## EditorOptions
|
|
111
|
+
|
|
112
|
+
```ts
|
|
113
|
+
interface EditorOptions {
|
|
114
|
+
theme?: Partial<DrawuiTheme>
|
|
115
|
+
language?: 'zh-CN' | 'en-US'
|
|
116
|
+
shapes?: Shape[]
|
|
117
|
+
persist?: boolean // persist to localStorage; defaults to true (auto-off when `shapes` is given)
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Projects using drawui
|
|
122
|
+
|
|
123
|
+
- **[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.
|
|
124
|
+
|
|
54
125
|
## License
|
|
55
126
|
|
|
56
127
|
MIT
|