Javascript网页设计实例：通过JS实现上传Markdown转化为脑图并下载脑图

功能预览

深度与密度测试

对于测试部分，分别对深度和密度进行了测试：

注意！！！！！！！只实现了识别Markdown中的#代表的层级，所以不能使用其余标识符！！！
注意！！！！！！！只实现了识别Markdown中的#代表的层级，所以不能使用其余标识符！！！
注意！！！！！！！只实现了识别Markdown中的#代表的层级，所以不能使用其余标识符！！！
注意！！！！！！！只实现了识别Markdown中的#代表的层级，所以不能使用其余标识符！！！
注意！！！！！！！只实现了识别Markdown中的#代表的层级，所以不能使用其余标识符！！！

测试数据：

# 量子力学基础 
 
## 1. 基础概念 
### 1.1 波粒二象性 
#### 1.1.1 光的波粒二象性 
##### 1.1.1.1 光电效应 
###### 1.1.1.1.1 光电效应的实验现象 
###### 1.1.1.1.2 爱因斯坦的光电效应理论 
##### 1.1.1.2 康普顿效应 
#### 1.1.2 微观粒子的波粒二象性 
##### 1.1.2.1 德布罗意假设 
##### 1.1.2.2 电子衍射实验 
### 1.2 不确定性原理 
#### 1.2.1 海森堡不确定性原理 
##### 1.2.1.1 位置与动量的不确定性关系 
##### 1.2.1.2 能量与时间的不确定性关系 
#### 1.2.2 理解与应用 
##### 1.2.2.1 对微观世界的解释 
##### 1.2.2.2 在量子计算中的意义 
## 2. 量子态与量子叠加 
### 2.1 量子态的描述 
#### 2.1.1 状态向量与希尔伯特空间 
##### 2.1.1.1 状态向量的概念 
##### 2.1.1.2 希尔伯特空间的基本性质 
#### 2.1.2 波函数与薛定谔方程 
##### 2.1.2.1 波函数的物理意义 
##### 2.1.2.2 薛定谔方程的形式与解法 
### 2.2 量子叠加原理 
#### 2.2.1 叠加态的概念 
##### 2.2.1.1 叠加态的数学表示 
##### 2.2.1.2 叠加态的实验验证（双缝实验）
#### 2.2.2 叠加态的应用 
##### 2.2.2.1 在量子通信中的应用 
##### 2.2.2.2 在量子计算中的应用 
## 3. 量子纠缠与非局域性 
### 3.1 量子纠缠的概念 
#### 3.1.1 纠缠态的定义与分类 
##### 3.1.1.1 Bell态 
##### 3.1.1.2 GHZ态 
#### 3.1.2 纠缠态的实验验证 
##### 3.1.2.1 EPR悖论 
##### 3.1.2.2 Bell不等式与实验结果 
### 3.2 非局域性与量子通信 
#### 3.2.1 非局域性的物理意义 
##### 3.2.1.1 非局域性的实验验证 
##### 3.2.1.2 非局域性在量子隐形传态中的应用 
#### 3.2.2 量子通信的基本原理 
##### 3.2.2.1 量子密钥分发（QKD）
##### 3.2.2.2 量子隐形传态（Quantum Teleportation）

测试结果：

一、工具概述

功能就是上传Markdown格式文件，然后转换为脑图，然后下载，没有添加其余功能了。

我觉得还可以添加：
1、为脑图添加标题。
2、现在的脑图颜色、连接方式单一，可以增加更多的样式。
3。。。。。。。。。再想想。

算了，本来也就是做一个样例，再想下去就快想出来一个成品了。。。。

半残不残的挺好的。。。。

另外，现在没做优化，所以，如果你直接copy代码的话，可能会出现一些内存占用的情况。

---

二、代码结构划分

1. HTML 结构

<div class="container">
  <div class="upload-area">
    <!-- 文件上传区域 -->
    <label for="markdownFile" class="upload-label">上传 Markdown 文件</label>
    <input type="file" id="markdownFile" accept=".md,.markdown" hidden>
  </div>
  <div class="mindmap-container">
    <canvas id="canvas"></canvas>
  </div>
