First step at fixed label and handle support (#441)

* first step at fixed label and handle support

* Update app/components/selection/label.element.js

Co-Authored-By: Adam Argyle <[email protected]>

Author: Kilian

app/components/selection/handles.element.css

@@ -1,7 +1,7 @@
 @import "../_variables.css";
 
 :host > svg {
-  position: absolute;
+  position: var(--position, 'absolute');
   top: var(--top);
   left: var(--left);
   overflow: visible;

app/components/selection/handles.element.js

@@ -1,5 +1,6 @@
 import $ from 'blingblingjs'
 import { HandleStyles } from '../styles.store'
+import { isFixed } from '../../utilities/';
 
 export class Handles extends HTMLElement {
 
@@ -13,7 +14,7 @@ export class Handles extends HTMLElement {
     this.$shadow.adoptedStyleSheets = this.styles
     window.addEventListener('resize', this.on_resize.bind(this))
   }
-  
+
   disconnectedCallback() {
     window.removeEventListener('resize', this.on_resize)
   }
@@ -28,12 +29,13 @@ export class Handles extends HTMLElement {
       this.position = {
         node_label_id,
         el: source_el,
+        isFixed: isFixed(source_el),
       }
     })
   }
 
   set position({el, node_label_id}) {
-    this.$shadow.innerHTML = this.render(el.getBoundingClientRect(), node_label_id)
+    this.$shadow.innerHTML = this.render(el.getBoundingClientRect(), node_label_id, isFixed(el))
 
     if (this._backdrop) {
       this.backdrop = {
@@ -53,11 +55,12 @@ export class Handles extends HTMLElement {
       : this.$shadow.appendChild(bd.element)
   }
 
-  render({ x, y, width, height, top, left }, node_label_id) {
+  render({ x, y, width, height, top, left }, node_label_id, isFixed) {
     this.$shadow.host.setAttribute('data-label-id', node_label_id)
 
-    this.style.setProperty('--top', `${top + window.scrollY}px`)
+    this.style.setProperty('--top', `${top + (isFixed ? 0 : window.scrollY)}px`)
     this.style.setProperty('--left', `${left}px`)
+    this.style.setProperty('--position', isFixed ? 'fixed' : 'absolute')
 
     return `
       <svg

app/components/selection/hover.element.js

@@ -8,9 +8,10 @@ export class Hover extends Handles {
     this.styles = [HandleStyles, HoverStyles]
   }
 
-  render({ width, height, top, left }) {
-    this.style.setProperty('--top', `${top + window.scrollY}px`)
+  render({ width, height, top, left }, node_label_id, isFixed) {
+    this.style.setProperty('--top', `${top + (isFixed ? 0 : window.scrollY)}px`)
     this.style.setProperty('--left', `${left}px`)
+    this.style.setProperty('--position', isFixed ? 'fixed' : 'absolute')
 
     return `
       <svg width="${width}" height="${height}">

app/components/selection/label.element.css

@@ -2,14 +2,14 @@
 
 :host {
   font-size: 16px;
-
+  --position: absolute;
   --top: 0;
   --left: 0;
   --max-width: 0;
 }
 
 :host > span {
-  position: absolute;
+  position: var(--position);
   top: var(--top);
   left: var(--left);
   max-width: var(--max-width);

app/components/selection/label.element.js

@@ -1,5 +1,6 @@
 import $ from 'blingblingjs'
 import { LabelStyles } from '../styles.store'
+import { isFixed } from '../../utilities/';
 
 export class Label extends HTMLElement {
 
@@ -29,6 +30,7 @@ export class Label extends HTMLElement {
       this.position = {
         node_label_id,
         boundingRect: source_el.getBoundingClientRect(),
+        isFixed: isFixed(source_el),
       }
     })
   }
@@ -47,15 +49,16 @@ export class Label extends HTMLElement {
     this._text = content
   }
 
-  set position({boundingRect, node_label_id}) {
+  set position({boundingRect, node_label_id, isFixed}) {
     this.$shadow.innerHTML = this.render(node_label_id)
-    this.update = boundingRect
+    this.update = {boundingRect, isFixed}
   }
 
-  set update({x,y,width}) {
-    this.style.setProperty('--top', `${y + window.scrollY}px`)
-    this.style.setProperty('--left', `${x - 1}px`)
-    this.style.setProperty('--max-width', `${width + (window.innerWidth - x - width - 20)}px`)
+  set update({boundingRect, isFixed}) {
+    this.style.setProperty('--top', `${boundingRect.y + (isFixed ? 0 : window.scrollY)}px`)
+    this.style.setProperty('--left', `${boundingRect.x - 1}px`)
+    this.style.setProperty('--max-width', `${boundingRect.width + (window.innerWidth - boundingRect.x - boundingRect.width - 20)}px`)
+    this.style.setProperty('--position', isFixed ? 'fixed' : 'absolute');
   }
 
   render(node_label_id) {

app/features/selectable.js

@@ -16,7 +16,7 @@ import {
   metaKey, htmlStringToDom, createClassname, camelToDash,
   isOffBounds, getStyles, deepElementFromPoint, getShadowValues,
   isSelectorValid, findNearestChildElement, findNearestParentElement,
-  getTextShadowValues
+  getTextShadowValues, isFixed,
 } from '../utilities/'
 
 export function Selectable(visbug) {
@@ -584,7 +584,7 @@ export function Selectable(visbug) {
   }
 
   const setLabel = (el, label) =>
-    label.update = el.getBoundingClientRect()
+    label.update = {boundingRect: el.getBoundingClientRect(), isFixed: isFixed(el)}
 
   const createLabel = ({el, id, template}) => {
     if (!labels[id]) {
@@ -594,6 +594,7 @@ export function Selectable(visbug) {
       label.position = {
         boundingRect:   el.getBoundingClientRect(),
         node_label_id:  id,
+        isFixed: isFixed(el),
       }
 
       document.body.appendChild(label)

app/plugins/zindex.js

@@ -1,3 +1,5 @@
+import { isFixed } from '../utilities/';
+
 export const commands = [
     'zindex',
     'z-index'
@@ -16,13 +18,15 @@ export default function () {
 
             label.text = `z-index: ${zindex}`
             label.position = {
-                boundingRect: el.getBoundingClientRect()
+                boundingRect: el.getBoundingClientRect(),
+                isFixed: isFixed(el),
             }
             label.style.setProperty(`--label-bg`, color)
 
             const overlay = document.createElement('visbug-hover')
             overlay.position = { el }
             overlay.style.setProperty(`--hover-stroke`, color)
+            overlay.style.setProperty(`--position`, isFixed(el) ? 'fixed' : 'absolute')
 
             document.body.appendChild(label)
             document.body.appendChild(overlay)

app/utilities/index.js

@@ -3,3 +3,4 @@ export * from './accessibility'
 export * from './common'
 export * from './strings'
 export * from './window'
+export * from './isFixed'

app/utilities/isFixed.js

@@ -0,0 +1,6 @@
+export const isFixed = elem => {
+  do {
+    if (window.getComputedStyle(elem).position == 'fixed') return true;
+  } while (elem = elem.offsetParent);
+  return false;
+}