Merge pull request #439 from whyzdev/flowchat_text

adde tests to reproduce #434 in flowchart

.gitignore

@@ -8,3 +8,6 @@ bower_components
 .DS_Store
 .idea
 coverage
+
+test/tmp_*
+test/fixtures/samples/*.actual.*

lib/cli.js

@@ -21,6 +21,7 @@ function cli(options) {
           help: 'h'
         , png: 'p'
         , outputDir: 'o'
+        , outputSuffix: 'O'
         , svg: 's'
         , verbose: 'v'
         , phantomPath: 'e'
@@ -30,7 +31,7 @@ function cli(options) {
         , width: 'w'
       }
     , 'boolean': ['help', 'png', 'svg', 'verbose']
-    , 'string': ['outputDir']
+    , 'string': ['outputDir', 'outputSuffix']
   }
 
   this.errors = []
@@ -45,6 +46,7 @@ function cli(options) {
     , "  -s --svg             Output SVG instead of PNG (experimental)"
     , "  -p --png             If SVG was selected, and you also want PNG, set this flag"
     , "  -o --outputDir       Directory to save files, will be created automatically, defaults to `cwd`"
+    , "  -O --outputSuffix    Suffix to output filenames in front of '.svg' or '.png', defaults to ''"
     , "  -e --phantomPath     Specify the path to the phantomjs executable"
     , "  -t --css             Specify the path to a CSS file to be included when processing output"
     , "  -c --sequenceConfig  Specify the path to the file with the configuration to be applied in the sequence diagram"
@@ -79,7 +81,7 @@ cli.prototype.parse = function(argv, next) {
     }
 
     // ensure that parameter-expecting options have parameters
-    ;['outputDir', 'phantomPath', 'sequenceConfig', 'ganttConfig', 'css'].forEach(function(i) {
+    ;['outputDir', 'outputSuffix', 'phantomPath', 'sequenceConfig', 'ganttConfig', 'css'].forEach(function(i) {
       if(typeof options[i] !== 'undefined') {
         if (typeof options[i] !== 'string' || options[i].length < 1) {
           this.errors.push(new Error(i + " expects a value."))

lib/index.js

@@ -12,6 +12,7 @@ module.exports = { process: processMermaid }
 function processMermaid(files, _options, _next) {
   var options = _options || {}
     , outputDir = options.outputDir || process.cwd()
+    , outputSuffix = options.outputSuffix || ''
     , next = _next || function() {}
     , phantomArgs = [
           phantomscript
@@ -23,6 +24,7 @@ function processMermaid(files, _options, _next) {
         , options.ganttConfig
         , options.verbose
         , options.width
+        , outputSuffix
       ];
 
   files.forEach(function(file) {

lib/phantomscript.js

@@ -29,7 +29,7 @@ var system = require('system')
   , webpage = require('webpage')
 
 var page = webpage.create()
-  , files = system.args.slice(9, system.args.length)
+  , files = system.args.slice(10, system.args.length)
   , width = system.args[8]
 
 if(typeof width === 'undefined' || width==='undefined'){
@@ -44,6 +44,7 @@ var options = {
       , ganttConfig: system.args[6] !== 'null' ? JSON.parse(fs.read(system.args[6])) : {}
       , verbose: system.args[7] === 'true' ? true : false
       , width: width
+      , outputSuffix: system.args[9]
     }
   , log = logger(options.verbose)
 options.sequenceConfig.useMaxWidth = false;
@@ -99,20 +100,20 @@ files.forEach(function(file) {
     resolveForeignObjects(allElements[i])
   }
   
+  var outputPath=options.outputDir + fs.separator + filename + options.outputSuffix;
   if (options.png) {
     page.viewportSize = {
         width: ~~oDOM.documentElement.attributes.getNamedItem('width').value
       , height: ~~oDOM.documentElement.attributes.getNamedItem('height').value
     }
 
-    page.render(options.outputDir + fs.separator + filename + '.png')
+    page.render(outputPath+'.png')
     console.log('saved png: ' + filename + '.png')
   }
 
   if (options.svg) {
     var serialize = new XMLSerializer();
-    fs.write(
+    fs.write(outputPath+'.svg'
-        options.outputDir + fs.separator + filename + '.svg'
       , serialize.serializeToString(oDOM)+'\n'
       , 'w'
     )

src/diagrams/sequenceDiagram/svgDraw.js

@@ -271,16 +271,14 @@ var _drawTextCandidateFunc = (function() {
         .attr('x', x + width / 2).attr('y', y + height / 2 + 5)
         .style('text-anchor', 'middle')
         .text(content);
-      for (var key in textAttrs) {
+      _setTextAttrs(text, textAttrs);
-        text.attr(key, textAttrs[key]);
     }
-    };
 
     function byTspan(content, g, x, y, width, height, textAttrs) {
       var text = g.append('text')
         .attr('x', x + width / 2).attr('y', y) 
         .style('text-anchor', 'middle');
-      var tspan = text.append('tspan')
+      text.append('tspan')
         .attr('x', x + width / 2).attr('dy', '0') 
         .text(content);
 
@@ -293,16 +291,13 @@ var _drawTextCandidateFunc = (function() {
         if (tspans.length > 0 && tspans[0].length > 0) {
           tspans = tspans[0];
           //set y of <text> to the mid y of the first line 
-          text.attr('y', y + (height/2.- text[0][0].getBBox().height*(1 - 1.0/tspans.length)/2.))
+          text.attr('y', y + (height/2.0 - text[0][0].getBBox().height*(1 - 1.0/tspans.length)/2.0))
             .attr("dominant-baseline", "central")
-            .attr("alignment-baseline", "central")
+            .attr("alignment-baseline", "central");
         }
       } 
-
+      _setTextAttrs(text, textAttrs);
-      for (var key in textAttrs) {
-        text.attr(key, textAttrs[key]);
     }
-    };
 
     function byFo(content, g, x, y, width, height, textAttrs) {
         var s = g.append('switch');
@@ -315,14 +310,19 @@ var _drawTextCandidateFunc = (function() {
 
         text.append('div').style('display', 'table-cell')
            .style('text-align', 'center').style('vertical-align', 'middle')
-           .text(content)
+           .text(content);
 
         byTspan(content, s, x, y, width, height, textAttrs);
-
+        _setTextAttrs(text, textAttrs);
-        for (var key in textAttrs) {
+    }
-          text.attr(key, textAttrs[key]);
+
+    function _setTextAttrs(toText, fromTextAttrsDict) {
+      for (var key in fromTextAttrsDict) {
+        if (fromTextAttrsDict.hasOwnProperty(key)) {
+          toText.attr(key, fromTextAttrsDict[key]);
+        }
+      }
     }
-    };
 
     return function(conf) {
       return conf.textPlacement==='fo' ? byFo : (

test/cli_test-output.js

@@ -47,7 +47,7 @@ test('output of single png', function(t) {
 
   var expected = ['test.mermaid.png']
 
-  opt = clone(singleFile)
+  var opt = clone(singleFile)
   opt.outputDir += '_png'
   opt.png = true
  
@@ -64,7 +64,7 @@ test('output of multiple png', function(t) {
   var expected = ['test.mermaid.png', 'test2.mermaid.png', 
     'gantt.mermaid.png', 'sequence.mermaid.png']
 
-  opt = clone(multiFile)
+  var opt = clone(multiFile)
   opt.outputDir += '_png'
   opt.png = true
 
@@ -80,7 +80,7 @@ test('output of single svg', function(t) {
 
   var expected = ['test.mermaid.svg']
 
-  opt = clone(singleFile)
+  var opt = clone(singleFile)
   opt.outputDir += '_svg'
   opt.svg = true
 
@@ -97,7 +97,7 @@ test('output of multiple svg', function(t) {
   var expected = ['test.mermaid.svg', 'test2.mermaid.svg', 
     'gantt.mermaid.svg', 'sequence.mermaid.svg']
 
-  opt = clone(multiFile)
+  var opt = clone(multiFile)
   opt.outputDir += '_svg'
   opt.svg = true
 

test/cli_test-samples.js

@@ -0,0 +1,93 @@
+'use strict';
+var exec = require('child_process').exec;
+var path = require('path')
+
+  var test = require('tape')
+  , rimraf = require('rimraf')
+
+var test_dir = 'test/fixtures/samples/'.replace('/',path.sep)
+
+rimraf.sync(test_dir+'*.actual.*');
+ 
+function exec_mermaid(args, verify) {
+  exec('bin/mermaid.js ' + args, 
+    {env: {PATH: './node_modules/.bin'+path.delimiter+process.env.PATH}}, 
+    function(error, stdout, stderr) {
+      console.log('error:',error,'\nstdout:\n',stdout,'\nstderr:\n',stderr);
+      verify(error, stdout, stderr);
+    });
+}
+
+test('mermaid cli help', function(t) {
+  t.plan(1);
+  var args = [ '--help' ]
+  exec_mermaid(args.join(' '), function(error, stdout, stderr) {
+      t.notOk(stderr, 'no error')
+      t.end()
+    });
+});
+
+test('mermaid cli help', function(t) {
+  t.plan(1);
+  var args = [ '--badopt' ]
+  exec_mermaid(args.join(' '), function(error, stdout, stderr) {
+      t.ok(stderr, 'should get error')
+      t.end()
+    });
+});
+
+//todo
+test.skip('sequence syntax error', function(t) {
+  t.plan(1);
+  var args = [ '--svg',
+    '--outputDir=' + test_dir,
+    '--outputSuffix=.actual',
+    test_dir+'sequence_err.mmd'
+  ]
+  exec_mermaid(args.join(' '), function(error, stdout, stderr) {
+      t.ok(stderr, 'should get error')
+      t.end()
+    });
+});
+
+['', 'fo', 'tspan', 'old'].forEach(function(textPlacement) {
+  test('sequence svg text placelment: '+textPlacement, function(t) {
+    t.plan(1);
+    var args = [ '--svg',
+      '--outputDir=' + test_dir,
+      '--outputSuffix='+(textPlacement ? '_'+textPlacement : '')+'.actual',
+      textPlacement ? '--sequenceConfig='+test_dir+'sequence_text_'+textPlacement+'.cfg' : '',  
+      test_dir+'sequence_text.mmd'
+    ]
+    exec_mermaid(args.join(' '), function(error, stdout, stderr) {
+        t.notOk(stderr, 'no error')
+        t.end()
+      });
+  })
+});
+
+test('sequence png', function(t) {
+  t.plan(1);
+  var args = [ '--png',
+    '--outputDir=' + test_dir,
+    '--outputSuffix=.actual',
+    test_dir+'sequence_text.mmd'
+  ]
+  exec_mermaid(args.join(' '), function(error, stdout, stderr) {
+      t.notOk(stderr, 'no error')
+      t.end()
+    });
+})
+
+test('flowchart svg text', function(t) {
+  t.plan(1);
+  var args = [ '--svg',
+    '--outputDir=' + test_dir,
+    '--outputSuffix=.actual',
+    test_dir+'flowchart_text.mmd'
+  ]
+  exec_mermaid(args.join(' '), function(error, stdout, stderr) {
+      t.notOk(stderr, 'no error')
+      t.end()
+    });
+})

test/fixtures/samples/flowchart_text.mmd

@@ -0,0 +1,4 @@
+graph TD
+    A[label]
+    B[very very very long long long long-long-long text]
+    A--test-->B

test/fixtures/samples/sequence_err.mmd

@@ -0,0 +1,2 @@
+sequenceDiagram
+    bad

test/fixtures/samples/sequence_text.mmd

@@ -0,0 +1,6 @@
+sequenceDiagram
+    participant A as actor 
+    participant B as very very very long long long long-long-long text
+    A->>B: hi 
+    B-->A: 
+    B->>A: hello

test/fixtures/samples/sequence_text_fo.cfg

@@ -0,0 +1,3 @@
+{
+  "textPlacement": "fo"
+}

test/fixtures/samples/sequence_text_old.cfg

@@ -0,0 +1,3 @@
+{
+  "textPlacement": "old"
+}

test/fixtures/samples/sequence_text_tspan.cfg

@@ -0,0 +1,3 @@
+{
+  "textPlacement": "tspan"
+}

test/fixtures/sequence.mermaid

@@ -1,8 +1,8 @@
 sequenceDiagram
-  Alice->Bob: Hello Bob, how are you?
+  Alice->>Bob: Hello Bob, how are you?
   Note right of Bob: Bob thinks
-  Bob-->Alice: I am good thanks!
+  Bob-->>Alice: I am good thanks!
-  Bob-->John the Long: How about you John?
+  Bob-->>John the Long: How about you John?
-  Bob-->Alice: Checking with John...
+  Bob-->>Alice: Checking with John...
-  Alice->John the Long: Yes... John, how are you?
+  Alice->>John the Long: Yes... John, how are you?
   John the Long-->Alice: Better than you!