element-hover.js

this.isEnabled = false; // App State
this.currentElement = null;
this.lockedElement = null;

function createRect(lineColor) {
    const hoverElement = {
        left: document.createElement('div'),
        leftContinuous: document.createElement('div'),
        right: document.createElement('div'),
        rightContinuous: document.createElement('div'),
        top: document.createElement('div'),
        topContinuous: document.createElement('div'),
        bottom: document.createElement('div'),
        bottomContinuous: document.createElement('div'),
        widthLabel: document.createElement('label'),
        heightLabel: document.createElement('label'),
        target: null,
        diffLabels: []
    }

    // Applies style to all rect elements
    Object.keys(hoverElement).forEach(key => {
        if (hoverElement[key] !== null && !Array.isArray(hoverElement[key])) {
            if (key.indexOf('Continuous') > 0) {
                hoverElement[key].style.border = `${lineColor} 0.5px dotted`;
            }
            else if (key.indexOf('Label') !== -1) {
                hoverElement[key].style['background-color'] = '#d2d2d2';
                hoverElement[key].style.color = lineColor;
            }
            else {
                hoverElement[key].style.border = `${lineColor} 0.5px solid`;
            }
            hoverElement[key].style.position = 'absolute';
            hoverElement[key].style['z-index'] = '999999';
            hoverElement[key].id = 'hoverElementRuler'
            document.body.appendChild(hoverElement[key]);
        }
    });
    return hoverElement;
}

function setRectLocation(rectElement, newRect) {
    // Left
    rectElement.left.style.height = toPx(newRect.height)
    rectElement.left.style.top = toPx(newRect.top + window.scrollY)
    rectElement.left.style.left = toPx(newRect.left + window.scrollX)

    // Right
    rectElement.right.style.height = toPx(newRect.height + 1)
    rectElement.right.style.top = toPx(newRect.top + window.scrollY)
    rectElement.right.style.left = toPx(newRect.right + window.scrollX)

    // Top
    rectElement.top.style.width = toPx(newRect.width)
    rectElement.top.style.top = toPx(newRect.top + window.scrollY)
    rectElement.top.style.left = toPx(newRect.left + window.scrollX)

    // Bottom
    rectElement.bottom.style.width = toPx(newRect.width)
    rectElement.bottom.style.top = toPx(newRect.bottom + window.scrollY)
    rectElement.bottom.style.left = toPx(newRect.left + window.scrollX)

    // Left Continuous
    rectElement.leftContinuous.style.height = toPx(document.documentElement.scrollHeight)
    rectElement.leftContinuous.style.top = toPx(0);
    rectElement.leftContinuous.style.left = toPx(newRect.left + window.scrollX)

    // Right Continuous
    rectElement.rightContinuous.style.height = toPx(document.documentElement.scrollHeight);
    rectElement.rightContinuous.style.top = toPx(0);
    rectElement.rightContinuous.style.left = toPx((newRect.right + window.scrollX));

    // Top Continuous
    rectElement.topContinuous.style.width = toPx(document.documentElement.scrollWidth)
    rectElement.topContinuous.style.top = toPx(newRect.top + window.scrollY)
    rectElement.topContinuous.style.left = toPx(0);

    // Bottom Continuous
    rectElement.bottomContinuous.style.width = toPx(document.documentElement.scrollWidth);
    rectElement.bottomContinuous.style.top = toPx(newRect.bottom + window.scrollY);
    rectElement.bottomContinuous.style.left = toPx(0);
    addDimensionsOnRect(rectElement);
}

function hoverOn(rectElement, element) {
    this.currentElement = element;
    const rect = element.getBoundingClientRect();
    if (element.id.indexOf('hoverElementRuler') === -1) {
        rectElement.target = element;
        setRectLocation(rectElement, rect);
    }
}

function toPx(value) {
    return value.toString() + 'px';
}

function addDimensionsOnRect(rectElement) {
    // Height Label
    const leftRect = rectElement.left.getBoundingClientRect();
    const heightLabellRect = rectElement.heightLabel.getBoundingClientRect();
    rectElement.heightLabel.innerText = toPx(leftRect.height);
    rectElement.heightLabel.style.top = toPx(window.scrollY + leftRect.top + (leftRect.height / 2) - (heightLabellRect.height / 2));
    rectElement.heightLabel.style.left = toPx(window.scrollX + leftRect.left - 2 - heightLabellRect.width)

    // Width label
    const topRect = rectElement.top.getBoundingClientRect();
    const widthLabelRect = rectElement.widthLabel.getBoundingClientRect();
    rectElement.widthLabel.innerText = toPx(topRect.width);
    rectElement.widthLabel.style.top = toPx(window.scrollY + topRect.top - 2 - widthLabelRect.height)
    rectElement.widthLabel.style.left = toPx(window.scrollX + topRect.left + (topRect.width / 2) - (widthLabelRect.width / 2))
}

function lockOnCurrentElement() {
    console.log('Locking on the current element');
    this.lockedElement = this.currentElement;
}

function unlockSelection() {
    console.log('Unlocking selection');
    setRectLocation(this.compareElement, { height: 0, top: 0, bottom: 0, left: 0, width: 0, right: 0 })
    this.lockedElement = null;
}

function calculateXAxisDistance() {
    const ref = this.hoverElement.target;
    const compare = this.compareElement.target;

    const refRect = ref.getBoundingClientRect();
    const compareRect = compare.getBoundingClientRect();


    if (refRect.right > compareRect.left) {
        // They are aligned on the left
        if (refRect.left == compareRect.left) {
            console.log('They have the same left alignment')
        }
        // Reference is bigger on the left than the comparison
        else if (refRect.left < compareRect.left) {
            console.log('Diff on the left', compareRect.left - refRect.left);
        }
        // Comparison is bigger on the left than the reference
        else {
            console.log('Comparison is bigger, diff on the left (based on comparison)', refRect.left - compareRect.left);
        }
    }
    else {
        console.log('Comparing left with right', compareRect.left - refRect.right);
    }
}

function calculateYAxisDistance() {
    const ref = this.hoverElement.target;
    const compare = this.compareElement.target;

    const refRect = ref.getBoundingClientRect();
    const compareRect = compare.getBoundingClientRect();

    let yDelta = 0;

    // On the Y Axis same level
    if (refRect.top === compareRect.top && refRect.bottom === compareRect.bottom) {
        yDelta = 0;
    }
    // If the referece is on top of the comparison
    // Then calculate the diference from the bottom from the comparison to the top of the reference
    else if (refRect.bottom < compareRect.top) {
        yDelta = compareRect.top - refRect.bottom;
    }
    // Otherwise do the other way around
    else {
        yDelta = refRect.top - compareRect.bottom;
    }

    return yDelta
}

function onMouseMove(event) {
    if (this.isEnabled) {
        if (this.lockedElement === null) {
            hoverOn(this.hoverElement, event.srcElement);
        } else {
            hoverOn(this.compareElement, event.srcElement);
            calculateXAxisDistance();
            // console.log('Y Axis Delta: ', calculateYAxisDistance());
        }
    }
}

function onKeyUp(event) {
    if (event.altKey && event.which === 83) {
        this.isEnabled = !this.isEnabled;
        console.log('Ruler is running state changed to: ', this.isEnabled);
    }
    if (event.altKey && event.which === 65) {
        if (this.lockedElement === null) {
            this.lockOnCurrentElement();
        }
        else {
            this.unlockSelection();
        }
    }
}

this.hoverElement = createRect('red');
this.compareElement = createRect('blue');
window.addEventListener('mousemove', onMouseMove);
window.addEventListener('keyup', onKeyUp);