herrphon/Raphael-JS.markdown

## index.html
<html>
  <head>
    <title> Example </title>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  </head>
  <body>
    <div id="paper"></div>
  </body>
</html>

## Raphael-JS.markdown

      
    Raw
  

              Raphael-JS.markdown
            
          
    Raphael JS

A Pen by Herr Phon on CodePen.
License.

  
## script.js
Raphael.el.connectTo = function(p2, color) {
    var from = this.fromPoint(),
        to = p2.toPoint(),
        path = this.paper.path(from.concat(to));

    if (! !color) {
      path.attr("stroke", color);
    }

    this.linkedPoints.push({point: p2, path: path});
    p2.linkedPoints.push({point: this, path: path});
};

Raphael.el.draggable = function() {
    var me = this,
        ox = 0,
        oy = 0,
        move = function (dx, dy) {
            var x = Math.min(Math.max(ox + dx, 5), 495),
                y = Math.min(Math.max(oy + dy, 5), 495),
                p1 = this;

            this.attr({cx: x, cy: y});

            this.linkedPoints.forEach(function (element) {
                var path = element.path,
                    p2 = element.point,
                    from = p2.fromPoint(),
                    to = p1.toPoint(),
                    pathArray = from.concat(to);

                path.attr({path: pathArray});
            });

        },
        start = function () {
            ox = this.attr("cx");
            oy = this.attr("cy");
        };

    this.drag(move, start);
};


Raphael.el.fromPoint = function() {
    var x = this.attr("cx"),
        y = this.attr("cy");
    return ['M', x, y];
};
Raphael.el.toPoint = function(p2, offset) {
    var x = this.attr("cx"),
        y = this.attr("cy");
    if (! p2) {
        return ['L', x, y];
    } else {
        var x2 = p2.attr("cx");
        var y2 = p2.attr("cy");
        if (! offset) {
          offset = 20;
        }
        var z = x + offset;
        return ['C', z,  y,
                     z,  y2,
                     x2, y2];
    }
};


function CommitGraph() {
  this.paper = Raphael("paper", 500,500);
  this.commitList = [];
  this.commitParents = {};
  this.commitPoints = {};
}
CommitGraph.prototype.point = function (x, y) {
  var point = this.paper.circle(x, y, 5);
  point.attr("fill", "grey");
  point.draggable();
  point.linkedPoints = [];
  point.paper = this.paper;
  return point;
};
CommitGraph.prototype.addCommit = function (gitHash, parents) {
  this.commitList.push(gitHash);
  this.commitParents[gitHash] = parents;
};
CommitGraph.prototype.plot = function () {
  var self = this,
      colors = ['red', 'green', 'blue'],
      point1, point2;

  this.commitList.forEach(function (gitHash, id) {
    point1 = self.point(50, 50+id*50);
    point1.gitHash = gitHash;
    self.commitPoints[gitHash] = point1;
  });

  this.commitList.forEach(function (gitHash) {
    point1 = self.commitPoints[gitHash];
    self.commitParents[gitHash].forEach(function (gitHash, id) {
      point2 = self.commitPoints[gitHash];
      if (id > 0) {
        x = point2.attr("cx") + id * 50;
        point2.attr({cx: x});
      }

      if (! !point2) {
        point1.connectTo(point2, colors[id]);
      }
    });
  });
};

var commitGraph = new CommitGraph();
commitGraph.addCommit("aaaa", ["bbbb", "cccc"]);
commitGraph.addCommit("bbbb", ["cccc"]);
commitGraph.addCommit("cccc", ["dddd"]);
commitGraph.addCommit("dddd", ["eeee"]);
commitGraph.addCommit("eeee", ["ffff", "gggg", "jjjj"]);
commitGraph.addCommit("ffff", []);
commitGraph.addCommit("gggg", []);
commitGraph.addCommit("jjjj", []);

commitGraph.plot();


