- 在 js/core/app-shell.js:1153 为 initializeMermaidPanZoom 增加空值保护,避免找不到目标元素时直接
返回。
- 新增 applyMermaidPanZoom 辅助方法(js/core/app-shell.js:1227),统一为最新渲染的 Mermaid SVG 设置稳
定的 id 并重新初始化 svgPanZoom,保证缩放实例始终存在。
- 在流式渲染完成的循环中追加 this.applyMermaidPanZoom(manifest)(js/core/app-shell.js:1329),生成最后
一个代码片段后立即恢复缩放能力。
- 在最终渲染回写与常规渲染入口分别调用新方法(js/core/app-shell.js:1397, js/core/app-shell.js:1451),
确保无论是流式结束还是切换历史记录都能自动启用平移缩放。
This commit is contained in:
@@ -1151,6 +1151,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
initializeMermaidPanZoom(svgElementid, manifest) {
|
initializeMermaidPanZoom(svgElementid, manifest) {
|
||||||
|
if (!svgElementid) return;
|
||||||
let svgElement = document.getElementById(svgElementid);
|
let svgElement = document.getElementById(svgElementid);
|
||||||
if (!svgElement) return;
|
if (!svgElement) return;
|
||||||
if (!window.svgPanZoom) {
|
if (!window.svgPanZoom) {
|
||||||
@@ -1223,6 +1224,28 @@
|
|||||||
this.mermaidPanZoom = null;
|
this.mermaidPanZoom = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
applyMermaidPanZoom(manifest) {
|
||||||
|
if (
|
||||||
|
!manifest ||
|
||||||
|
manifest.artifact?.type !== 'mermaid' ||
|
||||||
|
!this.el.viewer
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const svgElement = this.el.viewer.querySelector('svg');
|
||||||
|
if (!svgElement) return;
|
||||||
|
let svgId = svgElement.getAttribute('id');
|
||||||
|
if (!svgId) {
|
||||||
|
svgId =
|
||||||
|
(typeof Utils !== 'undefined' &&
|
||||||
|
typeof Utils.generateId === 'function' &&
|
||||||
|
Utils.generateId('mermaidSvg')) ||
|
||||||
|
`mermaidSvg-${Date.now()}`;
|
||||||
|
svgElement.setAttribute('id', svgId);
|
||||||
|
}
|
||||||
|
this.initializeMermaidPanZoom(svgId, manifest);
|
||||||
|
}
|
||||||
|
|
||||||
isZoomableManifest(manifest) {
|
isZoomableManifest(manifest) {
|
||||||
const type = manifest?.artifact?.type;
|
const type = manifest?.artifact?.type;
|
||||||
return type === 'svg' || type === 'mermaid';
|
return type === 'svg' || type === 'mermaid';
|
||||||
@@ -1302,6 +1325,9 @@
|
|||||||
applyTransform: false,
|
applyTransform: false,
|
||||||
wrapperClasses: ['svg-content-wrapper--mermaid']
|
wrapperClasses: ['svg-content-wrapper--mermaid']
|
||||||
});
|
});
|
||||||
|
if (ctx.completed) {
|
||||||
|
this.applyMermaidPanZoom(manifest);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
ctx.lastError = error;
|
ctx.lastError = error;
|
||||||
console.warn('Mermaid 流式渲染失败,等待更多内容补全:', error);
|
console.warn('Mermaid 流式渲染失败,等待更多内容补全:', error);
|
||||||
@@ -1368,6 +1394,7 @@
|
|||||||
applyTransform: false,
|
applyTransform: false,
|
||||||
wrapperClasses: ['svg-content-wrapper--mermaid']
|
wrapperClasses: ['svg-content-wrapper--mermaid']
|
||||||
});
|
});
|
||||||
|
this.applyMermaidPanZoom(manifest);
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.warn('Mermaid 最终渲染失败:', error);
|
console.warn('Mermaid 最终渲染失败:', error);
|
||||||
@@ -1421,11 +1448,7 @@
|
|||||||
applyTransform: false,
|
applyTransform: false,
|
||||||
wrapperClasses: ['svg-content-wrapper--mermaid']
|
wrapperClasses: ['svg-content-wrapper--mermaid']
|
||||||
});
|
});
|
||||||
const svgElement = this.el.viewer.querySelector('svg');
|
this.applyMermaidPanZoom(manifest);
|
||||||
if (svgElement) {
|
|
||||||
const svgid = svgElement.getAttribute('id', 'mermaidSvg');
|
|
||||||
this.initializeMermaidPanZoom(svgid, manifest);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
this.destroyMermaidPanZoom();
|
this.destroyMermaidPanZoom();
|
||||||
console.error('Mermaid 渲染失败:', error);
|
console.error('Mermaid 渲染失败:', error);
|
||||||
|
|||||||
Reference in New Issue
Block a user