</div>

• 定义了页面的基本布局，包括文件上传区域和画布容器。
• 使用 canvas 元素作为图形渲染的主要载体。

2. CSS 样式

:root {
  --primary-color: #2196F3;
  --secondary-color: #4CAF50;
  --background: #f8f9fa;
}
 
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  margin: 0;
  background: var(--background);
}

• 定义了主题颜色、字体和背景样式。
• 实现了响应式布局和交互效果（如悬停动画）。

3. JavaScript 核心逻辑

class MindmapRenderer {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.scale = 1;
    this.offsetX = 0;
    this.offsetY = 0;
    this.nodes = [];
    this.initEvents();
  }

• MindmapRenderer 类负责整个渲染流程，包括节点绘制、布局计算、交互操作（缩放和平移）。
• parseMarkdown 函数将 Markdown 文件解析为树状节点结构。
• exportHighResImage 函数实现高分辨率图片导出功能。

---

三、功能实现

1. 核心功能

（1）Markdown 转思维导图

• 支持将 Markdown 文件中的标题（# 符号）层级结构转换为树状结构。
• 示例：

  # 根节点 
  ## 子节点1 
  ### 孙节点1 
  ## 子节点2 
  

  转换后生成如下结构：

  根节点 
  ├── 子节点1 
  │   └── 孙节点1 
  └── 子节点2 
  

（2）节点渲染

• 每个节点根据层级（1-10）使用不同的样式（颜色、字体大小、圆角等）。
• 示例：

  const NODE_STYLES = {
    1: { bg: "#2962FF", text: "#fff", fontSize: 20 }, // 根节点样式 
    2: { bg: "#00C853", text: "#fff", fontSize: 19 }, // 子节点样式 
    // ...
  };
  

（3）交互操作

• 缩放和平移：用户可以通过鼠标滚轮缩放画布，拖拽画布进行平移。
• 导出图片：支持将当前视图导出为高分辨率的 JPEG 图片。

（4）自动布局

• 使用递归算法计算节点位置和大小。
• 动态调整子树宽度和高度，避免节点重叠。

---

2. 功能亮点

（1）动态布局算法

• 子树测量：递归测量每个节点及其子树的宽度和高度。
• 碰撞检测：当节点过多时，自动调整位置避免重叠。
• 压缩因子：优化节点布局，减少垂直方向的空间占用。

（2）交互体验

• 平滑缩放和平移：使用 CSS 3D 变换来实现流畅的操作。
• 高分辨率导出：导出的图片保留所有细节，适合打印或分享。

（3）自适应设计

• 画布自适应：根据内容自动调整画布大小。
• 响应式布局：使用 ResizeObserver 监听容器大小变化并自动调整。

（4）性能优化

• 渲染性能：通过合理布局减少重绘次数。
• 事件处理：使用事件委托优化交互操作。

---

四、技术栈

1. 前端技术

• HTML5 Canvas: 用于绘制复杂的图形和节点。
• CSS3: 实现响应式布局和交互效果。
• JavaScript ES6+: 使用现代 JavaScript 特性（如类、箭头函数等）。

2. 数据处理

• Markdown 解析: 自行实现的解析器，支持多级标题嵌套。
• 树形数据结构: 将 Markdown 文件转换为树形节点结构。

3. 交互技术

• 事件监听: 处理鼠标拖拽、滚轮缩放等操作。
• Canvas 缩放和平移: 使用 setTransform 方法实现复杂变换。

4. 图形绘制

• Bezier 曲线: 绘制节点之间的连接线。
• 文字换行: 在节点内实现文字自动换行。

---

五、当前缺点

1. 性能问题

• 处理大量节点时，渲染性能可能下降。
• 缩放和平移操作在复杂场景下可能出现延迟。

2. 功能限制

• Markdown 支持有限: 仅支持标题（#）语法，不支持其他 Markdown 元素（如列表、图片等）。
• 缺乏编辑功能: 无法直接在画布上编辑节点内容。
• 导出格式单一: 仅支持 JPEG 格式导出。

