WIP-hook up a renderer

src/diagrams/gitGraph/gitGraphRenderer.js

@@ -0,0 +1,39 @@
+
+var db = require('./gitGraphAst.js');
+var gitGraphParser = require('./parser/gitGraph.js');
+var d3 = require('../../d3');
+var Logger = require('../../logger');
+
+var log = new Logger.Log();
+
+exports.draw = function (txt, id, ver) {
+    var parser;
+    parser = gitGraphParser.parser;
+    parser.yy = db;
+
+    // Parse the graph definition
+    parser.parse(txt);
+
+    // Fetch the default direction, use TD if none was found
+    var svg = d3.select('#'+id);
+
+    var g = svg.append('g');
+
+    g.append('text')      // text label for the x axis
+        .attr('x', 100)
+        .attr('y', 40)
+        .attr('class','version')
+        .attr('font-size','32px')
+        .style('text-anchor', 'middle')
+        .text('mermaid '+ ver);
+
+    /*
+    var box = exports.bounds.getBounds();
+
+    var height = box.stopy-box.starty+2*conf.diagramMarginY;
+    var width  = box.stopx-box.startx+2*conf.diagramMarginX;*/
+
+    svg.attr('height',100);
+    svg.attr('width', 400 );
+    //svg.attr('viewBox', '0 0 300 150');
+};

src/mermaidAPI.js

@@ -31,6 +31,9 @@ var ganttDb = require('./diagrams/gantt/ganttDb');
 var classParser = require('./diagrams/classDiagram/parser/classDiagram');
 var classRenderer = require('./diagrams/classDiagram/classRenderer');
 var classDb = require('./diagrams/classDiagram/classDb');
+var gitGraphParser = require('./diagrams/gitGraph/parser/gitGraph');
+var gitGraphRenderer = require('./diagrams/gitGraph/gitGraphRenderer');
+var gitGraphAst = require('./diagrams/gitGraph/gitGraphAst');
 var d3 = require('./d3');
 
 SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(toElement) {
@@ -161,56 +164,56 @@ var config = {
 
     /** ### gantt
      * The object containing configurations specific for gantt diagrams*
-     */ 
+     */
     gantt:{
         /**
          * **titleTopMargin** - margin top for the text over the gantt diagram
-         */ 
+         */
         titleTopMargin: 25,
 
-        /** 
+        /**
          * **barHeight** - the height of the bars in the graph
-         */ 
+         */
         barHeight: 20,
 
-        /** 
+        /**
          * **barGap** - the margin between the different activities in the gantt diagram
-         */ 
+         */
         barGap: 4,
 
-        /** 
+        /**
          *  **topPadding** - margin between title and gantt diagram and between axis and gantt diagram.
-         */  
+         */
         topPadding: 50,
 
-        /** 
+        /**
          *  **sidePadding** - the space allocated for the section name to the left of the activities.
-         */  
+         */
         sidePadding: 75,
 
-        /** 
+        /**
          *  **gridLineStartPadding** - Vertical starting position of the grid lines
          */
         gridLineStartPadding: 35,
 
-        /** 
+        /**
          *  **fontSize** - font size ...
          */
         fontSize: 11,
 
-        /** 
+        /**
          * **fontFamily** - font family ...
          */
         fontFamily: '"Open-Sans", "sans-serif"',
 
-        /** 
+        /**
          * **numberSectionStyles** - the number of alternating section styles
          */
         numberSectionStyles:3,
 
-        /** 
+        /**
          * **axisFormatter** - formatting of the axis, this might need adjustment to match your locale and preferences
-         */  
+         */
         axisFormatter: [
 
             // Within a day
@@ -236,6 +239,7 @@ var config = {
         ]
     },
     classDiagram:{},
+    gitGraph: {},
     info:{}
 };
 
@@ -395,6 +399,15 @@ var render = function(id, txt, cb, container){
     var graphType = utils.detectType(txt);
     var classes = {};
     switch(graphType){
+        case 'gitGraph':
+            config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
+            gitGraphRenderer.setConf(config.gitGraph);
+            gitGraphRenderer.draw(txt, id, false);
+            if(config.cloneCssStyles){
+                classes = gitGraphRenderer.getClasses(txt, false);
+                utils.cloneCssStyles(element.firstChild, classes);
+            }
+            break;
         case 'graph':
             config.flowchart.arrowMarkerAbsolute = config.arrowMarkerAbsolute;
             flowRenderer.setConf(config.flowchart);
@@ -512,7 +525,7 @@ var setConf = function(cnf){
             for(j=0;j<lvl2Keys.length;j++) {
                 log.debug('Setting conf ',lvl1Keys[i],'-',lvl2Keys[j]);
                 if(typeof config[lvl1Keys[i]] === 'undefined'){
-                    
+
                     config[lvl1Keys[i]] = {};
                 }
                 log.debug('Setting config: '+lvl1Keys[i]+' '+lvl2Keys[j]+' to '+cnf[lvl1Keys[i]][lvl2Keys[j]]);

src/utils.js

@@ -47,6 +47,10 @@ var detectType = function(text){
         return 'classDiagram';
     }
 
+    if(text.match(/^\s*gitGraph/)) {
+        log.debug('Detected gitGraph syntax');
+        return 'gitGraph';
+    }
     return 'graph';
 };
 exports.detectType= detectType;
@@ -85,7 +89,7 @@ var cloneCssStyles = function(svg, classes){
                     log.warn('Invalid CSS selector "' + rule.selectorText + '"', err);
                 }
             }
-        } 
+        }
     }
 
     var defaultStyles = '';

src/utils.spec.js

@@ -29,6 +29,12 @@ describe('when detecting chart type ', function () {
         var type = utils.detectType(str);
         expect(type).toBe('graph');
     });
+    it('should handle a graph defintion for gitGraph', function () {
+        str = '  \n  gitGraph TB:\nbfs1:queue';
+
+        var type = utils.detectType(str);
+        expect(type).toBe('gitGraph');
+    });
 });
 
 describe('when cloning CSS ', function () {