ability to disable vertical alignment for condition symbol

[bertrandmartel]

I've noticed that when multiple elements are aligned the upper condition element is aligning to the left of the bottom right hand element. For example, I have this configuration

You can reproduce with

st=>start: Start
current=>operation: program = current program
last=>operation: program = last program
op11=>operation: somethin
op1=>operation: Get current program
op2=>end: startover = ad after program start
op3=>end: startover = ad after SharpStart
op4=>end: startover = ad after last program end
fail=>end: startover = EPG program start
cond1=>condition: program exists ?
cond2=>condition: SharpStart after 
program start ?
cond3=>condition: Ad existing after 
program start ?
cond4=>condition: SharpStart 
before program ?
cond5=>condition: Ad after previous 
SharpStart ?
cond6=>condition: Ad after 
last program ?

st->op1->cond1
cond1(yes)->current
current->cond2

cond1(no)->cond6
cond6(no)->last
cond6(yes)->op4
last->cond2
cond2(yes)->cond3
cond2(no)->cond4
cond3(no)->cond4
cond3(yes)->op2
cond4(no)->fail
cond4(yes,right)->cond5
cond5(yes,right)->op3
cond5(no)->fail

I've forked and modified the library to add ability to put parameters for symbol declaration such as

element(param1=value1,param2=value2)=>start: Start

This is done using

var symbol = {
  key: parts[0].replace(/\(.*\)/, ''),
  symbolType: parts[1],
  params: {},
  text: null,
  link: null,
  target: null,
  lineStyle: {},
  flowstate: null
};

//parse parameters
var params = parts[0].match(/\((.*)\)/);
if (params && params.length > 1){
  var entries = params[1].split(',');
  for(var i = 0; i < entries.length; i++) {
    var entry = entries[0].split('=');
    if (entry.length == 2){
      symbol.params[entry[0]] = entry[1];
    }
  }
}

In flowchart.symbol.condition I identified the code responsible for identifying if an element is under this one : here

After applying the new configuration which indicates not to vertical align the next element

cond1(align-next=no)=>condition: program exists ?
cond6(align-next=no)=>condition: Ad after 

It gives

What do you think about this ?

[adrai]

Nice work... as soon I get my hands back to my macbook I will look at your PRs... PS. I did not check... did you describe it a bit in the readme?

[adrai]

@bertrandmartel ok, as soon you describe the new functionalities in the readme and in the gh-page with an example (https://github.com/adrai/flowchart.js/blob/gh-pages/index.html) or at least a proposal... ;-) I will merge the PRs Well done! 👍

[bertrandmartel]

I've added in the readme

'cond=>condition: Yes \n' + // use cond(align-next=no) to disable vertical align of symbols below

I've updated gh-pages locsize demo with more aligned conditions. Is that ok or you prefer to setup a new demo ?

[bertrandmartel]

@adrai Also do you want me to commit the release folder ?

[adrai]

It's ok, I will do the rest... 😉

[vic-t]

I came across this PR and the issue it solves today by chance through a post on StackOverflow. I'm just curious, why not make this the default for diagrams created with flowchart.js? It seems to me that flowcharts look a lot better when parallel items are not scattered all over the place but kept in one column.