3. 用户体验

• 缺少加载进度提示，大文件上传时可能会出现卡顿。
• 缩放和平移操作的手感有待优化（如增加惯性滚动）。

4. 代码结构

• 部分逻辑耦合度较高，维护成本较高。
• 缺少单元测试和文档注释，代码可读性有待提升。

---

六、未来改进方向

1. 功能扩展

• 支持更多 Markdown 语法（如列表、图片、链接等）。
• 增加节点编辑功能（如拖拽调整大小、修改文字内容）。
• 支持更多导出格式（如 PNG、SVG）。

2. 性能优化

• 使用 Web Workers 分担后台计算任务。
• 优化碰撞检测算法，减少计算量。

3. 用户体验提升

• 增加加载进度提示。
• 优化缩放和平移操作的手感（如增加惯性滚动）。

4. 代码重构

• 提取公共逻辑，降低代码耦合度。
• 增加单元测试和文档注释。

---

七、完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown转脑图</title>
<style>
:root {
    --primary-color: #2196F3;
    --secondary-color: #4CAF50;
    --background: #f8f9fa;
}
 
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    background: var(--background);
}
 
.container {
    max-width: 1800px;
    margin: 20px auto;
    padding: 20px;
}
 
.upload-area {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}
 
.mindmap-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    overflow: hidden;
    height: 85vh;
    position: relative;
}
 
#canvas {
    cursor: grab;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
 
.upload-label {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    background: var(--primary-color);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    font-weight: 500;
}
 
.upload-label:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(33,150,243,0.25);
}
.export-btn {
    background: var(--secondary-color);
    margin-left: 15px;
}
.export-btn:hover {
    box-shadow: 0 6px 16px rgba(76,175,80,0.25);
}
</style>
</head>
<body>
<div class="container">
    <div class="upload-area">
        <label for="markdownFile" class="upload-label">
            📁 上传 Markdown 文件 
        </label>
		<button class="upload-label export-btn" id="exportBtn">📷 导出图片</button>
        <input type="file" id="markdownFile" accept=".md,.markdown" hidden>
    </div>
    <div class="mindmap-container">
        <canvas id="canvas"></canvas>
    </div>
</div>
 
<script>
const NODE_STYLES = {
    1: { 
        bg: "#2962FF",
        text: "#fff",
        minWidth: 160, 
        paddingX: 24,
        paddingY: 16,
        fontSize: 20,
        rectRadius: 12
    },
    2: { 
        bg: "#00C853",
        text: "#fff",
        minWidth: 148,
        paddingX: 22,
        paddingY: 14,
        fontSize: 19,
        rectRadius: 10 
    },
    3: { 
        bg: "#AA00FF",
        text: "#fff",
        minWidth: 136,
        paddingX: 20,
        paddingY: 12,
        fontSize: 18,
        rectRadius: 9 
    },
 
    4: { 
        bg: "#FF6D00",
        text: "#fff",
        minWidth: 124,
        paddingX: 18,
        paddingY: 10,
        fontSize: 17,
        rectRadius: 8 
    },
    5: { 
        bg: "#6A1B9A",
        text: "#fff",
        minWidth: 112,
        paddingX: 16,
        paddingY: 9,
        fontSize: 16,
        rectRadius: 7 
    },
    6: { 
        bg: "#D50000",
        text: "#fff",
        minWidth: 100,
        paddingX: 14,
        paddingY: 8,
        fontSize: 15,
        rectRadius: 6 
    },
 
    7: { 
        bg: "#00897B", 
        text: "#fff",
        minWidth: 88,
        paddingX: 12,
        paddingY: 7,
        fontSize: 14,
        rectRadius: 5 
    },
    8: { 
        bg: "#546E7A", 
        text: "#fff",
        minWidth: 76,
        paddingX: 10,
        paddingY: 6,
        fontSize: 13,
        rectRadius: 4 
    },
    9: { 
        bg: "#757575", 
        text: "#fff",
        minWidth: 64,
        paddingX: 8,
        paddingY: 5,
        fontSize: 12,
        rectRadius: 3 
    },
    10: { 
        bg: "#BDBDBD", 
        text: "#212121",
        minWidth: 52,
        paddingX: 6,
        paddingY: 4,
        fontSize: 11,
        rectRadius: 2 
    },
    default: { 
        bg: "#607D8B", 
        text: "#fff",
        minWidth: 60,
        paddingX: 4,
        paddingY: 4,
        fontSize: 10,
        rectRadius: 2 
    }
};
 
