45 lines
1.2 KiB
Markdown
45 lines
1.2 KiB
Markdown
# @web/mindmap
|
||
|
||
类 Xmind 体验的思维导图引擎，专注于展示逻辑分支。
|
||
|
||
## 特性
|
||
- 原生 ESM 驱动，无需构建即可在浏览器中使用。
|
||
- 支持自动布局算法。
|
||
- 高性能 SVG/DOM 渲染（1000+ 节点渲染耗时 < 50ms）。
|
||
- 支持节点的展开与折叠。
|
||
- 支持画布平移与缩放。
|
||
|
||
## 安装与使用
|
||
本模块不发布至 npmjs。请通过 `loader.js` 或 `importmap` 引入。
|
||
|
||
### 使用示例
|
||
```javascript
|
||
import { Mindmap } from '@web/mindmap';
|
||
|
||
const mm = new Mindmap({
|
||
container: document.getElementById('app'),
|
||
data: {
|
||
text: '根节点',
|
||
children: [
|
||
{ text: '子节点 1' },
|
||
{ text: '子节点 2' }
|
||
]
|
||
}
|
||
});
|
||
```
|
||
|
||
## API
|
||
### `new Mindmap(options)`
|
||
- `options.container`: HTMLElement, 容器元素。
|
||
- `options.data`: Object, 树形数据结构。
|
||
- `options.nodeWidth`: Number, 节点宽度 (默认 120)。
|
||
- `options.nodeHeight`: Number, 节点高度 (默认 40)。
|
||
- `options.hGap`: Number, 水平间距 (默认 60)。
|
||
- `options.vGap`: Number, 垂直间距 (默认 20)。
|
||
|
||
### `mm.addNode(parentId, text)`
|
||
- 向指定 ID 或文本匹配的节点添加子节点。
|
||
|
||
### `mm.removeNode(nodeId)`
|
||
- 删除指定 ID 或文本匹配的节点。
|