Fix for issue #204, added width option to the CLI. Default value for …

…width is 1200.

Added logger using es6 syntax

lib/cli.js

@@ -27,6 +27,7 @@ function cli(options) {
         , sequenceConfig: 'c'
         , ganttConfig: 'g'
         , css: 't'
+        , width: 'w'
       }
     , 'boolean': ['help', 'png', 'svg']
     , 'string': ['outputDir']
@@ -50,6 +51,7 @@ function cli(options) {
     , "  -g --ganttConfig     Specify the path to the file with the configuration to be applied in the gantt diagram"
     , "  -h --help            Show this message"
     , "  -v --verbose         Show logging"
+    , "  -w --width           width of the generated png (number)"
     , "  --version            Print version and quit"
   ]
 
@@ -97,11 +99,8 @@ cli.prototype.parse = function(argv, next) {
       options.sequenceConfig = checkConfig(options.sequenceConfig)
     }
 
-
     if (options.ganttConfig) {
-        console.log('Got conf1'+options.ganttConfig);
       options.ganttConfig = checkConfig(options.ganttConfig)
-      console.log('Got conf'+options.ganttConfig);
     }
 
     if (options.css) {
@@ -114,6 +113,11 @@ cli.prototype.parse = function(argv, next) {
         options.css = fs.readFileSync(path.join(__dirname, '..', 'dist', 'mermaid.css'))
     }
 
+    // set svg/png flags appropriately
+    if(!options.width){
+      options.width = 1200;
+    }
+
     this.checkPhantom = createCheckPhantom(options.phantomPath)
 
     this.checkPhantom(function(err, path) {

lib/index.js

@@ -22,6 +22,7 @@ function processMermaid(files, _options, _next) {
         , options.sequenceConfig
         , options.ganttConfig
         , options.verbose
+        , options.width
       ]
 
   files.forEach(function(file) {

lib/phantomscript.js

@@ -30,15 +30,22 @@ var system = require('system')
 
 
 var page = webpage.create()
-  , files = phantom.args.slice(7, phantom.args.length)
-  , options = {
+  , files = phantom.args.slice(8, phantom.args.length)
+  , width = phantom.args[7]
+
+if(typeof width === 'undefined'){
+  width = 1200;
+}
+
+var options = {
         outputDir: phantom.args[0]
       , png: phantom.args[1] === 'true' ? true : false
       , svg: phantom.args[2] === 'true' ? true : false
       , css: phantom.args[3] !== '' ? phantom.args[3] : '* { margin: 0; padding: 0; }'
       , sequenceConfig: phantom.args[4]
       , ganttConfig: phantom.args[5]
       , verbose: phantom.args[6] === 'true' ? true : false
+      , width: width
     }
   , log = logger(options.verbose)
 
@@ -80,7 +87,8 @@ files.forEach(function(file) {
   svgContent = page.evaluate(executeInPage, {
     contents       : contents,
     ganttConfig    : options.ganttConfig,
-    sequenceConfig : options.sequenceConfig
+    sequenceConfig : options.sequenceConfig,
+    confWidth      : options.width
   })
   oDOM = oParser.parseFromString(svgContent, "text/xml")
 
@@ -213,6 +221,7 @@ function executeInPage(data) {
     , boundingBox
     , width
     , height
+    , confWidth = data.confWidth
 
   toRemove = document.getElementsByClassName('mermaid')
   if (toRemove && toRemove.length) {
@@ -257,7 +266,8 @@ function executeInPage(data) {
         document.body.appendChild(sc)
     }
 
-
+  //console.log(document.head.innerHTML);
+  //console.log(document.body.innerHTML);
   mermaid.init();
 
   svg = document.querySelector('svg')
@@ -266,25 +276,27 @@ function executeInPage(data) {
   width = boundingBox.width * 1.5; // adding the scale factor for consistency with output in chrome browser
   height = boundingBox.height * 1.5; // adding the scale factor for consistency with output in chrome browser
 
+  var scalefactor = confWidth/(width-8);
+
   // resizing the body to fit the svg
   document.body.setAttribute(
     'style'
-    , 'width: ' + width + '; height: ' + height + ';'
+    , 'width: ' + (confWidth-8) + '; height: ' + (height*scalefactor) + ';'
   )
   // resizing the svg via css for consistent display
   svg.setAttribute(
     'style'
-    , 'width: ' + width + '; height: ' + height + ';'
+    , 'width: ' + (confWidth-8) + '; height: ' + (height*scalefactor) + ';'
   )
 
   // set witdth and height attributes used to set the viewport when rending png image
   svg.setAttribute(
     'width'
-    , width
+    , confWidth
   )
   svg.setAttribute(
     'height'
-    , height
+    , height*scalefactor
   )
 
   svgValue = xmlSerializer.serializeToString(svg)

package.json

@@ -46,13 +46,15 @@
   },
   "devDependencies": {
     "async": "^0.9.0",
+    "babel-eslint": "^4.1.3",
     "babelify": "^6.3.0",
     "browserify": "~6.2.0",
     "clone": "^0.2.0",
     "codeclimate-test-reporter": "0.0.4",
     "dateformat": "^1.0.11",
     "dox": "^0.8.0",
     "eslint": "^1.6.0",
+    "eslint-watch": "^2.1.2",
     "event-stream": "^3.2.0",
     "foundation": "^4.2.1-1",
     "front-matter": "^0.2.0",

src/diagrams/example/exampleDb.js

@@ -1,7 +1,9 @@
 /**
  * Created by knut on 15-01-14.
  */
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 var message = '';
 var info = false;
 

src/diagrams/example/exampleRenderer.js

@@ -4,7 +4,9 @@
 var db = require('./exampleDb');
 var exampleParser = require('./parser/example.js');
 var d3 = require('../../d3');
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.
  * @param text

src/diagrams/flowchart/dagre-d3.js

@@ -1,5 +1,7 @@
 /* global window */
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 var dagreD3;
 //log.debug('setting up dagre-d3');
 if (require) {

src/diagrams/flowchart/flowRenderer.js

@@ -6,7 +6,9 @@ var flow = require('./parser/flow');
 var dot = require('./parser/dot');
 var d3 = require('../../d3');
 var dagreD3 = require('./dagre-d3');
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 
 var conf = {
 };

src/diagrams/flowchart/graphDb.js

@@ -1,7 +1,9 @@
 /**
  * Created by knut on 14-11-03.
  */
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 var d3 = require('../../d3');
 var vertices = {};
 var edges = [];

src/diagrams/gantt/ganttDb.js

@@ -2,7 +2,9 @@
  * Created by knut on 15-01-14.
  */
 var moment = require('moment');
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 
 var dateFormat = '';
 var title = '';

src/diagrams/sequenceDiagram/sequenceDb.js

@@ -5,7 +5,9 @@ var actors    = {};
 var actorKeys = [];
 var messages  = [];
 var notes     = [];
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 
 
 exports.addActor = function(id,name,description){

src/diagrams/sequenceDiagram/sequenceRenderer.js

@@ -6,7 +6,9 @@ var sq = require('./parser/sequenceDiagram').parser;
 sq.yy = require('./sequenceDb');
 var svgDraw = require('./svgDraw');
 var d3 = require('../../d3');
-var log = require('../../logger').create();
+import * as Logger from '../../logger';
+var log = new Logger.Log();
+
 
 var conf = {
 

src/logger.js

@@ -9,88 +9,89 @@
  * logger.debug(function() { return "booom" })
  * => [2011-3-3T20:24:4.810 error (5021)] booom
  */
-var Logger;
 
-Logger = (function() {
-    function Logger(options) {
-        var level, ref;
+const LEVELS = {
+    debug: 1,
+    info: 2,
+    warn: 3,
+    error: 4,
+    fatal: 5,
+    default: 5
+};
 
-        this.options = options || {};
-        this.level = this.options.level || Logger.levels.default;
-        ref = Logger.levels;
-        for (level in ref) {
-            Logger.define(this, level);
-        }
+let defaultLevel = LEVELS.error;
+
+exports.setLogLevel = function (level) {
+    defaultLevel = level;
+};
+
+function formatTime(timestamp) {
+    var hh = timestamp.getUTCHours();
+    var mm = timestamp.getUTCMinutes();
+    var ss = timestamp.getSeconds();
+    var ms = timestamp.getMilliseconds();
+    // If you were building a timestamp instead of a duration, you would uncomment the following line to get 12-hour (not 24) time
+    // if (hh > 12) {hh = hh % 12;}
+    // These lines ensure you have two-digits
+    if (hh < 10) {
+        hh = '0' + hh;
+    }
+    if (mm < 10) {
+        mm = '0' + mm;
+    }
+    if (ss < 10) {
+        ss = '0' + ss;
     }
+    if (ms < 100) {
+        ms = '0' + ms;
+    }
+    if (ms < 10) {
+        ms = '00' + ms;
+    }
+    // This formats your string to HH:MM:SS
+    var t = hh + ':' + mm + ':' + ss + ' (' + ms + ')';
+    return t;
+}
 
-    Logger.prototype.add = function(level, message, callback) {
-        if (this.level > (Logger.levels[level] || 5)) {
-            return;
-        }
-        if (callback) {
-            message = callback();
-        } else if (typeof message === 'function') {
-            message = message();
-        }
-        return this.write({
-            timestamp: new Date,
-            severity: level,
-            message: message,
-            pid: process.pid
-        });
-    };
 
-    function formatTime(timestamp){
-        var hh = timestamp.getUTCHours();
-        var mm = timestamp.getUTCMinutes();
-        var ss = timestamp.getSeconds();
-        var ms = timestamp.getMilliseconds();
-        // If you were building a timestamp instead of a duration, you would uncomment the following line to get 12-hour (not 24) time
-        // if (hh > 12) {hh = hh % 12;}
-        // These lines ensure you have two-digits
-        if (hh < 10) {hh = '0'+hh;}
-        if (mm < 10) {mm = '0'+mm;}
-        if (ss < 10) {ss = '0'+ss;}
-        if (ms < 100){ms = '0'+ms;}
-        if (ms < 10) {ms = '00'+ms;}
-        // This formats your string to HH:MM:SS
-        var t = hh+':'+mm+':'+ss +' ('+ms+')';
-        return t;
+class Log {
+    constructor(level) {
+        this.level = level;
     }
 
-    Logger.prototype.write = function(options) {
-        if(typeof console !== 'undefined'){ //eslint-disable-line no-console
-            if(typeof console.log  !== 'undefined'){ //eslint-disable-line no-console
-                return console.log(this.build_message(options)); //eslint-disable-line no-console
+    log(str, level) {
+        let logLevel = this.level;
+        if(typeof logLevel === 'undefined'){
+            logLevel = defaultLevel;
+        }
+        if (logLevel <= level) {
+            if (typeof console !== 'undefined') { //eslint-disable-line no-console
+                if (typeof console.log !== 'undefined') { //eslint-disable-line no-console
+                    return console.log('[' + formatTime(new Date()) + '] ' + str); //eslint-disable-line no-console
+                }
             }
         }
-    };
+    }
 
-    Logger.prototype.build_message = function(options) {
-        return '[' + formatTime(options.timestamp) + '] ' + options.message;
-    };
+    trace(str) {
+        this.log(str, LEVELS.trace);
+    }
 
-    return Logger;
+    debug(str) {
+        this.log(str, LEVELS.debug);
+    }
 
-})();
+    info(str) {
+        this.log(str, LEVELS.info);
+    }
 
-Logger.define = function(logger, level) {
-    return logger[level] = function(message, callback) {
-        return this.add(level, message, callback);
-    };
-};
+    warn(str) {
+        this.log(str, LEVELS.warn);
+    }
 
-Logger.levels = {
-    debug: 1,
-    info: 2,
-    warn: 3,
-    error: 4,
-    fatal: 5,
-    default:5
-};
-exports.setLogLevel = function(level){
-    Logger.levels.default = level;
+    error(str) {
+        this.log(str, LEVELS.error);
+    }
 }
-exports.create = function(options) {
-    return new Logger(options);
-};
+
+exports.Log = Log;