class MindmapRenderer {
	constructor(canvas) {
        this.canvas  = canvas;
        this.ctx  = canvas.getContext('2d'); 
        this.scale  = 1;
        this.offsetX  = 0;
        this.offsetY  = 0;
        this.nodes  = [];
        this.LAYOUT_CONFIG = {
            BASE_GAP_X: 60,
            BASE_GAP_Y: 25,
            DEPTH_REDUCTION: 1.4,
            MIN_SIBLING_GAP: 15,
            LINE_HEIGHT_RATIO: 1.2,
            DEPTH_WIDTH: 80 
        };
        this.initEvents(); 
    }
 
    initEvents() {
        let isDragging = false;
        let lastX = 0, lastY = 0;
 
        const handleStart = e => {
            isDragging = true;
            lastX = e.clientX; 
            lastY = e.clientY; 
            this.canvas.style.cursor  = 'grabbing';
        };
 
        const handleMove = e => {
            if (isDragging) {
                const dx = (e.clientX  - lastX) / this.scale; 
                const dy = (e.clientY  - lastY) / this.scale; 
                this.offsetX  += dx;
                this.offsetY  += dy;
                lastX = e.clientX; 
                lastY = e.clientY; 
                this.render(); 
            }
        };
 
        const handleEnd = () => {
            isDragging = false;
            this.canvas.style.cursor  = 'grab';
        };
 
        this.canvas.addEventListener('mousedown',  handleStart);
        document.addEventListener('mousemove',  handleMove);
        document.addEventListener('mouseup',  handleEnd);
 
        this.canvas.addEventListener('wheel',  e => {
            e.preventDefault(); 
            const rect = this.canvas.getBoundingClientRect(); 
            const mouseX = (e.clientX  - rect.left  - this.offsetX)  / this.scale; 
            const mouseY = (e.clientY  - rect.top  - this.offsetY)  / this.scale; 
 
            const zoom = e.deltaY  < 0 ? 1.1 : 0.9;
            this.scale  = Math.min(Math.max(this.scale  * zoom, 0.3), 5);
 
            this.offsetX  = (e.clientX  - rect.left  - mouseX * this.scale); 
            this.offsetY  = (e.clientY  - rect.top  - mouseY * this.scale); 
 
            this.render(); 
        });
    }
	
	getNodeDepth(node) {
        let depth = 0;
        let current = node;
        while (current.parent)  {
            depth++;
            current = current.parent; 
        }
        return depth;
    }
 
    measureSubtree(node) {
        const ctx = this.ctx; 
        node.size  = this.calculateNodeSize(node,  ctx);
 
        if (node.children.length  === 0) {
            node.subtreeWidth  = node.size.width; 
            node.subtreeHeight  = node.size.height; 
            return;
        }
 
        let totalHeight = 0;
        let maxChildRight = 0; // 最大右侧位置 
        const depth = this.getNodeDepth(node); 
        const dynamicGap = this.LAYOUT_CONFIG.BASE_GAP_Y 
                         * Math.pow(this.LAYOUT_CONFIG.DEPTH_REDUCTION,  depth);
 
        node.children.forEach((child,  index) => {
            this.measureSubtree(child); 
            totalHeight += child.subtreeHeight; 
            
            // 父右侧 + 间距 + 子节点宽度 
            const childRight = this.LAYOUT_CONFIG.DEPTH_WIDTH + child.size.width; 
            maxChildRight = Math.max(maxChildRight,  childRight);
 
            if (index !== node.children.length  - 1) {
                totalHeight += dynamicGap;
            }
        });
 
        node.subtreeHeight  = Math.max(node.size.height,  totalHeight);
        // 子树宽度 = 父节点半宽 + 最大子节点右侧 
        node.subtreeWidth  = node.size.width  / 2 + maxChildRight;
    }
	
