mindmap/README.md

# @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()`。