JSFiddle - React, Tailwind, and code Playground

by Shahzad Mirza

HTML

<div id="canvas"></div>

JavaScript

function lineDistance( point1, point2 )
{
  var xs = 0;
  var ys = 0;
   
  xs = point2.x - point1.x;
  xs = xs * xs;
   
  ys = point2.y - point1.y;
  ys = ys * ys;
   
  return Math.sqrt( xs + ys );
}

Raphael.fn.connection = function (objFrom, objTo, line, bg) {
    if (objFrom.line && objFrom.from && objFrom.to) {
        line = objFrom;
        objFrom = line.from;
        objTo = line.to;
    }
    var bb1 = objFrom.getBBox(),
        bb2 = objTo.getBBox();

       var obj1freeNodes = objFrom.data('freeNodes');
       var obj2freeNodes = objTo.data('freeNodes');
        
        var p = [];
        obj1freeNodes.forEach(function (el) {
        p.push(el);
      })
        obj2freeNodes.forEach(function (el) {
        p.push(el);
      })

       var distance = [], d = {};

        for (var i = 0; i <obj1freeNodes.length; i++) {
        for (var j = obj1freeNodes.length; j <p.length; j++) {
              var point1 = {x:p[i].x, y: p[i].y};
              var point2 = {x:p[j].x, y: p[j].y};
            if ((i == j - 4) || (((i != 3 && j != 6) || p[i].x < p[j].x) && ((i != 2 && j != 7) || p[i].x > p[j].x) && ((i != 0 && j != 5) || p[i].y > p[j].y) && ((i != 1 && j != 4) || p[i].y < p[j].y))) {
                distance.push(lineDistance(point1, point2));
              d[distance[distance.length - 1]] = [i, j];
            }
        }
    }

        if (distance.length == 0) {
          var res = [0, obj1freeNodes.length];
      } else {
         res = d[Math.min.apply(Math, distance)];
      }
      var x1 = p[res[0]].x,
          y1 = p[res[0]].y,
          x4 = p[res[1]].x,
          y4 = p[res[1]].y;
        
      //remove to connecting point
     for(var i=0;i<obj1freeNodes.length; i++){
      if(i== res[0]){
          obj1freeNodes.splice(i,1); 
        }
     }
     for(var i=0;i<obj2freeNodes.length; i++){
      if(i == (res[1]-obj1freeNodes.length-1)){
          obj2freeNodes.splice(i,1); 
        }
     }
    objFrom.data('freeNodes', obj1freeNodes);
 ...