Skip to content

Commit 5c1b44d

Browse files
ctzurcanuctzurcanu
committed
Merge pull request #1 from adrai/raphaela
raphael and raphaela compatible
2 parents 8f1a707 + a784121 commit 5c1b44d

File tree

3 files changed

+64
-67
lines changed

3 files changed

+64
-67
lines changed

‎example/index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
<style type="text/css">
77
.end-element { background-color : #FFCCFF; }
88
</style>
9-
<script src="../raphaela.js"></script>
9+
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>-->
10+
<script src="../src/raphaela.js"></script>
1011
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.0.5/svg.js"></script>
1112
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
13+
<!--<script src="http://flowchart.js.org/flowchart-latest.js"></script>-->
1214
<script src="../bin/flowchart-latest.js"></script>
13-
<!--<script src="../bin/flowchart-latest.js"></script>-->
1415
<!--<script src="../release/flowchart-1.4.1.min.js"></script>-->
1516
<script>
1617

‎src/flowchart.symbol.js‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
var transformFn = 'transform',
2+
pathAttr = 'path';
3+
4+
if (Raphael.type === 'svg.js') {
5+
transformFn = 'transforma';
6+
pathAttr = 'd';
7+
}
8+
19
function Symbol(chart, options, symbol) {
210
this.chart = chart;
311
this.group = this.chart.paper.set();
@@ -7,12 +15,12 @@ function Symbol(chart, options, symbol) {
715
this.flowstate = (options.flowstate || 'future');
816

917
this.next_direction = options.next && options['direction_next'] ? options['direction_next'] : undefined;
10-
18+
1119
this.text = this.chart.paper.text(0, 0, options.text);
1220
//Raphael does not support the svg group tag so setting the text node id to the symbol node id plus t
1321
if (options.key) { this.text.node.id = options.key + 't'; }
1422
this.text.node.setAttribute('class', this.getAttr('class') + 't');
15-
23+
1624
this.text.attr({
1725
'text-anchor': 'start',
1826
'x' : this.getAttr('text-margin'),
@@ -47,12 +55,12 @@ function Symbol(chart, options, symbol) {
4755
}
4856
this.text.attr("text", tempText.substring(1));
4957
}
50-
58+
5159
this.group.push(this.text);
5260

5361
if (symbol) {
5462
var tmpMargin = this.getAttr('text-margin');
55-
63+
5664
symbol.attr({
5765
'fill' : this.getAttr('fill'),
5866
'stroke' : this.getAttr('element-color'),
@@ -94,7 +102,7 @@ Symbol.prototype.getAttr = function(attName) {
94102
};
95103

96104
Symbol.prototype.initialize = function() {
97-
this.group.transforma('t' + this.getAttr('line-width') + ',' + this.getAttr('line-width'));
105+
this.group[transformFn].call(this.group, 't' + this.getAttr('line-width') + ',' + this.getAttr('line-width'));
98106

99107
this.width = this.group.getBBox().width;
100108
this.height = this.group.getBBox().height;
@@ -114,19 +122,19 @@ Symbol.prototype.getY = function() {
114122
};
115123

116124
Symbol.prototype.shiftX = function(x) {
117-
this.group.transforma('t' + (this.getX() + x) + ',' + this.getY());
125+
this.group[transformFn].call(this.group, 't' + (this.getX() + x) + ',' + this.getY());
118126
};
119127

120128
Symbol.prototype.setX = function(x) {
121-
this.group.transforma('t' + x + ',' + this.getY());
129+
this.group[transformFn].call(this.group, 't' + x + ',' + this.getY());
122130
};
123131

124132
Symbol.prototype.shiftY = function(y) {
125-
this.group.transforma('t' + this.getX() + ',' + (this.getY() + y));
133+
this.group[transformFn].call(this.group, 't' + this.getX() + ',' + (this.getY() + y));
126134
};
127135

128136
Symbol.prototype.setY = function(y) {
129-
this.group.transforma('t' + this.getX() + ',' + y);
137+
this.group[transformFn].call(this.group, 't' + this.getX() + ',' + y);
130138
};
131139

132140
Symbol.prototype.getTop = function() {
@@ -377,8 +385,8 @@ Symbol.prototype.drawLineTo = function(symbol, text, origin) {
377385
intersections,
378386
inter;
379387

380-
var ePath = otherLine.attr('d'),
381-
lPath = line.attr('d');
388+
var ePath = otherLine.attr(pathAttr),
389+
lPath = line.attr(pathAttr);
382390

383391
for (var iP = 0, lenP = ePath.length - 1; iP < lenP; iP++) {
384392
var newPath = [];
@@ -410,27 +418,27 @@ Symbol.prototype.drawLineTo = function(symbol, text, origin) {
410418
lPath.splice(lP + 1, 0, newSegment);
411419
newSegment = ['C', res.x + lineWith * 2, line2_from_y, res.x, line2_from_y - lineWith * 4, res.x - lineWith * 2, line2_from_y];
412420
lPath.splice(lP + 2, 0, newSegment);
413-
line.attr('d', lPath);
421+
line.attr(pathAttr, lPath);
414422
} else {
415423
newSegment = ['L', res.x - lineWith * 2, line2_from_y];
416424
lPath.splice(lP + 1, 0, newSegment);
417425
newSegment = ['C', res.x - lineWith * 2, line2_from_y, res.x, line2_from_y - lineWith * 4, res.x + lineWith * 2, line2_from_y];
418426
lPath.splice(lP + 2, 0, newSegment);
419-
line.attr('d', lPath);
427+
line.attr(pathAttr, lPath);
420428
}
421429
} else {
422430
if (line2_from_y > line2_to_y) {
423431
newSegment = ['L', line2_from_x, res.y + lineWith * 2];
424432
lPath.splice(lP + 1, 0, newSegment);
425433
newSegment = ['C', line2_from_x, res.y + lineWith * 2, line2_from_x + lineWith * 4, res.y, line2_from_x, res.y - lineWith * 2];
426434
lPath.splice(lP + 2, 0, newSegment);
427-
line.attr('d', lPath);
435+
line.attr(pathAttr, lPath);
428436
} else {
429437
newSegment = ['L', line2_from_x, res.y - lineWith * 2];
430438
lPath.splice(lP + 1, 0, newSegment);
431439
newSegment = ['C', line2_from_x, res.y - lineWith * 2, line2_from_x + lineWith * 4, res.y, line2_from_x, res.y + lineWith * 2];
432440
lPath.splice(lP + 2, 0, newSegment);
433-
line.attr('d', lPath);
441+
line.attr(pathAttr, lPath);
434442
}
435443
}
436444

‎raphaela.js‎ renamed to ‎src/raphaela.js‎

Lines changed: 38 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,75 @@
11

22
var Raphael = function(container, options){
33
this.paper = SVG(container)
4-
this.registerFont = function(font){
5-
//
6-
return;
7-
}
84
}
95

6+
Raphael.registerFont = function(font){};
7+
8+
Raphael.text_bbox = function(){};
9+
10+
Raphael.fn = function(){};
11+
12+
Raphael.type = 'svg.js';
13+
1014
Raphael.prototype.text = function(x, y, text){
11-
console.log(x,y)
12-
var text= this.paper.text(text)
13-
//text.move(x,-text.height)
14-
text.getBBox= function(){
15-
return this.tbox()
16-
}
17-
return text
18-
}
15+
var text = this.paper.text(text);
16+
//text.move(x,-text.height);
17+
text.getBBox = function(){
18+
return this.tbox();
19+
};
20+
return text;
21+
};
1922

2023
Raphael.prototype.rect = function(x, y, width, height, round){
21-
var rect = this.paper.rect(width, height)//.move(x,y-10)
22-
if (round) rect.radius(round)
24+
var rect = this.paper.rect(width, height);//.move(x,y-10)
25+
if (round) rect.radius(round);
2326
rect.insertBefore = function(obj){
2427
this.parent().add(obj)
2528
this.back()
26-
}
27-
rect.getBBox= function(){
29+
};
30+
rect.getBBox = function(){
2831
return this.tbox()
29-
}
30-
return rect
31-
}
32+
};
33+
return rect;
34+
};
3235

3336
Raphael.prototype.set = function(){
3437
var gr = this.paper.group()
3538
gr.getBBox= function(){
3639
var box = this.tbox()
3740
return box
38-
}
41+
};
3942
gr.push = function(obj){
4043
this.add(obj)
41-
}
44+
};
4245
gr.transforma =function(trans){
4346
trans = trans.substring(1)
4447
var coords = trans.split(",")
4548
this.move(parseInt(coords[0]),parseInt(coords[1]))
46-
}
47-
return gr
48-
}
49+
};
50+
return gr;
51+
};
4952

5053
Raphael.prototype.path = function(path,pathValues){
51-
console.log(path)
52-
console.log(pathValues)
5354
for (ndx in pathValues){
54-
var str = "{"+ndx+"}"
55-
path = path.replace(str,pathValues[ndx])
55+
var str = "{"+ndx+"}";
56+
path = path.replace(str,pathValues[ndx]);
5657
}
57-
console.log(path)
58-
var rect = this.paper.path(path).fill("none")//.move(0,-10)
58+
var rect = this.paper.path(path).fill("none");//.move(0,-10)
5959
rect.insertBefore = function(obj){
60-
this.parent().add(obj)
61-
this.backward()
62-
}
60+
this.parent().add(obj);
61+
this.backward();
62+
};
6363
rect.getBBox= function(){
64-
return this.tbox()
65-
}
66-
return rect
64+
return this.tbox();
65+
};
66+
return rect;
6767
}
6868

6969
Raphael.prototype.setSize = function(width, height){
70-
this.paper.size(width,height)
70+
this.paper.size(width,height);
7171
}
7272

7373
Raphael.prototype.setViewBox = function(x, y, w, h, fit){
74-
this.paper.viewbox(x, y, w, h) // , fit
74+
this.paper.viewbox(x, y, w, h); // , fit
7575
}
76-
77-
Raphael.prototype.type = function(){
78-
return "svg.js"
79-
}
80-
81-
Raphael.registerFont = function(font){
82-
//
83-
}
84-
85-
Raphael.text_bbox = function(){}
86-
87-
Raphael.fn={}

0 commit comments

Comments
 (0)