在wanglin2/mind-map项目中实现画布全屏编辑的技术方案

问题背景分析

在思维导图类应用中，全屏编辑是一个常见的功能需求。用户希望能够在专注模式下编辑内容，不受其他界面元素的干扰。然而在实际开发中，开发者可能会遇到一个典型问题：当仅将画布容器全屏时，编辑功能失效，而必须将整个body元素全屏才能正常编辑。

技术原理剖析

这种现象的根本原因在于文本编辑框的DOM挂载策略。在wanglin2/mind-map项目中，文本编辑框默认是挂载在body元素下的。当仅将画布容器全屏时：

1. 画布容器获得了全屏状态
2. 但文本编辑框仍然存在于body下
3. 由于全屏元素的特殊性，非全屏元素会被遮盖
4. 导致编辑框无法显示，造成"无法编辑"的假象

解决方案

项目提供了灵活的配置选项来解决这个问题。开发者可以通过修改textEditZIndex配置项来调整文本编辑框的层级关系：

new MindMap({
    // 其他配置...
    textEditZIndex: 1000 // 设置足够高的z-index值
})

这个配置项的作用是：

1. 控制文本编辑框的z-index层级
2. 确保编辑框能够显示在全屏元素之上
3. 允许编辑框在画布容器全屏时仍然可见

实现建议

对于需要保留侧边栏和头部导航的复杂布局，建议采用以下实现方案：

1. 创建一个专门的画布容器div
2. 对该容器进行全屏操作而非整个body
3. 配置适当的textEditZIndex值
4. 确保全屏容器的定位属性正确（通常需要position: relative）

最佳实践

在实际项目中，推荐以下实现方式：

const mindMap = new MindMap({
    el: document.getElementById('mindMapContainer'),
    textEditZIndex: 9999, // 设置足够高的值
    // 其他配置...
});

// 全屏画布容器而非整个body
function toggleFullscreen() {
    const container = document.getElementById('mindMapContainer');
    if (!document.fullscreenElement) {
        container.requestFullscreen();
    } else {
        document.exitFullscreen();
    }
}

注意事项

1. z-index值需要足够高以覆盖可能的其他元素
2. 考虑浏览器兼容性问题，特别是全屏API的实现差异
3. 在移动端设备上可能需要额外的处理
4. 全屏状态变化时需要相应调整UI布局

通过以上方案，开发者可以灵活地实现画布全屏编辑功能，同时保留应用的其他界面元素，提供更好的用户体验。