Raphaela

example/index.html

@@ -6,10 +6,12 @@
         <style type="text/css">
           .end-element { background-color : #FFCCFF; }
         </style>
-        <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.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="http://flowchart.js.org/flowchart-latest.js"></script>-->
+        <script src="../bin/flowchart-latest.js"></script>
         <!--<script src="../release/flowchart-1.4.1.min.js"></script>-->
         <script>
 

src/flowchart.symbol.js

@@ -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();
@@ -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'),
@@ -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'),
@@ -94,7 +102,7 @@ Symbol.prototype.getAttr = function(attName) {
 };
 
 Symbol.prototype.initialize = function() {
-  this.group.transform('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;
@@ -114,19 +122,19 @@ Symbol.prototype.getY = function() {
 };
 
 Symbol.prototype.shiftX = function(x) {
-  this.group.transform('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.transform('t' + x + ',' + this.getY());
+  this.group[transformFn].call(this.group, 't' + x + ',' + this.getY());
 };
 
 Symbol.prototype.shiftY = function(y) {
-  this.group.transform('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.transform('t' + this.getX() + ',' + y);
+  this.group[transformFn].call(this.group, 't' + this.getX() + ',' + y);
 };
 
 Symbol.prototype.getTop = function() {
@@ -377,8 +385,8 @@ Symbol.prototype.drawLineTo = function(symbol, text, origin) {
           intersections,
           inter;
 
-      var ePath = otherLine.attr('path'),
-          lPath = line.attr('path');
+      var ePath = otherLine.attr(pathAttr),
+          lPath = line.attr(pathAttr);
 
       for (var iP = 0, lenP = ePath.length - 1; iP < lenP; iP++) {
         var newPath = [];
@@ -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('path', 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('path', 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('path', 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('path', lPath);
+                line.attr(pathAttr, lPath);
               }
             }
 

src/raphaela.js

@@ -0,0 +1,75 @@
+
+var Raphael = function(container, options){
+	this.paper = SVG(container)
+}
+
+Raphael.registerFont = function(font){};
+
+Raphael.text_bbox = function(){};
+
+Raphael.fn = function(){};
+
+Raphael.type = 'svg.js';
+
+Raphael.prototype.text = function(x, y, 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);
+	rect.insertBefore = function(obj){
+		this.parent().add(obj)
+		this.back()
+	};
+	rect.getBBox = function(){
+		return this.tbox()
+	};
+	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;
+};
+
+Raphael.prototype.path = function(path,pathValues){
+	for (ndx in pathValues){
+		var str = "{"+ndx+"}";
+		path = path.replace(str,pathValues[ndx]);
+	}
+	var rect = this.paper.path(path).fill("none");//.move(0,-10)
+	rect.insertBefore = function(obj){
+		this.parent().add(obj);
+		this.backward();
+	};
+	rect.getBBox= function(){
+		return this.tbox();
+	};
+	return rect;
+}
+
+Raphael.prototype.setSize = function(width, height){
+	this.paper.size(width,height);
+}
+
+Raphael.prototype.setViewBox = function(x, y, w, h, fit){
+	this.paper.viewbox(x, y, w, h); // , fit
+}