Skip to content

Commit

Permalink
Merge pull request #1 from adrai/raphaela
Browse files Browse the repository at this point in the history
raphael and raphaela compatible
  • Loading branch information
ctzurcanu committed Sep 19, 2015
2 parents 8f1a707 + a784121 commit 5c1b44d
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 67 deletions.
5 changes: 3 additions & 2 deletions example/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,12 @@
<style type="text/css">
.end-element { background-color : #FFCCFF; }
</style>
<script src="../raphaela.js"></script>
<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>-->
<script src="../src/raphaela.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.0.5/svg.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--<script src="http://flowchart.js.org/flowchart-latest.js"></script>-->
<script src="../bin/flowchart-latest.js"></script>
<!--<script src="../bin/flowchart-latest.js"></script>-->
<!--<script src="../release/flowchart-1.4.1.min.js"></script>-->
<script>

Expand Down
38 changes: 23 additions & 15 deletions src/flowchart.symbol.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
var transformFn = 'transform',
pathAttr = 'path';

if (Raphael.type === 'svg.js') {
transformFn = 'transforma';
pathAttr = 'd';
}

function Symbol(chart, options, symbol) {
this.chart = chart;
this.group = this.chart.paper.set();
Expand All @@ -7,12 +15,12 @@ function Symbol(chart, options, symbol) {
this.flowstate = (options.flowstate || 'future');

this.next_direction = options.next && options['direction_next'] ? options['direction_next'] : undefined;

this.text = this.chart.paper.text(0, 0, options.text);
//Raphael does not support the svg group tag so setting the text node id to the symbol node id plus t
if (options.key) { this.text.node.id = options.key + 't'; }
this.text.node.setAttribute('class', this.getAttr('class') + 't');

this.text.attr({
'text-anchor': 'start',
'x' : this.getAttr('text-margin'),
Expand Down Expand Up @@ -47,12 +55,12 @@ function Symbol(chart, options, symbol) {
}
this.text.attr("text", tempText.substring(1));
}

this.group.push(this.text);

if (symbol) {
var tmpMargin = this.getAttr('text-margin');

symbol.attr({
'fill' : this.getAttr('fill'),
'stroke' : this.getAttr('element-color'),
Expand Down Expand Up @@ -94,7 +102,7 @@ Symbol.prototype.getAttr = function(attName) {
};

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

this.width = this.group.getBBox().width;
this.height = this.group.getBBox().height;
Expand All @@ -114,19 +122,19 @@ Symbol.prototype.getY = function() {
};

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

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

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

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

Symbol.prototype.getTop = function() {
Expand Down Expand Up @@ -377,8 +385,8 @@ Symbol.prototype.drawLineTo = function(symbol, text, origin) {
intersections,
inter;

var ePath = otherLine.attr('d'),
lPath = line.attr('d');
var ePath = otherLine.attr(pathAttr),
lPath = line.attr(pathAttr);

for (var iP = 0, lenP = ePath.length - 1; iP < lenP; iP++) {
var newPath = [];
Expand Down Expand Up @@ -410,27 +418,27 @@ Symbol.prototype.drawLineTo = function(symbol, text, origin) {
lPath.splice(lP + 1, 0, newSegment);
newSegment = ['C', res.x + lineWith * 2, line2_from_y, res.x, line2_from_y - lineWith * 4, res.x - lineWith * 2, line2_from_y];
lPath.splice(lP + 2, 0, newSegment);
line.attr('d', lPath);
line.attr(pathAttr, lPath);
} else {
newSegment = ['L', res.x - lineWith * 2, line2_from_y];
lPath.splice(lP + 1, 0, newSegment);
newSegment = ['C', res.x - lineWith * 2, line2_from_y, res.x, line2_from_y - lineWith * 4, res.x + lineWith * 2, line2_from_y];
lPath.splice(lP + 2, 0, newSegment);
line.attr('d', lPath);
line.attr(pathAttr, lPath);
}
} else {
if (line2_from_y > line2_to_y) {
newSegment = ['L', line2_from_x, res.y + lineWith * 2];
lPath.splice(lP + 1, 0, newSegment);
newSegment = ['C', line2_from_x, res.y + lineWith * 2, line2_from_x + lineWith * 4, res.y, line2_from_x, res.y - lineWith * 2];
lPath.splice(lP + 2, 0, newSegment);
line.attr('d', lPath);
line.attr(pathAttr, lPath);
} else {
newSegment = ['L', line2_from_x, res.y - lineWith * 2];
lPath.splice(lP + 1, 0, newSegment);
newSegment = ['C', line2_from_x, res.y - lineWith * 2, line2_from_x + lineWith * 4, res.y, line2_from_x, res.y + lineWith * 2];
lPath.splice(lP + 2, 0, newSegment);
line.attr('d', lPath);
line.attr(pathAttr, lPath);
}
}

Expand Down
88 changes: 38 additions & 50 deletions raphaela.js → src/raphaela.js
Original file line number Diff line number Diff line change
@@ -1,87 +1,75 @@

var Raphael = function(container, options){
this.paper = SVG(container)
this.registerFont = function(font){
//
return;
}
}

Raphael.registerFont = function(font){};

Raphael.text_bbox = function(){};

Raphael.fn = function(){};

Raphael.type = 'svg.js';

Raphael.prototype.text = function(x, y, text){
console.log(x,y)
var text= this.paper.text(text)
//text.move(x,-text.height)
text.getBBox= function(){
return this.tbox()
}
return text
}
var text = this.paper.text(text);
//text.move(x,-text.height);
text.getBBox = function(){
return this.tbox();
};
return text;
};

Raphael.prototype.rect = function(x, y, width, height, round){
var rect = this.paper.rect(width, height)//.move(x,y-10)
if (round) rect.radius(round)
var rect = this.paper.rect(width, height);//.move(x,y-10)
if (round) rect.radius(round);
rect.insertBefore = function(obj){
this.parent().add(obj)
this.back()
}
rect.getBBox= function(){
};
rect.getBBox = function(){
return this.tbox()
}
return rect
}
};
return rect;
};

Raphael.prototype.set = function(){
var gr = this.paper.group()
gr.getBBox= function(){
var box = this.tbox()
return box
}
};
gr.push = function(obj){
this.add(obj)
}
};
gr.transforma =function(trans){
trans = trans.substring(1)
var coords = trans.split(",")
this.move(parseInt(coords[0]),parseInt(coords[1]))
}
return gr
}
};
return gr;
};

Raphael.prototype.path = function(path,pathValues){
console.log(path)
console.log(pathValues)
for (ndx in pathValues){
var str = "{"+ndx+"}"
path = path.replace(str,pathValues[ndx])
var str = "{"+ndx+"}";
path = path.replace(str,pathValues[ndx]);
}
console.log(path)
var rect = this.paper.path(path).fill("none")//.move(0,-10)
var rect = this.paper.path(path).fill("none");//.move(0,-10)
rect.insertBefore = function(obj){
this.parent().add(obj)
this.backward()
}
this.parent().add(obj);
this.backward();
};
rect.getBBox= function(){
return this.tbox()
}
return rect
return this.tbox();
};
return rect;
}

Raphael.prototype.setSize = function(width, height){
this.paper.size(width,height)
this.paper.size(width,height);
}

Raphael.prototype.setViewBox = function(x, y, w, h, fit){
this.paper.viewbox(x, y, w, h) // , fit
this.paper.viewbox(x, y, w, h); // , fit
}

Raphael.prototype.type = function(){
return "svg.js"
}

Raphael.registerFont = function(font){
//
}

Raphael.text_bbox = function(){}

Raphael.fn={}

0 comments on commit 5c1b44d

Please sign in to comment.