Skip to content

Commit 65e83e7

Browse files
authored
Merge pull request #2585 from daiyam/fix-mermaid-height
fix height of mermaid diagrams
2 parents 3c12e0d + b83d3e5 commit 65e83e7

File tree

3 files changed

+46
-3
lines changed

3 files changed

+46
-3
lines changed

browser/components/MarkdownPreview.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,7 @@ export default class MarkdownPreview extends React.Component {
246246
this.saveAsHtmlHandler = () => this.handleSaveAsHtml()
247247
this.saveAsPdfHandler = () => this.handleSaveAsPdf()
248248
this.printHandler = () => this.handlePrint()
249+
this.resizeHandler = _.throttle(this.handleResize.bind(this), 100)
249250

250251
this.linkClickHandler = this.handleLinkClick.bind(this)
251252
this.initMarkdown = this.initMarkdown.bind(this)
@@ -540,6 +541,10 @@ export default class MarkdownPreview extends React.Component {
540541
'scroll',
541542
this.scrollHandler
542543
)
544+
this.refs.root.contentWindow.addEventListener(
545+
'resize',
546+
this.resizeHandler
547+
)
543548
eventEmitter.on('export:save-text', this.saveAsTextHandler)
544549
eventEmitter.on('export:save-md', this.saveAsMdHandler)
545550
eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
@@ -578,6 +583,10 @@ export default class MarkdownPreview extends React.Component {
578583
'scroll',
579584
this.scrollHandler
580585
)
586+
this.refs.root.contentWindow.removeEventListener(
587+
'resize',
588+
this.resizeHandler
589+
)
581590
eventEmitter.off('export:save-text', this.saveAsTextHandler)
582591
eventEmitter.off('export:save-md', this.saveAsMdHandler)
583592
eventEmitter.off('export:save-html', this.saveAsHtmlHandler)
@@ -997,6 +1006,15 @@ export default class MarkdownPreview extends React.Component {
9971006
}
9981007
}
9991008

1009+
handleResize () {
1010+
_.forEach(
1011+
this.refs.root.contentWindow.document.querySelectorAll('svg[ratio]'),
1012+
el => {
1013+
el.setAttribute('height', el.clientWidth / el.getAttribute('ratio'))
1014+
}
1015+
)
1016+
}
1017+
10001018
focus () {
10011019
this.refs.root.focus()
10021020
}

browser/components/markdown.styl

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -427,6 +427,9 @@ pre.fence
427427
canvas, svg
428428
max-width 100% !important
429429

430+
svg[ratio]
431+
width 100%
432+
430433
.gallery
431434
width 100%
432435
height 50vh

browser/components/render/MermaidRender.js

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,40 @@ function getId () {
2222
function render (element, content, theme, enableHTMLLabel) {
2323
try {
2424
const height = element.attributes.getNamedItem('data-height')
25-
if (height && height.value !== 'undefined') {
25+
const isPredefined = height && height.value !== 'undefined'
26+
if (isPredefined) {
2627
element.style.height = height.value + 'vh'
2728
}
2829
const isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
2930
mermaidAPI.initialize({
3031
theme: isDarkTheme ? 'dark' : 'default',
3132
themeCSS: isDarkTheme ? darkThemeStyling : '',
32-
useMaxWidth: false,
33-
flowchart: { htmlLabels: enableHTMLLabel }
33+
flowchart: {
34+
htmlLabels: enableHTMLLabel
35+
},
36+
gantt: {
37+
useWidth: element.clientWidth
38+
}
3439
})
3540
mermaidAPI.render(getId(), content, (svgGraph) => {
3641
element.innerHTML = svgGraph
42+
43+
if (!isPredefined) {
44+
const el = element.firstChild
45+
const viewBox = el.getAttribute('viewBox').split(' ')
46+
47+
let ratio = viewBox[2] / viewBox[3]
48+
49+
if (el.style.maxWidth) {
50+
const maxWidth = parseFloat(el.style.maxWidth)
51+
52+
ratio *= el.parentNode.clientWidth / maxWidth
53+
}
54+
55+
el.setAttribute('ratio', ratio)
56+
el.setAttribute('height', el.parentNode.clientWidth / ratio)
57+
console.log(el)
58+
}
3759
})
3860
} catch (e) {
3961
element.className = 'mermaid-error'

0 commit comments

Comments
 (0)