JSFiddle - React, Tailwind, and code Playground

by shaunxcode

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<svg width="3100" height="3100">
  <path id="n" d="M75,75 T75,140 T200,200" style="fill:none; stroke:green"/>
  <path id="e" d="M75,75 T75,140 T200,200" style="fill:none; stroke:green"/>
  <path id="s" d="M75,75 T75,140 T200,200" style="fill:none; stroke:green"/>
  <path id="w" d="M75,75 T75,140 T200,200" style="fill:none; stroke:green"/>
</svg>
<div id="start"></div>
<div id="stop"></div>

CSS

#start, #stop { 
    width: 48px; 
    height: 48px; 
    border: 1px solid #333; 
    position: absolute;}

#start { left: 50px; top: 25px; }

#stop {left: 200px; top: 175px; }
svg {position: absolute; left: 0; top: 0;}

JavaScript

var size = 50;
var hsize = 50 / 2;

function point(x, y) { 
    return {x: x, y: y}
}

function connections(pos) {
   var x = pos.left; 
   var y = pos.top;
   return {
       x: x, 
       y: y,
       n: point(x + hsize, y),
       e: point(x + size, y + hsize), 
       s: point(x + hsize, y + size),
       w: point(x, y + hsize)
   }
}

$(function(){
    var paths = {
      n: $("#n"), 
      e: $("#e"), 
      s: $("#s"), 
      w: $("#w")};
   
  var connect = function(path, A, a, B, b) {
    if(A.x == a.x) {
        var c1 = a.x - hsize;
        var y1 = b.y - hsize;
        var y2 = b.y + size;
        path.attr("d", ["M", a.x, a.y, 
                        "C", c1, a.y, c1, y1, c1, y1, 
                        "C", c1, y2, b.x, y2, b.x, b.y].join(" ")); 
    }
    else if(A.x + size == a.x || A.y == a.y) {
        path.attr("d", ["M", a.x, a.y, "C", b.x, a.y, a.x, b.y, b.x, b.y].join(" "))
      //path.attr("d", ["M", a.x, a.y, "Q", b.x, a.y, b.x, b.y].join(" "));
    } else {
      path.attr("d", ["M", a.x, a.y, "Q", a.x, b.y, b.x, b.y].join(" "));
    }
  }
  
  var movecurve = function() {
    var A = connections(start.position());
    var B = connections(stop.position());
    connect(paths.s, A, A.s, B, B.w);
    connect(paths.e, A, A.e, B, B.n);
    connect(paths.w, A, A.w, B, B.s);
    connect(paths.n, A, A.n, B, B.e);
  };

    var start = $("#start").draggable({drag: movecurve, stop: movecurve}); 
    var stop = $("#stop").draggable({drag: movecurve, stop: movecurve});
});