- 添加 & 删除节点
- 编辑节点文本
- 撤销 & 重做
- 修改视图scale
- 拖拽改变节点关系
- 键盘操作
- 多选操作
- 展开 & 收缩节点
npm install -S mindmap-tree<body>
<div id="container" style="width:100vh;height:100vh;"></div>
</body>import MindmapTree from 'mindmap-tree';
import 'mindmap-tree/style.css';
new MindmapTree({
container: '#container',
});MindmapTree constructor 参数:
| Prop | Type | Default | Description |
|---|---|---|---|
| container | String | Element | '' | container的HTML元素 |
| data | NodeDataMap | Record<string, NodeData> | 思维导图的初始化数据 |
| isDebug | Boolean | false | 是否调试 |
NodeData params:
| Prop | Type | Default | Description |
|---|---|---|---|
| label | String | '' | 节点文本 |
| direction | Number | 0 | 节点方向, 1:右边, 0:无, -1:左边 |
| isRoot | Boolean | false | 是否根节点 |
| children | String[] | [] | 子节点的id数组 |
| isExpand | Boolean | true | 是否展开节点 |
Copyright (c) 2023 - present, RockyRen