Render function as mentioned in issue #146, only works in browser context

Updated build scripts
New way for bundling content in dist, tobe tested, currently to be considered beta

src/diagrams/example/exampleRenderer.js

@@ -3,7 +3,7 @@
  */
 var db = require('./exampleDb');
 var exampleParser = require('./parser/example.js');
-
+var d3 = require('../../d3');
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.

src/diagrams/flowchart/d3.js

@@ -1,6 +1,6 @@
 /* global window */
 
-var d3;
+/*var d3;
 
 if (require) {
   try {
@@ -12,4 +12,4 @@ if (!d3) {
   d3 = window.d3;
 }
 
-module.exports = d3;
+module.exports = d3;*/

src/diagrams/flowchart/dagre-d3.js

@@ -1,11 +1,12 @@
 /* global window */
 
 var dagreD3;
-
+//console.log('setting up dagre-d3');
 if (require) {
   try {
     dagreD3 = require("dagre-d3");
-  } catch (e) {}
+      //console.log('Got it (dagre-d3)');
+  } catch (e) {console.log('Could not load dagre-d3');}
 }
 
 if (!dagreD3) {

src/diagrams/flowchart/flowRenderer.js

@@ -4,8 +4,8 @@
 var graph = require('./graphDb');
 var flow = require('./parser/flow');
 var dot = require('./parser/dot');
+var d3 = require('../../d3');
 var dagreD3 = require('./dagre-d3');
-var d3 = require('./d3');
 var conf = {
 };
 module.exports.setConf = function(cnf){
@@ -418,10 +418,14 @@ exports.draw = function (text, id,isDot) {
     //svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
     svg.attr("viewBox",  '0 0 ' + (g.graph().width+20) + ' ' + (g.graph().height+20));
 
+    // Index nodes
+    graph.indexNodes('sunGraph'+i);
+    
     setTimeout(function(){
         var i = 0;
         //subGraphs.forEach(function(subG) {
         for(i=0;i<subGraphs.length;i++){
+            var pos = graph.getDepthFirstPos(i);
             subG = subGraphs[i];
 
             var clusterRects = document.querySelectorAll('#' + id + ' .clusters rect');
@@ -440,15 +444,20 @@ exports.draw = function (text, id,isDot) {
                 te.attr('stroke', 'none');
                 te.attr('id', id + 'Text');
                 te.style('text-anchor', 'middle');
-                if(typeof subGraphs[subGraphs.length-i-1] === 'undefined'){
+
+                if(typeof subGraphs[graph.getDepthFirstPos(i)] === 'undefined'){
                     te.text('Undef');
                 }else{
-                    te.text(subGraphs[subGraphs.length-i-1].title);
+                    //te.text(subGraphs[subGraphs.length-i-1].title);
+                    te.text(subGraphs[pos].title);
+                    
+                    console.log('Setting subg - '+i+' to title '+subGraphs[pos].title);
                 }
             }
         }
         //    i = i + 1;
         //});
     },20);
+    //console.log('GTPOD:'+graph.getDepthFirstPos('subGraph0'));
 };
 

src/diagrams/flowchart/graphDb.js

@@ -241,11 +241,83 @@ exports.addSubGraph = function (list, title) {
 
 
     var subGraph = {id:'subGraph'+subCount, nodes:nodeList,title:title};
-
+//console.log('subGraph:' + subGraph.title + subGraph.id);
+//console.log(subGraph.nodes);
     subGraphs.push(subGraph);
     subCount = subCount + 1;
     return subGraph.id;
 };
+
+var getPosForId = function(id){
+    var i;
+    for(i=0;i<subGraphs.length;i++){
+        if(subGraphs[i].id===id){
+            //console.log('Found pos for ',id,' ',i);
+            return i;
+        }
+    }
+    //console.log('No pos found for ',id,' ',i);
+    return -1;
+};
+var secCount = -1;
+var posCrossRef = [];
+var indexNodes = function (id, pos) {
+    var nodes = subGraphs[pos].nodes;
+    secCount = secCount + 1;
+    if(secCount>2000){
+        return;
+        
+    }
+    //var nPos = getPosForId(subGraphs[pos].id);
+    posCrossRef[secCount]=pos;
+    console.log('Setting ',' ',secCount,' to ',pos);
+    // Check if match
+    if(subGraphs[pos].id === id){
+        return {
+            result:true,
+            count:0
+        };
+    }
+    
+
+    var count = 0;
+    var posCount = 1;
+    while(count<nodes.length){
+        var childPos = getPosForId(nodes[count]);
+        // Ignore regular nodes (pos will be -1)
+        if(childPos>=0){
+            var res = indexNodes(id,childPos);
+            if(res.result){
+                return {
+                    result:true,
+                    count:posCount+res.count
+                };
+            }else{
+                posCount = posCount + res.count;
+            }
+        }
+        count = count +1;
+    }
+    
+    return {
+        result:false,
+        count:posCount
+    };
+
+};
+
+
+
+exports.getDepthFirstPos = function (pos) {
+    return posCrossRef[pos];
+};
+exports.indexNodes = function (id) {
+    secCount = -1;
+    if(subGraphs.length>0){
+        indexNodes('none',subGraphs.length-1,0);
+    }
+};
+
 exports.getSubGraphs = function (list) {
     return subGraphs;
 };

src/diagrams/gantt/d3.js

@@ -1,6 +1,6 @@
 /* global window */
 
-var d3;
+/*var d3;
 
 if (require) {
   try {
@@ -12,4 +12,4 @@ if (!d3) {
   d3 = window.d3;
 }
 
-module.exports = d3;
+module.exports = d3;*/

src/diagrams/gantt/ganttRenderer.js

@@ -1,8 +1,9 @@
 var gantt = require('./parser/gantt').parser;
 gantt.yy = require('./ganttDb');
-var d3 = require('./d3');
+var d3 = require('../../d3');
 var moment = require('moment');
 
+
 var daysInChart;
 var conf = {
     titleTopMargin: 25,
@@ -41,8 +42,6 @@ module.exports.draw = function (text, id) {
     elem.setAttribute('height', h);
     var svg = d3.select('#' + id);
 
-// http://codepen.io/anon/pen/azLvWR
-
 
     var dateFormat = d3.time.format("%Y-%m-%d");
     

src/diagrams/sequenceDiagram/d3.js

@@ -1,4 +1,4 @@
-/* global window */
+/* global window 
 
 var d3;
 
@@ -12,4 +12,4 @@ if (!d3) {
   d3 = window.d3;
 }
 
-module.exports = d3;
+module.exports = d3;*/

src/diagrams/sequenceDiagram/sequenceDiagram.spec.js

@@ -3,14 +3,17 @@
  */
 var proxyquire = require('proxyquire');
 
+
+var sq = require('./parser/sequenceDiagram').parser;
 var newD3;
+
 var d3 = {
     select:function(){
         return new newD3();
     }
 };
-var sq = require('./parser/sequenceDiagram').parser;
 var sd = proxyquire('./sequenceRenderer', { './d3': d3 });
+var sd = proxyquire('./sequenceRenderer', { '../../d3': d3 });
 
 var str;
 describe('when parsing a sequenceDiagram',function() {

src/diagrams/sequenceDiagram/sequenceRenderer.js

@@ -5,7 +5,7 @@
 var sq = require('./parser/sequenceDiagram').parser;
 sq.yy = require('./sequenceDb');
 var svgDraw = require('./svgDraw');
-var d3 = require('./d3');
+var d3 = require('../../d3');
 var conf = {
 
     diagramMarginX:50,
@@ -30,6 +30,7 @@ var conf = {
     bottomMarginAdj:1
 };
 
+//var bb = getBBox("path");
 exports.bounds = {
     data:{
         startx:undefined,
@@ -173,7 +174,17 @@ var drawMessage = function(elem, startx, stopx, verticalPos, msg){
         .attr("class", "messageText")
         .text(msg.message);
 
-    var textWidth = textElem[0][0].getBBox().width;
+    var textWidth;
+
+    if(typeof textElem[0][0].getBBox !== 'undefined'){
+        textWidth = textElem[0][0].getBBox().width;
+    }
+    else{
+        console.log(textElem[0][0].getBoundingClientRect());
+        //textWidth = getBBox(textElem).width; //.getComputedTextLength()
+        textWidth = textElem[0][0].getBoundingClientRect();  
+        //textWidth = textElem[0][0].getComputedTextLength();  
+    }
 
     var line;
 

src/less/forest/flow.less

@@ -1,4 +1,7 @@
-.mermaid .label { color:#333}
+.mermaid .label { 
+  font-family: 'trebuchet ms', verdana, arial;
+color:#333
+}
 
 .node rect, .node circle, .node polygon  {
   fill: @mainBkg;
@@ -13,7 +16,7 @@
 }
 .cluster rect{
   fill: @secondBkg;
-  rx:40;
+  rx:4;
   stroke: @clusterBorder;
   stroke-width: 1px;
 }

src/main.js

@@ -14,7 +14,7 @@ var infoDb = require('./diagrams/example/exampleDb');
 var gantt       = require('./diagrams/gantt/ganttRenderer');
 var ganttParser = require('./diagrams/gantt/parser/gantt');
 var ganttDb = require('./diagrams/gantt/ganttDb');
-
+var d3 = require('./d3');
 var nextId = 0;
 
 /**
@@ -101,6 +101,8 @@ var init = function () {
         : nodes;
     
     var i;
+    
+    console.log('Found ',nodes.length,' nodes');
     for (i = 0; i < nodes.length; i++) {
         var element = nodes[i];
 
@@ -184,6 +186,133 @@ var equals = function (val, variable){
     }
 };
 
+var render = function(id, txt,cb){
+//        var element = doc.createElement('svg');
+//        element.setAttribute('id',id);
+//        element.setAttribute('width','100%');
+//        element.setAttribute('xmlns','http://www.w3.org/2000/svg');
+//        element.innerHTML = '<g />';
+
+        //var element = doc.createElement('div');
+        //element.setAttribute('id','d'+id);
+        //
+        //element.innerHTML = '<svg id="' + id + '" width="100%" xmlns="http://www.w3.org/2000/svg">' +
+        //    '<g />' +
+        //    '</svg>';
+        //document.body.appendChild(element);
+    d3.select('body').append('div')
+        .attr('id', 'd'+id)
+        .append('svg')
+        .attr('id', id)
+        .attr('width','100%')
+        .attr('xmlns','http://www.w3.org/2000/svg')
+        .append('g');
+
+
+
+        console.log(d3.select('#d'+id).node().innerHTML);
+        var element = d3.select('#d'+id).node();
+        var graphType = utils.detectType(txt);
+        var classes = {};
+        switch(graphType){
+            case 'graph':
+                classes = flowRenderer.getClasses(txt, false);
+
+                if(typeof mermaid.flowchartConfig === 'object'){
+                    flowRenderer.setConf(mermaid.flowchartConfig);
+                }
+                flowRenderer.draw(txt, id, false);
+                utils.cloneCssStyles(element.firstChild, classes);
+                graph.bindFunctions();
+                break;
+            case 'dotGraph':
+                classes = flowRenderer.getClasses(txt, true);
+                flowRenderer.draw(txt, id, true);
+                utils.cloneCssStyles(element.firstChild, classes);
+                break;
+            case 'sequenceDiagram':
+                if(typeof mermaid.sequenceConfig === 'object'){
+                    seq.setConf(mermaid.sequenceConfig);
+                }
+                seq.draw(txt,id);
+                utils.cloneCssStyles(element.firstChild, []);
+                break;
+            case 'gantt':
+                if(typeof mermaid.ganttConfig === 'object'){
+                    gantt.setConf(mermaid.ganttConfig);
+                    
+                }
+                gantt.draw(txt,id);
+                utils.cloneCssStyles(element.firstChild, []);
+                break;
+            case 'info':
+                info.draw(txt,id,exports.version());
+                utils.cloneCssStyles(element.firstChild, []);
+                break;
+        }
+        //console.log(document.body.innerHTML);
+        cb(d3.select('#d'+id).node().innerHTML);
+
+    d3.select('#d'+id).node().remove();
+    };
+
+
+exports.render = function(id, text){
+
+    var callback = function(svgText){
+        console.log(svgText);
+    };
+    
+    if(typeof document === 'undefined'){
+        //jsdom = require('jsdom').jsdom;
+        //console.log(jsdom);
+        
+            //htmlStub = '<html><head></head><body><div class="mermaid">'+text+'</div><script src="dist/mermaid.full.js"></script><script>var mermaid_config = {startOnLoad:true}</script></body></html>';
+            htmlStub = '<html><head></head><body></body></html>';
+    //        // html file skull with a container div for the d3 dataviz
+    //
+    // pass the html stub to jsDom
+       /* jsdom.env({ 
+            features : { QuerySelectorAll : true },
+            html : htmlStub,
+            done : function(errors, win) {
+                // process the html document, like if we were at client side
+                // code to generate the dataviz and process the resulting html file to be added here
+                //var d3 = require('d3');
+                //console.log('Here we go: '+JSON.stringify(d3));
+                
+                global.document = win.document;
+                global.window = win;
+
+                var element = win.document.createElement('div');
+                element.setAttribute('id','did');
+                //document.
+                console.log(document.body.innerHTML);
+                //console.log('Element:',element);
+                //console.log(win);
+                //mermaid.init();
+                //render(win.document, 'myId', text, callback);
+                
+            }
+        });*/
+        //var jsdom = require('jsdom').jsdom;
+        //global.document = jsdom(htmlStub);
+        //global.window = document.parentWindow;
+        
+        render(id, text, callback);
+                //var element = win.document.createElement('div');
+                //element.setAttribute('id','did');
+                //document.
+    }
+    else{
+        // In browser
+        render( id, text, callback);
+    }
+    
+    
+    
+};
+
 global.mermaid = {
     startOnLoad:    true,
     htmlLabels:     true,
@@ -203,6 +332,9 @@ global.mermaid = {
     parseError: function(err, hash) {
         console.log('Mermaid Syntax error:');
         console.log(err);
+    },
+    render:function(id, text){
+        return exports.render(id, text);
     }
 };
 
@@ -233,6 +365,8 @@ exports.contentLoaded = function(){
 
 };
 
+
+
 if(typeof document !== 'undefined'){
     /**
      * Wait for document loaded before starting the execution
@@ -241,6 +375,3 @@ if(typeof document !== 'undefined'){
         exports.contentLoaded();
     }, false);
 }
-
-var apa         = 1;
-var bapselsin   = 2;