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 或文本匹配的节点。
|