Skip to content

Commit

Permalink
Flowchart parallel (#145)
Browse files Browse the repository at this point in the history 
* Flowchart parallel type added
  • Loading branch information
@sudhakar-sekar @adrai
sudhakar-sekar authored and adrai committed Apr 11, 2018
1 parent 3a9b4ce commit 97e31fc
Show file tree
Hide file tree
Showing 4 changed files with 227 additions and 27 deletions.
45 changes: 34 additions & 11 deletions src/flowchart.chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 || {};
Expand Down Expand Up @@ -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);
Expand All @@ -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];
Expand Down Expand Up @@ -149,4 +172,4 @@ FlowChart.prototype.clean = function() {
}
};

module.exports = FlowChart;
module.exports = FlowChart;
17 changes: 9 additions & 8 deletions src/flowchart.defaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
// }
};
};
39 changes: 31 additions & 8 deletions src/flowchart.parse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 || '';
Expand Down Expand Up @@ -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!');
}
Expand All @@ -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);
}
Expand All @@ -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);
}
Expand All @@ -108,7 +132,7 @@ function parse(input) {
}
}

if(prevBreak < input.length) {
if (prevBreak < input.length) {
lines.push(input.substr(prevBreak));
}

Expand Down Expand Up @@ -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];
}
Expand Down Expand Up @@ -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];
}
}
Expand Down Expand Up @@ -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]));
}
}
}
Expand All @@ -293,4 +316,4 @@ function parse(input) {
return chart;
}

module.exports = parse;
module.exports = parse;
153 changes: 153 additions & 0 deletions src/flowchart.symbol.parallel.js
View file
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 97e31fc

Please sign in to comment.