Include get-box-quads-polyfill for better overlays

app/components/index.js

@@ -1,3 +1,6 @@
+import { addPolyfill } from "get-box-quads-polyfill";
+addPolyfill(window);
+
 export { Handles }    from './selection/handles.element'
 export { Handle }     from './selection/handle.element'
 export { Hover }      from './selection/hover.element'

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

@@ -2,17 +2,4 @@
   pointer-events: none;
   position: absolute;
   z-index: var(--layer-5);
-  width: var(--width);
-  height: var(--height);
-  top: var(--top);
-  left: var(--left);
-  background-color: var(--bg);
-  clip-path: polygon(
-    0% 0%, 0% 100%, var(--target-left) 100%,
-    var(--target-left) var(--target-top),
-    var(--offset-right) var(--target-top),
-    var(--offset-right) var(--offset-bottom),
-    0 var(--offset-bottom), 0 100%,
-    100% 100%, 100% 0%
-  );
-}
+}

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

@@ -20,26 +20,36 @@ export class BoxModel extends HTMLElement {
       this.createMeasurements(payload)
   }
 
-  render({mode, bounds, sides, color = 'pink'}) {
+  render({mode, bounds, sides, color = 'pink', element}) {
     const total_height  = bounds.height + sides.bottom + sides.top
     const total_width   = bounds.width + sides.right + sides.left
 
+    const q1 =  element.getBoxQuads({ box: 'border' })[0];
+    const left = Math.min(q1.p1.x, q1.p2.x, q1.p3.x, q1.p4.x);
+    const top = Math.min(q1.p1.y, q1.p2.y, q1.p3.y, q1.p4.y);
+
     if (mode === 'padding') {
+      const q2 = element.getBoxQuads({ box: 'content' })[0];
       this.drawable = {
         height:   bounds.height,
         width:    bounds.width,
         top:      0,
         left:     0,
         rotation: 'rotate(-45)',
+        d:        "M" + [q1.p1, q1.p2, q1.p3, q1.p4].map(x => (x.x - left) + ',' + (x.y - top)).join(' ') + 'Z '
+                + "M" + [q2.p1, q2.p2, q2.p3, q2.p4].map(x => (x.x - left) + ',' + (x.y - top)).join(' ') + 'Z'
       }
     }
     else if (mode === 'margin') {
+      const q2 = element.getBoxQuads({ box: 'margin' })[0];
       this.drawable = {
         height:   total_height,
         width:    total_width,
         top:      0 - sides.top,
         left:     0 - sides.left,
         rotation: 'rotate(45)',
+        d:        "M" + [q1.p1, q1.p2, q1.p3, q1.p4].map(x => (x.x - left) + ',' + (x.y - top)).join(' ') + 'Z '
+                + "M" + [q2.p1, q2.p2, q2.p3, q2.p4].map(x => (x.x - left) + ',' + (x.y - top)).join(' ') + 'Z'
       }
     }
 
@@ -56,13 +66,14 @@ export class BoxModel extends HTMLElement {
 
     return `
       <div mask>
-        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
+        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" style="overflow: visible;">
           <defs>
             <pattern id="pinstripe" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="${this.drawable.rotation}" class="pattern">
               <line x1="0" y="0" x2="0" y2="10" stroke="${this.drawable.stripe}" stroke-width="1"></line>
             </pattern>
           </defs>
-          <rect width="100%" height="100%" fill="url(#pinstripe)"></rect>
+          <path d="${this.drawable.d}" style="fill-rule: evenodd; fill: var(--bg)"></path>
+          <path d="${this.drawable.d}" style="fill-rule: evenodd;" fill="url(#pinstripe)"></path>
         </svg>
       </div>
     `

app/components/selection/handle.element.css

@@ -30,24 +30,8 @@
   }
 }
 
-:host([placement^="top"]) {
-  --align-self: start;
-  --translate-y: -50%;
-}
-
-:host([placement^="bottom"]) {
-  --align-self: end;
-  --translate-y: 50%;
-}
-
-:host([placement$="start"]) {
-  --justify-self: start;
-  --translate-x: -50%;
-}
-
-:host([placement$="end"]) {
-  --justify-self: end;
-  --translate-x: 50%;
+:host {
+  translate: -50% -50%;
 }
 
 :host([placement^="top"]),

app/components/selection/handle.element.js

@@ -13,7 +13,7 @@ export class Handle extends HTMLElement {
   connectedCallback() {
     this.$shadow.adoptedStyleSheets = this.styles
     this.$shadow.innerHTML = this.render()
-    
+
     this.button = this.$shadow.querySelector('button')
     this.button.addEventListener('pointerdown', this.on_element_resize_start.bind(this))
 
@@ -30,6 +30,9 @@ export class Handle extends HTMLElement {
     }
   }
 
+  /**
+   * @param {PointerEvent} e
+   */
   on_element_resize_start(e) {
     e.preventDefault()
     e.stopPropagation()
@@ -39,11 +42,14 @@ export class Handle extends HTMLElement {
     const placement = this.placement
     const handlesEl = e.composedPath().find(el => el.tagName === 'VISBUG-HANDLES')
     const nodeLabelId = handlesEl.getAttribute('data-label-id')
+    /** @type {Element[]} */
     const [sourceEl] = $(`[data-label-id="${nodeLabelId}"]`)
 
     if (!sourceEl) return
 
-    const { x: initialX, y: initialY } = e
+    const t = sourceEl.convertPointFromNode(e, document.body.parentElement);
+
+    const { x: initialX, y: initialY } = t
     const initialStyle = getComputedStyle(sourceEl)
     const initialWidth = parseFloat(initialStyle.width)
     const initialHeight = parseFloat(initialStyle.height)
@@ -62,9 +68,11 @@ export class Handle extends HTMLElement {
       e.preventDefault()
       e.stopPropagation()
 
-      const newX = clamp(0, e.clientX, document.documentElement.clientWidth)
-      const newY = clamp(0, e.clientY, document.documentElement.clientHeight)
-
+      const t = sourceEl.convertPointFromNode({ x: e.clientX, y: e.clientY }, document.body.parentElement);
+
+      const newX = clamp(0, t.x, document.documentElement.clientWidth)
+      const newY = clamp(0, t.y, document.documentElement.clientHeight)
+
       const diffX = newX - initialX
       const diffY = newY - initialY
 

app/components/selection/handles.element.js

@@ -40,7 +40,7 @@ export class Handles extends HTMLElement {
   }
 
   set position({el, node_label_id}) {
-    this.$shadow.innerHTML = this.render(el.getBoundingClientRect(), node_label_id, isFixed(el))
+    this.$shadow.innerHTML = this.render(el.getBoxQuads()[0], node_label_id, isFixed(el))
 
     if (this._backdrop) {
       this.backdrop = {
@@ -60,9 +60,23 @@ export class Handles extends HTMLElement {
       : this.$shadow.appendChild(bd.element)
   }
 
-  render({ x, y, width, height, top, left }, node_label_id, isFixed) {
+  /**
+   *
+   * @param {DOMQuad} quad
+   * @param {string} node_label_id
+   * @param {boolean} isFixed
+   * @returns
+   */
+  render(quad, node_label_id, isFixed) {
     this.$shadow.host.setAttribute('data-label-id', node_label_id)
 
+    const left = Math.min(quad.p1.x, quad.p2.x, quad.p3.x, quad.p4.x);
+    const right = Math.max(quad.p1.x, quad.p2.x, quad.p3.x, quad.p4.x);
+    const top = Math.min(quad.p1.y, quad.p2.y, quad.p3.y, quad.p4.y);
+    const bottom = Math.max(quad.p1.y, quad.p2.y, quad.p3.y, quad.p4.y);
+    const width = right - left;
+    const height = bottom - top;
+
     this.style.setProperty('--top', `${top + (isFixed ? 0 : window.scrollY)}px`)
     this.style.setProperty('--left', `${left}px`)
     this.style.setProperty('--position', isFixed ? 'fixed' : 'absolute')
@@ -76,16 +90,16 @@ export class Handles extends HTMLElement {
         viewBox="0 0 ${width} ${height}"
         version="1.1" xmlns="http://www.w3.org/2000/svg"
       >
-        <rect stroke="var(--neon-pink)" fill="none" width="100%" height="100%"></rect>
+        <path d="M${quad.p1.x - left},${quad.p1.y - top} ${quad.p2.x - left},${quad.p2.y - top} ${quad.p3.x - left},${quad.p3.y - top} ${quad.p4.x - left},${quad.p4.y - top}Z" stroke="var(--neon-pink)" fill="none"></path>
       </svg>
-      <visbug-handle placement="top-start"></visbug-handle>
-      <visbug-handle placement="top-center"></visbug-handle>
-      <visbug-handle placement="top-end"></visbug-handle>
-      <visbug-handle placement="middle-start"></visbug-handle>
-      <visbug-handle placement="middle-end"></visbug-handle>
-      <visbug-handle placement="bottom-start"></visbug-handle>
-      <visbug-handle placement="bottom-center"></visbug-handle>
-      <visbug-handle placement="bottom-end"></visbug-handle>
+      <visbug-handle style="position:absolute; left: ${quad.p1.x - left}px; top: ${quad.p1.y - top}px;" placement="top-start"></visbug-handle>
+      <visbug-handle style="position:absolute; left: ${quad.p1.x + (quad.p2.x - quad.p1.x) / 2 - left}px; top: ${quad.p1.y + (quad.p2.y - quad.p1.y) / 2 - top}px;" placement="top-center"></visbug-handle>
+      <visbug-handle style="position:absolute; left: ${quad.p2.x - left}px; top: ${quad.p2.y - top}px;" placement="top-end"></visbug-handle>
+      <visbug-handle style="position:absolute; left: ${quad.p1.x + (quad.p4.x - quad.p1.x) / 2 - left}px; top: ${quad.p1.y + (quad.p4.y - quad.p1.y) / 2 - top}px;" placement="middle-start"></visbug-handle>
+      <visbug-handle style="position:absolute; left: ${quad.p2.x + (quad.p3.x - quad.p2.x) / 2 - left}px; top: ${quad.p2.y + (quad.p3.y - quad.p2.y) / 2 - top}px;" placement="middle-end"></visbug-handle>
+      <visbug-handle style="position:absolute; left: ${quad.p4.x - left}px; top: ${quad.p4.y - top}px;" placement="bottom-start"></visbug-handle>
+      <visbug-handle style="position:absolute; left: ${quad.p4.x + (quad.p3.x - quad.p4.x) / 2 - left}px; top: ${quad.p4.y + (quad.p3.y - quad.p4.y) / 2 - top}px;" placement="bottom-center"></visbug-handle>
+      <visbug-handle style="position:absolute; left: ${quad.p3.x - left}px; top: ${quad.p3.y - top}px;" placement="bottom-end"></visbug-handle>
     `
   }
 }

app/features/margin.js

@@ -108,11 +108,12 @@ export function createMarginVisual(el, hover = false) {
       sides[side] = Math.round(val.toFixed(1) * 100) / 100
     })
 
-    boxdisplay.position = { 
+    boxdisplay.position = {
       mode: 'margin',
       color: hover ? 'purple' : 'pink',
-      bounds, 
+      bounds,
       sides,
+      element: el
     }
   }
 

app/features/padding.js

@@ -108,11 +108,12 @@ export function createPaddingVisual(el, hover = false) {
       sides[side] = Math.round(val.toFixed(1) * 100) / 100
     })
 
-    boxdisplay.position = { 
+    boxdisplay.position = {
       mode: 'padding',
       color: hover ? 'purple' : 'pink',
-      bounds, 
+      bounds,
       sides,
+      element: el
     }
   }
 

package.json

@@ -42,6 +42,7 @@
     "blingblingjs": "^2.3.0",
     "colorjs.io": "^0.5.0",
     "construct-style-sheets-polyfill": "^2.4.2",
+    "get-box-quads-polyfill": "^4.16.0",
     "hotkeys-js": "^3.13.7",
     "query-selector-shadow-dom": "^1.0.1"
   },