Skip to content

Commit 0d3aad8

Browse files
StwisselStwissel
committed
Added support for condition to allow Yes/No text to be altered based on status and color code the decision
1 parent 2d0f457 commit 0d3aad8

File tree

3 files changed

+26
-20
lines changed

3 files changed

+26
-20
lines changed

‎example/index.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@
5252
'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
5353
'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
5454
'future' : { 'fill' : '#FFFF99'},
55-
'invalid': {'fill' : '#444444'}
55+
'invalid': {'fill' : '#444444'},
56+
'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
57+
'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
5658
}
5759
});
5860

@@ -69,14 +71,18 @@
6971
st=>start: Start|past:>http://www.google.com[blank]
7072
e=>end: Ende|future:>http://www.google.com
7173
op1=>operation: My Operation|past
74+
op2=>operation: Stuff|current
7275
sub1=>subroutine: My Subroutine|invalid
7376
cond=>condition: Yes
74-
or No?|current:>http://www.google.com
77+
or No?|approved:>http://www.google.com
78+
c2=>condition: Good idea|rejected
7579
io=>inputoutput: catch something...|future
7680

7781
st->op1(right)->cond
78-
cond(yes, right)->io->e
82+
cond(yes, right)->c2
7983
cond(no)->sub1(left)->op1
84+
c2(yes)->io->e
85+
c2(no)->op2->e
8086
</textarea></div>
8187
<div><button id="run" type="button">Run</button></div>
8288
<div id="canvas"></div>

‎src/flowchart.defaults.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ var o = {
2626
'subroutine': {}
2727
},
2828
'flowstate' : {
29-
'past' : {},
30-
'current' : {},
31-
'future' : {},
32-
'invalid': {}
33-
}
29+
'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
30+
'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
31+
'future' : { 'fill' : '#FFFF99'},
32+
'invalid': {'fill' : '#444444'}
33+
}
3434
};

‎src/flowchart.symbol.condition.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
function Condition(chart, options) {
22
options = options || {};
33
Symbol.call(this, chart, options);
4-
4+
this.textMargin = this.getAttr('text-margin');
55
this.yes_direction = 'bottom';
66
this.no_direction = 'right';
77
if (options.yes && options['direction_yes'] && options.no && !options['direction_no']) {
@@ -29,19 +29,19 @@ function Condition(chart, options) {
2929
this.no_direction = this.no_direction || 'right';
3030

3131
this.text.attr({
32-
x: (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']) * 2
32+
x: this.textMargin * 2
3333
});
3434

35-
var width = this.text.getBBox().width + 3 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
35+
var width = this.text.getBBox().width + 3 * this.textMargin;
3636
width += width/2;
37-
var height = this.text.getBBox().height + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
37+
var height = this.text.getBBox().height + 2 * this.textMargin;
3838
height += height/2;
3939
height = Math.max(width * 0.5, height);
4040
var startX = width/4;
4141
var startY = height/4;
4242

4343
this.text.attr({
44-
x: startX + (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin'])/2
44+
x: startX + this.textMargin/2
4545
});
4646

4747
var start = {x: startX, y: startY};
@@ -56,9 +56,9 @@ function Condition(chart, options) {
5656
var symbol = drawPath(chart, start, points);
5757

5858
symbol.attr({
59-
stroke: (this.chart.options.symbols[this.symbolType]['element-color'] || this.chart.options['element-color']),
60-
'stroke-width': (this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width']),
61-
fill: (this.chart.options.symbols[this.symbolType]['fill'] || this.chart.options['fill'])
59+
stroke: this.getAttr('element-color'),
60+
'stroke-width': this.getAttr('line-width'),
61+
fill: this.getAttr('fill')
6262
});
6363
if (options.link) { symbol.attr('href', options.link); }
6464
if (options.target) { symbol.attr('target', options.target); }
@@ -85,7 +85,7 @@ Condition.prototype.render = function() {
8585
this[this.no_direction + '_symbol'] = this.no_symbol;
8686
}
8787

88-
var lineLength = this.chart.options.symbols[this.symbolType]['line-length'] || this.chart.options['line-length'];
88+
var lineLength = this.getAttr('line-length');
8989

9090
if (this.bottom_symbol) {
9191
var bottomPoint = this.getBottom();
@@ -138,10 +138,10 @@ Condition.prototype.render = function() {
138138

139139
Condition.prototype.renderLines = function() {
140140
if (this.yes_symbol) {
141-
this.drawLineTo(this.yes_symbol, this.chart.options['yes-text'], this.yes_direction);
141+
this.drawLineTo(this.yes_symbol, this.getAttr('yes-text'), this.yes_direction);
142142
}
143143

144144
if (this.no_symbol) {
145-
this.drawLineTo(this.no_symbol, this.chart.options['no-text'], this.no_direction);
145+
this.drawLineTo(this.no_symbol, this.getAttr('no-text'), this.no_direction);
146146
}
147-
};
147+
};

0 commit comments

Comments
 (0)