|
1 | 1 | /**
|
2 | 2 | * FlowgorithmJS
|
3 |
| - * @versione 0.14 |
4 |
| - * @date 2019-02-19 |
| 3 | + * @version 0.15 |
| 4 | + * @date 2019-03-05 |
| 5 | + * @author Andrea Vallorani <[email protected]> |
5 | 6 | */
|
6 | 7 | var maxW,maxH,flowX=0,funX=0;
|
7 | 8 | var flow;
|
@@ -97,9 +98,8 @@ function drawFlowchart($xml,selector,options){
|
97 | 98 | var s = drawStart(txtStart);
|
98 | 99 | s += drawSequence($xml.children('body'));
|
99 | 100 | s += drawEnd(txtEnd);
|
100 |
| - $('#gtest').get(0).innerHTML = '<g transform="translate(0,0)">'+s+'</g>'; |
101 |
| - var fwidth = $('#gtest').children('g').get(0).getBBox().width+5; |
102 |
| - var fx = Math.abs($('#gtest').children('g').get(0).getBBox().x); |
| 101 | + var fwidth = calcBlockWidth(s)+5; |
| 102 | + var fx = calcBlockX(s); |
103 | 103 | var tempX = funX;
|
104 | 104 | if(tempX!=0){
|
105 | 105 | tempX+=fx;
|
@@ -151,25 +151,25 @@ function drawFlowchart($xml,selector,options){
|
151 | 151 | };
|
152 | 152 | function drawStart(content){
|
153 | 153 | flow.Y += 20;
|
154 |
| - var l = Math.max(calcExtraWidth(content)-35,35); |
| 154 | + var padding = 10; |
| 155 | + var l = Math.max(calcExtraWidth(content),50)/2+padding; |
155 | 156 | var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
|
156 | 157 | ' <g class="start">'+
|
157 | 158 | ' <ellipse class="symbol" cx="0" cy="0" rx="'+l+'" ry="20"/>'+
|
158 |
| - ' <text x="0" y="5">'+content+'</text>'+ |
| 159 | + ' <text x="0" y="4">'+content+'</text>'+ |
159 | 160 | ' </g>'+
|
160 | 161 | '</g>';
|
161 | 162 | flow.Y += 20;
|
162 |
| - //console.log("start ("+flow.Y+")"); |
163 | 163 | return s;
|
164 | 164 | };
|
165 | 165 | function drawEnd(content){
|
166 |
| - //console.log("end ("+flow.Y+")"); |
167 |
| - var l = Math.max(calcExtraWidth(content)-30,35); |
| 166 | + var padding = 10; |
| 167 | + var l = Math.max(calcExtraWidth(content),50)/2+padding; |
168 | 168 | var s = '<g class="block" transform="translate(0,'+flow.Y+')">'+
|
169 | 169 | drawArrow()+
|
170 | 170 | ' <g class="end" transform="translate(0,'+(options.aH+30)+')">'+
|
171 | 171 | ' <ellipse class="symbol" cx="0" cy="0" rx="'+l+'" ry="20"/>'+
|
172 |
| - ' <text x="0" y="5">'+content+'</text>'+ |
| 172 | + ' <text x="0" y="4">'+content+'</text>'+ |
173 | 173 | ' </g>'+
|
174 | 174 | '</g>';
|
175 | 175 | flow.Y += 50+options.aH;
|
@@ -306,8 +306,8 @@ function drawFlowchart($xml,selector,options){
|
306 | 306 | }
|
307 | 307 | else{
|
308 | 308 | var contidionWidth = Math.max(calcExtraWidth(condition),70)+20;
|
309 |
| - condition = '<text x="0" y="30">'+condition.escape()+'</text>'; |
310 |
| - romH = 25; |
| 309 | + condition = '<text x="0" y="31">'+condition.escape()+'</text>'; |
| 310 | + romH = 27; |
311 | 311 | }
|
312 | 312 | var oldY = 0, maxH = 0;
|
313 | 313 | oldY = flow.Y;
|
@@ -520,14 +520,14 @@ function drawFlowchart($xml,selector,options){
|
520 | 520 | return l;
|
521 | 521 | };
|
522 | 522 | function calcBlockWidth(content){
|
523 |
| - $("#gtest").get(0).innerHTML = content; |
524 |
| - var l = $('#gtest').get(0).getBBox().width; |
| 523 | + $('#gtest').get(0).innerHTML = '<g transform="translate(0,0)">'+content+'</g>'; |
| 524 | + var l = $('#gtest').children('g').get(0).getBBox().width; |
525 | 525 | maxW = Math.max(maxW,l);
|
526 | 526 | return l;
|
527 | 527 | };
|
528 | 528 | function calcBlockX(content){
|
529 |
| - $("#gtest").get(0).innerHTML = content; |
530 |
| - return Math.abs($('#gtest').get(0).getBBox().x); |
| 529 | + $("#gtest").get(0).innerHTML = '<g transform="translate(0,0)">'+content+'</g>'; |
| 530 | + return Math.abs($('#gtest').children('g').get(0).getBBox().x); |
531 | 531 | };
|
532 | 532 | function drawArrow(){
|
533 | 533 | return '<line class="arrow" x1="0" y1="0" x2="0" y2="'+options.aH+'"/>';
|
|
0 commit comments