Skip to content

Commit 63c0947

Browse files
adraiadrai
committed
update site
1 parent 969b9fc commit 63c0947

File tree

3 files changed

+184
-82
lines changed

3 files changed

+184
-82
lines changed

‎css/style.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,8 @@ header h2 {
104104
}
105105

106106
.editor {
107-
width: 380px;
108-
height: 210px;
107+
width: 400px;
108+
height: 280px;
109109
font-size: 14px;
110110
}
111111

@@ -120,7 +120,7 @@ header h2 {
120120

121121
.inner {
122122
position: relative;
123-
width: 940px;
123+
width: 1040px;
124124
margin: 0 auto;
125125
}
126126

‎flowchart-latest.js

Lines changed: 101 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// flowchart, v1.2.12
1+
// flowchart, v1.3.0
22
// Copyright (c)2014 Adriano Raiano (adrai).
33
// Distributed under MIT license
44
// http://adrai.github.io/flowchart.js
@@ -111,7 +111,13 @@
111111
'inputoutput': {},
112112
'operation': {},
113113
'subroutine': {}
114-
}
114+
}//,
115+
// 'flowstate' : {
116+
// 'past' : { 'fill': '#CCCCCC', 'font-size': 12},
117+
// 'current' : {'fill': 'yellow', 'font-color': 'red', 'font-weight': 'bold'},
118+
// 'future' : { 'fill': '#FFFF99'},
119+
// 'invalid': {'fill': '#444444'}
120+
// }
115121
};
116122
function _defaults(options, defaultOptions) {
117123
if (!options || typeof options === 'function') {
@@ -439,32 +445,33 @@
439445
this.symbol = symbol;
440446
this.connectedTo = [];
441447
this.symbolType = options.symbolType;
448+
this.flowstate = (options.flowstate || 'future');
442449

443450
this.next_direction = options.next && options['direction_next'] ? options['direction_next'] : undefined;
444-
451+
445452
this.text = this.chart.paper.text(0, 0, options.text);
446453
//Raphael does not support the svg group tag so setting the text node id to the symbol node id plus t
447454
if (options.key) { this.text.node.id = options.key + 't'; }
448455
this.text.attr({
449456
'text-anchor': 'start',
450-
'font-size': (this.chart.options.symbols[this.symbolType]['font-size'] || this.chart.options['font-size']),
451-
'x': (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
452-
stroke: (this.chart.options.symbols[this.symbolType]['font-color'] || this.chart.options['font-color'])
457+
'x' : this.getAttr('text-margin'),
458+
'stroke' : this.getAttr('font-color'),
459+
'font-size' : this.getAttr('font-size')
453460
});
454461

455-
var font = (this.chart.options.symbols[this.symbolType]['font'] || this.chart.options['font']);
456-
var fontF = (this.chart.options.symbols[this.symbolType]['font-family'] || this.chart.options['font-family']);
457-
var fontW = (this.chart.options.symbols[this.symbolType]['font-weight'] || this.chart.options['font-weight']);
462+
var font = this.getAttr('font');
463+
var fontF = this.getAttr('font-family');
464+
var fontW = this.getAttr('font-weight');
458465

459466
if (font) this.text.attr({ 'font': font });
460467
if (fontF) this.text.attr({ 'font-family': fontF });
461468
if (fontW) this.text.attr({ 'font-weight': fontW });
462469

463470
if (options.link) { this.text.attr('href', options.link); }
464471
if (options.target) { this.text.attr('target', options.target); }
465-
if (this.chart.options.symbols[this.symbolType]['maxWidth'] || this.chart.options['maxWidth']) {
472+
var maxWidth = this.getAttr('maxWidth');
473+
if (maxWidth) {
466474
// using this approach: http://stackoverflow.com/a/3153457/22466
467-
var maxWidth = this.chart.options.symbols[this.symbolType]['maxWidth'] || this.chart.options['maxWidth'];
468475
var words = options.text.split(' ');
469476
var tempText = "";
470477
for (var i=0, ii=words.length; i<ii; i++) {
@@ -478,17 +485,21 @@
478485
}
479486
this.text.attr("text", tempText.substring(1));
480487
}
488+
481489
this.group.push(this.text);
482490

483491
if (symbol) {
484-
symbol.attr({
485-
stroke: (this.chart.options.symbols[this.symbolType]['element-color'] || this.chart.options['element-color']),
486-
'stroke-width': (this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width']),
487-
width: this.text.getBBox().width + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
488-
height: this.text.getBBox().height + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
489-
fill: (this.chart.options.symbols[this.symbolType]['fill'] || this.chart.options['fill'])
490-
});
491-
if (options.link) { symbol.attr('href', options.link); }
492+
var tmpMargin = this.getAttr('text-margin');
493+
494+
symbol.attr({
495+
'fill' : this.getAttr('fill'),
496+
'stroke' : this.getAttr('element-color'),
497+
'stroke-width' : this.getAttr('line-width'),
498+
'width' : this.text.getBBox().width + 2 * tmpMargin,
499+
'height' : this.text.getBBox().height + 2 * tmpMargin
500+
});
501+
502+
if (options.link) { symbol.attr('href', options.link); }
492503
if (options.target) { symbol.attr('target', options.target); }
493504
if (options.key) { symbol.node.id = options.key; }
494505

@@ -501,10 +512,25 @@
501512

502513
this.initialize();
503514
}
515+
504516
}
505517

518+
/* Gets the attribute based on Flowstate, Symbol-Name and default, first found wins */
519+
Symbol.prototype.getAttr = function(attName) {
520+
if (!this.chart) {
521+
return undefined;
522+
}
523+
var opt3 = (this.chart.options) ? this.chart.options[attName] : undefined;
524+
var opt2 = (this.chart.options.symbols) ? this.chart.options.symbols[this.symbolType][attName] : undefined;
525+
var opt1;
526+
if (this.chart.options.flowstate && this.chart.options.flowstate[this.flowstate]) {
527+
opt1 = this.chart.options.flowstate[this.flowstate][attName];
528+
}
529+
return (opt1 || opt2 || opt3);
530+
};
531+
506532
Symbol.prototype.initialize = function() {
507-
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']));
533+
this.group.transform('t' + this.getAttr('line-width') + ',' + this.getAttr('line-width'));
508534

509535
this.width = this.group.getBBox().width;
510536
this.height = this.group.getBBox().height;
@@ -566,7 +592,7 @@
566592
Symbol.prototype.render = function() {
567593
if (this.next) {
568594

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

571597
if (this.next_direction === 'right') {
572598

@@ -655,8 +681,8 @@
655681

656682
var maxX = 0,
657683
line,
658-
lineLength = this.chart.options.symbols[this.symbolType]['line-length'] || this.chart.options['line-length'],
659-
lineWith = this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width'];
684+
lineLength = this.getAttr('line-length'),
685+
lineWith = this.getAttr('line-width');
660686

661687
if ((!origin || origin === 'bottom') && isOnSameColumn && isUnder) {
662688
line = drawLine(this.chart, bottom, symbolTop, text);
@@ -894,27 +920,27 @@
894920
Symbol.call(this, chart, options, symbol);
895921

896922
symbol.attr({
897-
width: this.text.getBBox().width + 4 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin'])
923+
width: this.text.getBBox().width + 4 * this.getAttr('text-margin')
898924
});
899925

900926
this.text.attr({
901-
'x': 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin'])
927+
'x': 2 * this.getAttr('text-margin')
902928
});
903929

904930
var innerWrap = chart.paper.rect(0, 0, 0, 0);
905931
innerWrap.attr({
906-
x: (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
907-
stroke: (this.chart.options.symbols[this.symbolType]['element-color'] || this.chart.options['element-color']),
908-
'stroke-width': (this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width']),
909-
width: this.text.getBBox().width + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
910-
height: this.text.getBBox().height + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']),
911-
fill: (this.chart.options.symbols[this.symbolType]['fill'] || this.chart.options['fill'])
932+
x: this.getAttr('text-margin'),
933+
stroke: this.getAttr('element-color'),
934+
'stroke-width': this.getAttr('line-width'),
935+
width: this.text.getBBox().width + 2 * this.getAttr('text-margin'),
936+
height: this.text.getBBox().height + 2 * this.getAttr('text-margin'),
937+
fill: this.getAttr('fill')
912938
});
913939
if (options.key) { innerWrap.node.id = options.key + 'i'; }
914940

915-
var font = (this.chart.options.symbols[this.symbolType]['font'] || this.chart.options['font']);
916-
var fontF = (this.chart.options.symbols[this.symbolType]['font-family'] || this.chart.options['font-family']);
917-
var fontW = (this.chart.options.symbols[this.symbolType]['font-weight'] || this.chart.options['font-weight']);
941+
var font = this.getAttr('font');
942+
var fontF = this.getAttr('font-family');
943+
var fontW = this.getAttr('font-weight');
918944

919945
if (font) innerWrap.attr({ 'font': font });
920946
if (fontF) innerWrap.attr({ 'font-family': fontF });
@@ -931,31 +957,32 @@
931957
function InputOutput(chart, options) {
932958
options = options || {};
933959
Symbol.call(this, chart, options);
934-
960+
this.textMargin = this.getAttr('text-margin');
961+
935962
this.text.attr({
936-
x: (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']) * 3
963+
x: this.textMargin * 3
937964
});
938965

939-
var width = this.text.getBBox().width + 4 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
940-
var height = this.text.getBBox().height + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
941-
var startX = (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
966+
var width = this.text.getBBox().width + 4 * this.textMargin;
967+
var height = this.text.getBBox().height + 2 * this.textMargin;
968+
var startX = this.textMargin;
942969
var startY = height/2;
943970

944971
var start = {x: startX, y: startY};
945972
var points = [
946-
{x: startX - (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']), y: height},
947-
{x: startX - (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']) + width, y: height},
948-
{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},
949-
{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},
973+
{x: startX - this.textMargin, y: height},
974+
{x: startX - this.textMargin + width, y: height},
975+
{x: startX - this.textMargin + width + 2 * this.textMargin, y: 0},
976+
{x: startX - this.textMargin + 2 * this.textMargin, y: 0},
950977
{x: startX, y: startY}
951978
];
952979

953980
var symbol = drawPath(chart, start, points);
954981

955982
symbol.attr({
956-
stroke: (this.chart.options.symbols[this.symbolType]['element-color'] || this.chart.options['element-color']),
957-
'stroke-width': (this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width']),
958-
fill: (this.chart.options.symbols[this.symbolType]['fill'] || this.chart.options['fill'])
983+
stroke: this.getAttr('element-color'),
984+
'stroke-width': this.getAttr('line-width'),
985+
fill: this.getAttr('fill')
959986
});
960987
if (options.link) { symbol.attr('href', options.link); }
961988
if (options.target) { symbol.attr('target', options.target); }
@@ -974,19 +1001,19 @@
9741001

9751002
InputOutput.prototype.getLeft = function() {
9761003
var y = this.getY() + this.group.getBBox().height/2;
977-
var x = this.getX() + (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
1004+
var x = this.getX() + this.textMargin;
9781005
return {x: x, y: y};
9791006
};
9801007

9811008
InputOutput.prototype.getRight = function() {
9821009
var y = this.getY() + this.group.getBBox().height/2;
983-
var x = this.getX() + this.group.getBBox().width - (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
1010+
var x = this.getX() + this.group.getBBox().width - this.textMargin;
9841011
return {x: x, y: y};
9851012
};
9861013
function Condition(chart, options) {
9871014
options = options || {};
9881015
Symbol.call(this, chart, options);
989-
1016+
this.textMargin = this.getAttr('text-margin');
9901017
this.yes_direction = 'bottom';
9911018
this.no_direction = 'right';
9921019
if (options.yes && options['direction_yes'] && options.no && !options['direction_no']) {
@@ -1014,19 +1041,19 @@
10141041
this.no_direction = this.no_direction || 'right';
10151042

10161043
this.text.attr({
1017-
x: (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']) * 2
1044+
x: this.textMargin * 2
10181045
});
10191046

1020-
var width = this.text.getBBox().width + 3 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
1047+
var width = this.text.getBBox().width + 3 * this.textMargin;
10211048
width += width/2;
1022-
var height = this.text.getBBox().height + 2 * (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin']);
1049+
var height = this.text.getBBox().height + 2 * this.textMargin;
10231050
height += height/2;
10241051
height = Math.max(width * 0.5, height);
10251052
var startX = width/4;
10261053
var startY = height/4;
10271054

10281055
this.text.attr({
1029-
x: startX + (this.chart.options.symbols[this.symbolType]['text-margin'] || this.chart.options['text-margin'])/2
1056+
x: startX + this.textMargin/2
10301057
});
10311058

10321059
var start = {x: startX, y: startY};
@@ -1041,9 +1068,9 @@
10411068
var symbol = drawPath(chart, start, points);
10421069

10431070
symbol.attr({
1044-
stroke: (this.chart.options.symbols[this.symbolType]['element-color'] || this.chart.options['element-color']),
1045-
'stroke-width': (this.chart.options.symbols[this.symbolType]['line-width'] || this.chart.options['line-width']),
1046-
fill: (this.chart.options.symbols[this.symbolType]['fill'] || this.chart.options['fill'])
1071+
stroke: this.getAttr('element-color'),
1072+
'stroke-width': this.getAttr('line-width'),
1073+
fill: this.getAttr('fill')
10471074
});
10481075
if (options.link) { symbol.attr('href', options.link); }
10491076
if (options.target) { symbol.attr('target', options.target); }
@@ -1070,7 +1097,7 @@
10701097
this[this.no_direction + '_symbol'] = this.no_symbol;
10711098
}
10721099

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

10751102
if (this.bottom_symbol) {
10761103
var bottomPoint = this.getBottom();
@@ -1123,11 +1150,11 @@
11231150

11241151
Condition.prototype.renderLines = function() {
11251152
if (this.yes_symbol) {
1126-
this.drawLineTo(this.yes_symbol, this.chart.options['yes-text'], this.yes_direction);
1153+
this.drawLineTo(this.yes_symbol, this.getAttr('yes-text'), this.yes_direction);
11271154
}
11281155

11291156
if (this.no_symbol) {
1130-
this.drawLineTo(this.no_symbol, this.chart.options['no-text'], this.no_direction);
1157+
this.drawLineTo(this.no_symbol, this.getAttr('no-text'), this.no_direction);
11311158
}
11321159
};
11331160
function parse(input) {
@@ -1272,7 +1299,7 @@
12721299
return next;
12731300
}
12741301

1275-
while(lines.length > 0) {
1302+
while (lines.length > 0) {
12761303
var line = lines.splice(0, 1)[0];
12771304

12781305
if (line.indexOf('=>') >= 0) {
@@ -1283,7 +1310,8 @@
12831310
symbolType: parts[1],
12841311
text: null,
12851312
link: null,
1286-
target: null
1313+
target: null,
1314+
flowstate: null
12871315
};
12881316

12891317
var sub;
@@ -1308,6 +1336,7 @@
13081336
symbol.symbolType = symbol.symbolType.split('\n')[0];
13091337
}
13101338

1339+
/* adding support for links */
13111340
if (symbol.link) {
13121341
var startIndex = symbol.link.indexOf('[') + 1;
13131342
var endIndex = symbol.link.indexOf(']');
@@ -1316,6 +1345,17 @@
13161345
symbol.link = symbol.link.substring(0, startIndex - 1);
13171346
}
13181347
}
1348+
/* end of link support */
1349+
1350+
/* adding support for flowstates */
1351+
if (symbol.text) {
1352+
if (symbol.text.indexOf('|') >= 0) {
1353+
var txtAndState = symbol.text.split('|');
1354+
symbol.text = txtAndState[0];
1355+
symbol.flowstate = txtAndState[1].trim();
1356+
}
1357+
}
1358+
/* end of flowstate support */
13191359

13201360
chart.symbols[symbol.key] = symbol;
13211361

0 commit comments

Comments
 (0)