Permalink
Browse files

add sequence diagram

  • Loading branch information...
1 parent 0445c68 commit f0d2fb53d4de95244834ffe5d444768db930f057 @Rokt33r Rokt33r committed Oct 26, 2016
Showing with 48 additions and 14 deletions.
  1. +25 โˆ’6 browser/components/MarkdownPreview.js
  2. +8 โˆ’1 browser/components/markdown.styl
  3. +6 โˆ’3 browser/lib/markdown.js
  4. +5 โˆ’2 lib/main.html
  5. +2 โˆ’1 oh-my-cdn.json
  6. +2 โˆ’1 webpack-skeleton.js
@@ -5,6 +5,7 @@ import CodeMirror from 'codemirror'
import consts from 'browser/lib/consts'
import Raphael from 'raphael'
import flowchart from 'flowchart'
+import SequenceDiagram from 'sequence-diagram'
function decodeHTMLEntities (text) {
var entities = [
@@ -213,12 +214,12 @@ export default class MarkdownPreview extends React.Component {
})
})
let opts = {}
- if (this.props.theme === 'dark') {
- opts['font-color'] = '#DDD'
- opts['line-color'] = '#DDD'
- opts['element-color'] = '#DDD'
- opts['fill'] = '#3A404C'
- }
+ // if (this.props.theme === 'dark') {
+ // opts['font-color'] = '#DDD'
+ // opts['line-color'] = '#DDD'
+ // opts['element-color'] = '#DDD'
+ // opts['fill'] = '#3A404C'
+ // }
_.forEach(this.refs.root.contentWindow.document.querySelectorAll('.flowchart'), (el) => {
Raphael.setWindow(this.getWindow())
try {
@@ -230,6 +231,24 @@ export default class MarkdownPreview extends React.Component {
})
} catch (e) {
console.error(e)
+ el.className = 'flowchart-error'
+ el.innerHTML = 'Flowchart parse error: ' + e.message
+ }
+ })
+
+ _.forEach(this.refs.root.contentWindow.document.querySelectorAll('.sequence'), (el) => {
+ Raphael.setWindow(this.getWindow())
+ try {
+ let diagram = SequenceDiagram.parse(decodeHTMLEntities(el.innerHTML))
+ el.innerHTML = ''
+ diagram.drawSVG(el, {theme: 'simple'})
+ _.forEach(el.querySelectorAll('a'), (el) => {
+ el.addEventListener('click', this.anchorClickHandler)
+ })
+ } catch (e) {
+ console.error(e)
+ el.className = 'sequence-error'
+ el.innerHTML = 'Sequence diagram parse error: ' + e.message
}
})
}
@@ -68,6 +68,12 @@ body
padding 5px
margin -5px
border-radius 5px
+ .flowchart-error, .sequence-error
+ background-color errorBackgroundColor
+ color errorTextColor
+ padding 5px
+ border-radius 5px
+ justify-content left
li
label.taskListItem
margin-left -2em
@@ -202,9 +208,10 @@ pre
margin 0 0 1em
display flex
line-height 1.4em
- &.flowchart
+ &.flowchart, &.sequence
display flex
justify-content center
+ background-color white
&.CodeMirror
height initial
&>code
@@ -23,6 +23,9 @@ var md = markdownit({
if (lang === 'flowchart') {
return `<pre class="flowchart">${str}</pre>`
}
+ if (lang === 'sequence') {
+ return `<pre class="sequence">${str}</pre>`
+ }
return '<pre class="code">' +
createGutter(str) +
'<code class="' + lang + '">' +
@@ -132,13 +135,13 @@ function strip (input) {
.replace(/`{3}.*\n/g, '')
.replace(/<(.*?)>/g, '$1')
.replace(/^[=\-]{2,}\s*$/g, '')
- .replace(/\[\^.+?\](\: .*?$)?/g, '')
+ .replace(/\[\^.+?\](: .*?$)?/g, '')
.replace(/\s{0,2}\[.*?\]: .*?$/g, '')
- .replace(/\!\[.*?\][\[\(].*?[\]\)]/g, '')
+ .replace(/!\[.*?\][\[\(].*?[\]\)]/g, '')
.replace(/\[(.*?)\][\[\(].*?[\]\)]/g, '$1')
.replace(/>/g, '')
.replace(/^\s{1,2}\[(.*?)\]: (\S+)( ".*?")?\s*$/g, '')
- .replace(/^\#{1,6}\s*([^#]*)\s*(\#{1,6})?/gm, '$1')
+ .replace(/^#{1,6}\s*([^#]*)\s*(#{1,6})?/gm, '$1')
.replace(/([\*_]{1,3})(\S.*?\S)\1/g, '$2')
.replace(/(`{3,})(.*?)\1/gm, '$2')
.replace(/^-{3,}\s*$/g, '')
View
@@ -63,6 +63,10 @@
<script src="../compiled/raphael.js"></script>
<script src="../compiled/flowchart.js"></script>
+ <script>
+ window._ = require('lodash')
+ </script>
+ <script src="../compiled/sequence-diagram.js"></script>
<script src="../compiled/katex.js"></script>
<script src="../compiled/react.js"></script>
@@ -72,8 +76,7 @@
<script type='text/javascript'>
const electron = require('electron')
electron.webFrame.setZoomLevelLimits(1, 1)
- const _ = require('lodash')
- var scriptUrl = _.find(electron.remote.process.argv, (a) => a === '--hot')
+ var scriptUrl = window._.find(electron.remote.process.argv, (a) => a === '--hot')
? 'http://localhost:8080/assets/main.js'
: '../compiled/main.js'
var scriptEl = document.createElement('script')
View
@@ -8,6 +8,7 @@
"katex": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.js",
"katex-style": "https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.6.0/katex.min.css",
"raphael": "https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js",
- "flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.3/flowchart.js"
+ "flowchart": "https://cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.3/flowchart.js",
+ "sequence-diagram": "https://cdn.rawgit.com/bramp/js-sequence-diagrams/master/build/sequence-diagram-min.js"
}
}
View
@@ -49,7 +49,8 @@ var config = {
'codemirror': 'var CodeMirror',
'redux': 'var Redux',
'raphael': 'var Raphael',
- 'flowchart': 'var flowchart'
+ 'flowchart': 'var flowchart',
+ 'sequence-diagram': 'var Diagram'
}
]
}

0 comments on commit f0d2fb5

Please sign in to comment.