Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2026-01-08 14:29:15 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor(MermaidPreview): separate measurement from rendering

Browse Source
This commit is contained in:
one 2025-08-15 15:50:36 +08:00
parent 851b98bf5c
commit c3e61690d7
2 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/src/components/Preview/GraphvizPreview.tsx
View File

@ -14,8 +14,10 @@ const vizInitializer = new AsyncInitializer(async () => {
return await module.instance() return await module.instance()
}) })
/** 预览 Graphviz 图表 /**
* 使用 usePreviewRenderer hook 大幅简化组件逻辑 * 预览 Graphviz 图表
* - 使用 useDebouncedRender 改善体验
* - 使用 shadow dom 渲染 SVG
*/ */
const GraphvizPreview = ({ const GraphvizPreview = ({
children, children,

42
src/renderer/src/components/Preview/MermaidPreview.tsx
View File

@ -8,9 +8,10 @@ import ImagePreviewLayout from './ImagePreviewLayout'
import { BasicPreviewHandles, BasicPreviewProps } from './types' import { BasicPreviewHandles, BasicPreviewProps } from './types'
import { renderSvgInShadowHost } from './utils' import { renderSvgInShadowHost } from './utils'
/** 预览 Mermaid 图表 /**
* 使用 usePreviewRenderer hook 重构，同时保留必要的可见性检测逻辑 * 预览 Mermaid 图表
* FIXME: 等将来 mermaid-js 修复可见性问题后可以进一步简化 * - 使用 useDebouncedRender 改善体验
* - 使用 shadow dom 渲染 SVG
*/ */
const MermaidPreview = ({ const MermaidPreview = ({
children, children,
@ -21,20 +22,39 @@ const MermaidPreview = ({
const diagramId = useRef<string>(`mermaid-${nanoid(6)}`).current const diagramId = useRef<string>(`mermaid-${nanoid(6)}`).current
const [isVisible, setIsVisible] = useState(true) const [isVisible, setIsVisible] = useState(true)
// 定义渲染函数 /**
* 定义渲染函数，在临时容器中测量，在 shadow dom 中渲染。
* 如果这个方案有问题，可以回退到 innerHTML。
*/
const renderMermaid = useCallback( const renderMermaid = useCallback(
async (content: string, container: HTMLDivElement) => { async (content: string, container: HTMLDivElement) => {
// 验证语法，提前抛出异常 // 验证语法，提前抛出异常
await mermaid.parse(content) await mermaid.parse(content)
const { svg } = await mermaid.render(diagramId, content, container) // 获取容器宽度
const { width } = container.getBoundingClientRect()
if (width === 0) return
// 避免不可见时产生 undefined 和 NaN // 创建临时的 div 用于 mermaid 测量
const fixedSvg = svg.replace(/translate\(undefined,\s*NaN\)/g, 'translate(0, 0)') const measureEl = document.createElement('div')
measureEl.style.position = 'absolute'
measureEl.style.left = '-9999px'
measureEl.style.top = '-9999px'
measureEl.style.width = `${width}px`
document.body.appendChild(measureEl)
// 使用 shadow dom，如果有问题，可以回退到 innerHTML try {
renderSvgInShadowHost(fixedSvg, container) const { svg } = await mermaid.render(diagramId, content, measureEl)
// container.innerHTML = fixedSvg
// 避免不可见时产生 undefined 和 NaN
const fixedSvg = svg.replace(/translate\(undefined,\s*NaN\)/g, 'translate(0, 0)')
// 有问题可以回退到 innerHTML
renderSvgInShadowHost(fixedSvg, container)
// container.innerHTML = fixedSvg
} finally {
document.body.removeChild(measureEl)
}
}, },
[diagramId, mermaid] [diagramId, mermaid]
) )
@ -67,7 +87,7 @@ const MermaidPreview = ({
const element = containerRef.current const element = containerRef.current
if (!element) return if (!element) return
const currentlyVisible = element.offsetParent !== null const currentlyVisible = element.offsetParent !== null && element.offsetWidth > 0 && element.offsetHeight > 0
setIsVisible(currentlyVisible) setIsVisible(currentlyVisible)
} }