Last active
July 30, 2020 06:28
-
-
Save andreroggeri/f64e942e98e31df609de27048cd350dd to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment