修复思维导图初次渲染错位问题：实现多层DOM稳定保障
- 采用nextTick + 字体加载 + requestAnimationFrame三层保障机制 - 解决DOM尺寸计算早于渲染完成导致的布局错位问题 - 等待Vue DOM更新、字体加载、渲染管线完成后再执行布局刷新 - 添加错误处理和降级方案，确保在任何情况下都能正常渲染 - 修复新生成思维导图和历史记录加载时的初次渲染错位问题 - 确保foreignObject内容完全渲染后再计算节点位置
This commit is contained in:
parent
2a09a6b05c
commit
329d36bdd8
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -23,8 +23,8 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
<script type="module" crossorigin src="/assets/index-3ece160d.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-356fe347.css">
|
||||
<script type="module" crossorigin src="/assets/index-3d4f89fc.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-2f08a1a5.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
|
|||
|
|
@ -449,6 +449,41 @@ const loadMindmapData = async (data, keepPosition = false, shouldCenterRoot = tr
|
|||
console.log('📍 跳过根节点居中，等待居中新节点');
|
||||
}
|
||||
|
||||
// 修复初次渲染错位问题：等待DOM稳定后再刷新布局
|
||||
// 采用多层保障：nextTick + 字体加载 + requestAnimationFrame
|
||||
const fixInitialRendering = async () => {
|
||||
try {
|
||||
// 第一层：等待Vue DOM更新完成
|
||||
await nextTick();
|
||||
|
||||
// 第二层：等待字体加载完成（关键！）
|
||||
await document.fonts.ready;
|
||||
|
||||
// 第三层：等待下一帧，确保所有渲染管线完成
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
|
||||
if (mindElixir.value && mindElixir.value.refresh) {
|
||||
console.log('🔄 执行完整DOM稳定后的延迟刷新');
|
||||
mindElixir.value.refresh();
|
||||
|
||||
// 如果设置了居中，在刷新后重新居中
|
||||
if (!currentPosition && (keepPosition || shouldCenterRoot)) {
|
||||
mindElixir.value.toCenter();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('⚠️ 延迟刷新过程中出现错误:', error);
|
||||
// 降级方案：简单的setTimeout
|
||||
setTimeout(() => {
|
||||
if (mindElixir.value && mindElixir.value.refresh) {
|
||||
mindElixir.value.refresh();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
|
||||
fixInitialRendering();
|
||||
|
||||
// Mind Elixir现在会自动使用markdown解析器渲染内容
|
||||
|
||||
} else {
|
||||
|
|
@ -496,6 +531,40 @@ const loadMindmapData = async (data, keepPosition = false, shouldCenterRoot = tr
|
|||
console.log('📍 延迟创建后跳过根节点居中，等待居中新节点');
|
||||
}
|
||||
|
||||
// 修复初次渲染错位问题：延迟创建实例的完整DOM稳定保障
|
||||
const fixDelayedRendering = async () => {
|
||||
try {
|
||||
// 第一层：等待Vue DOM更新完成
|
||||
await nextTick();
|
||||
|
||||
// 第二层：等待字体加载完成
|
||||
await document.fonts.ready;
|
||||
|
||||
// 第三层：等待下一帧，确保所有渲染管线完成
|
||||
await new Promise(resolve => requestAnimationFrame(resolve));
|
||||
|
||||
if (mindElixir.value && mindElixir.value.refresh) {
|
||||
console.log('🔄 延迟创建实例执行完整DOM稳定后的延迟刷新');
|
||||
mindElixir.value.refresh();
|
||||
|
||||
// 如果设置了居中，在刷新后重新居中
|
||||
if (!currentPosition && (keepPosition || shouldCenterRoot)) {
|
||||
mindElixir.value.toCenter();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('⚠️ 延迟创建实例的延迟刷新过程中出现错误:', error);
|
||||
// 降级方案：简单的setTimeout
|
||||
setTimeout(() => {
|
||||
if (mindElixir.value && mindElixir.value.refresh) {
|
||||
mindElixir.value.refresh();
|
||||
}
|
||||
}, 250);
|
||||
}
|
||||
};
|
||||
|
||||
fixDelayedRendering();
|
||||
|
||||
// 延迟执行后续操作
|
||||
setTimeout(() => {
|
||||
// Mind Elixir现在会自动使用markdown解析器渲染内容
|
||||
|
|
|
|||
Loading…
Reference in New Issue