	calculateNodeSize(node, ctx) {
        const style = NODE_STYLES[node.level] || NODE_STYLES.default; 
        ctx.font  = `${style.fontSize}px  'Segoe UI'`;
 
        const textMetrics = ctx.measureText(node.text); 
        const contentWidth = textMetrics.width  + style.paddingX  * 2;
        const width = Math.max(style.minWidth,  contentWidth);
 
        const lineHeight = style.fontSize  * this.LAYOUT_CONFIG.LINE_HEIGHT_RATIO;
        const lines = Math.ceil(textMetrics.width  / (width - style.paddingX  * 2));
        const height = Math.max(style.minWidth  * 0.6, lines * lineHeight + style.paddingY  * 2);
 
        return { width, height };
    }
 
    calculateLayout(nodes) {
        const layoutNode = (node, startX, startY) => {
            node.x = startX;
            node.y = startY;
 
            if (node.children.length  === 0) return;
 
            let currentY = startY - node.subtreeHeight  / 2;
            const depth = this.getNodeDepth(node); 
            const compressFactor = node.children.length  > 3 ? 0.9 : 1;
 
            node.children.forEach(child  => {
                // 修正子节点定位 
                const parentRightEdge = node.x + node.size.width  / 2;
                const childX = parentRightEdge + this.LAYOUT_CONFIG.DEPTH_WIDTH 
                             + child.size.width  / 2;
                
                const childY = currentY + child.subtreeHeight  / 2 * compressFactor;
                
                layoutNode(child, childX, childY);
                currentY += child.subtreeHeight  * compressFactor 
                          + this.LAYOUT_CONFIG.MIN_SIBLING_GAP;
            });
        };
 
        nodes.forEach(root  => {
            this.measureSubtree(root); 
            layoutNode(root, 100, this.canvas.height  / 2 / this.scale); 
        });
 
        this.resolveCollisions(nodes); 
    }
 
    resolveCollisions(nodes) {
        const findConflicts = (nodeList) => {
            nodeList.forEach((node,  i) => {
                for (let j = i + 1; j < nodeList.length;  j++) {
                    const other = nodeList[j];
                    if (this.checkCollision(node,  other)) {
                        const offset = node.size.height  + this.LAYOUT_CONFIG.MIN_SIBLING_GAP;
                        other.y += offset;
                        this.updateAncestorsPosition(other); 
                    }
                }
                if (node.children.length  > 0) {
                    findConflicts(node.children); 
                }
            });
        };
 
        findConflicts(nodes);
    }
 
    checkCollision(a, b) {
        return Math.abs(a.x  - b.x) < (a.size.width  + b.size.width)/2  &&
               Math.abs(a.y  - b.y) < (a.size.height  + b.size.height)/2; 
    }
 
    updateAncestorsPosition(node) {
        let current = node.parent; 
        while (current) {
            current.y = node.y;
            current = current.parent; 
        }
    }
 
    drawNode(node) {
        const style = NODE_STYLES[node.level] || NODE_STYLES.default; 
        const ctx = this.ctx; 
 
        ctx.shadowColor  = 'rgba(0,0,0,0.1)';
        ctx.shadowOffsetX  = 2;
        ctx.shadowOffsetY  = 3;
        ctx.shadowBlur  = 6;
 
        ctx.beginPath(); 
        ctx.roundRect( 
            node.x - node.size.width  / 2,
            node.y - node.size.height  / 2,
            node.size.width, 
            node.size.height, 
            style.rectRadius  
        );
        ctx.fillStyle  = style.bg; 
        ctx.fill(); 
 
        ctx.shadowColor  = 'transparent';
        ctx.fillStyle  = style.text; 
        ctx.textAlign  = "center";
        ctx.textBaseline  = "middle";
        ctx.font  = `${style.fontSize}px  'Segoe UI'`;
        this.wrapText(node.text,  
            node.x, node.y,
            node.size.width  - style.paddingX  * 2,
            style.fontSize  * 1.4 
        );
    }
 