/*
var p1 = commitGraph.point(250, 100);
var p2 = commitGraph.point(300, 130);
var p3 = commitGraph.point(300, 160);
var p4 = commitGraph.point(250, 130);

p1.connectTo(p2, "green");
p1.connectTo(p3, "green");
p1.connectTo(p4, "blue");
p2.connectTo(p3, "red");
p2.connectTo(p4, "red");
p3.connectTo(p4, "blue");
*/
	<html>
	<head>
	<title> Example </title>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
	</head>
	<body>
	<div id="paper"></div>
	</body>
	</html>
	Raphael.el.connectTo = function(p2, color) {
	var from = this.fromPoint(),
	to = p2.toPoint(),
	path = this.paper.path(from.concat(to));

	if (! !color) {
	path.attr("stroke", color);
	}

	this.linkedPoints.push({point: p2, path: path});
	p2.linkedPoints.push({point: this, path: path});
	};

	Raphael.el.draggable = function() {
	var me = this,
	ox = 0,
	oy = 0,
	move = function (dx, dy) {
	var x = Math.min(Math.max(ox + dx, 5), 495),
	y = Math.min(Math.max(oy + dy, 5), 495),
	p1 = this;

	this.attr({cx: x, cy: y});

	this.linkedPoints.forEach(function (element) {
	var path = element.path,
	p2 = element.point,
	from = p2.fromPoint(),
	to = p1.toPoint(),
	pathArray = from.concat(to);

	path.attr({path: pathArray});
	});

	},
	start = function () {
	ox = this.attr("cx");
	oy = this.attr("cy");
	};

	this.drag(move, start);
	};


	Raphael.el.fromPoint = function() {
	var x = this.attr("cx"),
	y = this.attr("cy");
	return ['M', x, y];
	};
	Raphael.el.toPoint = function(p2, offset) {
	var x = this.attr("cx"),
	y = this.attr("cy");
	if (! p2) {
	return ['L', x, y];
	} else {
	var x2 = p2.attr("cx");
	var y2 = p2.attr("cy");
	if (! offset) {
	offset = 20;
	}
	var z = x + offset;
	return ['C', z, y,
	z, y2,
	x2, y2];
	}
	};



	function CommitGraph() {
	this.paper = Raphael("paper", 500,500);
	this.commitList = [];
	this.commitParents = {};
	this.commitPoints = {};
	}
	CommitGraph.prototype.point = function (x, y) {
	var point = this.paper.circle(x, y, 5);
	point.attr("fill", "grey");
	point.draggable();
	point.linkedPoints = [];
	point.paper = this.paper;
	return point;
	};
	CommitGraph.prototype.addCommit = function (gitHash, parents) {
	this.commitList.push(gitHash);
	this.commitParents[gitHash] = parents;
	};
	CommitGraph.prototype.plot = function () {
	var self = this,
	colors = ['red', 'green', 'blue'],
	point1, point2;

	this.commitList.forEach(function (gitHash, id) {
	point1 = self.point(50, 50+id*50);
	point1.gitHash = gitHash;
	self.commitPoints[gitHash] = point1;
	});

	this.commitList.forEach(function (gitHash) {
	point1 = self.commitPoints[gitHash];
	self.commitParents[gitHash].forEach(function (gitHash, id) {
	point2 = self.commitPoints[gitHash];
	if (id > 0) {
	x = point2.attr("cx") + id * 50;
	point2.attr({cx: x});
	}

	if (! !point2) {
	point1.connectTo(point2, colors[id]);
	}
	});
	});
	};

	var commitGraph = new CommitGraph();
	commitGraph.addCommit("aaaa", ["bbbb", "cccc"]);
	commitGraph.addCommit("bbbb", ["cccc"]);
	commitGraph.addCommit("cccc", ["dddd"]);
	commitGraph.addCommit("dddd", ["eeee"]);
	commitGraph.addCommit("eeee", ["ffff", "gggg", "jjjj"]);
	commitGraph.addCommit("ffff", []);
	commitGraph.addCommit("gggg", []);
	commitGraph.addCommit("jjjj", []);

	commitGraph.plot();


	/*
	var p1 = commitGraph.point(250, 100);
	var p2 = commitGraph.point(300, 130);
	var p3 = commitGraph.point(300, 160);
	var p4 = commitGraph.point(250, 130);

	p1.connectTo(p2, "green");
	p1.connectTo(p3, "green");
	p1.connectTo(p4, "blue");
	p2.connectTo(p3, "red");
	p2.connectTo(p4, "red");
	p3.connectTo(p4, "blue");
	*/