initial setup for editor page to generate graph through textarea input
This commit is contained in:
IamanimalXI
parent
8261429afb
commit
225560dcdf
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mermaid",
|
||||
"version": "0.2.8",
|
||||
"version": "0.2.6",
|
||||
"authors": [
|
||||
"knsv <knut@sveido.com>"
|
||||
],
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,144 @@
|
|||
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Open sans', sans-serif;
|
||||
}
|
||||
.page {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-direction: normal;
|
||||
-moz-box-direction: normal;
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
.header {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-moz-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background: #282828;
|
||||
color: #d4d8df;
|
||||
padding: 10px;
|
||||
}
|
||||
.header-logo {
|
||||
color: #282828;
|
||||
}
|
||||
.header-title {
|
||||
color: #d4d8df;
|
||||
font-size: 16.25px;
|
||||
}
|
||||
.column {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
background: #282828;
|
||||
color: #d4d8df;
|
||||
max-width: 350px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding: 20px 10px;
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
.column h2 {
|
||||
font-size: 16.25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.content {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-direction: normal;
|
||||
-moz-box-direction: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-pack: justify;
|
||||
-moz-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.editor {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 90%;
|
||||
height: 40%;
|
||||
font-family: 'Open sans', sans-serif;
|
||||
border: 1px solid rgba(40, 40, 40, 0.6);
|
||||
}
|
||||
.button {
|
||||
-webkit-border-radius: 4px;
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-border-radius: 4px;
|
||||
-moz-background-clip: padding;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box;
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-moz-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
font-size: 16.25px;
|
||||
background: #282828;
|
||||
color: #d4d8df;
|
||||
padding: 5px 15px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
width: 50%;
|
||||
max-width: 150px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
.group {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-direction: normal;
|
||||
-moz-box-direction: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
.group:first-of-type {
|
||||
border-bottom: 1px solid rgba(40, 40, 40, 0.2);
|
||||
padding: 10px 0;
|
||||
height: 40%;
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
@import "/bower_components/lesshat/build/lesshat";
|
||||
@import (reference) "settings";
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: @font-family_1;
|
||||
}
|
||||
|
||||
.page {
|
||||
.display(flex);
|
||||
.flex-direction(row);
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
.display(flex);
|
||||
.justify-content(flex-start);
|
||||
.size(100%, 50px);
|
||||
background: @color_1;
|
||||
color: @color_2;
|
||||
padding: 10px;
|
||||
|
||||
&-logo {
|
||||
color: @color_1;
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: @color_2;
|
||||
font-size: @font-size-large;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.column {
|
||||
.display(flex);
|
||||
.size(35%,100%);
|
||||
background: @color_1;
|
||||
color: @color_2;
|
||||
max-width: 350px;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding: 20px 10px;
|
||||
margin: 0 20px 0 0;
|
||||
|
||||
h2 {
|
||||
font-size: @font-size-large;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.display(flex);
|
||||
.flex-direction(column);
|
||||
.justify-content(space-between);
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.editor {
|
||||
.display(flex);
|
||||
.size(90%, 40%);
|
||||
font-family: @font-family_1;
|
||||
border: 1px solid fadeout(@color_1, 40%);
|
||||
}
|
||||
|
||||
.button {
|
||||
.border-radius(4px);
|
||||
.display(flex);
|
||||
.justify-content(center);
|
||||
font-size:@font-size-large;
|
||||
background: @color_1;
|
||||
color: @color_2;
|
||||
padding: 5px 15px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
border:0;
|
||||
width: 50%;
|
||||
max-width: 150px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
.group {
|
||||
.display(flex);
|
||||
.flex-direction(column);
|
||||
.size(100%,50%);
|
||||
|
||||
&:first-of-type {
|
||||
border-bottom: 1px solid fadeout(@color_1, 80%);
|
||||
padding: 10px 0;
|
||||
height: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
|
||||
|
||||
//Font weights
|
||||
@light: 100;
|
||||
@regular: 400;
|
||||
@bold: 600;
|
||||
|
||||
//Main fonts
|
||||
@font-family-sans-serif: 'Open sans', sans-serif;
|
||||
@font-family-serif: serif;
|
||||
|
||||
@font-family_1: @font-family-sans-serif;
|
||||
|
||||
@font-size-base: 13px;
|
||||
@font-size-large: @font-size-base * 1.25; // ~15px
|
||||
@font-size-small: @font-size-base * 0.85; // ~12px
|
||||
@font-size-mini: @font-size-base * 0.65; // ~11px
|
||||
|
||||
@base-line-height: 1.4;
|
||||
@base-borderRadius: 1px;
|
||||
@base-whitespace: 20px;
|
||||
|
||||
//Base colors
|
||||
|
||||
@color_1: rgb(40, 40, 40);
|
||||
@color_2: rgb(212, 216, 223);
|
||||
|
||||
//Color mapping
|
||||
@color-tap-highlight: rgba(0, 0, 0, .0);
|
||||
@color-page-background: transparent;
|
||||
|
||||
//Images
|
||||
@image-spinner: url('.png');
|
||||
|
||||
//Sprites
|
||||
@sprite-ui: url('');
|
||||
|
|
@ -0,0 +1,250 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta http-equiv="cache-control" content="no-cache"/>
|
||||
<meta http-equiv="pragma" content="no-cache"/>
|
||||
<meta name='viewport' content='width=device-width' />
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Content-Type" content="application/javascript; charset=utf-8" />
|
||||
<meta name="url" content="">
|
||||
<meta name="alias" content="">
|
||||
<meta name="copyright" content="" >
|
||||
<meta name="language" content="English">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
<link rel="shortcut icon" href="../app/img/favicon.ico">
|
||||
<link rel="stylesheet" href="css/editor.css"/>
|
||||
<title>
|
||||
Mermaid editor
|
||||
</title>
|
||||
<script src="build.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="header-title">mermaid</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
|
||||
<div class="column">
|
||||
|
||||
|
||||
<article>
|
||||
|
||||
<p>Generation of diagrams and flowcharts from text in a similar manner as markdown.</p>
|
||||
|
||||
<p>Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?</p>
|
||||
|
||||
<p>This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.</p>
|
||||
|
||||
<h1>
|
||||
<a class="" href="#syntax" ><span class=""></span></a>Syntax</h1>
|
||||
|
||||
<h2>
|
||||
<a class="" href="#graph" ><span class=""></span></a>Graph</h2>
|
||||
|
||||
<p>This statement declares a new graph and the direction of the graph layout.</p>
|
||||
|
||||
<pre><code>graph TD
|
||||
</code></pre>
|
||||
|
||||
<p>This declares a graph oriented from top to bottom.</p>
|
||||
|
||||
<p><a href="https://camo.githubusercontent.com/7e1f611d586e9e9701adb3d128306d89bee5cb86/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578332e706e67" target="_blank"><img src="https://camo.githubusercontent.com/7e1f611d586e9e9701adb3d128306d89bee5cb86/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578332e706e67" alt="Example 3" data-canonical-src="http://www.sveido.com/mermaid/img/ex3.png" style="max-width:100%;"></a></p>
|
||||
|
||||
<pre><code>graph LR
|
||||
</code></pre>
|
||||
|
||||
<p>This declares a graph oriented from left to right.</p>
|
||||
|
||||
<p>Possible directions are:</p>
|
||||
|
||||
<ul >
|
||||
<li>TB - top bottom</li>
|
||||
<li>BT - bottom top</li>
|
||||
<li>RL - right left</li>
|
||||
<li>LR - left right</li>
|
||||
<li>TD - same as TB</li>
|
||||
</ul>
|
||||
|
||||
<p><a href="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" target="_blank"><img src="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" alt="Example 4" data-canonical-src="http://www.sveido.com/mermaid/img/ex4.png" style="max-width:100%;"></a></p>
|
||||
|
||||
<h2>
|
||||
<a class="" href="#nodes" ><span class=""></span></a>Nodes</h2>
|
||||
|
||||
<h3>
|
||||
<a class="" href="#a-node-default" ><span class=""></span></a>A node (default)</h3>
|
||||
|
||||
<pre><code>id1;
|
||||
</code></pre>
|
||||
|
||||
<p><a href="https://camo.githubusercontent.com/a92bd6dbda75eae56d4157b45bfbd833dff61043/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578352e706e67" target="_blank"><img src="https://camo.githubusercontent.com/a92bd6dbda75eae56d4157b45bfbd833dff61043/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578352e706e67" alt="Single node" data-canonical-src="http://www.sveido.com/mermaid/img/ex5.png" style="max-width:100%;"></a></p>
|
||||
|
||||
<p>Note that the id is what is displayed in the box.</p>
|
||||
|
||||
<h3>
|
||||
<a id="user-content-a-node-with-text" class="" href="#a-node-with-text" ><span class=""></span></a>A node with text</h3>
|
||||
|
||||
<p>It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text
|
||||
found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The
|
||||
one previously defined will be used when rendering the box.</p>
|
||||
|
||||
<pre><code>id1[This is the text in the box];
|
||||
</code></pre>
|
||||
|
||||
<p><a href="https://camo.githubusercontent.com/98439dc8af26da18e98ec00ca317bbdc61f6e32e/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578362e706e67" target="_blank"><img src="https://camo.githubusercontent.com/98439dc8af26da18e98ec00ca317bbdc61f6e32e/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578362e706e67" alt="Text in node" data-canonical-src="http://www.sveido.com/mermaid/img/ex6.png" style="max-width:100%;"></a></p>
|
||||
|
||||
<h3>
|
||||
<a id="user-content-a-node-with-round-edges" class="" href="#a-node-with-round-edges" ><span class=""></span></a>A node with round edges</h3>
|
||||
|
||||
<pre><code>id1(This is the text in the box);
|
||||
</code></pre>
|
||||
|
||||
<p><a href="https://camo.githubusercontent.com/bef3546487dac334848d27e58cb2ba6825538d28/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578372e706e67" target="_blank"><img src="https://camo.githubusercontent.com/bef3546487dac334848d27e58cb2ba6825538d28/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578372e706e67" alt="Node with round edges" data-canonical-src="http://www.sveido.com/mermaid/img/ex7.png" style="max-width:100%;"></a></p>
|
||||
|
||||
<h3>
|
||||
<a id="user-content-a-node-in-the-form-of-a-circle" class="" href="#a-node-in-the-form-of-a-circle" ><span class=""></span></a>A node in the form of a circle</h3>
|
||||
|
||||
<pre><code>id1((This is the text in the box));
|
||||
</code></pre>
|
||||
|
||||
|
||||
|
||||
<h3>
|
||||
<a id="user-content-a-node-in-an-asymetric-shape" class="" href="#a-node-in-an-asymetric-shape" ><span class=""></span></a>A node in an asymetric shape</h3>
|
||||
|
||||
<pre><code>id1>This is the text in the box];
|
||||
</code></pre>
|
||||
|
||||
|
||||
|
||||
<h3>
|
||||
<a class="" href="#a-node-rhombus" ><span class=""></span></a>A node (rhombus)</h3>
|
||||
|
||||
<pre><code>id1{This is the text in the box};
|
||||
</code></pre>
|
||||
|
||||
|
||||
|
||||
<h3>
|
||||
<a class="" href="#styling-a-node" ><span class=""></span></a>Styling a node</h3>
|
||||
|
||||
<p>It is possible to apply specific styles such as a thicker border or a different background color to a node.</p>
|
||||
|
||||
<pre><code>graph LR;
|
||||
id1(Start)-->id2(Stop);
|
||||
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;
|
||||
</code></pre>
|
||||
|
||||
|
||||
<h4>
|
||||
<a class="" href="#classes" ><span class=""></span></a>Classes</h4>
|
||||
|
||||
<p>More convenient then defining the style everytime is to define a class of styles and attach this class to the nodes that
|
||||
should have a different look.</p>
|
||||
|
||||
<p>a class definition looks like the example below:</p>
|
||||
|
||||
<pre><code> classDef className fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
</code></pre>
|
||||
|
||||
<p>Attachment of a class to a node is done as per below:</p>
|
||||
|
||||
<pre><code> class nodeId1 className;
|
||||
</code></pre>
|
||||
|
||||
<p>It is also possible to attach a class to a list of nodes in one statement:</p>
|
||||
|
||||
<pre><code> class nodeId1,nodeId2 className;
|
||||
</code></pre>
|
||||
|
||||
<h4>
|
||||
<a class="" href="#default-class" ><span class=""></span></a>Default class</h4>
|
||||
|
||||
<p>If a class is named default it will be assigned to all classes without specific class definitions.</p>
|
||||
|
||||
<pre><code> classDef default fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
</code></pre>
|
||||
|
||||
<h2>
|
||||
<a class="" href="#links-between-nodes" ><span class=""></span></a>Links between nodes</h2>
|
||||
|
||||
<p>Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.</p>
|
||||
|
||||
<h3>
|
||||
<a id="user-content-a-link-with-arrow-head" class="" href="#a-link-with-arrow-head" ><span class=""></span></a>A link with arrow head</h3>
|
||||
|
||||
<pre><code>A-->B;
|
||||
</code></pre>
|
||||
|
||||
<p><a href="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" target="_blank"><img src="https://camo.githubusercontent.com/df275fa5422db840b2804d2310a099ed84f63e17/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f6578342e706e67" alt="Link with arrowhead" data-canonical-src="http://www.sveido.com/mermaid/img/ex4.png" style="max-width:100%;"></a></p>
|
||||
|
||||
<h3>
|
||||
<a class="" href="#an-open-link" ><span class=""></span></a>An open link</h3>
|
||||
|
||||
<pre><code>A---B;
|
||||
</code></pre>
|
||||
|
||||
<p><a href="https://camo.githubusercontent.com/6764ce0520fe98f884c178fd46c754e1df3910e0/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831302e706e67" target="_blank"><img src="https://camo.githubusercontent.com/6764ce0520fe98f884c178fd46c754e1df3910e0/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831302e706e67" alt="Open link" data-canonical-src="http://www.sveido.com/mermaid/img/ex10.png" style="max-width:100%;"></a></p>
|
||||
|
||||
<h3>
|
||||
<a id="user-content-text-on-links" class="" href="#text-on-links" ><span class=""></span></a>Text on links</h3>
|
||||
|
||||
<pre><code>A---|This is the text|B;
|
||||
</code></pre>
|
||||
|
||||
<p><a href="https://camo.githubusercontent.com/2e92c4ce87b3aacf1ebfb4123dedf0697bb4e388/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831312e706e67" target="_blank"><img src="https://camo.githubusercontent.com/2e92c4ce87b3aacf1ebfb4123dedf0697bb4e388/687474703a2f2f7777772e73766569646f2e636f6d2f6d65726d6169642f696d672f657831312e706e67" alt="Text on links" data-canonical-src="http://www.sveido.com/mermaid/img/ex11.png" style="max-width:100%;"></a></p>
|
||||
|
||||
<h3>
|
||||
<a id="user-content-styling-links" class="" href="#styling-links" ><span class=""></span></a>Styling links</h3>
|
||||
|
||||
<p>It is possible to style links for instance a link that is going back in the flow. This is done by the linkStyle statement as in the example below:</p>
|
||||
|
||||
<pre><code>linkStyle 3 stroke:#ff3,stroke-width:4px;
|
||||
</code></pre>
|
||||
|
||||
<h2>
|
||||
<a id="user-content-interaction" class="" href="#interaction" ><span class=""></span></a>Interaction</h2>
|
||||
|
||||
<p>It is possible to bind a click event to a node:</p>
|
||||
|
||||
<pre><code>click nodeId callback
|
||||
</code></pre>
|
||||
|
||||
<ul >
|
||||
<li>nodeId is the id of the node</li>
|
||||
<li>callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.</li>
|
||||
</ul>
|
||||
|
||||
<h1>
|
||||
<a id="user-content-credits" class="" href="#credits" ><span class=""></span></a>Credits</h1>
|
||||
|
||||
<p>Many thanks to the <a href="http://d3js.org/">d3</a> and <a href="https://github.com/cpettitt/dagre-d3">dagre-d3</a> projects for providing the graphical layout and drawing libraries!</p>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="group">
|
||||
|
||||
<textarea class="editor">
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
</textarea>
|
||||
<button class="button">Generate</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="group mermaid">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
25
gulpfile.js
25
gulpfile.js
|
|
@ -1,5 +1,7 @@
|
|||
var gulp = require('gulp');
|
||||
var path = require('path');
|
||||
var jison = require('gulp-jison');
|
||||
var less = require('gulp-less');
|
||||
var shell = require('gulp-shell');
|
||||
var concat = require('gulp-concat');
|
||||
var uglify = require('gulp-uglify');
|
||||
|
|
@ -46,6 +48,16 @@ gulp.task('coverage', function (cb) {
|
|||
});
|
||||
});
|
||||
|
||||
gulp.task('less', function () {
|
||||
gulp.src(['./editor/css/editor.less'])
|
||||
.pipe(less({
|
||||
generateSourceMap: false, // default true
|
||||
paths: [ path.join(__dirname, 'less', 'includes') ]
|
||||
}))
|
||||
.pipe(concat('editor.css'))
|
||||
.pipe(gulp.dest('./editor/css/'));
|
||||
});
|
||||
|
||||
var browserify = require('gulp-browserify');
|
||||
|
||||
// Basic usage
|
||||
|
|
@ -60,6 +72,19 @@ gulp.task('slimDist', function() {
|
|||
.pipe(gulp.dest('./dist/'));
|
||||
});
|
||||
|
||||
|
||||
// Build editor
|
||||
gulp.task('editor', function() {
|
||||
/*gulp.src(['src/editor.js'])
|
||||
.pipe(browserify())
|
||||
.pipe(concat('main.js'))
|
||||
.pipe(gulp.dest('./editor/'));*/
|
||||
return gulp.src(['node_modules/d3/d3.min.js','node_modules/dagre-d3/dist/dagre-d3.min.js','dist/mermaid.slim.js','src/editor.js'])
|
||||
.pipe(concat('build.js'))
|
||||
.pipe(gulp.dest('./editor/'));
|
||||
});
|
||||
|
||||
|
||||
// Basic usage
|
||||
gulp.task('fullDist', ['slimDist'], function() {
|
||||
// Single entry point to browserify
|
||||
|
|
|
|||
|
|
@ -42,6 +42,8 @@
|
|||
"lodash.templatesettings": "^2.4.1",
|
||||
"lodash.values": "^2.4.1",
|
||||
"mock-browser": "^0.90.27",
|
||||
"rewire": "^2.1.3"
|
||||
"rewire": "^2.1.3",
|
||||
"gulp-less": "^1.3.6",
|
||||
"path": "^0.4.9"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
function decodeHTMLEntities (str) {
|
||||
if(str && typeof str === 'string') {
|
||||
// strip script/html tags
|
||||
element = document.querySelector('.editor');
|
||||
|
||||
str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, '');
|
||||
str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, '');
|
||||
element.innerHTML = str;
|
||||
str = element.textContent;
|
||||
element.textContent = '';
|
||||
}
|
||||
|
||||
return str;
|
||||
}
|
||||
|
||||
var mermaidEditor = {
|
||||
$ : document.querySelector,
|
||||
textField : '',
|
||||
submit : '',
|
||||
graph : '',
|
||||
|
||||
init: function () {
|
||||
|
||||
document.querySelector('.button').addEventListener('click', function () {
|
||||
mermaidEditor.update();
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
update: function () {
|
||||
var txt = document.querySelector('.editor').value;
|
||||
txt = txt.replace(/>/g,'>');
|
||||
txt = txt.replace(/</g,'<');
|
||||
txt = decodeHTMLEntities(txt).trim();
|
||||
|
||||
document.querySelector('.mermaid').innerHTML = txt;
|
||||
mermaid.init();
|
||||
document.querySelector('.editor').value = txt;
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
mermaidEditor.init();
|
||||
|
||||
}, false);
|
||||
|
||||
exports = mermaidEditor;
|
||||
Loading…
Reference in New Issue