    wrapText(text, x, y, maxWidth, lineHeight) {
        const words = text.split('  ');
        let currentLine = '';
        let currentY = y - (words.length  > 1 ? lineHeight / 2 : 0);
 
        for (const word of words) {
            const testLine = currentLine ? `${currentLine} ${word}` : word;
            const metrics = this.ctx.measureText(testLine); 
 
            if (metrics.width  > maxWidth && currentLine) {
                this.ctx.fillText(currentLine,  x, currentY);
                currentLine = word;
                currentY += lineHeight;
            } else {
                currentLine = testLine;
            }
        }
        this.ctx.fillText(currentLine,  x, currentY);
    }
 
    drawConnection(parent, child) {
        const ctx = this.ctx; 
        const parentRight = parent.x + parent.size.width  / 2;
        const childLeft = child.x - child.size.width  / 2;
        const controlX = (parentRight + childLeft) / 2;
 
        ctx.beginPath(); 
        ctx.moveTo(parentRight,  parent.y);
        ctx.bezierCurveTo( 
            controlX, parent.y,
            controlX, child.y,
            childLeft, child.y 
        );
        ctx.strokeStyle  = parent.level  === 1 ? '#78909C' : '#B0BEC5';
        ctx.lineWidth  = 2;
        ctx.stroke(); 
    }
 
    render() {
        this.ctx.save(); 
        this.ctx.setTransform(1,  0, 0, 1, 0, 0);
        this.ctx.clearRect(0,  0, this.canvas.width,  this.canvas.height); 
        this.ctx.scale(this.scale,  this.scale); 
        this.ctx.translate(this.offsetX,  this.offsetY); 
 
        this.traverseNodes(node  => this.drawNode(node)); 
        this.traverseNodes(node  => {
            node.children.forEach(child  => this.drawConnection(node,  child));
        });
 
        this.ctx.restore(); 
    }
 
    traverseNodes(callback) {
        const traverse = node => {
            callback(node);
            node.children.forEach(traverse); 
        };
        this.nodes.forEach(traverse); 
    }
}
 
// 页面集成
const canvas = document.getElementById('canvas'); 
const renderer = new MindmapRenderer(canvas);
const container = document.querySelector('.mindmap-container'); 
 
function adaptiveResize() {
    const computeCanvasSize = () => {
        if (!renderer.nodes.length)  {
            return [container.clientWidth, container.clientHeight]; 
        }
 
        let minX = Infinity, maxX = -Infinity;
        let minY = Infinity, maxY = -Infinity;
 
        renderer.traverseNodes(node  => {
            minX = Math.min(minX,  node.x - node.size.width/2); 
            maxX = Math.max(maxX,  node.x + node.size.width/2); 
            minY = Math.min(minY,  node.y - node.size.height/2); 
            maxY = Math.max(maxY,  node.y + node.size.height/2); 
        });
 
        return [
            Math.max(container.clientWidth,  (maxX - minX) * 1.2 * renderer.scale), 
            Math.max(container.clientHeight,  (maxY - minY) * 1.2 * renderer.scale) 
        ];
    };
 
    const [newWidth, newHeight] = computeCanvasSize();
    canvas.width  = newWidth;
    canvas.height  = newHeight;
    renderer.render(); 
}
 
function resizeCanvas() {
    if (!renderer.nodes.length)  {
        canvas.width  = container.clientWidth; 
        canvas.height  = container.clientHeight; 
        return;
    }
 
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;
 
    renderer.traverseNodes(node  => {
        minX = Math.min(minX,  node.x - node.size.width/2); 
        maxX = Math.max(maxX,  node.x + node.size.width/2); 
        minY = Math.min(minY,  node.y - node.size.height/2); 
        maxY = Math.max(maxY,  node.y + node.size.height/2); 
    });
 
    canvas.width  = Math.max(container.clientWidth,  (maxX - minX) * 1.2 * renderer.scale); 
    canvas.height  = Math.max(container.clientHeight,  (maxY - minY) * 1.2 * renderer.scale); 
    
    renderer.render(); 
}
 
