JSFiddle - React, Tailwind, and code Playground

by g

HTML

<div id="container">
</div>

CSS

.connection {
    border: solid 1px red;
    pointer-events: none;
    z-index: -1;
}

#container {
    position: relative;
}

#container, .box, .connection {
    -webkit-transition: all linear .5s;
    -moz-transition: all linear .5s;
    transition: all linear .5s;
}

#container.zoom {
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    //-webkit-transform: scale(2);
    //-moz-transform: scale(2);
    //transform: scale(2);
}

.box {
    position: absolute;
    opacity: 0.8;
    width: 50px;
    height: 50px;
    border: solid 1px #ccc;
    background: #efefef;
}

JavaScript

(function($){
    
    $.fn.__cssBoundingBox = function(){
        var bbox = {
            top: parseFloat(this[0].style.top),
            left: parseFloat(this[0].style.left),
            width: this.outerWidth(),
            height: this.outerHeight()
        };
        bbox.right = bbox.left + bbox.width;
        bbox.bottom = bbox.top + bbox.height;
        return bbox;
    };
    
    var borders = ['0 0 1px 1px', '1px 1px 0 0', '0 1px 1px 0', '1px 0 0 1px'];
    
    function refreshConnection($source) {
        var connection = $source.data('connection');
        
        var $target = connection.$target;
        var $connect1 = connection.$connect1;
        var $connect2 = connection.$connect2;
        
        var sBox = $source.__cssBoundingBox();
        var tBox = $target.__cssBoundingBox();
        
        var connectionCss = {
            position: 'absolute',
            top: Math.min(sBox.bottom, tBox.bottom),
            left: Math.min(sBox.left+(sBox.width/2), tBox.left+(tBox.width/2)),
            height: (Math.min(Math.abs(sBox.bottom-tBox.top), Math.abs(tBox.bottom-sBox.top))) / 2,
            width: Math.abs((sBox.left+(sBox.width/2)) - (tBox.left+(tBox.width/2)))
        };
        var bottomRight = (sBox.bottom <= tBox.bottom) == (sBox.left <= tBox.left);
        
        $connect1
        .css(connectionCss)
        .css('borderWidth', borders[bottomRight ? 0 : 2]);
        
        $connect2
        .css(connectionCss)
        .css('top', connectionCss.top+connectionCss.height)
        .css('borderWidth', borders[bottomRight ? 1 : 3]);
    };
    
    $.fn.connectTo = function(target, options) {
        if(target == 'refresh') {
            refreshConnection(this);
            return this;
        }
        
        var $source = this;
        var $target = $(target);
        
        var $connect1 = $(document.createElement('div'))
        .addClass('connection')
        .insertAfter($source);
        
        var $connect2 =...