Fix for issue #150.

dist/mermaid-legacy.full.js

@@ -17028,73 +17028,37 @@ exports.draw = function (text, id,isDot) {
     // Index nodes
     graph.indexNodes('sunGraph'+i);
     
-    //setTimeout(function(){
+    for(i=0;i<subGraphs.length;i++){
-        var i = 0;
+        var pos = graph.getDepthFirstPos(i);
-        //subGraphs.forEach(function(subG) {
+        subG = subGraphs[i];
-        for(i=0;i<subGraphs.length;i++){
-            var pos = graph.getDepthFirstPos(i);
-            subG = subGraphs[i];
 
-            //var clusterRects = document.querySelectorAll('#' + id + ' .clusters rect');
+        if (subG.title !== 'undefined') {
-            //var clusters = document.querySelectorAll('#' + id + ' .cluster');
+            var clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect');
+            //console.log('looking up: #' + id + ' #' + subG.id)
+            var clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id);
 
+            var xPos = clusterRects[0].x.baseVal.value;
+            var yPos = clusterRects[0].y.baseVal.value;
+            var width = clusterRects[0].width.baseVal.value;
+            var cluster = d3.select(clusterEl[0]);
+            var te = cluster.append('text');
+            te.attr('x', xPos + width / 2);
+            te.attr('y', yPos + 14);
+            te.attr('fill', 'black');
+            te.attr('stroke', 'none');
+            te.attr('id', id + 'Text');
+            te.style('text-anchor', 'middle');
 
-            //if (subG.title !== 'undefined') {
+            if(typeof subG.title === 'undefined'){
-            //    var xPos = clusterRects[i].x.baseVal.value;
+                te.text('Undef');
-            //    var yPos = clusterRects[i].y.baseVal.value;
+            }else{
-            //    var width = clusterRects[i].width.baseVal.value;
+                //te.text(subGraphs[subGraphs.length-i-1].title);
-            //    var cluster = d3.select(clusters[i]);
+                te.text(subG.title);
-            //    var te = cluster.append('text');
-            //    te.attr('x', xPos + width / 2);
-            //    te.attr('y', yPos + 14);
-            //    te.attr('fill', 'black');
-            //    te.attr('stroke', 'none');
-            //    te.attr('id', id + 'Text');
-            //    te.style('text-anchor', 'middle');
-            //
-            //    if(typeof subGraphs[graph.getDepthFirstPos(i)] === 'undefined'){
-            //        te.text('Undef');
-            //    }else{
-            //        //te.text(subGraphs[subGraphs.length-i-1].title);
-            //        te.text(subGraphs[pos].title);
-            //
-            //        console.log('Setting subg - '+i+' to title '+subGraphs[pos].title);
-            //    }
-            //}
 
-
+                console.log('Setting subg - '+i+' to title '+subGraphs[pos].title);
-
-            if (subG.title !== 'undefined') {
-                var clusterRects = document.querySelectorAll('#' + id + ' #' + subG.id + ' rect');
-                //console.log('looking up: #' + id + ' #' + subG.id)
-                var clusterEl = document.querySelectorAll('#' + id + ' #' + subG.id);
-                
-                var xPos = clusterRects[0].x.baseVal.value;
-                var yPos = clusterRects[0].y.baseVal.value;
-                var width = clusterRects[0].width.baseVal.value;
-                var cluster = d3.select(clusterEl[0]);
-                var te = cluster.append('text');
-                te.attr('x', xPos + width / 2);
-                te.attr('y', yPos + 14);
-                te.attr('fill', 'black');
-                te.attr('stroke', 'none');
-                te.attr('id', id + 'Text');
-                te.style('text-anchor', 'middle');
-
-                if(typeof subG.title === 'undefined'){
-                    te.text('Undef');
-                }else{
-                    //te.text(subGraphs[subGraphs.length-i-1].title);
-                    te.text(subG.title);
-
-                    console.log('Setting subg - '+i+' to title '+subGraphs[pos].title);
-                }
             }
         }
-        //    i = i + 1;
+    }
-        //});
-    //},20);
-    //console.log('GTPOD:'+graph.getDepthFirstPos('subGraph0'));
 };
 
 
@@ -17120,7 +17084,8 @@ var funs = [];
  * @param style
  */
 exports.addVertex = function (id, text, type, style) {
-
+    var txt;
+    
     if(typeof id === 'undefined'){
         return;
     }
@@ -17132,7 +17097,14 @@ exports.addVertex = function (id, text, type, style) {
         vertices[id] = {id: id, styles: [], classes:[]};
     }
     if (typeof text !== 'undefined') {
-        vertices[id].text = text.trim();
+        txt = text.trim();
+        
+        // strip quotes if string starts and exnds with a quote
+        if(txt[0] === '"' && txt[txt.length-1] === '"'){
+            txt = txt.substring(1,txt.length-1);
+        }
+
+        vertices[id].text = txt;
     }
     if (typeof type !== 'undefined') {
         vertices[id].type = type;
@@ -17163,6 +17135,11 @@ exports.addLink = function (start, end, type, linktext) {
 
     if (typeof linktext !== 'undefined') {
         edge.text = linktext.trim();
+        
+        // strip quotes if string starts and exnds with a quote
+        if(edge.text[0] === '"' && edge.text[edge.text.length-1] === '"'){
+            edge.text = edge.text.substring(1,edge.text.length-1);
+        }
     }
 
     if (typeof type !== 'undefined') {
@@ -19352,7 +19329,7 @@ module.exports.draw = function (text, id) {
     w = elem.offsetWidth;
 
     if (typeof w === 'undefined') {
-        w = 800;
+        w = 1200;
     }
 
     var taskArray = gantt.yy.getTasks();
@@ -19360,11 +19337,16 @@ module.exports.draw = function (text, id) {
     // Set height based on number of tasks
     var h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
 
-    elem.style.height = h + 'px';
+    //elem.style.height = h + 'px';
-    elem.setAttribute('height', h);
+    //elem.setAttribute('height', h);
+    elem.setAttribute('height', "100%");
+    // Set viewBox
+    elem.setAttribute('viewBox','0 0 '+w+' '+h);
     var svg = d3.select('#' + id);
 
-
+    
+    
+    
     var dateFormat = d3.time.format("%Y-%m-%d");
     
     var startDate = d3.min(taskArray, function (d) {

dist/mermaid-legacy.slim.js

@@ -28511,7 +28511,7 @@ module.exports.draw = function (text, id) {
     w = elem.offsetWidth;
 
     if (typeof w === 'undefined') {
-        w = 800;
+        w = 1200;
     }
 
     var taskArray = gantt.yy.getTasks();
@@ -28519,11 +28519,14 @@ module.exports.draw = function (text, id) {
     // Set height based on number of tasks
     var h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
 
-    elem.style.height = h + 'px';
+    elem.setAttribute('height', "100%");
-    elem.setAttribute('height', h);
+    // Set viewBox
+    elem.setAttribute('viewBox','0 0 '+w+' '+h);
     var svg = d3.select('#' + id);
 
-
+    
+    
+    
     var dateFormat = d3.time.format("%Y-%m-%d");
     
     var startDate = d3.min(taskArray, function (d) {

dist/mermaid.js

@@ -28511,7 +28511,7 @@ module.exports.draw = function (text, id) {
     w = elem.offsetWidth;
 
     if (typeof w === 'undefined') {
-        w = 800;
+        w = 1200;
     }
 
     var taskArray = gantt.yy.getTasks();
@@ -28519,11 +28519,14 @@ module.exports.draw = function (text, id) {
     // Set height based on number of tasks
     var h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
 
-    elem.style.height = h + 'px';
+    elem.setAttribute('height', "100%");
-    elem.setAttribute('height', h);
+    // Set viewBox
+    elem.setAttribute('viewBox','0 0 '+w+' '+h);
     var svg = d3.select('#' + id);
 
-
+    
+    
+    
     var dateFormat = d3.time.format("%Y-%m-%d");
     
     var startDate = d3.min(taskArray, function (d) {

dist/mermaid.slim.js

@@ -19295,7 +19295,7 @@ module.exports.draw = function (text, id) {
     w = elem.offsetWidth;
 
     if (typeof w === 'undefined') {
-        w = 800;
+        w = 1200;
     }
 
     var taskArray = gantt.yy.getTasks();
@@ -19303,11 +19303,14 @@ module.exports.draw = function (text, id) {
     // Set height based on number of tasks
     var h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
 
-    elem.style.height = h + 'px';
+    elem.setAttribute('height', "100%");
-    elem.setAttribute('height', h);
+    // Set viewBox
+    elem.setAttribute('viewBox','0 0 '+w+' '+h);
     var svg = d3.select('#' + id);
 
-
+    
+    
+    
     var dateFormat = d3.time.format("%Y-%m-%d");
     
     var startDate = d3.min(taskArray, function (d) {

dist/mermaidAPI.js

@@ -28178,7 +28178,7 @@ module.exports.draw = function (text, id) {
     w = elem.offsetWidth;
 
     if (typeof w === 'undefined') {
-        w = 800;
+        w = 1200;
     }
 
     var taskArray = gantt.yy.getTasks();
@@ -28186,11 +28186,14 @@ module.exports.draw = function (text, id) {
     // Set height based on number of tasks
     var h = taskArray.length * (conf.barHeight + conf.barGap) + 2 * conf.topPadding;
 
-    elem.style.height = h + 'px';
+    elem.setAttribute('height', "100%");
-    elem.setAttribute('height', h);
+    // Set viewBox
+    elem.setAttribute('viewBox','0 0 '+w+' '+h);
     var svg = d3.select('#' + id);
 
-
+    
+    
+    
     var dateFormat = d3.time.format("%Y-%m-%d");
     
     var startDate = d3.min(taskArray, function (d) {

lib/cli.js

@@ -98,6 +98,7 @@ cli.prototype.parse = function(argv, next) {
 
 
     if (options.ganttConfig) {
+        console.log('Got conf1'+options.ganttConfig);
       options.ganttConfig = checkConfig(options.ganttConfig)
       console.log('Got conf'+options.ganttConfig);
     }
@@ -128,10 +129,11 @@ cli.prototype.parse = function(argv, next) {
 
 function checkConfig(configPath) {
   try {
-    var text = fs.readFileSync(configPath, 'utf8')
+    var text = fs.readFileSync(configPath, 'utf8');
     JSON.parse(text)
     return text
   } catch (e) {
+      console.log(e);
     return null;
   }
 }

lib/phantomscript.js

@@ -44,7 +44,7 @@ var page = webpage.create()
 
 
 console.log('options');
-console.log(options.ganttConfig);
+console.log(phantom.args.length);
 
 page.content = [
     '<html>'
@@ -70,6 +70,8 @@ files.forEach(function(file) {
     , svgContent
     , allElements
 
+    console.log('Gantconfig: '+options.ganttConfig);
+    
   // this JS is executed in this statement is sandboxed, even though it doesn't
   // look like it. we need to serialize then unserialize the svgContent that's
   // taken from the DOM
@@ -230,17 +232,18 @@ function executeInPage(data) {
     }
 
     if(typeof ganttConfig !== undefined && ganttConfig !== 'undefined'){
-          console.log('Got ganttConfig');
         sc = document.createElement("script")
         scContent = document.createTextNode('mermaid.ganttConfig = JSON.parse(' + JSON.stringify(ganttConfig) + ');')
         sc.appendChild(scContent)
 
         document.body.appendChild(sc)
     }else{
-      console.log('No gantt config');
+        console.log('NO gantt config');
     }
 
+
   mermaid.init();
+    console.log(document.body.outerHTML);
 
   svg = document.querySelector('svg')
   svgValue = xmlSerializer.serializeToString(svg)

test/gantt.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
 
-    <script src="../dist/mermaid.full.js"></script>
+    <script src="../dist/mermaid.js"></script>
     <link rel="stylesheet" href="../dist/mermaid.forest.css"/>
     <script>
         var mermaid_config = {