# trae_mindmap_demo
**Repository Path**: lovecross/trae_mindmap_demo
## Basic Information
- **Project Name**: trae_mindmap_demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-04
- **Last Updated**: 2025-05-20
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Canvas思维导图
一个基于HTML5 Canvas的轻量级思维导图实现，支持节点编辑、拖拽、缩放等功能。
## 功能特点
- 🌲 树形思维导图结构展示
- ✏️ 节点的创建、编辑和删除
- 🖱️ 画布的缩放和平移
- 📦 节点的拖拽和选择
- 💾 导出思维导图数据为JSON格式
- 📱 自适应窗口大小
- 📝 支持长文本自动换行
- 🏷️ 支持节点标签及自定义颜色配置
## 快速开始
### 安装
只需将`mindmap.js`文件引入到您的HTML文件中：
```html
```
### 基本用法
1. 在HTML中创建一个canvas元素：
```html
```
2. 初始化思维导图：
```javascript
// 初始化思维导图实例
const mindmap = new MindMap('mindmap', {
// 可选配置项
nodeWidth: 120,
nodeHeight: 40,
fontSize: 14
});
// 全局保存实例（可选，用于导出数据等操作）
window.mindmapInstance = mindmap;
```
3. 设置思维导图数据：
```javascript
// 设置自定义数据
mindmap.setData({
data: { text: '中心主题' },
children: [
{
data: { text: '子主题1' },
children: [
{ data: { text: '子主题1.1' }, children: [] }
]
},
{ data: { text: '子主题2' }, children: [] }
]
});
```
## API文档
### 构造函数
```javascript
new MindMap(canvasId, options)
```
#### 参数
- `canvasId`: Canvas元素的ID
- `options`: 配置选项对象（可选）
#### 配置选项
| 选项 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| nodeWidth | Number | 120 | 节点默认宽度 |
| nodeHeight | Number | 40 | 节点默认高度 |
| levelGap | Number | 100 | 层级间距 |
| siblingGap | Number | 20 | 同级节点间距 |
| fontSize | Number | 14 | 字体大小 |
| fontFamily | String | 'Arial' | 字体 |
| nodeFill | String | '#ffffff' | 节点填充颜色 |
| nodeStroke | String | '#333333' | 节点边框颜色 |
| selectedNodeFill | String | '#e1f5fe' | 选中节点填充颜色 |
| lineColor | String | '#666666' | 连接线颜色 |
| textColor | String | '#333333' | 文本颜色 |
| cornerRadius | Number | 5 | 节点圆角半径 |
| tagFontSize | Number | 10 | 标签字体大小 |
| tagPadding | Number | 4 | 标签内边距 |
| tagMargin | Number | 4 | 标签外边距 |
| tagCornerRadius | Number | 3 | 标签圆角半径 |
| tagColors | Object | 见下方说明 | 标签颜色配置，用于设置不同标签的背景色和文字颜色 |
#### 标签颜色配置
标签颜色配置使用以下格式：
```javascript
tagColors: {
'default': { bg: '#e0e0e0', text: '#333333' }, // 默认标签颜色
'重要': { bg: '#f44336', text: '#ffffff' }, // 红色背景，白色文字
'进行中': { bg: '#2196f3', text: '#ffffff' }, // 蓝色背景，白色文字
'完成': { bg: '#4caf50', text: '#ffffff' }, // 绿色背景，白色文字
'待办': { bg: '#ff9800', text: '#ffffff' } // 橙色背景，白色文字
}
```
您可以根据需要自定义标签颜色，每个标签配置包含背景色(`bg`)和文字颜色(`text`)。系统会自动为未配置的标签使用`default`颜色。
### 方法
#### setData(data)
设置思维导图数据。
```javascript
mindmap.setData({
data: {
text: '中心主题',
tags: ['重要'] // 添加标签
},
children: [
{
data: {
text: '子主题1',
tags: ['进行中'] // 添加标签
},
children: []
},
{
data: { text: '子主题2' },
children: []
}
]
});
```
#### exportData()
导出思维导图数据为JSON格式。
```javascript
const data = mindmap.exportData();
console.log(JSON.stringify(data, null, 2));
```
#### addNode()
为当前选中的节点添加一个子节点。
```javascript
mindmap.addNode();
```
#### deleteNode()
删除当前选中的节点。
```javascript
mindmap.deleteNode();
```
#### resetView()
重置视图到初始状态。
```javascript
mindmap.resetView();
```
## 交互功能
- **选择节点**: 点击节点进行选择
- **编辑节点**: 双击节点进行文本编辑和标签设置
- **添加节点**: 选中节点后点击"添加子节点"按钮
- **删除节点**: 选中节点后点击"删除节点"按钮
- **折叠/展开节点**: 点击节点右侧的指示器或右键菜单中的折叠/展开选项
- **拖拽节点**: 按住节点进行拖拽
- **平移画布**: 在空白处按住鼠标拖动
- **缩放画布**: 使用鼠标滚轮进行缩放
## 数据结构
思维导图使用以下数据结构：
```javascript
{
data: {
text: '节点文本', // 节点文本内容
tags: ['标签1', '标签2'] // 节点标签数组
},
uid: 'unique_id', // 节点唯一标识符
children: [] // 子节点数组
}
```
注意：为了兼容性，系统内部仍然保留了直接访问`text`和`tags`属性的能力，但导出数据时将使用上述结构。
## 完整示例
```html
Canvas思维导图
```
## 数据格式
思维导图使用以下JSON格式表示数据结构：
```javascript
{
"data": {
"text": "中心主题",
"tags": ["重要"]
},
"uid": "lnvxyz123abc", // 节点唯一标识符
"children": [
{
"data": {
"text": "子主题1",
"tags": ["进行中"]
},
"uid": "lnvxyz456def", // 节点唯一标识符
"children": [
{
"data": {
"text": "子主题1.1",
"tags": ["待办"]
},
"uid": "lnvxyz789ghi", // 节点唯一标识符
"children": []
}
]
},
{
"data": {
"text": "子主题2",
"tags": []
},
"uid": "lnvxyz012jkl", // 节点唯一标识符
"children": []
}
]
}
```
## 浏览器兼容性
支持所有现代浏览器，包括：
- Chrome
- Firefox
- Safari
- Edge
## 许可证
MIT