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

fix: fix select box issue with mermaid diagrams

Browse Source
This commit is contained in:
kangfenmao 2024-11-11 23:33:57 +08:00
parent 739aa21475
commit 422baa848b
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/src/pages/home/Markdown/MermaidPopup.tsx
View File

@ -15,6 +15,7 @@ interface Props extends ShowParams {
const PopupContainer: React.FC<Props> = ({ resolve, chart }) => { const PopupContainer: React.FC<Props> = ({ resolve, chart }) => {
const [open, setOpen] = useState(true) const [open, setOpen] = useState(true)
const { t } = useTranslation() const { t } = useTranslation()
const mermaidId = `mermaid-popup-${Date.now()}`
const onOk = () => { const onOk = () => {
setOpen(false) setOpen(false)
@ -30,7 +31,7 @@ const PopupContainer: React.FC<Props> = ({ resolve, chart }) => {
const handleDownload = async (format: 'svg' | 'png') => { const handleDownload = async (format: 'svg' | 'png') => {
try { try {
const element = document.querySelector('.mermaid') const element = document.getElementById(mermaidId)
if (!element) return if (!element) return
const timestamp = Date.now() const timestamp = Date.now()
@ -50,14 +51,14 @@ const PopupContainer: React.FC<Props> = ({ resolve, chart }) => {
const canvas = document.createElement('canvas') const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d') const ctx = canvas.getContext('2d')
const img = new Image() const img = new Image()
img.crossOrigin = 'anonymous'
const viewBox = svgElement.getAttribute('viewBox')?.split(' ').map(Number) || [] const viewBox = svgElement.getAttribute('viewBox')?.split(' ').map(Number) || []
const width = viewBox[2] || svgElement.clientWidth || svgElement.getBoundingClientRect().width const width = viewBox[2] || svgElement.clientWidth || svgElement.getBoundingClientRect().width
const height = viewBox[3] || svgElement.clientHeight || svgElement.getBoundingClientRect().height const height = viewBox[3] || svgElement.clientHeight || svgElement.getBoundingClientRect().height
const svgData = new XMLSerializer().serializeToString(svgElement) const svgData = new XMLSerializer().serializeToString(svgElement)
const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' }) const svgBase64 = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgData)))}`
const url = URL.createObjectURL(svgBlob)
img.onload = () => { img.onload = () => {
const scale = 3 const scale = 3
@ -76,9 +77,8 @@ const PopupContainer: React.FC<Props> = ({ resolve, chart }) => {
URL.revokeObjectURL(pngUrl) URL.revokeObjectURL(pngUrl)
} }
}, 'image/png') }, 'image/png')
URL.revokeObjectURL(url)
} }
img.src = url img.src = svgBase64
} }
} catch (error) { } catch (error) {
console.error('Download failed:', error) console.error('Download failed:', error)
@ -110,6 +110,7 @@ const PopupContainer: React.FC<Props> = ({ resolve, chart }) => {
label: t('mermaid.tabs.preview'), label: t('mermaid.tabs.preview'),
children: ( children: (
<div <div
id={mermaidId}
className="mermaid" className="mermaid"
style={{ style={{
maxHeight: 'calc(80vh - 200px)', maxHeight: 'calc(80vh - 200px)',