56 lines
1.4 KiB
Markdown
56 lines
1.4 KiB
Markdown
# @apigo.cc/mindmap API 手册
|
|
|
|
原生 JS 编写的思维导图引擎。支持无限层级、缩放平移、节点折叠及动态增删。
|
|
|
|
---
|
|
|
|
## 1. 引入方式 (UMD 优先)
|
|
|
|
```html
|
|
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/mindmap@1.0.1/dist/mindmap.min.js"></script>
|
|
|
|
<script>
|
|
// 直接使用全局 Mindmap 类
|
|
const mm = new Mindmap(config);
|
|
</script>
|
|
```
|
|
|
|
---
|
|
|
|
## 2. 核心用法
|
|
|
|
### 组件化用法 (推荐)
|
|
直接在 HTML 中使用 `<Mindmap>` 标签，通过 `state` 进行数据绑定。
|
|
|
|
```html
|
|
<div $data="{
|
|
myMind: { id: 'root', text: '根节点', children: [{ text: '子节点 1' }] }
|
|
}">
|
|
<Mindmap $.state.data="myMind" style="height:500px"></Mindmap>
|
|
</div>
|
|
```
|
|
|
|
### JS 调用方式 (兼容)
|
|
...
|
|
---
|
|
|
|
## 3. API 参考
|
|
|
|
### `new Mindmap(options)`
|
|
- **`container`**: 挂载元素。
|
|
- **`data`**: 格式为 `{ id, text, children, _collapsed }` 的对象。
|
|
- **`nodeWidth / nodeHeight`**: 节点尺寸。
|
|
- **`hGap / vGap`**: 间距。
|
|
|
|
### 实例方法
|
|
- **`addNode(parentId, text)`**: 动态添加节点。
|
|
- **`removeNode(nodeId)`**: 动态删除节点。
|
|
- **`render()`**: 强制重新布局与重绘。
|
|
|
|
---
|
|
|
|
## 开发者提示 (AI 必读)
|
|
1. **全局变量**: UMD 模式下，`Mindmap` 类自动挂载到 `window`。
|
|
2. **唯一 ID**: 每个节点必须拥有全局唯一的 `id`。
|
|
3. **数据响应**: 修改 `mm.data` 属性后必须手动执行 `mm.render()`。
|