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
var paper = Raphael("paper", 500,500);

function point(x, y) {
  var point = paper.circle(x, y, 5);
  point.attr("fill", "white");
  point.draggable();
  point.linkedPoints = [];
  return point;
};

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

    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];
    }
};


var p1 = point(50, 100);
var p2 = point(100, 130);
var p3 = point(100, 160);
var p4 = point(50, 130);

p1.connectTo(p2);
p1.connectTo(p3);
p1.connectTo(p4);
p2.connectTo(p3);
p2.connectTo(p4);
p3.connectTo(p4);
	<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>
	var paper = Raphael("paper", 500,500);

	function point(x, y) {
	var point = paper.circle(x, y, 5);
	point.attr("fill", "white");
	point.draggable();
	point.linkedPoints = [];
	return point;
	};

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

	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];
	}
	};





	var p1 = point(50, 100);
	var p2 = point(100, 130);
	var p3 = point(100, 160);
	var p4 = point(50, 130);

	p1.connectTo(p2);
	p1.connectTo(p3);
	p1.connectTo(p4);
	p2.connectTo(p3);
	p2.connectTo(p4);
	p3.connectTo(p4);