hdr toplayer guides

Author: argyleink

app/components/_variables.css

@@ -8,6 +8,11 @@
   --theme-blue: hsl(188 90% 45%);
   --theme-purple: hsl(267 100% 58%);
 
+  --neon-pink: color(display-p3 1 0 1);
+  --neon-purple: color(display-p3 .75 0 1);
+  --neon-lime:  color(display-p3 0.25 1 0);
+  --neon-cyan:  color(display-p3 0 1 1);
+
   --theme-text_color: hsl(0 0% 10%);
   --theme-icon_color: hsl(0 0% 20%);
   --theme-icon_hover-bg: hsl(0 0% 95%);

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

@@ -44,12 +44,12 @@ export class BoxModel extends HTMLElement {
     }
 
     if (color === 'pink') {
-      this.drawable.bg = 'hsla(330, 100%, 71%, 15%)'
-      this.drawable.stripe = 'hsla(330, 100%, 71%, 80%)'
+      this.drawable.bg = 'color(display-p3 1 0 1 / 15%)'
+      this.drawable.stripe = 'color(display-p3 1 0 1 / 80%)'
     }
     else {
-      this.drawable.bg = 'hsla(267, 100%, 58%, 15%)'
-      this.drawable.stripe = 'hsla(267, 100%, 58%, 80%)'
+      this.drawable.bg = 'color(display-p3 .75 0 1 / 15%)'
+      this.drawable.stripe = 'color(display-p3 .75 0 1 / 80%)'
     }
 
     this.styles({sides})

app/components/selection/corners.element.css

@@ -4,7 +4,7 @@
   width: 5px;
   height: 5px;
   vector-effect: non-scaling-stroke;
-  stroke: var(--theme-purple);
+  stroke: var(--neon-purple);
   stroke-width: 1px;
   fill: none;
   stroke-linecap: round;

app/components/selection/distance.element.css

@@ -1,8 +1,8 @@
 @import "../_variables.css";
 
 :host {
-  --line-color: var(--theme-purple);
-  --line-base: var(--theme-color);
+  --line-color: 1 0 1;
+  --line-base: .75 0 1;
   --line-width: 1px;
   --distance-h: 5px;
   --distance-w: 5px;
@@ -40,8 +40,8 @@
   color: white;
   text-shadow: var(--text-shadow);
   box-shadow: var(--text-shadow);
-  background: hsl(var(--line-color) / 75%);
-  border: 1px solid hsl(var(--line-color));
+  background: color(display-p3 var(--line-color) / 75%);
+  border: 1px solid color(display-p3 var(--line-color));
   border-radius: 1em;
   font-size: 0.7em;
   font-weight: bold;
@@ -51,19 +51,19 @@
 }
 
 :host > figure span {
-  background: hsl(var(--line-color));
+  background: color(display-p3 var(--line-color));
   height: var(--line-h);
   width: var(--line-w);
 }
 
 :host > figure div {
   flex: 2;
-  background: hsl(var(--line-color));
+  background: color(display-p3 var(--line-color));
   width: var(--line-w);
   height: var(--line-h);
 }
 
 :host figure:matches([quadrant="bottom"], [quadrant="right"]) > div:first-of-type,
 :host figure:matches([quadrant="top"], [quadrant="left"]) > div:last-of-type {
-  background: linear-gradient(to var(--quadrant), hotpink 0%, hsl(var(--line-color)) 100%);
+  background: linear-gradient(to var(--quadrant), var(--neon-pink) 0%, color(display-p3 var(--line-color)) 100%);
 }

app/components/selection/distance.element.js

