Skip to content

Commit 97acba4

Browse files
adraiadrai
committed
adrai#23 optimized merge of color coding
1 parent 0d3aad8 commit 97acba4

9 files changed

+88
-67
lines changed

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,5 @@ $ cat .gitignore
1414
node_modules
1515
node_modules/**/*
1616
bin
17-
cdn
1817
reports
1918
reports/**/*

‎Gruntfile.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -195,9 +195,8 @@ module.exports = function(grunt) {
195195
});
196196

197197
// Default task.
198-
//grunt.registerTask('default', ['clean', 'rig']);
199-
grunt.registerTask('default', ['rig']);
200-
grunt.registerTask('release', ['clean','default', 'uglify', 'copy', 'compress']);
198+
grunt.registerTask('default', ['clean', 'rig']);
199+
grunt.registerTask('release', ['default', 'uglify', 'copy', 'compress']);
201200

202201

203202
};

‎README.md

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ and then
2525
'sub1=>subroutine: My Subroutine\n' +
2626
'cond=>condition: Yes \n' +
2727
'or No?\n:>http://www.google.com' +
28-
'io=>inputoutput: catch something...\n' +
28+
'io=>inputoutput|request: catch something...\n' +
2929
'' +
3030
'st->op1->cond\n' +
3131
'cond(yes)->io->e\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
@@ -47,7 +47,23 @@ and then
4747
'fill': 'white',
4848
'yes-text': 'yes',
4949
'no-text': 'no',
50-
'arrow-end': 'block'
50+
'arrow-end': 'block',
51+
'symbols': {
52+
'start': {
53+
'font-color': 'red',
54+
'element-color': 'green',
55+
'fill': 'yellow'
56+
}
57+
},
58+
'flowstate' : {
59+
// 'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
60+
// 'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
61+
// 'future' : { 'fill' : '#FFFF99'},
62+
'request' : { 'fill' : 'blue'}//,
63+
// 'invalid': {'fill' : '#444444'},
64+
// 'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
65+
// 'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
66+
}
5167
});
5268
</script>
5369
```

‎component.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "flowchart",
3-
"version": "1.2.12",
4-
"main": "./release/flowchart-1.2.12.min.js",
3+
"version": "1.3.0",
4+
"main": "./release/flowchart-1.3.0.min.js",
55
"dependencies": {},
66
"ignore": [
77
"src/",

‎example/index.html

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +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>
9-
<script type="text/javascript" src="../cdn/raphael-min.js"></script>
10-
<script type="text/javascript" src="../cdn/jquery.min.js"></script>
11-
<script type="text/javascript" src="../bin/flowchart-latest.js"></script>
6+
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
7+
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
8+
<script src="../bin/flowchart-latest.js"></script>
129
<script>
1310

1411
window.onload = function () {
@@ -41,6 +38,7 @@
4138
'yes-text': 'yes',
4239
'no-text': 'no',
4340
'arrow-end': 'block',
41+
'className' : 'flowchart',
4442
'symbols': {
4543
'start': {
4644
'font-color': 'red',
@@ -49,13 +47,14 @@
4947
}
5048
},
5149
'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-
'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' }
58-
}
50+
'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
51+
'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
52+
'future' : { 'fill' : '#FFFF99'},
53+
'request' : { 'fill' : 'blue'},
54+
'invalid': {'fill' : '#444444'},
55+
'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
56+
'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
57+
}
5958
});
6059

6160
$('[id^=sub1]').click(function(){
@@ -76,7 +75,7 @@
7675
cond=>condition: Yes
7776
or No?|approved:>http://www.google.com
7877
c2=>condition: Good idea|rejected
79-
io=>inputoutput: catch something...|future
78+
io=>inputoutput: catch something...|request
8079

8180
st->op1(right)->cond
8281
cond(yes, right)->c2

‎releasenotes.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
### v1.3.0
2+
3+
- Added support for color coding (flowstate) [#18](https://github.com/adrai/flowchart.js/pull/23) thanks to [Stwissel](https://github.com/Stwissel)
4+
15
### v1.2.12
26

37
- optimized start from right [#22](https://github.com/adrai/flowchart.js/issues/22)

‎src/flowchart.defaults.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ var o = {
2424
'inputoutput': {},
2525
'operation': {},
2626
'subroutine': {}
27-
},
28-
'flowstate' : {
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-
}
27+
}//,
28+
// 'flowstate' : {
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.parse.js

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ function parse(input) {
140140
return next;
141141
}
142142

143-
while(lines.length > 0) {
143+
while (lines.length > 0) {
144144
var line = lines.splice(0, 1)[0];
145145

146146
if (line.indexOf('=>') >= 0) {
@@ -151,8 +151,8 @@ function parse(input) {
151151
symbolType: parts[1],
152152
text: null,
153153
link: null,
154-
className : null,
155-
target: null
154+
target: null,
155+
flowstate: null
156156
};
157157

158158
var sub;
@@ -177,6 +177,7 @@ function parse(input) {
177177
symbol.symbolType = symbol.symbolType.split('\n')[0];
178178
}
179179

180+
/* adding support for links */
180181
if (symbol.link) {
181182
var startIndex = symbol.link.indexOf('[') + 1;
182183
var endIndex = symbol.link.indexOf(']');
@@ -185,16 +186,17 @@ function parse(input) {
185186
symbol.link = symbol.link.substring(0, startIndex - 1);
186187
}
187188
}
189+
/* end of link support */
188190

189191
/* 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 */
192+
if (symbol.text) {
193+
if (symbol.text.indexOf('|') >= 0) {
194+
var txtAndState = symbol.text.split('|');
195+
symbol.text = txtAndState[0];
196+
symbol.flowstate = txtAndState[1].trim();
197+
}
198+
}
199+
/* end of flowstate support */
198200

199201
chart.symbols[symbol.key] = symbol;
200202

‎src/flowchart.symbol.js

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,12 @@ function Symbol(chart, options, symbol) {
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({'text-anchor': 'start',
15-
'x' : this.getAttr('text-margin'),
16-
'stroke' : this.getAttr('font-color'),
17-
'font-size' : this.getAttr('font-size')});
14+
this.text.attr({
15+
'text-anchor': 'start',
16+
'x' : this.getAttr('text-margin'),
17+
'stroke' : this.getAttr('font-color'),
18+
'font-size' : this.getAttr('font-size')
19+
});
1820

1921
var font = this.getAttr('font');
2022
var fontF = this.getAttr('font-family');
@@ -46,15 +48,17 @@ function Symbol(chart, options, symbol) {
4648
this.group.push(this.text);
4749

4850
if (symbol) {
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); }
51+
var tmpMargin = this.getAttr('text-margin');
52+
53+
symbol.attr({
54+
'fill' : this.getAttr('fill'),
55+
'stroke' : this.getAttr('element-color'),
56+
'stroke-width' : this.getAttr('line-width'),
57+
'width' : this.text.getBBox().width + 2 * tmpMargin,
58+
'height' : this.text.getBBox().height + 2 * tmpMargin
59+
});
60+
61+
if (options.link) { symbol.attr('href', options.link); }
5862
if (options.target) { symbol.attr('target', options.target); }
5963
if (options.key) { symbol.node.id = options.key; }
6064

@@ -69,22 +73,20 @@ function Symbol(chart, options, symbol) {
6973
}
7074

7175
}
76+
7277
/* Gets the attribute based on Flowstate, Symbol-Name and default, first found wins */
7378
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-
79+
if (!this.chart) {
80+
return undefined;
81+
}
82+
var opt3 = (this.chart.options) ? this.chart.options[attName] : undefined;
83+
var opt2 = (this.chart.options.symbols) ? this.chart.options.symbols[this.symbolType][attName] : undefined;
84+
var opt1;
85+
if (this.chart.options.flowstate && this.chart.options.flowstate[this.flowstate]) {
86+
opt1 = this.chart.options.flowstate[this.flowstate][attName];
87+
}
88+
return (opt1 || opt2 || opt3);
89+
};
8890

8991
Symbol.prototype.initialize = function() {
9092
this.group.transform('t' + this.getAttr('line-width') + ',' + this.getAttr('line-width'));

0 commit comments

Comments
 (0)