fixes GoogleChromeLabs#653

Author: argyleink

app/components/selection/box-model.element.js

@@ -26,10 +26,10 @@ export class BoxModel extends HTMLElement {
 
     if (mode === 'padding') {
       this.drawable = {
-        height:   bounds.height,
-        width:    bounds.width,
-        top:      0,
-        left:     0,
+        height:   bounds.height - (sides.borders.top + sides.borders.bottom),
+        width:    bounds.width - (sides.borders.right + sides.borders.left),
+        top:      0 + sides.borders.top,
+        left:     0 + sides.borders.left,
         rotation: 'rotate(-45)',
       }
     }
@@ -69,6 +69,7 @@ export class BoxModel extends HTMLElement {
   }
 
   styles({sides}) {
+    console.log(sides.borders)
     this.style.setProperty('--width', `${this.drawable.width}px`)
     this.style.setProperty('--height', `${this.drawable.height}px`)
     this.style.setProperty('--top', `${this.drawable.top}px`)
@@ -135,7 +136,7 @@ export class BoxModel extends HTMLElement {
       if (sides.top) {
         this.createMeasurement({
           x: (bounds.width / 2) - offset,
-          y: (window.scrollY * -1),
+          y: (window.scrollY * -1) + sides.borders.top,
           d: sides.top,
           q: 'top',
           v: true,
@@ -145,7 +146,7 @@ export class BoxModel extends HTMLElement {
        if (sides.bottom) {
          this.createMeasurement({
            x: (bounds.width / 2) - offset,
-           y: (window.scrollY * -1) + (bounds.height - sides.bottom),
+           y: (window.scrollY * -1) + (bounds.height - sides.bottom - sides.borders.bottom),
            d: sides.bottom,
            q: 'bottom',
            v: true,
@@ -154,7 +155,7 @@ export class BoxModel extends HTMLElement {
        }
        if (sides.right) {
          this.createMeasurement({
-           x: bounds.width - sides.right,
+           x: bounds.width - sides.right - sides.borders.right,
            y: (window.scrollY * -1) + (bounds.height / 2) - offset,
            d: sides.right,
            q: 'right',
@@ -164,7 +165,7 @@ export class BoxModel extends HTMLElement {
        }
        if (sides.left) {
          this.createMeasurement({
-           x: 0,
+           x: 0 + sides.borders.left,
            y: (window.scrollY * -1) + (bounds.height / 2) - offset,
            d: sides.left,
            q: 'left',

app/features/padding.js

@@ -1,5 +1,5 @@
 import hotkeys from 'hotkeys-js'
-import { metaKey, getStyle, getSide, showHideSelected } from '../utilities/'
+import { metaKey, getStyle, getSide, showHideSelected, expandBorders } from '../utilities/'
 
 const key_events = 'up,down,left,right'
   .split(',')
@@ -91,6 +91,7 @@ function removeBackgrounds(els) {
 export function createPaddingVisual(el, hover = false) {
   const bounds            = el.getBoundingClientRect()
   const calculatedStyle   = getStyle(el, 'padding')
+  const calculatedBorder   = expandBorders(getStyle(el, 'border-width'))
   const boxdisplay        = document.createElement('visbug-boxmodel')
 
   if (calculatedStyle !== '0px') {
@@ -112,7 +113,10 @@ export function createPaddingVisual(el, hover = false) {
       mode: 'padding',
       color: hover ? 'purple' : 'pink',
       bounds, 
-      sides,
+      sides: {
+        ...sides,
+        borders: calculatedBorder,
+      },
     }
   }
 

app/utilities/styles.js

@@ -165,3 +165,37 @@ export const firstUsableFontFromFamily = family => {
 
   return match
 }
+
+export const expandBorders = (borderString) => {
+  let expanded = {}
+  let split = borderString.split(' ').map(i=>parseInt(i))
+
+  switch (split.length) {
+    case 1:
+      expanded = {
+        top: split[0],
+        right: split[0],
+        bottom: split[0],
+        left: split[0],
+      }
+      break
+    case 2:
+      expanded = {
+        top: split[0],
+        right: split[1],
+        bottom: split[0],
+        left: split[1],
+      }
+      break
+    case 4:
+      expanded = {
+        top: split[0],
+        right: split[1],
+        bottom: split[2],
+        left: split[3],
+      }
+      break
+  }
+
+  return expanded
+}