UNPKG

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
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 }