visbug-lib
Version:
<p align="center"> <img src="./assets/visbug.png" width="300" height="300" alt="visbug"> <br> <a href="https://www.npmjs.org/package/visbug"><img src="https://img.shields.io/npm/v/visbug.svg?style=flat" alt="npm latest version number"></a> <a href
162 lines (143 loc) • 4.56 kB
JavaScript
import $ from 'blingblingjs'
const state = {
distances: [],
target: null,
}
export function createMeasurements({$anchor, $target}) {
if (state.target == $target && state.distances.length) return
else state.target = $target
if (state.distances.length) clearMeasurements()
const anchorBounds = $anchor.getBoundingClientRect()
const targetBounds = $target.getBoundingClientRect()
const measurements = []
// right
if (anchorBounds.right < targetBounds.left) {
measurements.push({
x: anchorBounds.right,
y: anchorBounds.top + (anchorBounds.height / 2) - 3,
d: targetBounds.left - anchorBounds.right,
q: 'right',
})
}
if (anchorBounds.right < targetBounds.right && anchorBounds.right > targetBounds.left) {
measurements.push({
x: anchorBounds.right,
y: anchorBounds.top + (anchorBounds.height / 2) - 3,
d: targetBounds.right - anchorBounds.right,
q: 'right',
})
}
// left
if (anchorBounds.left > targetBounds.right) {
measurements.push({
x: window.innerWidth - anchorBounds.left,
y: anchorBounds.top + (anchorBounds.height / 2) - 3,
d: anchorBounds.left - targetBounds.right,
q: 'left',
})
}
if (anchorBounds.left > targetBounds.left && anchorBounds.left < targetBounds.right) {
measurements.push({
x: window.innerWidth - anchorBounds.left,
y: anchorBounds.top + (anchorBounds.height / 2) - 3,
d: anchorBounds.left - targetBounds.left,
q: 'left',
})
}
// top
if (anchorBounds.top > targetBounds.bottom) {
measurements.push({
x: anchorBounds.left + (anchorBounds.width / 2) - 3,
y: targetBounds.bottom,
d: anchorBounds.top - targetBounds.bottom,
q: 'top',
v: true,
})
}
if (anchorBounds.top > targetBounds.top && anchorBounds.top < targetBounds.bottom) {
measurements.push({
x: anchorBounds.left + (anchorBounds.width / 2) - 3,
y: targetBounds.top,
d: anchorBounds.top - targetBounds.top,
q: 'top',
v: true,
})
}
// bottom
if (anchorBounds.bottom < targetBounds.top) {
measurements.push({
x: anchorBounds.left + (anchorBounds.width / 2) - 3,
y: anchorBounds.bottom,
d: targetBounds.top - anchorBounds.bottom,
q: 'bottom',
v: true,
})
}
if (anchorBounds.bottom < targetBounds.bottom && anchorBounds.bottom > targetBounds.top) {
measurements.push({
x: anchorBounds.left + (anchorBounds.width / 2) - 3,
y: anchorBounds.bottom,
d: targetBounds.bottom - anchorBounds.bottom,
q: 'bottom',
v: true,
})
}
// inside left/right
if (anchorBounds.right > targetBounds.right && anchorBounds.left < targetBounds.left) {
measurements.push({
x: window.innerWidth - anchorBounds.right,
y: anchorBounds.top + (anchorBounds.height / 2) - 3,
d: anchorBounds.right - targetBounds.right,
q: 'left',
})
measurements.push({
x: anchorBounds.left,
y: anchorBounds.top + (anchorBounds.height / 2) - 3,
d: targetBounds.left - anchorBounds.left,
q: 'right',
})
}
// inside top/right
if (anchorBounds.top < targetBounds.top && anchorBounds.bottom > targetBounds.bottom) {
measurements.push({
x: anchorBounds.left + (anchorBounds.width / 2) - 3,
y: anchorBounds.top,
d: targetBounds.top - anchorBounds.top,
q: 'bottom',
v: true,
})
measurements.push({
x: anchorBounds.left + (anchorBounds.width / 2) - 3,
y: targetBounds.bottom,
d: anchorBounds.bottom - targetBounds.bottom,
q: 'top',
v: true,
})
}
// create custom elements for all created measurements
measurements
.map(measurement => Object.assign(measurement, {
d: Math.round(measurement.d.toFixed(1) * 100) / 100
}))
.forEach(measurement => {
const $measurement = document.createElement('visbug-distance')
$measurement.position = {
line_model: measurement,
node_label_id: state.distances.length,
}
document.body.appendChild($measurement)
state.distances[state.distances.length] = $measurement
})
}
export function clearMeasurements() {
if (!state.distances) return
$('[data-measuring]').forEach(el =>
el.removeAttribute('data-measuring'))
state.distances.forEach(node => node.remove())
state.distances = []
}
export function takeMeasurementOwnership() {
const distances = [...state.distances]
state.distances = []
return distances
}