// 响应式处理 
const resizeObserver = new ResizeObserver(() => adaptiveResize());
resizeObserver.observe(container); 
 
// 文件处理 
document.getElementById('markdownFile').addEventListener('change',  async e => {
    const file = e.target.files[0]; 
    if (!file) return;
 
    const text = await file.text(); 
    renderer.nodes  = parseMarkdown(text);
    renderer.calculateLayout(renderer.nodes); 
    adaptiveResize();
});
 
// Markdown解析
function parseMarkdown(content) {
    const lines = content.split('\n').filter(l  => l.trim()); 
    const rootNodes = [];
    const stack = [];
    let lastLevel = 0;
 
    lines.forEach(line  => {
        const match = line.match(/^(#+)\s*(.*)/); 
        if (!match) return;
 
        const level = match[1].length;
        const node = {
            text: match[2].trim(),
            level: level,
            children: [],
            parent: null 
        };
 
        // 层级关系处理 
        if (level > lastLevel) {
            if (stack.length  > 0) {
                node.parent  = stack[stack.length - 1];
                node.parent.children.push(node); 
            }
        } else {
            while (stack.length  && stack[stack.length - 1].level >= level) {
                stack.pop(); 
            }
            if (stack.length)  {
                node.parent  = stack[stack.length - 1];
                node.parent.children.push(node); 
            }
        }
 
        if (!node.parent)  rootNodes.push(node); 
        stack.push(node); 
        lastLevel = level;
    });
 
    return rootNodes;
}

function exportHighResImage() {
    const exportCanvas = document.createElement("canvas"); 
    const exportCtx = exportCanvas.getContext("2d"); 
 
    // 计算全图边界
    let minX = Infinity, maxX = -Infinity;
    let minY = Infinity, maxY = -Infinity;
    renderer.traverseNodes(node  => {
        const halfWidth = node.size.width  / 2;
        const halfHeight = node.size.height  / 2;
        minX = Math.min(minX,  node.x - halfWidth);
        maxX = Math.max(maxX,  node.x + halfWidth);
        minY = Math.min(minY,  node.y - halfHeight);
        maxY = Math.max(maxY,  node.y + halfHeight);
    });
 
    // 设置画布尺寸 
    const padding_left = 100;
	const padding_top = 80;
    exportCanvas.width  = (maxX - minX) + padding_left * 2;
    exportCanvas.height  = (maxY - minY) + padding_top * 2;
 
    // 填充白色背景
    exportCtx.fillStyle  = "#FFFFFF";
    exportCtx.fillRect(0,  0, exportCanvas.width,  exportCanvas.height); 
 
    // 保存原始状态
    const originalScale = renderer.scale; 
    const originalOffsetX = renderer.offsetX; 
    const originalOffsetY = renderer.offsetY; 
    const originalCtx = renderer.ctx; 
 
    renderer.scale  = 1;
    renderer.offsetX  = -minX + padding_left;
    renderer.offsetY  = -minY + padding_top;
    renderer.ctx  = exportCtx;
 
    // 执行渲染
    renderer.render(); 
	
	// 二次填充边缘透明区域
    exportCtx.globalCompositeOperation  = "destination-over";
    exportCtx.fillStyle  = "#FFFFFF";
    exportCtx.fillRect(0,  0, exportCanvas.width,  exportCanvas.height); 
 
    // 导出为JPG 
    const link = document.createElement("a"); 
    link.download  = "mindmap.jpg"; 
    link.href  = exportCanvas.toDataURL("image/jpeg",  1.0);
    link.click(); 
}

// 绑定导出事件
document.getElementById('exportBtn').addEventListener('click',  exportHighResImage);
 
window.addEventListener('resize',  resizeCanvas);
resizeCanvas();
</script>
</body>
</html>