Fix for issue #129 - Possibility to set the width of the generated fl…

…owchart
mermaid-js · Mar 7, 2015 · 3ae1b5f · 3ae1b5f
1 parent cbebf12
commit 3ae1b5f
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 10 deletions.
diff --git a/dist/mermaid.full.js b/dist/mermaid.full.js
@@ -25627,6 +25627,16 @@ var graph = require('./graphDb');
 var flow = require('./parser/flow');
 var dot = require('./parser/dot');
 var dagreD3 = require('./dagre-d3');
+var conf = {
+};
+module.exports.setConf = function(cnf){
+    var keys = Object.keys(cnf);
+    var i;
+    for(i=0;i<keys.length;i++){
+        conf[keys[i]] = cnf[keys[i]];
+    }
+};
+
 /**
  * Function that adds the vertices found in the graph definition to the graph to be rendered.
  * @param vert Object containing the vertices.
@@ -26023,8 +26033,15 @@ exports.draw = function (text, id,isDot) {
 */
     // Center the graph
     svg.attr("height", g.graph().height );
-    svg.attr("width", g.graph().width );
-    svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
+    if(typeof conf.width === 'undefined'){
+        console.log('Undefined it is');
+        svg.attr("width", g.graph().width );
+    }else{
+        console.log('Defined it is'+conf.width);
+        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);
 
 
     setTimeout(function(){
@@ -30882,6 +30899,10 @@ var init = function (sequenceConfig) {
         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();

diff --git a/dist/mermaid.full.min.js b/dist/mermaid.full.min.js
diff --git a/dist/mermaid.slim.js b/dist/mermaid.slim.js
@@ -25595,6 +25595,16 @@ var graph = require('./graphDb');
 var flow = require('./parser/flow');
 var dot = require('./parser/dot');
 var dagreD3 = require('./dagre-d3');
+var conf = {
+};
+module.exports.setConf = function(cnf){
+    var keys = Object.keys(cnf);
+    var i;
+    for(i=0;i<keys.length;i++){
+        conf[keys[i]] = cnf[keys[i]];
+    }
+};
+
 /**
  * Function that adds the vertices found in the graph definition to the graph to be rendered.
  * @param vert Object containing the vertices.
@@ -25991,8 +26001,15 @@ exports.draw = function (text, id,isDot) {
 */
     // Center the graph
     svg.attr("height", g.graph().height );
-    svg.attr("width", g.graph().width );
-    svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
+    if(typeof conf.width === 'undefined'){
+        console.log('Undefined it is');
+        svg.attr("width", g.graph().width );
+    }else{
+        console.log('Defined it is'+conf.width);
+        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);
 
 
     setTimeout(function(){
@@ -30850,6 +30867,10 @@ var init = function (sequenceConfig) {
         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();

diff --git a/dist/mermaid.slim.min.js b/dist/mermaid.slim.min.js
diff --git a/src/diagrams/flowchart/flowRenderer.js b/src/diagrams/flowchart/flowRenderer.js
@@ -5,6 +5,16 @@ var graph = require('./graphDb');
 var flow = require('./parser/flow');
 var dot = require('./parser/dot');
 var dagreD3 = require('./dagre-d3');
+var conf = {
+};
+module.exports.setConf = function(cnf){
+    var keys = Object.keys(cnf);
+    var i;
+    for(i=0;i<keys.length;i++){
+        conf[keys[i]] = cnf[keys[i]];
+    }
+};
+
 /**
  * Function that adds the vertices found in the graph definition to the graph to be rendered.
  * @param vert Object containing the vertices.
@@ -401,8 +411,15 @@ exports.draw = function (text, id,isDot) {
 */
     // Center the graph
     svg.attr("height", g.graph().height );
-    svg.attr("width", g.graph().width );
-    svg.attr("viewBox", svgb.getBBox().x + ' 0 '+ g.graph().width+' '+ g.graph().height);
+    if(typeof conf.width === 'undefined'){
+        console.log('Undefined it is');
+        svg.attr("width", g.graph().width );
+    }else{
+        console.log('Defined it is'+conf.width);
+        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);
 
 
     setTimeout(function(){

diff --git a/src/main.js b/src/main.js
@@ -111,6 +111,10 @@ var init = function (sequenceConfig) {
         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();

diff --git a/test/web.html b/test/web.html
@@ -10,6 +10,7 @@
             htmlLabels:true
         }
         mermaid.startOnLoad=true;
+        mermaid.flowchartConfig = {width:'100%'};
     </script>
     <script>
         function apa(){