Skip to content

Instantly share code, notes, and snippets.

@herrphon

herrphon/Raphael-JS.markdown

Created May 2, 2014 17:35
Show Gist options
  • Save herrphon/11481350 to your computer and use it in GitHub Desktop.
Save herrphon/11481350 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Herr Phon.
Raw
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>
Raw
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");
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment