Flowchart parallel

src/flowchart.chart.js

@@ -2,6 +2,7 @@ var Raphael = require('raphael');
 var defaults = require('./flowchart.helpers').defaults;
 var defaultOptions = require('./flowchart.defaults');
 var Condition = require('./flowchart.symbol.condition');
+var Parallel = require('./flowchart.symbol.parallel');
 
 function FlowChart(container, options) {
   options = options || {};
@@ -32,7 +33,29 @@ FlowChart.prototype.handle = function(symbol) {
     };
     symbol.no = function(nextSymbol) {
       symbol.no_symbol = nextSymbol;
-      if(symbol.yes_symbol) {
+      if (symbol.yes_symbol) {
+        symbol.pathOk = true;
+      }
+      return flowChart.handle(nextSymbol);
+    };
+  } else if (symbol instanceof(Parallel)) {
+    symbol.path1 = function(nextSymbol) {
+      symbol.path1_symbol = nextSymbol;
+      if (symbol.path2_symbol) {
+        symbol.pathOk = true;
+      }
+      return flowChart.handle(nextSymbol);
+    };
+    symbol.path2 = function(nextSymbol) {
+      symbol.path2_symbol = nextSymbol;
+      if (symbol.path3_symbol) {
+        symbol.pathOk = true;
+      }
+      return flowChart.handle(nextSymbol);
+    };
+    symbol.path3 = function(nextSymbol) {
+      symbol.path3_symbol = nextSymbol;
+      if (symbol.path1_symbol) {
         symbol.pathOk = true;
       }
       return flowChart.handle(nextSymbol);
@@ -55,15 +78,15 @@ FlowChart.prototype.startWith = function(symbol) {
 
 FlowChart.prototype.render = function() {
   var maxWidth = 0,
-      maxHeight = 0,
-      i = 0,
-      len = 0,
-      maxX = 0,
-      maxY = 0,
-      minX = 0,
-      minY = 0,
-      symbol,
-      line;
+    maxHeight = 0,
+    i = 0,
+    len = 0,
+    maxX = 0,
+    maxY = 0,
+    minX = 0,
+    minY = 0,
+    symbol,
+    line;
 
   for (i = 0, len = this.symbols.length; i < len; i++) {
     symbol = this.symbols[i];
@@ -149,4 +172,4 @@ FlowChart.prototype.clean = function() {
   }
 };
 
-module.exports = FlowChart;
+module.exports = FlowChart;

src/flowchart.defaults.js

@@ -19,17 +19,18 @@ module.exports = {
   'class': 'flowchart',
   'scale': 1,
   'symbols': {
-    'start': {},
-    'end': {},
-    'condition': {},
-    'inputoutput': {},
-    'operation': {},
-    'subroutine': {}
-  }//,
+      'start': {},
+      'end': {},
+      'condition': {},
+      'inputoutput': {},
+      'operation': {},
+      'subroutine': {},
+      'parallel': {}
+  } //,
   // 'flowstate' : {
   //   'past' : { 'fill': '#CCCCCC', 'font-size': 12},
   //   'current' : {'fill': 'yellow', 'font-color': 'red', 'font-weight': 'bold'},
   //   'future' : { 'fill': '#FFFF99'},
   //   'invalid': {'fill': '#444444'}
   // }
-};
+};

src/flowchart.parse.js

@@ -5,6 +5,7 @@ var Operation = require('./flowchart.symbol.operation');
 var InputOutput = require('./flowchart.symbol.inputoutput');
 var Subroutine = require('./flowchart.symbol.subroutine');
 var Condition = require('./flowchart.symbol.condition');
+var Parallel = require('./flowchart.symbol.parallel');
 
 function parse(input) {
   input = input || '';
@@ -40,14 +41,17 @@ function parse(input) {
             dispSymbols[s.key] = new Operation(diagram, s);
             break;
           case 'inputoutput':
-            dispSymbols[s.key] = new InputOutput(diagram, s); 
+            dispSymbols[s.key] = new InputOutput(diagram, s);
             break;
           case 'subroutine':
             dispSymbols[s.key] = new Subroutine(diagram, s);
             break;
           case 'condition':
             dispSymbols[s.key] = new Condition(diagram, s);
             break;
+          case 'parallel':
+            dispSymbols[s.key] = new Parallel(diagram, s);
+            break;
           default:
             return new Error('Wrong symbol type!');
         }
@@ -68,6 +72,16 @@ function parse(input) {
             if (prev.no === s) {
               prevDisp.no(dispSymb);
             }
+          } else if (prevDisp instanceof(Parallel)) {
+            if (prev.path1 === s) {
+              prevDisp.path1(dispSymb);
+            }
+            if (prev.path2 === s) {
+              prevDisp.path2(dispSymb);
+            }
+            if (prev.path3 === s) {
+              prevDisp.path3(dispSymb);
+            }
           } else {
             prevDisp.then(dispSymb);
           }
@@ -84,6 +98,16 @@ function parse(input) {
           if (s.no) {
             constructChart(s.no, dispSymb, s);
           }
+        } else if (dispSymb instanceof(Parallel)) {
+          if (s.path1) {
+            constructChart(s.path1, dispSymb, s);
+          }
+          if (s.path2) {
+            constructChart(s.path2, dispSymb, s);
+          }
+          if (s.path3) {
+            constructChart(s.path3, dispSymb, s);
+          }
         } else if (s.next) {
           constructChart(s.next, dispSymb, s);
         }
@@ -108,7 +132,7 @@ function parse(input) {
     }
   }
 
-  if(prevBreak < input.length) {
+  if (prevBreak < input.length) {
     lines.push(input.substr(prevBreak));
   }
 
@@ -146,7 +170,7 @@ function parse(input) {
     var startIndex = s.indexOf('(') + 1;
     var endIndex = s.indexOf(')');
     if (startIndex >= 0 && endIndex >= 0) {
-      return chart.symbols[s.substring(0, startIndex - 1)];   
+      return chart.symbols[s.substring(0, startIndex - 1)];
     }
     return chart.symbols[s];
   }
@@ -189,7 +213,7 @@ function parse(input) {
         var entries = params[1].split(',');
         for(var i = 0; i < entries.length; i++) {
           var entry = entries[0].split('=');
-          if (entry.length == 2){
+          if (entry.length == 2) {
             symbol.params[entry[0]] = entry[1];
           }
         }
@@ -279,12 +303,11 @@ function parse(input) {
       // line style
       var lineStyleSymbols = line.split('@>');
       for (var i = 0, lenS = lineStyleSymbols.length; i < lenS; i++) {
-
-        if ((i+1) != lenS){
+        if ((i + 1) != lenS) {
           var curSymb = getSymbol(lineStyleSymbols[i]);
           var nextSymb = getSymbol(lineStyleSymbols[i+1]);
 
-          curSymb['lineStyle'][nextSymb.key] = JSON.parse(getStyle(lineStyleSymbols[i+1]));
+          curSymb['lineStyle'][nextSymb.key] = JSON.parse(getStyle(lineStyleSymbols[i + 1]));
         }
       }
     }
@@ -293,4 +316,4 @@ function parse(input) {
   return chart;
 }
 
-module.exports = parse;
+module.exports = parse;

src/flowchart.symbol.parallel.js

@@ -0,0 +1,153 @@
+var Symbol = require('./flowchart.symbol');
+var inherits = require('./flowchart.helpers').inherits;
+var drawAPI = require('./flowchart.functions');
+var drawPath = drawAPI.drawPath;
+
+function Parallel(chart, options) {
+  var symbol = chart.paper.rect(0, 0, 0, 0);
+  options = options || {};
+  Symbol.call(this, chart, options, symbol);
+  this.textMargin = this.getAttr('text-margin');
+  this.path1_direction = 'bottom';
+  this.path2_direction = 'right';
+  this.path3_direction = 'top';
+  this.params = options.params;
+  if (options.path1 && options.direction_path1 && options.path2 && !options.direction_path2 && options.path3 && !options.direction_path3) {
+    if (options.direction_path1 === 'right') {
+      this.path2_direction = 'bottom';
+      this.path1_direction = 'right';
+      this.path3_direction = 'top';
+    } else if (options.direction_path1 === 'top') {
+      this.path2_direction = 'right';
+      this.path1_direction = 'top';
+      this.path3_direction = 'top';
+    } else {
+      this.path2_direction = 'right';
+      this.path1_direction = 'bottom';
+      this.path3_direction = 'top';
+    }
+  } else if (options.path1 && !options.direction_path1 && options.path2 && options.direction_path2 && options.path3 && !options.direction_path3) {
+    if (options.direction_path2 === 'right') {
+      this.path1_direction = 'bottom';
+      this.path2_direction = 'right';
+      this.path3_direction = 'top';
+    } else {
+      this.path1_direction = 'right';
+      this.path2_direction = 'bottom';
+      this.path3_direction = 'top';
+    }
+  } else if (options.path1 && !options.direction_path1 && options.path2 && !options.direction_path2 && options.path3 && options.direction_path3) {
+    if (options.direction_path2 === 'right') {
+      this.path1_direction = 'bottom';
+      this.path2_direction = 'top';
+      this.path3_direction = 'right';
+    } else {
+      this.path1_direction = 'right';
+      this.path2_direction = 'bottom';
+      this.path3_direction = 'top';
+    }
+  } else {
+    this.path1_direction = 'bottom';
+    this.path2_direction = 'right';
+    this.path3_direction = 'top';
+  }
+
+  this.path1_direction = this.path1_direction || 'bottom';
+  this.path2_direction = this.path2_direction || 'right';
+  this.path3_direction = this.path3_direction || 'top';
+
+  this.initialize();
+}
+inherits(Parallel, Symbol);
+
+Parallel.prototype.render = function() {
+
+  if (this.path1_direction) {
+    this[this.path1_direction + '_symbol'] = this.path1_symbol;
+  }
+
+  if (this.path2_direction) {
+    this[this.path2_direction + '_symbol'] = this.path2_symbol;
+  }
+
+  if (this.path3_direction) {
+    this[this.path3_direction + '_symbol'] = this.path3_symbol;
+  }
+
+  var lineLength = this.getAttr('line-length');
+
+  if (this.bottom_symbol) {
+    var bottomPoint = this.getBottom();
+
+    if (!this.bottom_symbol.isPositioned) {
+      this.bottom_symbol.shiftY(this.getY() + this.height + lineLength);
+      this.bottom_symbol.setX(bottomPoint.x - this.bottom_symbol.width / 2);
+      this.bottom_symbol.isPositioned = true;
+
+      this.bottom_symbol.render();
+    }
+  }
+
+  if (this.top_symbol) {
+    var topPoint = this.getTop();
+
+    if (!this.top_symbol.isPositioned) {
+      this.top_symbol.shiftY(this.getY() - this.top_symbol.height - lineLength);
+      this.top_symbol.setX(topPoint.x + this.top_symbol.width);
+      this.top_symbol.isPositioned = true;
+
+      this.top_symbol.render();
+    }
+  }
+
+  if (this.right_symbol) {
+    var rightPoint = this.getRight();
+
+    if (!this.right_symbol.isPositioned) {
+
+      this.right_symbol.setY(rightPoint.y - this.right_symbol.height / 2);
+      this.right_symbol.shiftX(this.group.getBBox().x + this.width + lineLength);
+      var self = this;
+      (function shift() {
+        var hasSymbolUnder = false;
+        var symb;
+        for (var i = 0, len = self.chart.symbols.length; i < len; i++) {
+          symb = self.chart.symbols[i];
+
+          if (!self.params['align-next'] || self.params['align-next'] !== 'no') {
+            var diff = Math.abs(symb.getCenter().x - self.right_symbol.getCenter().x);
+            if (symb.getCenter().y > self.right_symbol.getCenter().y && diff <= self.right_symbol.width / 2) {
+              hasSymbolUnder = true;
+              break;
+            }
+          }
+        }
+
+        if (hasSymbolUnder) {
+          self.right_symbol.setX(symb.getX() + symb.width + lineLength);
+          shift();
+        }
+      })();
+
+      this.right_symbol.isPositioned = true;
+
+      this.right_symbol.render();
+    }
+  }
+};
+
+Parallel.prototype.renderLines = function() {
+  if (this.path1_symbol) {
+    this.drawLineTo(this.path1_symbol, '', this.path1_direction);
+  }
+
+  if (this.path2_symbol) {
+    this.drawLineTo(this.path2_symbol, '', this.path2_direction);
+  }
+
+  if (this.path3_symbol) {
+    this.drawLineTo(this.path3_symbol, '', this.path3_direction);
+  }
+};
+
+module.exports = Parallel;