mermaidjs · cadbox1 · Jun 20, 2019 · Jun 25, 2019 · Jun 25, 2019
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# mermaid-live-editor
+# mermaid-live-animated-editor
 
 Edit, preview and share mermaid charts/diagrams.
 

diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html> <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Online FlowChart &amp; Diagrams Editor - Mermaid Live Editor</title> <meta name="og:image" content="https://mermaidjs.github.io/images/header.png"> <link rel="canonical" href="https://mermaidjs.github.io/mermaid-live-editor/"> <meta name="description" content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript."> <link rel="stylesheet" href="src.62716eb1.css"></head> <body> <div id="root"></div> <script src="src.532b65ec.js" charset="UTF-8"></script> </body> </html>
+<!doctype html><html> <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Online FlowChart &amp; Diagrams Editor - Mermaid Live Editor</title> <meta name="og:image" content="https://mermaidjs.github.io/images/header.png"> <link rel="canonical" href="https://mermaidjs.github.io/mermaid-live-editor/"> <meta name="description" content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript."> <link rel="stylesheet" href="src.1230a38d.css"></head> <body> <div id="root"></div> <script src="src.02615d2b.js" charset="UTF-8"></script> </body> </html>
diff --git a/docs/src.02615d2b.js b/docs/src.02615d2b.js
diff --git a/docs/src.1230a38d.css b/docs/src.1230a38d.css
diff --git a/docs/src.191d3211.js b/docs/src.191d3211.js
diff --git a/docs/src.8ced742b.map b/docs/src.8ced742b.map
diff --git a/docs/src.8ecb6e6e.js b/docs/src.8ecb6e6e.js
diff --git a/docs/src.cc2af696.map b/docs/src.cc2af696.map
diff --git a/docs/src.cd9be08a.map b/docs/src.cd9be08a.map
diff --git a/docs/src.ddd3560b.map b/docs/src.ddd3560b.map
diff --git a/docs/src.f4cfcd14.js b/docs/src.f4cfcd14.js
diff --git a/package.json b/package.json
@@ -9,7 +9,6 @@
     "release": "parcel build ./index.html -d docs --public-url ./"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
     "antd": "^3.11.2",
     "js-base64": "^2.5.0",
     "mermaid": "^8.0.0",

diff --git a/src/components/Edit.js b/src/components/Edit.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Row, Col, Input, Icon, Tag, Affix, Card, Divider } from 'antd'
+import { Row, Col, Input, Icon, Tag, Affix, Card, Divider, Button } from 'antd'
 import { Route } from 'react-router-dom'
 import { Base64 } from 'js-base64'
 import mermaid from 'mermaid'
@@ -14,22 +14,49 @@ if (mermaidVersion[0] === '^') {
   mermaidVersion = mermaidVersion.substring(1)
 }
 
