JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<script src="http://chrismichaelscott.github.io/fraphael/downloads/raphael-with-fraphael.min.js"></script>
<button type="button" id="newCable">new cable</button>
<div id="cables"></div>

JavaScript

window.onload = function() {
    var r = Raphael("cables", 1420, 795),
        discattr = {
            fill: "#aaa",
            stroke: "#ddd"
        };



    function curve(x, y, ax, ay, bx, by, zx, zy, color) {
        var movrattr = {
            fill: color || Raphael.getColor(),
            stroke: "none"
        };
        var path = [
            ["M", x, y],
            ["C", ax, ay, bx, by, zx, zy]
        ],
            path2 = [
                ["M", x, y],
                ["L", ax, ay],
                ["M", bx, by],
                ["L", zx, zy]
            ],
            curve = r.path(path).attr({
                stroke: color || Raphael.getColor(),
                "stroke-width": 4
            }).shadow(),
            controls = r.set(
                r.path(path2).attr({
                    stroke: "none"
                }),
                r.circle(x, y, 7).attr(discattr).emboss(1).light(-100,-100,30,'#aaaaaa','diffuse'),
                r.circle(ax, ay, 0).attr({
                    stroke: "none"
                }),
                r.circle(bx, by, 0).attr({
                    stroke: "none"
                }),
                r.circle(zx, zy, 7).attr(discattr).emboss(1).light(-100,-100,30,'#aaaaaa','diffuse')
            ),
            mover = r.set(

                r.circle(zx, zy + 9, 7).attr(movrattr)
            );

        mover[0].move = function(x, y) {
            var X = this.attr("cx") + x,
                Y = this.attr("cy") + y;
            this.attr({
                cx: X,
                cy: Y
            });

            // path[1][5] = X;
            // path[1][6] = Y;
            // path2[3][1] = X;
            // path2[3][2] = Y;
            controls[1].update(x, y);
            controls[4].update(x, y, true);

        };
        mover[0].update = function(x, y, dragging) {
            if (!dragging) return false;
            var X = this.attr("cx") + x,
                Y = this.attr("cy") + y;
           ...