From 2fc37d54f275f2f16c9263074b7ca52ac269c731 Mon Sep 17 00:00:00 2001
From: Baptiste Augrain <daiyam@zokugun.org>
Date: Thu, 8 Nov 2018 13:19:46 +0100
Subject: [PATCH 1/2] fix height of mermaid's diagrams

---
 browser/components/MarkdownPreview.js      | 18 +++++++++++++++++
 browser/components/markdown.styl           |  3 +++
 browser/components/render/MermaidRender.js | 23 ++++++++++++++++++++--
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index d9ff70746..90107ffdd 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -205,6 +205,7 @@ export default class MarkdownPreview extends React.Component {
     this.saveAsMdHandler = () => this.handleSaveAsMd()
     this.saveAsHtmlHandler = () => this.handleSaveAsHtml()
     this.printHandler = () => this.handlePrint()
+    this.resizeHandler = _.throttle(this.handleResize.bind(this), 100)
 
     this.linkClickHandler = this.handlelinkClick.bind(this)
     this.initMarkdown = this.initMarkdown.bind(this)
@@ -485,6 +486,10 @@ export default class MarkdownPreview extends React.Component {
       'scroll',
       this.scrollHandler
     )
+    this.refs.root.contentWindow.addEventListener(
+      'resize',
+      this.resizeHandler
+    )
     eventEmitter.on('export:save-text', this.saveAsTextHandler)
     eventEmitter.on('export:save-md', this.saveAsMdHandler)
     eventEmitter.on('export:save-html', this.saveAsHtmlHandler)
@@ -520,6 +525,10 @@ export default class MarkdownPreview extends React.Component {
       'scroll',
       this.scrollHandler
     )
+    this.refs.root.contentWindow.removeEventListener(
+      'resize',
+      this.resizeHandler
+    )
     eventEmitter.off('export:save-text', this.saveAsTextHandler)
     eventEmitter.off('export:save-md', this.saveAsMdHandler)
     eventEmitter.off('export:save-html', this.saveAsHtmlHandler)
@@ -797,6 +806,15 @@ export default class MarkdownPreview extends React.Component {
     )
   }
 
+  handleResize () {
+     _.forEach(
+      this.refs.root.contentWindow.document.querySelectorAll('svg[ratio]'),
+      el => {
+        el.setAttribute('height', el.clientWidth / el.getAttribute('ratio'))
+      }
+    )
+  }
+
   focus () {
     this.refs.root.focus()
   }
diff --git a/browser/components/markdown.styl b/browser/components/markdown.styl
index b7f219b87..7b8911d72 100644
--- a/browser/components/markdown.styl
+++ b/browser/components/markdown.styl
@@ -416,6 +416,9 @@ pre.fence
     canvas, svg
       max-width 100% !important
 
+    svg[ratio]
+      width 100%
+
 themeDarkBackground = darken(#21252B, 10%)
 themeDarkText = #f9f9f9
 themeDarkBorder = lighten(themeDarkBackground, 20%)
diff --git a/browser/components/render/MermaidRender.js b/browser/components/render/MermaidRender.js
index 7a3b3ea2c..c23805043 100644
--- a/browser/components/render/MermaidRender.js
+++ b/browser/components/render/MermaidRender.js
@@ -22,17 +22,36 @@ function getId () {
 function render (element, content, theme) {
   try {
     const height = element.attributes.getNamedItem('data-height')
-    if (height && height.value !== 'undefined') {
+    const isPredefined = height && height.value !== 'undefined'
+    if (isPredefined) {
       element.style.height = height.value + 'vh'
     }
     let isDarkTheme = theme === 'dark' || theme === 'solarized-dark' || theme === 'monokai' || theme === 'dracula'
     mermaidAPI.initialize({
       theme: isDarkTheme ? 'dark' : 'default',
       themeCSS: isDarkTheme ? darkThemeStyling : '',
-      useMaxWidth: false
+      gantt: {
+        useWidth: element.clientWidth
+      }
     })
     mermaidAPI.render(getId(), content, (svgGraph) => {
       element.innerHTML = svgGraph
+
+      if (!isPredefined) {
+        const el = element.firstChild
+        const viewBox = el.getAttribute('viewBox').split(' ')
+
+        let ratio = viewBox[2] / viewBox[3]
+
+        if (el.style.maxWidth) {
+          const maxWidth = parseFloat(el.style.maxWidth)
+
+          ratio *= el.parentNode.clientWidth / maxWidth
+        }
+
+        el.setAttribute('ratio', ratio)
+        el.setAttribute('height', el.parentNode.clientWidth / ratio)
+      }
     })
   } catch (e) {
     element.className = 'mermaid-error'

From b6b29e02f3a947095f904afe9e5dd066005daba0 Mon Sep 17 00:00:00 2001
From: Baptiste Augrain <daiyam@zokugun.org>
Date: Thu, 8 Nov 2018 14:41:25 +0100
Subject: [PATCH 2/2] fix lint error

---
 browser/components/MarkdownPreview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 90107ffdd..afab9a8d7 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -807,7 +807,7 @@ export default class MarkdownPreview extends React.Component {
   }
 
   handleResize () {
-     _.forEach(
+    _.forEach(
       this.refs.root.contentWindow.document.querySelectorAll('svg[ratio]'),
       el => {
         el.setAttribute('height', el.clientWidth / el.getAttribute('ratio'))