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;