JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<div onclick="connect(this.id);" class="node left top" id="1"></div>
<div onclick="connect(this.id);"  class="node left mid" id="2"></div>
<div onclick="connect(this.id);"  class="node left bottom" id="3"></div>
<div onclick="connect(this.id);"  class="node middle top" id="4"></div>
<div onclick="connect(this.id);"  class="node mid" id="5" style="left:35%"></div>
<div onclick="connect(this.id);"  class="node mid" id="6" style="left:55%"></div>
<div onclick="connect(this.id);"  class="node middle bottom" id="7"></div>
<div onclick="connect(this.id);"  class="node right top" id="8"></div>
<div onclick="connect(this.id);"  class="node right mid" id="9"></div>
<div onclick="connect(this.id);"  class="node right bottom" id="10"></div>

CSS

.node {
  width: 50px;
  height: 50px;
  background-color: #000;
  position: absolute;
  margin-top: -25px;
  margin-left: -25px;
}
.left {
  left: 5%;
}
.middle {
  left: 45%;
}
.right {
  left: 95%;
}
.top {
  top: 5%;
}
.mid {
  top: 45%;
}
.bottom {
  top: 95%;
}
.selected {
  border: 5px solid red;
}

JavaScript

var firstConnectionPoint = -1, secondConnectionPoint = -1;
var lines = [];
for (var x=0;x<11;x++) {
	lines[x] = [];
	for (var y=0;y<11;y++) {
  	lines[x][y] = document.createElement("div");
    document.body.insertBefore(lines[x][y], document.getElementById(x));
    }
}
function connect(id) {
	if (firstConnectionPoint == -1) {
  	firstConnectionPoint = id;
		document.getElementById(firstConnectionPoint).classList.add("selected");
  }
  else if (secondConnectionPoint == -1) {
  	secondConnectionPoint = id;
    drawLine();
    document.getElementById(firstConnectionPoint).classList.remove("selected");
    firstConnectionPoint = -1;
    secondConnectionPoint = -1;
    }
}

function drawLine() {
  var left_1 = parseInt(getCssProperty(firstConnectionPoint, "left").replace("px",""));
  var left_2 = parseInt(getCssProperty(secondConnectionPoint, "left").replace("px",""))+10;
  var top_1 = parseInt(getCssProperty(firstConnectionPoint, "top").replace("px",""));
  var top_2 = parseInt(getCssProperty(secondConnectionPoint, "top").replace("px",""))+10;
  var _height= Math.abs(top_1 - top_2);
  var _width = Math.abs(left_1 - left_2);
  alert(left_1 + "_" + top_1);
  lines[firstConnectionPoint][secondConnectionPoint].innerHTML = "<svg style=\"position:absolute;\" width=\"" + _width + "\" height=\"" + _height + "\"><line x1=\"" + left_1 + "\" y1=\"" + top_1 + "\" x2=\"" + left_2 + "\" y2=\"" + top_2 + "\" stroke=\"blue\"/ stroke-width=\"5\"></svg>";
}

function getCssProperty(elmId, property){
   var elem = document.getElementById(elmId);
   return window.getComputedStyle(elem,null).getPropertyValue(property);
}