JSFiddle - React, Tailwind, and code Playground

by scottbeeson

HTML

<div id="rPaper"></div>

CSS

#rPaper {
    position: absolute;
    top: 0px; left: 0px;
    bottom: 0px; right: 0px;
}
.relNode {
    padding: 4px;
    border: 1px solid gray;
    background-color: white;
    -webkit-box-shadow:  0px 0px 3px 3px rgba(0, 0, 0, .1);
    box-shadow:  0px 0px 3px 3px rgba(0, 0, 0, .1);
    cursor: pointer;
    border-radius: 3px;
}

JavaScript

drawnode(200, 200);
    drawnode(200, 300);
    drawnode(400, 300);

    drawline(200, 200, 200, 300);
    drawline(200, 300, 400, 300);
    drawline(400, 300, 200, 200);


function drawnode(x, y) {

    var ele = ""
    var style = "";
    style += "position:absolute;";
    style += "z-index:100;"
    ele += "<div class='relNode' style="+ style + ">";
    ele += "<span> Test Node</span>"
    ele += "<div>"

    $('#rPaper').show();
    var node = $(ele).appendTo('#rPaper');
    var width = node.width();
    var height = node.height();

    var centerX = width / 2;
    var centerY = height / 2;

    var startX = x - centerX;
    var startY = y - centerY;
    
    node.css("left", startX).css("top", startY);

}

function drawline(ax, ay, bx, by) {
    if (ay > by) {
        bx = ax + bx;
        ax = bx - ax;
        bx = bx - ax;
        by = ay + by;
        ay = by - ay;
        by = by - ay;
    }
    var calc = Math.atan((ay - by) / (bx - ax));
    calc = calc * 180 / Math.PI;
    var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));
    var style = ""
    style += "height:" + length + "px;"
    style += "width:1px;"
    style += "background-color:black;"
    style += "position:absolute;"
    style += "top:" + (ay) + "px;"
    style += "left:" + (ax) + "px;"
    style += "transform:rotate(" + calc + "deg);"
    style += "-ms-transform:rotate(" + calc + "deg);"
    style += "transform-origin:0% 0%;"
    style += "-moz-transform:rotate(" + calc + "deg);"
    style += "-moz-transform-origin:0% 0%;"
    style += "-webkit-transform:rotate(" + calc + "deg);"
    style += "-webkit-transform-origin:0% 0%;"
    style += "-o-transform:rotate(" + calc + "deg);"
    style += "-o-transform-origin:0% 0%;"
    style += "-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
    style += "box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .1);"
    style += "z-index:99;"
    $("<div style='" + style + "'></div>").appendTo('#rPaper');
}