Fix fir defect #141 regarding comment characters

src/diagrams/flowchart/d3.js

@@ -0,0 +1,15 @@
+/* global window */
+
+var d3;
+
+if (require) {
+  try {
+    d3 = require("d3");
+  } catch (e) {}
+}
+
+if (!d3) {
+  d3 = window.d3;
+}
+
+module.exports = d3;

src/diagrams/flowchart/flowRenderer.js

@@ -5,6 +5,7 @@ var graph = require('./graphDb');
 var flow = require('./parser/flow');
 var dot = require('./parser/dot');
 var dagreD3 = require('./dagre-d3');
+var d3 = require('./d3');
 var conf = {
 };
 module.exports.setConf = function(cnf){
@@ -419,8 +420,7 @@ exports.draw = function (text, id,isDot) {
         svg.attr("width", conf.width );
     }
     //svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
-    svg.attr("viewBox",  '0 0 '+ g.graph().width+' '+ g.graph().height);
-
+    svg.attr("viewBox",  '0 0 ' + (g.graph().width+20) + ' ' + (g.graph().height+20));
 
     setTimeout(function(){
         var i = 0;

src/diagrams/flowchart/parser/flow.jison

@@ -8,7 +8,7 @@
 %lex
 
 %%
-\%\%[^\n]*            {console.log('comment: '+yytext)}
+\%\%[^\n]*            /* do nothing */
 "style"               return 'STYLE';
 "default"             return 'DEFAULT';
 "linkStyle"           return 'LINKSTYLE';
@@ -157,11 +157,11 @@ document
 	;
 
 line
-	: spaceListNewline statement
-	{$$=$2;}
-	| statement
+	: statement
 	{$$=$1;}
 	| SEMI
+	| NEWLINE
+	| SPACE
 	| EOF
 	;
 
@@ -216,21 +216,17 @@ statement
     {$$=[];}
     | clickStatement separator
     {$$=[];}
-    | subgraph  text separator document endStatement separator
+    | subgraph  text separator document end separator
     {yy.addSubGraph($4,$2);}
-    | subgraph separator document endStatement separator
+    | subgraph separator document end separator
     {yy.addSubGraph($3,undefined);}
     ;
 
-endStatement: end
-    | SPACE endStatement
-    ;
-
-separator: NEWLINE {console.log('nl sep')} | SEMI {console.log('semi sep')}| EOF {console.log('eof sep')};
+separator: NEWLINE | SEMI | EOF ;
 
 verticeStatement:
      vertex link vertex
-        { console.log($3);yy.addLink($1,$3,$2);$$ = [$1,$3];}
+        { yy.addLink($1,$3,$2);$$ = [$1,$3];}
      | vertex
         {$$ = [$1];}
     ;

src/diagrams/flowchart/parser/flow.spec.js

@@ -170,9 +170,98 @@ describe('when parsing ',function(){
         expect(edges[0].type).toBe('arrow');
         expect(edges[0].text).toBe('');
     });
+    it('should handle comments a at the start',function(){
+        var res = flow.parser.parse('%% Comment\ngraph TD;\n A-->B;');
 
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe('arrow');
+        expect(edges[0].text).toBe('');
+    });
+    it('should handle comments at the end',function(){
+        var res = flow.parser.parse('graph TD;\n A-->B\n %% Comment at the find\n');
+
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe('arrow');
+        expect(edges[0].text).toBe('');
+    });
+    it('should handle comments at the end no trailing newline',function(){
+        var res = flow.parser.parse('graph TD;\n A-->B\n%% Commento');
+
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe('arrow');
+        expect(edges[0].text).toBe('');
+    });
+    it('should handle comments at the end many trailing newlines',function(){
+        var res = flow.parser.parse('graph TD;\n A-->B\n%% Commento\n\n\n');
+
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe('arrow');
+        expect(edges[0].text).toBe('');
+    });
+    it('should handle no trailing newlines',function(){
+        var res = flow.parser.parse('graph TD;\n A-->B');
+
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe('arrow');
+        expect(edges[0].text).toBe('');
+    });
+    it('should handle many trailing newlines',function(){
+        var res = flow.parser.parse('graph TD;\n A-->B\n\n');
+
+
+        var vert = flow.parser.yy.getVertices();
+        var edges = flow.parser.yy.getEdges();
+
+        expect(vert['A'].id).toBe('A');
+        expect(vert['B'].id).toBe('B');
+        expect(edges.length).toBe(1);
+        expect(edges[0].start).toBe('A');
+        expect(edges[0].end).toBe('B');
+        expect(edges[0].type).toBe('arrow');
+        expect(edges[0].text).toBe('');
+    });
     it('should handle a comments with blank rows in-between',function(){
-        var res = flow.parser.parse('graph TD;\n\n\n %% CComment\n A-->B;');
+        var res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B;');
 
 
         var vert = flow.parser.yy.getVertices();
@@ -204,7 +293,7 @@ describe('when parsing ',function(){
     });
 
     it('it should handle a trailing whitespaces after statememnts',function(){
-        var res = flow.parser.parse('graph TD;\n\n\n %% CComment\n A-->B; \n B-->C;');
+        var res = flow.parser.parse('graph TD;\n\n\n %% Comment\n A-->B; \n B-->C;');
 
 
         var vert = flow.parser.yy.getVertices();

src/main.js

@@ -81,7 +81,7 @@ var init = function (sequenceConfig, arr) {
       : arr instanceof Node ? [arr]
       : arr;
 
-    var arr = document.querySelectorAll('.mermaid');
+    //arr = document.querySelectorAll('.mermaid');
     var i;
     
     if (sequenceConfig !== 'undefined' && (typeof sequenceConfig !== 'undefined')) {
@@ -195,7 +195,7 @@ global.mermaid = {
 };
 
 exports.contentLoaded = function(){
-    // Check state of start config mermaid namespece
+    // Check state of start config mermaid namespace
     //console.log('global.mermaid.startOnLoad',global.mermaid.startOnLoad);
     //console.log('mermaid_config',mermaid_config);
     if (typeof mermaid_config !== 'undefined') {

test/web.html

@@ -29,7 +29,28 @@
     <link rel="stylesheet" href="../dist/mermaid.css"/>
 </head>
     <body>
-    <div  class="mermaid">
+    <h1>Issue 141</h1>
+    <div  class="mermaid" id="i141">
+
+        graph LR
+        
+        %% Example diagram
+        A[Square Rect] -- Link text --> B((Circle))
+        A --> C(Round Rect)
+        B --> D{Rhombus}
+        C --> D
+
+    </div>
+    <h1>Issue 140</h1>
+    <div  class="mermaid" id="i140">
+        graph LR
+        A-->B
+        B-->C
+        C-->A
+        D-->C
+
+    </div>
+    <div  class="mermaid" id="ettan">
         graph LR;
         A[Now with default style on links]--v-->B{a = '1,2'}
         B-->|v|C[v]
@@ -104,7 +125,7 @@
         c1-->a2
 
     </div>
-    <div class="mermaid">graph TB
+    <div class="mermaid" >graph TB
         subgraph
             sq[Square shape] -.-> ci((Circle shape))
             od>Odd shape]-. Two line<br>edge comment .-> ro