mesalogo
785b1ee468
Fix oversized diagram alignment in the large-diagram viewer and provide complete PNG downloads independent of zoom and pan. Cover the full window and shared native drag handling, with regression checks for both themes and narrow windows. Validation: 58 focused tests passed, including 9 Electron scenarios and 10 PNG downloads; typecheck and lint passed. Full-suite runs did not complete. Release note: Mermaid 大图放大后可浏览全部边缘，并可从弹窗导出完整 PNG 图片。
31 lines
1.3 KiB
TypeScript
31 lines
1.3 KiB
TypeScript
import { createRoot } from 'react-dom/client'
|
|
import { MermaidDiagram } from '../../src/renderer/src/MermaidDiagram'
|
|
import { UiLocaleProvider } from '../../src/renderer/src/i18n/UiLocaleProvider'
|
|
import '../../src/renderer/src/fonts'
|
|
import '../../src/renderer/src/styles.css'
|
|
|
|
const params = new URLSearchParams(location.search)
|
|
const shape = params.get('shape') ?? 'wide'
|
|
const count = shape === 'small' ? 3 : 24
|
|
const nodes = Array.from({ length: count }, (_, index) =>
|
|
`N${index}["${index === 0 ? 'START' : index === count - 1 ? 'FINISH' : `Step ${index}`} \u5b8c\u6574\u56fe\u8868"]`)
|
|
const source = [
|
|
`flowchart ${shape === 'tall' ? 'TB' : 'LR'}`,
|
|
nodes.join(' --> '),
|
|
'classDef first fill:#ff0000,stroke:#000000,color:#000000;',
|
|
'classDef middle fill:#00ff00,stroke:#000000,color:#000000;',
|
|
'classDef last fill:#0000ff,stroke:#000000,color:#ffffff;',
|
|
'class N0 first;',
|
|
`class N${Math.floor(count / 2)} middle;`,
|
|
`class N${count - 1} last;`
|
|
].join('\n')
|
|
|
|
document.documentElement.dataset.theme = params.get('theme') ?? 'light'
|
|
createRoot(document.getElementById('root')!).render(
|
|
<UiLocaleProvider initialPreference={params.get('locale') === 'en-US' ? 'en-US' : 'zh-CN'}>
|
|
<main className="markdown-content" style={{ padding: 16 }}>
|
|
<MermaidDiagram source={source} />
|
|
</main>
|
|
</UiLocaleProvider>
|
|
)
|