tpinger.js

function getCoords(elem) {
    var box = elem.getBoundingClientRect();
    return {
        top: box.top + pageYOffset,
        left: box.left + pageXOffset
    };
}

function clearSelected() {
    var selected = document.getElementsByClassName('selected') || undefined;
    if (typeof selected !== 'undefined') {
        for (var i = 0; i < selected.length; i++) {
            selected[i].classList.remove('selected');
        }
    }
}

function line(id, x1, y1, x2, y2) {
    var container = document.getElementById('container');
    container.innerHTML = container.innerHTML + '<line x1="' + x1 + '" y1="' + y1 + '" x2="' + x2 + '" y2="' + y2 + '" stroke="black" id="' + id + '" />';
}

function setLineXY1(id, x, y) {
    var line = document.getElementById(id);
    line.setAttribute('x1', x);
    line.setAttribute('y1', y);
}

function setLineXY2(id, x, y) {
    var line = document.getElementById(id);
    line.setAttribute('x2', x);
    line.setAttribute('y2', y);
}

window.onload = function() {
    var selObjShiftX = 0;
    var selObjShiftY = 0;
    var dragObjFlag = 0;
    var draggedObj = {};
    var selectedObjs = [];
    var multiselect = 0;
    var draggedObjType = 'parent';

    var containerTop = document.getElementById('container').getBoundingClientRect().top;
    var containerLeft = document.getElementById('container').getBoundingClientRect().left;
    var containerHeight = document.getElementById('container').getBoundingClientRect().height;
    var containerWidth = document.getElementById('container').getBoundingClientRect().width;

    var parents = document.getElementsByClassName('parent');
    var parentLinesIDS = [];
    var childLinesID = [];

    if (parents.length > 0) {
        for (var i = 0; i < parents.length; i++) {
            var p = parents[i];
            var parentNum = p.getAttribute('data-num');
            var parentRect = p.getElementsByClassName('icon')[0].getBoundingClientRect() || undefined;
            var childs = document.getElementsByClassName('child-' + parentNum);

            for (var j = 0; j < childs.length; j++) {
                var childRect = childs[j].getElementsByClassName('icon')[0].getBoundingClientRect();
                line('line-' + parentNum + '-' + j, parentRect.x, parentRect.y, childRect.x, childRect.y);
                childs[j].setAttribute('data-line', 'line-' + parentNum + '-' + j);
                parentLinesIDS.push('line-' + parentNum + '-' + j);
            }

            p.setAttribute('data-lines', parentLinesIDS.join(','));
            parentLinesIDS = [];

        }
    }

    document.addEventListener('keydown', function(e) {
        if (e.key == 'Control') multiselect = 1;
    });

    document.addEventListener('keyup', function(e) {
        if (e.key == 'Control') multiselect = 0;
    });


    document.addEventListener('mousemove', function(e) {
        if (dragObjFlag) {
            var curX = e.pageX - selObjShiftX;
            var curY = e.pageY - selObjShiftY;

            var thisW = draggedObj.offsetWidth - 16;
            var thisH = draggedObj.offsetHeight - 16;

            if (curX < containerLeft) curX = containerLeft;
            if (curY < containerTop) curY = containerTop;
            if (curY > containerHeight) curY = containerHeight;
            if (curX > (containerWidth - thisW)) curX = containerWidth - thisW;
            if (curY > (containerHeight - thisH)) curY = containerHeight - thisH;

            draggedObj.style.left = curX + 'px';
            draggedObj.style.top = curY + 'px';

            var lineX = draggedObj.getElementsByClassName('icon')[0].getBoundingClientRect().left;
            var lineY = draggedObj.getElementsByClassName('icon')[0].getBoundingClientRect().top;

            if (draggedObjType == 'parent' || draggedObjType == 'parent-child') {
                var lines = draggedObj.getAttribute('data-lines') || undefined;

                if (typeof lines !== 'undefined') {
                    lines = lines.split(',');
                    for (var i = 0; i < lines.length; i++) {
                        setLineXY1(lines[i], lineX, lineY);
                        console.log(lines[i]);
                    }
                }
            }

            if (draggedObjType == 'child' || draggedObjType == 'parent-child') {
                var line = draggedObj.getAttribute('data-line') || undefined;

                if (typeof line !== 'undefined') {
                    setLineXY2(line, lineX, lineY);
                }
            }
        }
    });

    document.addEventListener('mousedown', function(e) {
        if (e.button == 0) {
            multiselect = 0;
            selectedObjs = [];
            for (var i = 0; i < 2; i++)
                clearSelected();
        }
    });

    var objsCollection = document.getElementsByClassName('object') || undefined;
    if (typeof objsCollection !== 'undefined') {
        for (var i = 0; i < objsCollection.length; i++) {

            objsCollection[i].addEventListener('mousedown', function(e) {
                dragObjFlag = true;
                selObjShiftX = e.pageX - getCoords(this).left;
                selObjShiftY = e.pageY - getCoords(this).top;
                draggedObj = this;

                if (this.classList.contains('parent')) {
                    draggedObjType = 'parent';
                } else {
                    draggedObjType = 'child';
                }
                if (this.classList.contains('parent') && this.classList.contains('child')) {
                    draggedObjType = 'parent-child';
                }

                if (!multiselect && selectedObjs.length <= 1) {
                    clearSelected();
                    this.classList.add('selected');
                }
                if (multiselect && selectedObjs.length >= 1) {
                    this.classList.toggle('selected');
                }
                if (multiselect && selectedObjs.length <= 1) {
                    this.classList.add('selected');
                }

                var selected = document.getElementsByClassName('selected') || undefined;

                if (typeof selected !== 'undefined') {
                    selectedObjs = [];
                    for (var j = 0; j < selected.length; j++) {
                        selectedObjs.push(selected[j]);
                    }
                }

                e.preventDefault();
                e.stopPropagation();
            });

            objsCollection[i].addEventListener('mouseup', function(e) {
                dragObjFlag = false;
                draggedObj = {};
            });

        }
    }


};