Skip to content

Commit 2d0f457

Browse files
StwisselStwissel
committed
Added support for flowstate to read alternate settings from the configuration.
this is to support display of the progress of a flow. See flowchart.default.js
1 parent 0f3c9c2 commit 2d0f457

File tree

6 files changed

+105
-73
lines changed

6 files changed

+105
-73
lines changed

‎example/index.html

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<head>
44
<meta charset="utf-8">
55
<title>flowchart.js · Playground</title>
6+
<style type="text/css">
7+
.tango { background-color : #FFCCFF; }
8+
</style>
69
<script type="text/javascript" src="../cdn/raphael-min.js"></script>
710
<script type="text/javascript" src="../cdn/jquery.min.js"></script>
811
<script type="text/javascript" src="../bin/flowchart-latest.js"></script>
@@ -44,7 +47,13 @@
4447
'element-color': 'green',
4548
'fill': 'yellow'
4649
}
47-
}
50+
},
51+
'flowstate' : {
52+
'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
53+
'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
54+
'future' : { 'fill' : '#FFFF99'},
55+
'invalid': {'fill' : '#444444'}
56+
}
4857
});
4958

5059
$('[id^=sub1]').click(function(){
@@ -57,13 +66,13 @@
5766
</head>
5867
<body>
5968
<div><textarea id="code" style="width: 100%;" rows="11">
60-
st=>start: Start:>http://www.google.com[blank]
61-
e=>end:>http://www.google.com
62-
op1=>operation: My Operation|Test
63-
sub1=>subroutine: My Subroutine|Demo
69+
st=>start: Start|past:>http://www.google.com[blank]
70+
e=>end: Ende|future:>http://www.google.com
71+
op1=>operation: My Operation|past
72+
sub1=>subroutine: My Subroutine|invalid
6473
cond=>condition: Yes
65-
or No?:>http://www.google.com
66-
io=>inputoutput: catch something...
74+
or No?|current:>http://www.google.com
75+
io=>inputoutput: catch something...|future
6776

6877
st->op1(right)->cond
6978
cond(yes, right)->io->e

‎src/flowchart.defaults.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,19 @@ var o = {
1616
'yes-text': 'yes',
1717
'no-text': 'no',
1818
'arrow-end': 'block',
19+
'className' : 'flowchart',
1920
'symbols': {
2021
'start': {},
2122
'end': {},
2223
'condition': {},
2324
'inputoutput': {},
2425
'operation': {},
2526
'subroutine': {}
27+
},
28+
'flowstate' : {
29+
'past' : {},
30+
'current' : {},
31+
'future' : {},
32+
'invalid': {}
2633
}
2734
};

‎src/flowchart.parse.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ function parse(input) {
151151
symbolType: parts[1],
152152
text: null,
153153
link: null,
154-
class : null,
154+
className : null,
155155
target: null
156156
};
157157

@@ -165,17 +165,7 @@ function parse(input) {
165165

166166
if (symbol.text && symbol.text.indexOf(':>') >= 0) {
167167
sub = symbol.text.split(':>');
168-
/* adding support for classes */
169-
var tmpText = sub[0];
170-
if (tmpText.indexOf('|') >= 0) {
171-
var txtAndClass = tmpText.split('|');
172-
symbol.text = txtAndClass[0];
173-
symbol.class = txtAndClass[1];
174-
} else {
175-
symbol.text = tmpText;
176-
}
177-
/* end of class support */
178-
168+
symbol.text = sub[0];
179169
symbol.link = sub[1];
180170
} else if (symbol.symbolType.indexOf(':>') >= 0) {
181171
sub = symbol.symbolType.split(':>');
@@ -196,6 +186,16 @@ function parse(input) {
196186
}
197187
}
198188

189+
/* adding support for flowstates */
190+
if (symbol.text) {
191+
if (symbol.text.indexOf('|') >= 0) {
192+
var txtAndState = symbol.text.split('|');
193+
symbol.text = txtAndState[0];
194+
symbol.flowstate = txtAndState[1].trim();
195+
}
196+
}
197+
/* end of flowstate support */
198+
199199
chart.symbols[symbol.key] = symbol;
200200

201201
} else if (line.indexOf('->') >= 0) {

‎src/flowchart.symbol.inputoutput.js

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
function InputOutput(chart, options) {
22
options = options || {};
33
Symbol.call(this, chart, options);
4-
4+
this.textMargin = this.getAttr('text-margin');
5+
56
this.text.attr({
6-
x: (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']) * 3
7+
x: this.textMargin * 3
78
});
89

9-
var width = this.text.getBBox().width + 4 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
10-
var height = this.text.getBBox().height + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
11-
var startX = (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
10+
var width = this.text.getBBox().width + 4 * this.textMargin;
11+
var height = this.text.getBBox().height + 2 * this.textMargin;
12+
var startX = this.textMargin;
1213
var startY = height/2;
1314

1415
var start = {x: startX, y: startY};
1516
var points = [
16-
{x: startX - (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']), y: height},
17-
{x: startX - (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']) + width, y: height},
18-
{x: startX - (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']) + width + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']), y: 0},
19-
{x: startX - (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']) + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']), y: 0},
17+
{x: startX - this.textMargin, y: height},
18+
{x: startX - this.textMargin + width, y: height},
19+
{x: startX - this.textMargin + width + 2 * this.textMargin, y: 0},
20+
{x: startX - this.textMargin + 2 * this.textMargin, y: 0},
2021
{x: startX, y: startY}
2122
];
2223

2324
var symbol = drawPath(chart, start, points);
2425

2526
symbol.attr({
26-
stroke: (this.chart.options.symbols[this.symbolType]['element-color'] || this.chart.options['element-color']),
27-
'stroke-width': (this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width']),
28-
fill: (this.chart.options.symbols[this.symbolType]['fill'] || this.chart.options['fill'])
27+
stroke: this.getAttr('element-color'),
28+
'stroke-width': this.getAttr('line-width'),
29+
fill: this.getAttr('fill')
2930
});
3031
if (options.link) { symbol.attr('href', options.link); }
3132
if (options.target) { symbol.attr('target', options.target); }
@@ -44,12 +45,12 @@ f.inherits(InputOutput, Symbol);
4445

4546
InputOutput.prototype.getLeft = function() {
4647
var y = this.getY() + this.group.getBBox().height/2;
47-
var x = this.getX() + (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
48+
var x = this.getX() + this.textMargin;
4849
return {x: x, y: y};
4950
};
5051

5152
InputOutput.prototype.getRight = function() {
5253
var y = this.getY() + this.group.getBBox().height/2;
53-
var x = this.getX() + this.group.getBBox().width - (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
54+
var x = this.getX() + this.group.getBBox().width - this.textMargin;
5455
return {x: x, y: y};
55-
};
56+
};

‎src/flowchart.symbol.js

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,31 @@ function Symbol(chart, options, symbol) {
44
this.symbol = symbol;
55
this.connectedTo = [];
66
this.symbolType = options.symbolType;
7+
this.flowstate = (options.flowstate || 'future');
78

89
this.next_direction = options.next && options['direction_next'] ? options['direction_next'] : undefined;
9-
var class = (this.options.class || this.chart.options.symbols[this.symbolType]['class'] || this.chart.options['class']);
10-
10+
1111
this.text = this.chart.paper.text(0, 0, options.text);
1212
//Raphael does not support the svg group tag so setting the text node id to the symbol node id plus t
1313
if (options.key) { this.text.node.id = options.key + 't'; }
14-
this.text.attr({
15-
'text-anchor': 'start',
16-
'font-size': (this.chart.options.symbols[this.symbolType]['font-size'] || this.chart.options['font-size']),
17-
'x': (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
18-
stroke: (this.chart.options.symbols[this.symbolType]['font-color'] || this.chart.options['font-color'])
19-
});
14+
this.text.attr({'text-anchor': 'start',
15+
'x' : this.getAttr('text-margin'),
16+
'stroke' : this.getAttr('font-color'),
17+
'font-size' : this.getAttr('font-size')});
2018

21-
var font = (this.chart.options.symbols[this.symbolType]['font'] || this.chart.options['font']);
22-
var fontF = (this.chart.options.symbols[this.symbolType]['font-family'] || this.chart.options['font-family']);
23-
var fontW = (this.chart.options.symbols[this.symbolType]['font-weight'] || this.chart.options['font-weight']);
19+
var font = this.getAttr('font');
20+
var fontF = this.getAttr('font-family');
21+
var fontW = this.getAttr('font-weight');
2422

2523
if (font) this.text.attr({ 'font': font });
2624
if (fontF) this.text.attr({ 'font-family': fontF });
2725
if (fontW) this.text.attr({ 'font-weight': fontW });
28-
if (class) this.text.attr({ 'class': class });
2926

3027
if (options.link) { this.text.attr('href', options.link); }
3128
if (options.target) { this.text.attr('target', options.target); }
32-
if (this.chart.options.symbols[this.symbolType]['maxWidth'] || this.chart.options['maxWidth']) {
29+
var maxWidth = this.getAttr('maxWidth');
30+
if (maxWidth) {
3331
// using this approach: http://stackoverflow.com/a/3153457/22466
34-
var maxWidth = this.chart.options.symbols[this.symbolType]['maxWidth'] || this.chart.options['maxWidth'];
3532
var words = options.text.split(' ');
3633
var tempText = "";
3734
for (var i=0, ii=words.length; i<ii; i++) {
@@ -45,20 +42,21 @@ function Symbol(chart, options, symbol) {
4542
}
4643
this.text.attr("text", tempText.substring(1));
4744
}
45+
4846
this.group.push(this.text);
4947

5048
if (symbol) {
51-
symbol.attr({
52-
stroke: (this.chart.options.symbols[this.symbolType]['element-color'] || this.chart.options['element-color']),
53-
'stroke-width': (this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width']),
54-
width: this.text.getBBox().width + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
55-
height: this.text.getBBox().height + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
56-
fill: (this.chart.options.symbols[this.symbolType]['fill'] || this.chart.options['fill'])
57-
});
58-
if (options.link) { symbol.attr('href', options.link); }
49+
var tmpMargin = this.getAttr('text-margin');
50+
51+
symbol.attr({'fill' : this.getAttr('fill'),
52+
'stroke' : this.getAttr('element-color'),
53+
'stroke-width' : this.getAttr('line-width'),
54+
'width' : this.text.getBBox().width + 2 * tmpMargin,
55+
'height' : this.text.getBBox().height + 2 * tmpMargin});
56+
57+
if (options.link) { symbol.attr('href', options.link); }
5958
if (options.target) { symbol.attr('target', options.target); }
6059
if (options.key) { symbol.node.id = options.key; }
61-
if (class) { symbol.attr('class',class); }
6260

6361
this.group.push(symbol);
6462
symbol.insertBefore(this.text);
@@ -69,10 +67,27 @@ function Symbol(chart, options, symbol) {
6967

7068
this.initialize();
7169
}
70+
7271
}
72+
/* Gets the attribute based on Flowstate, Symbol-Name and default, first found wins */
73+
Symbol.prototype.getAttr = function(attName) {
74+
if (!this.chart) {
75+
return undefined;
76+
}
77+
var opt3 = (this.chart.options) ? this.chart.options[attName] : undefined;
78+
var opt2 = (this.chart.options.symbols) ? this.chart.options.symbols[this.symbolType][attName] : undefined;
79+
var opt1 = undefined;
80+
if (this.chart.options.flowstate) {
81+
if (this.chart.options.flowstate[this.flowstate]) {
82+
opt1 = this.chart.options.flowstate[this.flowstate][attName];
83+
}
84+
}
85+
return (opt1 || opt2 || opt3);
86+
}
87+
7388

7489
Symbol.prototype.initialize = function() {
75-
this.group.transform('t' + (this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width']) + ',' + (this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width']));
90+
this.group.transform('t' + this.getAttr('line-width') + ',' + this.getAttr('line-width'));
7691

7792
this.width = this.group.getBBox().width;
7893
this.height = this.group.getBBox().height;
@@ -134,7 +149,7 @@ Symbol.prototype.getRight = function() {
134149
Symbol.prototype.render = function() {
135150
if (this.next) {
136151

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

139154
if (this.next_direction === 'right') {
140155

@@ -223,8 +238,8 @@ Symbol.prototype.drawLineTo = function(symbol, text, origin) {
223238

224239
var maxX = 0,
225240
line,
226-
lineLength = this.chart.options.symbols[this.symbolType]['line-length'] || this.chart.options['line-length'],
227-
lineWith = this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width'];
241+
lineLength = this.getAttr('line-length'),
242+
lineWith = this.getAttr('line-width');
228243

229244
if ((!origin || origin === 'bottom') && isOnSameColumn && isUnder) {
230245
line = drawLine(this.chart, bottom, symbolTop, text);

‎src/flowchart.symbol.subroutine.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,27 @@ function Subroutine(chart, options) {
44
Symbol.call(this, chart, options, symbol);
55

66
symbol.attr({
7-
width: this.text.getBBox().width + 4 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin'])
7+
width: this.text.getBBox().width + 4 * this.getAttr('text-margin')
88
});
99

1010
this.text.attr({
11-
'x': 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin'])
11+
'x': 2 * this.getAttr('text-margin')
1212
});
1313

1414
var innerWrap = chart.paper.rect(0, 0, 0, 0);
1515
innerWrap.attr({
16-
x: (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
17-
stroke: (this.chart.options.symbols[this.symbolType]['element-color'] || this.chart.options['element-color']),
18-
'stroke-width': (this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width']),
19-
width: this.text.getBBox().width + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
20-
height: this.text.getBBox().height + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
21-
fill: (this.chart.options.symbols[this.symbolType]['fill'] || this.chart.options['fill'])
16+
x: this.getAttr('text-margin'),
17+
stroke: this.getAttr('element-color'),
18+
'stroke-width': this.getAttr('line-width'),
19+
width: this.text.getBBox().width + 2 * this.getAttr('text-margin'),
20+
height: this.text.getBBox().height + 2 * this.getAttr('text-margin'),
21+
fill: this.getAttr('fill')
2222
});
2323
if (options.key) { innerWrap.node.id = options.key + 'i'; }
2424

25-
var font = (this.chart.options.symbols[this.symbolType]['font'] || this.chart.options['font']);
26-
var fontF = (this.chart.options.symbols[this.symbolType]['font-family'] || this.chart.options['font-family']);
27-
var fontW = (this.chart.options.symbols[this.symbolType]['font-weight'] || this.chart.options['font-weight']);
25+
var font = this.getAttr('font');
26+
var fontF = this.getAttr('font-family');
27+
var fontW = this.getAttr('font-weight');
2828

2929
if (font) innerWrap.attr({ 'font': font });
3030
if (fontF) innerWrap.attr({ 'font-family': fontF });
@@ -37,4 +37,4 @@ function Subroutine(chart, options) {
3737

3838
this.initialize();
3939
}
40-
f.inherits(Subroutine, Symbol);
40+
f.inherits(Subroutine, Symbol);

0 commit comments

Comments
 (0)