+const startingDuration = 1500
+const startingLineOfAnimation = 2 // i think it should be 1 but it breaks for some reason.
+const startingFrame = 0
+
 class Edit extends React.Component {
   constructor (props) {
     super(props)
     this.onCodeChange = this.onCodeChange.bind(this)
     this.onMermaidConfigChange = this.onMermaidConfigChange.bind(this)
+    this.getLastFrame = this.getLastFrame.bind(this)
+    this.handleStart = this.handleStart.bind(this)
+    this.handleEnd = this.handleEnd.bind(this)
+    this.handlePreviousFrame = this.handlePreviousFrame.bind(this)
+    this.handleNextFrame = this.handleNextFrame.bind(this)
+    this.handleAnimation = this.handleAnimation.bind(this)
+    this.handlePlay = this.handlePlay.bind(this)
+    this.handlePause = this.handlePause.bind(this)
+    this.handleDurationChange = this.handleDurationChange.bind(this)
 
     const { match: { params: { base64 } }, location: { search } } = this.props
     this.json = base64ToState(base64, search)
     mermaid.initialize(this.json.mermaid)
+
+    this.state = {
+      frame: this.json.code.split('\n').length - startingLineOfAnimation - 1,
+      frameDuration: startingDuration,
+      playing: false
+    }
+  }
+
+  componentWillUnmount () {
+    if (this.animationTimeout) {
+      clearTimeout(this.animationTimeout)
+      this.animationTimeout = null
+    }
   }
 
   onCodeChange (event) {
     const { history, match: { path } } = this.props
     this.json.code = event.target.value
     const base64 = Base64.encodeURI(JSON.stringify(this.json))
     history.push(path.replace(':base64', base64))
+    this.setState({ playing: false, frame: startingFrame })
   }
 
   onMermaidConfigChange (event) {
@@ -47,10 +74,77 @@ class Edit extends React.Component {
     }
   }
 
+  getLastFrame () {
+    return this.json.code.split('\n').length - startingLineOfAnimation - 1
+  }
+
+  handleStart () {
+    this.setState({ frame: startingFrame })
+  }
+
+  handleEnd () {
+    this.setState({ frame: this.getLastFrame() })
+  }
+
+  handlePreviousFrame () {
+    this.setState(({ frame }) => {
+      if (frame <= startingFrame) {
+        return
+      }
+      return { frame: frame - 1 }
+    })
+  }
+
+  handleNextFrame () {
+    this.setState(({ frame }) => {
+      if (frame >= this.getLastFrame()) {
+        return
+      }
+      return { frame: frame + 1 }
+    })
+  }
+
+  handleAnimation () {
+    const { frame, frameDuration } = this.state
+    if (frame >= this.getLastFrame()) {
+      this.handlePause()
+      return
+    }
+    this.animationTimeout = setTimeout(() => {
+      this.handleNextFrame()
+      this.handleAnimation()
+    }, frameDuration)
+  }
+
+  handlePlay () {
+    const { frame } = this.state
+    if (this.animationTimeout) {
+      this.handlePause()
+      return
+    }
+    if (frame >= this.getLastFrame()) {
+      this.setState({ frame: startingFrame, playing: true }, () => this.handleAnimation())
+    } else {
+      this.setState({ playing: true })
+      this.handleAnimation()
+    }
+  }
+
+  handlePause () {
+    clearTimeout(this.animationTimeout)
+    this.animationTimeout = null
+    this.setState({ playing: false })
+  }
+
+  handleDurationChange (evt) {
+    this.setState({ frameDuration: evt.target.value })
+  }
+
   render () {
     const { match: { url } } = this.props
+    const { frame, frameDuration, playing } = this.state
     return <div>
-      <h1>Mermaid Live Editor</h1>
+      <h1>Mermaid Live Animated Editor</h1>
       <Divider />
       <Row gutter={16}>
         <Col span={8}>
@@ -59,6 +153,16 @@ class Edit extends React.Component {
               <Input.TextArea autosize={{ minRows: 4, maxRows: 16 }} value={this.json.code} onChange={this.onCodeChange} />
             </Card>
           </Affix>
+          <Card title='Animation Controls'>
+            <div>
+              <Button onClick={this.handleStart}>{'<<'}</Button>
+              {' '}<Button onClick={this.handlePreviousFrame}>{'<'}</Button>
+              {' '}<Button onClick={playing ? this.handlePause : this.handlePlay}>{playing ? 'Pause' : 'Play'}</Button>
+              {' '}<Button onClick={this.handleNextFrame}>{'>'}</Button>
+              {' '}<Button onClick={this.handleEnd}>{'>>'}</Button>
+            </div>
+            <div>Frame Duration: <Input type='number' step='100' value={frameDuration} onChange={this.handleDurationChange} /></div>
+          </Card>
           <Card title='Mermaid configuration'>
             <Input.TextArea autosize={{ minRows: 4, maxRows: 16 }} defaultValue={JSON.stringify(this.json.mermaid, null, 2)} onChange={this.onMermaidConfigChange} />
           </Card>
@@ -73,7 +177,7 @@ class Edit extends React.Component {
           </Card>
         </Col>
         <Col span={16}>
-          <Route exact path={url} render={(props) => <Preview {...props} code={this.json.code} />} />
+          <Route exact path={url} render={(props) => <Preview {...props} code={this.json.code.split('\n').slice(0, startingLineOfAnimation + frame).join('\n')} />} />
           <Route path={url + '/error/:base64'} component={Error} />
           <h3 style={{ textAlign: 'right' }}>Powered by mermaid <Tag color='green'>{mermaidVersion}</Tag></h3>
         </Col>

diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import 'antd/dist/antd.css'
-import '@fortawesome/fontawesome-free-webfonts/css/fa-brands.css'
-import '@fortawesome/fontawesome-free-webfonts/css/fa-regular.css'
-import '@fortawesome/fontawesome-free-webfonts/css/fa-solid.css'
-import '@fortawesome/fontawesome-free-webfonts/css/fontawesome.css'
 
 import App from './components/App'
 import './index.css'

diff --git a/yarn.lock b/yarn.lock
@@ -642,11 +642,6 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@fortawesome/fontawesome-free-webfonts@^1.0.9":
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-webfonts/-/fontawesome-free-webfonts-1.0.9.tgz#72f2c10453422aba0d338fa6a9cb761b50ba24d5"
-  integrity sha512-nLgl6b6a+tXaoJJnSRw0hjN8cWM/Q5DhxKAwI9Xr0AiC43lQ2F98vQ1KLA6kw5OoYeAyisGGqmlwtBj0WqOI5Q==
-
 "@iarna/toml@^2.2.0":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.1.tgz#82d0993d8882bb05e0645fbb4731d9e939e895b3"
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html> <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Online FlowChart & Diagrams Editor - Mermaid Live Editor</title> <meta name="og:image" content="https://mermaidjs.github.io/images/header.png"> <link rel="canonical" href="https://mermaidjs.github.io/mermaid-live-editor/"> <meta name="description" content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript."> <link rel="stylesheet" href="src.62716eb1.css"></head> <body> <div id="root"></div> <script src="src.532b65ec.js" charset="UTF-8"></script> </body> </html>
		<!doctype html><html> <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Online FlowChart & Diagrams Editor - Mermaid Live Editor</title> <meta name="og:image" content="https://mermaidjs.github.io/images/header.png"> <link rel="canonical" href="https://mermaidjs.github.io/mermaid-live-editor/"> <meta name="description" content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript."> <link rel="stylesheet" href="src.1230a38d.css"></head> <body> <div id="root"></div> <script src="src.02615d2b.js" charset="UTF-8"></script> </body> </html>