@@ -23,8 +23,8 @@ export class Distance extends HTMLElement {
 
   set styleProps({y,x,d,q,v = false, color}) {
     this.style.setProperty('--top', `${y + window.scrollY}px`)
-    this.style.setProperty('--right', q === 'left' ? `${x}px` : 'auto')
-    this.style.setProperty('--left', q !== 'left' ? `${x}px` : '')
+    this.style.setProperty('--right', 'auto')
+    this.style.setProperty('--left', `${x}px`)
     this.style.setProperty('--direction', v ? 'column' : 'row')
     this.style.setProperty('--quadrant', q)
 
@@ -40,11 +40,11 @@ export class Distance extends HTMLElement {
       : this.style.setProperty('--line-w', `var(--line-w)`)
 
     this.style.setProperty('--line-color', color === 'pink'
-      ? '330 100% 71%'
-      : '267 100% 58%')
+      ? '1 0 1'
+      : '.75 0 1')
     this.style.setProperty('--line-base', color === 'pink'
-      ? '330 100% 71%'
-      : '267 100% 58%')
+      ? '1 0 1'
+      : '.75 0 1')
   }
 
   render({q,d}, node_label_id) {

app/components/selection/gridlines.element.css

@@ -1,7 +1,12 @@
 @import "../_variables.css";
 
 :host {
-  --color: var(--theme-color);
+  background: transparent;
+  border: none;
+  overflow: visible;
+  padding: 0;
+  margin: 0;
+  inset: auto;
 }
 
 :host > svg {
@@ -15,7 +20,7 @@
 
 :host rect, 
 :host line {
-  stroke: var(--color);
+  stroke: var(--neon-pink);
 }
 
 :host line {

app/components/selection/gridlines.element.js

@@ -10,9 +10,13 @@ export class Gridlines extends HTMLElement {
 
   connectedCallback() {
     this.$shadow.adoptedStyleSheets = [GridlineStyles]
+    this.setAttribute('popover', 'manual')
+    this.showPopover()
   }
 
-  disconnectedCallback() {}
+  disconnectedCallback() {
+    this.hidePopover()
+  }
 
   set position(boundingRect) {
     this.$shadow.innerHTML  = this.render(boundingRect)

app/components/selection/grip.element.css

@@ -9,7 +9,7 @@
   height: .5em;
   width: 20%;
   max-width: 10vmax;
-  stroke: var(--theme-color);
+  stroke: var(--neon-pink);
   stroke-width: 1px;
   stroke-linecap: round;
   rx: 4;
@@ -19,6 +19,6 @@
   z-index: var(--layer-5);
 
   &[hovering] rect {
-    fill: var(--theme-color);
+    fill: var(--neon-pink);
   }
 }

app/components/selection/handle.element.css

@@ -14,7 +14,7 @@
 :host > button {
   pointer-events: auto;
   background-color: white;
-  border: 1px solid hotpink;
+  border: 1px solid var(--neon-pink);
   padding: 0;
   width: 0.5rem;
   height: 0.5rem;

app/components/selection/hover.element.css

@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
   vector-effect: non-scaling-stroke;
-  stroke: var(--hover-stroke, var(--theme-purple, hsl(267 100% 58%)));
+  stroke: var(--hover-stroke, var(--neon-purple, hsl(267 100% 58%)));
   stroke-width: 1px;
   fill: none;
 }

app/components/selection/label.element.css

@@ -19,7 +19,7 @@
   max-width: var(--max-width);
   z-index: var(--layer-4);
   transform: translateY(-100%);
-  background: var(--label-bg, hotpink);
+  background: var(--label-bg, var(--neon-pink));
   border-radius: 0.2em 0.2em 0 0;
   text-shadow: var(--text-shadow);
   color: white;

app/features/measurements.js

@@ -37,15 +37,15 @@ export function createMeasurements({$anchor, $target}) {
   // left
   if (anchorBounds.left > targetBounds.right) {
     measurements.push({
-      x: window.innerWidth - anchorBounds.left,
+      x: targetBounds.right,
       y: anchorBounds.top + (anchorBounds.height / 2) - 3,
       d: anchorBounds.left - targetBounds.right,
       q: 'left',
     })
   }
-  if (anchorBounds.left > targetBounds.left && anchorBounds.left < targetBounds.right) {
+  else if (anchorBounds.left > targetBounds.left && anchorBounds.left < targetBounds.right) {
     measurements.push({
-      x: window.innerWidth - anchorBounds.left,
+      x: targetBounds.left,
       y: anchorBounds.top + (anchorBounds.height / 2) - 3,
       d: anchorBounds.left - targetBounds.left,
       q: 'left',
@@ -95,7 +95,7 @@ export function createMeasurements({$anchor, $target}) {
   // inside left/right
   if (anchorBounds.right > targetBounds.right && anchorBounds.left < targetBounds.left) {
     measurements.push({
-      x: window.innerWidth - anchorBounds.right,
+      x: targetBounds.right,
       y: anchorBounds.top + (anchorBounds.height / 2) - 3,
       d: anchorBounds.right - targetBounds.right,
       q: 'left',