Include get-box-quads-polyfill for better overlays

app/components/index.js

@@ -1,3 +1,8 @@
+import { addPolyfill } from 'get-box-quads-polyfill'
+
+// The polyfill preserves native GeometryUtils methods and only fills in missing ones.
+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

@@ -1,18 +1,13 @@
 :host [mask] {
+  inset: 0;
+  height: 100%;
   pointer-events: none;
   position: absolute;
+  width: 100%;
   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%
-  );
-}
+}
+
+:host svg {
+  display: block;
+  overflow: visible;
+}

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

@@ -1,4 +1,5 @@
 import { BoxModelStyles } from '../styles.store'
+import { getBoxQuad, quadBounds, quadPath, sideMidpoint } from './quad'
 
 export class BoxModel extends HTMLElement {
 
@@ -16,15 +17,21 @@ export class BoxModel extends HTMLElement {
 
   set position(payload) {
     this.$shadow.innerHTML = this.render(payload)
-    if (!this.drawable.measurements) // && payload.color === 'pink'
-      this.createMeasurements(payload)
+    this.createMeasurements({...payload, ...this.drawable.measurementQuads})
   }
 
-  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 borderQuad = getBoxQuad(element)
+    const borderBounds = quadBounds(borderQuad)
+    const origin = {x: borderBounds.left, y: borderBounds.top}
+    let outerQuad
+    let innerQuad
 
     if (mode === 'padding') {
+      outerQuad = getBoxQuad(element, 'padding')
+      innerQuad = getBoxQuad(element, 'content')
       this.drawable = {
         height:   bounds.height - (sides.borders.top + sides.borders.bottom),
         width:    bounds.width - (sides.borders.right + sides.borders.left),
@@ -34,6 +41,8 @@ export class BoxModel extends HTMLElement {
       }
     }
     else if (mode === 'margin') {
+      outerQuad = getBoxQuad(element, 'margin')
+      innerQuad = borderQuad
       this.drawable = {
         height:   total_height,
         width:    total_width,
@@ -43,6 +52,9 @@ export class BoxModel extends HTMLElement {
       }
     }
 
+    this.drawable.d = `${quadPath(outerQuad, origin)} ${quadPath(innerQuad, origin)}`
+    this.drawable.measurementQuads = {outerQuad, innerQuad, origin}
+
     if (color === 'pink') {
       this.drawable.bg = 'color(display-p3 1 0 1 / 15%)'
       this.drawable.stripe = 'color(display-p3 1 0 1 / 80%)'
@@ -56,13 +68,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>
     `
@@ -84,94 +97,27 @@ export class BoxModel extends HTMLElement {
     this.style.setProperty('--offset-bottom', `${this.drawable.height - sides.bottom}px`)
   }
 
-  createMeasurements({mode, bounds, sides, color}) {
-    const win_width   = window.innerWidth
-    const pill_height = 18
-    const offset      = 3
-
-    if (mode === 'margin') {
-      if (sides.top) {
-        this.createMeasurement({
-          x: (bounds.width / 2) - offset,
-          y: (window.scrollY * -1) - sides.top,
-          d: sides.top,
-          q: 'top',
-          v: true,
-          color,
-        })
-      }
-      if (sides.bottom) {
-        this.createMeasurement({
-          x: (bounds.width / 2) - offset,
-          y: (window.scrollY * -1) + bounds.height,
-          d: sides.bottom,
-          q: 'bottom',
-          v: true,
-          color,
-        })
-      }
-      if (sides.right) {
-        this.createMeasurement({
-          x: bounds.width,
-          y: (window.scrollY * -1) + (bounds.height / 2) - offset,
-          d: sides.right,
-          q: 'right',
-          v: false,
-          color,
-        })
-      }
-      if (sides.left) {
-        this.createMeasurement({
-          x: sides.left * -1,
-          y: (window.scrollY * -1) + (bounds.height / 2) - offset,
-          d: sides.left,
-          q: 'left',
-          v: false,
-          color,
-        })
-      }
-    }
-    else if (mode === 'padding') {
-      if (sides.top) {
-        this.createMeasurement({
-          x: (bounds.width / 2) - offset,
-          y: (window.scrollY * -1) + sides.borders.top,
-          d: sides.top,
-          q: 'top',
-          v: true,
-          color,
-        })
-      }
-       if (sides.bottom) {
-         this.createMeasurement({
-           x: (bounds.width / 2) - offset,
-           y: (window.scrollY * -1) + (bounds.height - sides.bottom - sides.borders.bottom),
-           d: sides.bottom,
-           q: 'bottom',
-           v: true,
-           color,
-         })
-       }
-       if (sides.right) {
-         this.createMeasurement({
-           x: bounds.width - sides.right - sides.borders.right,
-           y: (window.scrollY * -1) + (bounds.height / 2) - offset,
-           d: sides.right,
-           q: 'right',
-           v: false,
-           color,
-         })
-       }
-       if (sides.left) {
-         this.createMeasurement({
-           x: 0 + sides.borders.left,
-           y: (window.scrollY * -1) + (bounds.height / 2) - offset,
-           d: sides.left,
-           q: 'left',
-           v: false,
-           color,
-         })
-       }
+  createMeasurements({sides, color, outerQuad, innerQuad, origin}) {
+    for (const side of ['top', 'right', 'bottom', 'left']) {
+      if (!sides[side]) continue
+
+      const start = sideMidpoint(outerQuad, side)
+      const end = sideMidpoint(innerQuad, side)
+      const dx = end.x - start.x
+      const dy = end.y - start.y
+
+      this.createMeasurement({
+        x: start.x - origin.x,
+        y: start.y - origin.y,
+        d: sides[side],
+        length: Math.hypot(dx, dy),
+        angle: Math.atan2(dy, dx),
+        q: side,
+        v: false,
+        local: true,
+        centered: true,
+        color,
+      })
     }
   }
 

app/components/selection/distance.element.css

@@ -30,6 +30,8 @@
   align-items: center;
   justify-content: var(--justify, 'flex-start');
   flex-direction: var(--direction);
+  transform: rotate(var(--angle, 0rad));
+  transform-origin: top left;
 }
 
 :host > figure figcaption {
@@ -49,6 +51,7 @@
   line-height: 1.1;
   font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
   padding: 0 1ex;
+  transform: rotate(var(--caption-angle, 0rad));
 }
 
 :host > figure span {

app/components/selection/distance.element.js

@@ -21,19 +21,23 @@ export class Distance extends HTMLElement {
     this.$shadow.innerHTML  = this.render(line_model, node_label_id)
   }
 
-  set styleProps({y,x,d,q,v = false, color}) {
-    this.style.setProperty('--top', `${Math.round(y + window.scrollY)}px`)
+  set styleProps({y,x,d,q,v = false, color, local = false, length = d, angle = 0, centered = false}) {
+    this.style.setProperty('--top', `${Math.round(y + (local ? 0 : window.scrollY))}px`)
     this.style.setProperty('--right', 'auto')
     this.style.setProperty('--left', `${x}px`)
     this.style.setProperty('--direction', v ? 'column' : 'row')
     this.style.setProperty('--quadrant', q)
+    this.style.setProperty('--angle', `${angle}rad`)
+    this.style.setProperty('--caption-angle', `${angle * -1}rad`)
 
-    if (q === 'left')
+    if (centered)
+      this.style.setProperty('--justify', 'center')
+    else if (q === 'left')
       this.style.setProperty('--justify', 'flex-end')
 
     v
-      ? this.style.setProperty('--distance-h', `${d}px`)
-      : this.style.setProperty('--distance-w', `${d}px`)
+      ? this.style.setProperty('--distance-h', `${length}px`)
+      : this.style.setProperty('--distance-w', `${length}px`)
 
      v
       ? this.style.setProperty('--line-h', `var(--line-w)`)

app/components/selection/handle.element.css

@@ -4,6 +4,7 @@
   display: grid;
   grid-area: 1 / -1;
   place-self: var(--align-self, center) var(--justify-self, center);
+  position: absolute;
   transform: translate(var(--translate-x, 0), var(--translate-y, 0));
 }
 
@@ -30,24 +31,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"]),