convert everything

app/components/selection/handles.element.js

@@ -33,7 +33,7 @@ export class Handles extends HTMLElement {
   }
 
   set position({el, node_label_id}) {
-    this.$shadow.innerHTML = this.render(el.getBoundingClientRect(), node_label_id)
+    this.$shadow.innerHTML = this.render(el['vis-box'], node_label_id)
 
     if (this._backdrop) {
       this.backdrop = {

app/components/selection/label.element.js

@@ -28,7 +28,7 @@ export class Label extends HTMLElement {
 
       this.position = {
         node_label_id,
-        boundingRect: source_el.getBoundingClientRect(),
+        boundingRect: source_el['vis-box'],
       }
     })
   }

app/features/imageswap.js

@@ -178,7 +178,7 @@ const getPictureSourcesToUpdate = img =>
 const showOverlay = (node, i) => {
   if (!state.watching) return
 
-  const rect    = node.getBoundingClientRect()
+  const rect    = node['vis-box']
   const overlay = overlays[i]
 
   if (overlay) {

app/features/margin.js

@@ -89,7 +89,7 @@ function removeBackgrounds(els) {
 }
 
 export function createMarginVisual(el, hover = false) {
-  const bounds            = el.getBoundingClientRect()
+  const bounds            = el['vis-box']
   const styleOM           = el.computedStyleMap()
   const calculatedStyle   = getStyle(el, 'margin')
   const boxdisplay        = document.createElement('visbug-boxmodel')

app/features/measurements.js

@@ -11,8 +11,8 @@ export function createMeasurements({$anchor, $target}) {
 
   if (state.distances.length) clearMeasurements()
 
-  const anchorBounds = $anchor.getBoundingClientRect()
-  const targetBounds = $target.getBoundingClientRect()
+  const anchorBounds = $anchor['vis-box']
+  const targetBounds = $target['vis-box']
 
   const measurements = []
 

app/features/metatip.js

@@ -130,7 +130,7 @@ export function removeAll() {
 }
 
 const render = (el, tip = document.createElement('visbug-metatip')) => {
-  const { width, height } = el.getBoundingClientRect()
+  const { width, height } = el['vis-box']
   const colormode = $('vis-bug')[0].colorMode
 
   const styles = getStyles(el)

app/features/padding.js

@@ -89,7 +89,7 @@ function removeBackgrounds(els) {
 }
 
 export function createPaddingVisual(el, hover = false) {
-  const bounds            = el.getBoundingClientRect()
+  const bounds            = el['vis-box']
   const styleOM           = el.computedStyleMap()
   const calculatedStyle   = getStyle(el, 'padding')
   const boxdisplay        = document.createElement('visbug-boxmodel')

app/features/selectable.js

@@ -419,14 +419,14 @@ export function Selectable(visbug) {
     el.setAttribute('data-label-id', id)
 
     clearHover()
+    await setVisbox([el])
 
     overlayMetaUI({
       el,
       id,
       no_label: tool !== 'inspector' && tool !== 'accessibility',
     })
 
-    await setVisbox([el])
     selected.unshift(el)
     tellWatchers()
   }
@@ -578,15 +578,15 @@ export function Selectable(visbug) {
   }
 
   const setLabel = (el, label) =>
-    label.update = el.getBoundingClientRect()
+    label.update = el['vis-box']
 
   const createLabel = ({el, id, template}) => {
     if (!labels[id]) {
       const label = document.createElement('visbug-label')
 
       label.text = template
       label.position = {
-        boundingRect:   el.getBoundingClientRect(),
+        boundingRect:   el['vis-box'],
         node_label_id:  id,
       }
 
@@ -654,7 +654,7 @@ export function Selectable(visbug) {
 
       hover_state.label.text = text
       hover_state.label.position = {
-        boundingRect:   el.getBoundingClientRect(),
+        boundingRect:   el['vis-box'],
         node_label_id:  'hover',
       }