Add artboard canvas mode

app/components/selection/distance.element.js

@@ -26,7 +26,7 @@ export class Distance extends HTMLElement {
   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('--left', `${Math.round(x + (local ? 0 : window.scrollX))}px`)
     this.style.setProperty('--direction', v ? 'column' : 'row')
     this.style.setProperty('--quadrant', q)
     this.style.setProperty('--angle', `${angle}rad`)

app/components/selection/offscreenLabel.element.js

@@ -1,5 +1,6 @@
 import $ from 'blingblingjs'
 import { OffscreenLabelStyles } from '../styles.store'
+import { getOverlayRoot } from '../../utilities/'
 
 window.addEventListener('scroll', positionFlags)
 
@@ -127,7 +128,7 @@ export function createOffscreenLabelIndicator(node_label_id, text, hoverText, le
     label.style.setProperty('--left', left)
   }
 
-  document.body.appendChild(label)
+  getOverlayRoot().appendChild(label)
 }
 
 export function removeOffscreenLabelIndicators() {
@@ -138,4 +139,4 @@ export function removeOffscreenLabelIndicators() {
       e.text = ''
       e.style.display = 'none'
     })
-}
+}

app/components/selection/overlay.element.js

@@ -24,7 +24,7 @@ export class Overlay extends HTMLElement {
     svg.style.display = 'block'
 
     this.style.setProperty('--top', `${top + window.scrollY}px`)
-    this.style.setProperty('--left', `${left - 1}px`)
+    this.style.setProperty('--left', `${left + window.scrollX - 1}px`)
 
     svg.setAttribute('width', width + 'px')
     svg.setAttribute('height', height + 'px')

app/components/styles.store.js

@@ -1,6 +1,7 @@
 import 'construct-style-sheets-polyfill'
 
 import { default as visbug_css }     from './vis-bug/vis-bug.element.css'
+import { default as visbug_artboard_css } from './vis-bug/vis-bug.artboard.css'
 import { default as handles_css }    from './selection/handles.element.css'
 import { default as handle_css }     from './selection/handle.element.css'
 import { default as hover_css }      from './selection/hover.element.css'
@@ -31,6 +32,7 @@ const constructStylesheet = (styles, stylesheet = new CSSStyleSheet()) => {
 }
 
 export const VisBugStyles         = constructStylesheet(visbug_css)
+export const ArtboardStyles       = constructStylesheet(visbug_artboard_css)
 export const HandlesStyles        = constructStylesheet(handles_css)
 export const HandleStyles         = constructStylesheet(handle_css)
 export const HoverStyles          = constructStylesheet(hover_css)

app/components/vis-bug/vis-bug.artboard.css

@@ -0,0 +1,33 @@
+html[data-visbug-artboard] {
+  box-sizing: border-box;
+  display: block;
+  width: var(--visbug-artboard-canvas-width, 100vw);
+  height: var(--visbug-artboard-canvas-height, 100vh);
+  min-width: 100vw;
+  min-height: 100vh;
+  background-color: Canvas !important;
+  overflow: auto !important;
+  overflow-anchor: none;
+}
+
+html[data-visbug-artboard] > body {
+  box-sizing: border-box;
+  width: var(--visbug-artboard-width, 100vw);
+  max-width: var(--visbug-artboard-width, 100vw);
+  min-width: var(--visbug-artboard-width, 100vw);
+  min-height: var(--visbug-artboard-height, 100vh);
+  margin:
+    calc((var(--visbug-artboard-canvas-height, 100vh) - var(--visbug-artboard-height, 100vh)) / 2)
+    0
+    0
+    calc((var(--visbug-artboard-canvas-width, 100vw) - var(--visbug-artboard-width, 100vw)) / 2) !important;
+  outline: 1px solid ButtonFace;
+  box-shadow:
+    0 3px 2px hsl(0 0% 0% / 2%),
+    0 7px 5px hsl(0 0% 0% / 2%),
+    0 13px 10px hsl(0 0% 0% / 3%),
+    0 22px 18px hsl(0 0% 0% / 4%),
+    0 42px 33px hsl(0 0% 0% / 5%),
+    0 100px 80px hsl(0 0% 0% / 7%) !important;
+  overflow-anchor: none;
+}

app/components/vis-bug/vis-bug.element.js

@@ -9,7 +9,7 @@ import {
 import {
   Selectable, Moveable, Padding, Margin, EditText, Font,
   Flex, Search, ColorPicker, BoxShadow, HueShift, MetaTip,
-  Guides, Screenshot, Position, Accessibility, draggable
+  Guides, Screenshot, Position, Accessibility, draggable, Zoom
 } from '../../features/'
 
 import {
@@ -42,7 +42,7 @@ export default class VisBug extends HTMLElement {
   }
 
   static get observedAttributes() {
-    return ['color-scheme']
+    return ['color-scheme', 'viewmode']
   }
 
   connectedCallback() {
@@ -55,22 +55,32 @@ export default class VisBug extends HTMLElement {
 
     provideSelectorEngine(this.selectorEngine)
 
+    if (this.getAttribute('viewmode') === 'artboard')
+      Zoom.start(this.selectorEngine)
+
     this.toolSelected($('[data-tool="guides"]', this.$shadow)[0])
   }
 
   disconnectedCallback() {
     this.deactivate_feature()
+    this.active_tool = null
     this.cleanup()
     this.selectorEngine.disconnect()
     hotkeys.unbind(
       Object.keys(this.toolbar_model).reduce((events, key) =>
         events += ',' + key, ''))
     hotkeys.unbind(`${metaKey}+/`)
+    Zoom.stop()
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === 'color-scheme')
       this.applyScheme(newValue)
+
+    if (name === 'viewmode' && oldValue !== newValue && this.isConnected && this.selectorEngine)
+      newValue === 'artboard'
+        ? Zoom.start(this.selectorEngine)
+        : Zoom.stop()
   }
 
   setup() {
@@ -80,6 +90,10 @@ export default class VisBug extends HTMLElement {
       ? this.getAttribute('color-mode')
       : this.setAttribute('color-mode', 'hex')
 
+    this.hasAttribute('viewmode')
+      ? this.getAttribute('viewmode')
+      : this.setAttribute('viewmode', 'document')
+
     this.hasAttribute('color-scheme')
       ? this.getAttribute('color-scheme')
       : this.setAttribute('color-scheme', 'auto')
@@ -131,12 +145,13 @@ export default class VisBug extends HTMLElement {
   cleanup() {
     this.hidePopover && this.hidePopover()
 
-    Array.from(document.body.children)
-      .filter(node => node.nodeName.includes('VISBUG'))
+    Array.from(new Set([
+      ...document.body.children,
+      ...document.documentElement.children,
+    ]))
+      .filter(node => node !== this && node.nodeName.startsWith('VISBUG-'))
       .forEach(el => el.remove())
 
-    this.teardown()
-
     document.querySelectorAll('[data-pseudo-select=true]')
       .forEach(el =>
         el.removeAttribute('data-pseudo-select'))

app/demo.js

@@ -0,0 +1,13 @@
+const visbug = document.querySelector('vis-bug')
+if (visbug)
+  document.documentElement.prepend(visbug)
+
+if ('ontouchstart' in document.documentElement)
+  document.getElementById('mobile-info').style.display = ''
+
+const isMac = window.navigator.platform.includes('Mac')
+if (!isMac)
+  document.querySelectorAll('kbd').forEach(node => {
+    node.textContent = node.textContent.replace('cmd', 'ctrl')
+    node.textContent = node.textContent.replace('opt', 'alt')
+  })

app/features/accessibility.js

@@ -5,7 +5,7 @@ import { readability, isReadable } from '@ctrl/tinycolor'
 import {
   getStyle, isOffBounds,
   getA11ys, getWCAG2TextSize, getComputedBackgroundColor,
-  deepElementFromPoint, onRemove, contrast_color
+  deepElementFromPoint, onRemove, contrast_color, getOverlayRoot
 } from '../utilities/'
 
 const state = {
@@ -54,7 +54,7 @@ const mouseMove = e => {
 export function showTip(target, e) {
   if (!state.active.tip) { // create
     const tip = render(target)
-    document.body.appendChild(tip)
+    getOverlayRoot().appendChild(tip)
 
     positionTip(tip, e)
     observe({tip, target})

app/features/guides.js

@@ -1,5 +1,5 @@
 import $ from 'blingblingjs'
-import { isOffBounds, deepElementFromPoint } from '../utilities/'
+import { isOffBounds, deepElementFromPoint, getOverlayRoot } from '../utilities/'
 import { clearMeasurements, takeMeasurementOwnership } from './measurements'
 
 const state = {
@@ -97,11 +97,11 @@ const showGridlines = node => {
     state.gridlines = document.createElement('visbug-gridlines')
     state.gridlines.position = node.getBoundingClientRect()
 
-    document.body.appendChild(state.gridlines)
+    getOverlayRoot().appendChild(state.gridlines)
   }
 }
 
-const hideGridlines = () => {
+export const hideGridlines = () => {
   if (!state.gridlines) return
   state.gridlines.style.display = 'none'
 }

app/features/imageswap.js

@@ -1,5 +1,5 @@
 import $ from 'blingblingjs'
-import { getStyle } from '../utilities/'
+import { getStyle, getOverlayRoot } from '../utilities/'
 
 let imgs      = []
   , overlays  = []
@@ -187,7 +187,7 @@ const showOverlay = (node, i) => {
   else {
     overlays[i] = document.createElement('visbug-overlay')
     overlays[i].position = rect
-    document.body.appendChild(overlays[i])
+    getOverlayRoot().appendChild(overlays[i])
   }
 }
 

app/features/index.js

@@ -14,4 +14,4 @@ export { Guides } from './guides'
 export { Screenshot } from './screenshot'
 export { Position, draggable } from './position'
 export { Accessibility } from './accessibility'
-
+export { Zoom } from './zoom'

app/features/measurements.js

@@ -1,4 +1,5 @@
 import $ from 'blingblingjs'
+import { getOverlayRoot } from '../utilities/'
 
 const state = {
   distances:  [],
@@ -140,7 +141,7 @@ export function createMeasurements({$anchor, $target}) {
         node_label_id:  state.distances.length,
       }
 
-      document.body.appendChild($measurement)
+      getOverlayRoot().appendChild($measurement)
       $measurement.isPopover()
       state.distances[state.distances.length] = $measurement
     })

app/features/metatip.js

@@ -5,7 +5,7 @@ import { queryPage } from './search'
 import { getStyles, camelToDash, isOffBounds,
          deepElementFromPoint, getShadowValues,
          getTextShadowValues, firstUsableFontFromFamily,
-         onRemove
+         onRemove, getOverlayRoot
 } from '../utilities/'
 
 const state = {
@@ -57,7 +57,7 @@ const mouseMove = e => {
 export function showTip(target, e) {
   if (!state.active.tip) { // create
     const tip = render(target)
-    document.body.appendChild(tip)
+    getOverlayRoot().appendChild(tip)
 
     tip.hidePopover()
     tip.showPopover()

app/features/move.js

@@ -1,6 +1,6 @@
 import $ from 'blingblingjs'
 import hotkeys from 'hotkeys-js'
-import { getNodeIndex, showEdge, swapElements, notList } from '../utilities/'
+import { getNodeIndex, showEdge, swapElements, notList, getOverlayRoot } from '../utilities/'
 import { toggleWatching } from './imageswap'
 
 const key_events = 'up,down,left,right'
@@ -224,7 +224,7 @@ const createDropzoneUI = el => {
   const zone = document.createElement('visbug-corners')
 
   zone.position = {el}
-  document.body.appendChild(zone)
+  getOverlayRoot().appendChild(zone)
 
   const observer = new MutationObserver(list =>
     zone.position = {el})
@@ -243,7 +243,7 @@ const createGripUI = el => {
   const grip = document.createElement('visbug-grip')
 
   grip.position = {el}
-  document.body.appendChild(grip)
+  getOverlayRoot().appendChild(grip)
 
   const observer = new MutationObserver(list =>
     grip.position = {el})
@@ -269,8 +269,8 @@ const createParentUI = parent => {
   label.position = {boundingRect: parent.getBoundingClientRect()}
   label.style.setProperty('--label-bg', 'var(--theme-purple)')
 
-  document.body.appendChild(hover)
-  document.body.appendChild(label)
+  getOverlayRoot().appendChild(hover)
+  getOverlayRoot().appendChild(label)
 
   const observer = new MutationObserver(list => {
     hover.position = {el:parent}

app/features/selectable.js

@@ -16,7 +16,7 @@ import {
   metaKey, htmlStringToDom, createClassname, camelToDash,
   isOffBounds, getStyle, getStyles, deepElementFromPoint, getShadowValues,
   isSelectorValid, findNearestChildElement, findNearestParentElement,
-  getTextShadowValues, isFixed, onRemove
+  getTextShadowValues, isFixed, onRemove, getOverlayRoot
 } from '../utilities/'
 
 export function Selectable(visbug) {
@@ -611,7 +611,7 @@ export function Selectable(visbug) {
         isFixed: isFixed(el),
       }
 
-      document.body.appendChild(label)
+      getOverlayRoot().appendChild(label)
 
       $(label).on('query', ({detail}) => {
         if (!detail.text) return
@@ -649,7 +649,7 @@ export function Selectable(visbug) {
 
       handle.position = { el, node_label_id: id }
 
-      document.body.appendChild(handle)
+      getOverlayRoot().appendChild(handle)
 
       handles[handles.length] = handle
       return handle
@@ -662,7 +662,7 @@ export function Selectable(visbug) {
         hover_state.element.remove()
 
       hover_state.element = document.createElement('visbug-hover')
-      document.body.appendChild(hover_state.element)
+      getOverlayRoot().appendChild(hover_state.element)
       hover_state.element.position = {el}
 
       return hover_state.element
@@ -675,7 +675,7 @@ export function Selectable(visbug) {
         hover_state.label.remove()
 
       hover_state.label = document.createElement('visbug-label')
-      document.body.appendChild(hover_state.label)
+      getOverlayRoot().appendChild(hover_state.label)
 
       hover_state.label.text = text
       hover_state.label.position = {
@@ -696,7 +696,7 @@ export function Selectable(visbug) {
         hover_state.element.remove()
 
       hover_state.element = document.createElement('visbug-corners')
-      document.body.appendChild(hover_state.element)
+      getOverlayRoot().appendChild(hover_state.element)
       hover_state.element.position = {el}
 
       return hover_state.element