Artboard

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

@@ -29,7 +29,7 @@ export class BoxModel extends HTMLElement {
         height:   bounds.height,
         width:    bounds.width,
         top:      bounds.top + window.scrollY,
-        left:     bounds.left,
+        left:     bounds.left + window.scrollX,
         rotation: 'rotate(-45)',
       }
     }
@@ -38,7 +38,7 @@ export class BoxModel extends HTMLElement {
         height:   total_height,
         width:    total_width,
         top:      bounds.top + window.scrollY - sides.top,
-        left:     bounds.left - sides.left,
+        left:     bounds.left + window.scrollX - sides.left,
         rotation: 'rotate(45)',
       }
     }

app/components/selection/distance.element.js

@@ -20,8 +20,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` : 'auto')
+    this.style.setProperty('--right', q === 'left' ? `${x-window.scrollX}px` : 'auto')
+    this.style.setProperty('--left', q !== 'left' ? `${x+window.scrollX}px` : 'auto')
     this.style.setProperty('--direction', v ? 'column' : 'row')
     this.style.setProperty('--quadrant', q)
 

app/components/selection/gridlines.element.js

@@ -22,6 +22,8 @@ export class Gridlines extends HTMLElement {
     const { winHeight, winWidth } = windowBounds()
     const [svg] = this.$shadow.children
     const [rect,line1,line2,line3,line4] = svg.children
+    top = top + window.scrollY
+    left = left + window.scrollX
 
     this.$shadow.host.style.display = 'block'
 
@@ -33,18 +35,17 @@ export class Gridlines extends HTMLElement {
     line1.setAttribute('x2', left)
     line2.setAttribute('x1', left + width)
     line2.setAttribute('x2', left + width)
-    line3.setAttribute('y1', top + window.scrollY)
-    line3.setAttribute('y2', top + window.scrollY)
-    line3.setAttribute('x2', winWidth)
-    line4.setAttribute('y1', top + window.scrollY + height)
-    line4.setAttribute('y2', top + window.scrollY + height)
-    line4.setAttribute('x2', winWidth)
+    line3.setAttribute('y1', top)
+    line3.setAttribute('y2', top)
+    line3.setAttribute('x2', left + winWidth)
+    line4.setAttribute('y1', top + height)
+    line4.setAttribute('y2', top + height)
+    line4.setAttribute('x2', left + winWidth)
   }
 
   render({ x, y, width, height, top, left }) {
     const { winWidth, winHeight } = windowBounds()
-    const { offsetHeight } = document.body
-    const calced_y = y + window.scrollY
+    const { offsetHeight, offsetWidth } = document.body
 
     return `
       <svg
@@ -60,8 +61,8 @@ export class Gridlines extends HTMLElement {
         ></rect>
         <line x1="${x}" y1="0" x2="${x}" y2="${offsetHeight}"></line>
         <line x1="${x + width}" y1="0" x2="${x + width}" y2="${offsetHeight}"></line>
-        <line x1="0" y1="${calced_y}" x2="${winWidth}" y2="${calced_y}"></line>
-        <line x1="0" y1="${calced_y + height}" x2="${winWidth}" y2="${calced_y + height}"></line>
+        <line x1="0" y1="${y}" x2="${winWidth}" y2="${y}"></line>
+        <line x1="0" y1="${y + height}" x2="${winWidth}" y2="${y + height}"></line>
       </svg>
     `
   }

app/components/selection/handles.element.js

@@ -58,8 +58,8 @@ export class Handles extends HTMLElement {
   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 + (isFixed ? 0 : window.scrollY)}px`)
-    this.style.setProperty('--left', `${left}px`)
+    this.style.setProperty('--top', `${top+window.scrollY}px`)
+    this.style.setProperty('--left', `${left+window.scrollX}px`)
     this.style.setProperty('--position', isFixed ? 'fixed' : 'absolute')
 
     return `

app/components/selection/hover.element.js

@@ -9,8 +9,8 @@ export class Hover extends Handles {
   }
 
   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('--top', `${top + window.scrollY}px`)
+    this.style.setProperty('--left', `${left + window.scrollX}px`)
     this.style.setProperty('--position', isFixed ? 'fixed' : 'absolute')
 
     return `

app/components/selection/label.element.js

@@ -56,7 +56,7 @@ export class Label extends HTMLElement {
 
   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('--left', `${boundingRect.x + window.scrollX - 1}px`)
     this.style.setProperty('--max-width', `${boundingRect.width + (window.innerWidth - boundingRect.x - boundingRect.width - 20)}px`)
     this.style.setProperty('--position', isFixed ? 'fixed' : 'absolute');
   }

app/components/selection/overlay.element.js

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

app/components/styles.store.js

@@ -1,17 +1,18 @@
 import 'construct-style-sheets-polyfill'
 
-import { default as visbug_css }     from './vis-bug/vis-bug.element.css'
-import { default as handle_css }     from './selection/handles.element.css'
-import { default as hover_css }      from './selection/hover.element.css'
-import { default as corners_css }    from './selection/corners.element.css'
-import { default as distance_css }   from './selection/distance.element.css'
-import { default as gridline_css }   from './selection/gridlines.element.css'
-import { default as label_css }      from './selection/label.element.css'
-import { default as overlay_css }    from './selection/overlay.element.css'
-import { default as boxmodel_css }   from './selection/box-model.element.css'
-import { default as metatip_css }    from './metatip/metatip.element.css'
-import { default as hotkeymap_css }  from './hotkey-map/base.element.css'
-import { default as grip_css }       from './selection/grip.element.css'
+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 handle_css }           from './selection/handles.element.css'
+import { default as hover_css }            from './selection/hover.element.css'
+import { default as corners_css }          from './selection/corners.element.css'
+import { default as distance_css }         from './selection/distance.element.css'
+import { default as gridline_css }         from './selection/gridlines.element.css'
+import { default as label_css }            from './selection/label.element.css'
+import { default as overlay_css }          from './selection/overlay.element.css'
+import { default as boxmodel_css }         from './selection/box-model.element.css'
+import { default as metatip_css }          from './metatip/metatip.element.css'
+import { default as hotkeymap_css }        from './hotkey-map/base.element.css'
+import { default as grip_css }             from './selection/grip.element.css'
 
 import { default as light_css }            from './_variables_light.css'
 import { default as visbug_light_css }     from './vis-bug/vis-bug.element_light.css'
@@ -29,6 +30,7 @@ const constructStylesheet = (styles, stylesheet = new CSSStyleSheet()) => {
 }
 
 export const VisBugStyles    = constructStylesheet(visbug_css)
+export const ArtboardStyles  = constructStylesheet(visbug_artboard_css)
 export const HandleStyles    = constructStylesheet(handle_css)
 export const HoverStyles     = constructStylesheet(hover_css)
 export const CornerStyles    = constructStylesheet(corners_css)

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

@@ -0,0 +1,21 @@
+html {
+  display: grid;
+  grid: auto / 100vw;
+  place-content: center;
+  background-color: Canvas !important;
+  overflow: scroll !important;
+}
+
+body {
+  min-height: 100vh;
+  outline: 1px solid ButtonFace;
+  box-shadow: 0 2px 5px hsl(0 0% 0% / 25%) !important;
+  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
+  ;
+}

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

@@ -1,7 +1,3 @@
-body {
-  min-height: 100vh;
-}
-
 body:not([testing]) [data-selected=true] {
   transition: all 0.15s ease;
 }

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 {
@@ -55,6 +55,9 @@ 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])
   }
 
@@ -65,10 +68,19 @@ export default class VisBug extends HTMLElement {
     hotkeys.unbind(
       Object.keys(this.toolbar_model).reduce((events, key) =>
         events += ',' + key, ''))
-    hotkeys.unbind(`${metaKey}+/`)
+    hotkeys.unbind(`${metaKey}+/,${metaKey}+.`)
+
+    if (this.getAttribute('viewmode') == 'artboard')
+      Zoom.stop()
   }
 
+  static get observedAttributes() { return ['viewmode','color-scheme'] }
+
   attributeChangedCallback(name, oldValue, newValue) {
+    newValue === 'artboard'
+      ? Zoom.start(this.selectorEngine)
+      : Zoom.stop()
+
     if (name === 'color-scheme')
       this.applyScheme(newValue)
   }
@@ -80,6 +92,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')
@@ -114,8 +130,6 @@ export default class VisBug extends HTMLElement {
       .filter(node => node.nodeName.includes('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,15 @@
+const metaKey = window.navigator.platform.includes('Mac')
+  ? 'cmd'
+  : 'ctrl'
+
+document.firstElementChild.prepend(document.querySelector('vis-bug'))
+
+if ('ontouchstart' in document.documentElement)
+  document.getElementById('mobile-info').style.display = ''
+
+if (metaKey === 'ctrl')
+  [...document.querySelectorAll('kbd')]
+    .forEach(node => {
+      node.textContent = node.textContent.replace('cmd','ctrl')
+      node.textContent = node.textContent.replace('opt','alt')
+    })

app/demo/index.css

@@ -52,7 +52,6 @@ html[light] {
 
 body {
   margin: 0;
-  padding-left: 4rem;
   background: var(--dark-grey);
   color: var(--lighter-grey);
   font-family: system-ui;

app/features/accessibility.js

@@ -53,7 +53,7 @@ const mouseMove = e => {
 export function showTip(target, e) {
   if (!state.active.tip) { // create
     const tip = render(target)
-    document.body.appendChild(tip)
+    document.body.insertAdjacentElement('afterend', tip)
 
     positionTip(tip, e)
     observe({tip, target})

app/features/guides.js

@@ -47,7 +47,7 @@ export function createGuide(vert = true) {
     z-index: 2147483643;
   `
 
-  vert 
+  vert
     ? styles += `
         width: 1px;
         height: 100vh;
@@ -97,11 +97,11 @@ const showGridlines = node => {
     state.gridlines = document.createElement('visbug-gridlines')
     state.gridlines.position = node.getBoundingClientRect()
 
-    document.body.appendChild(state.gridlines)
+    document.body.insertAdjacentElement('afterend', state.gridlines)
   }
 }
 
-const hideGridlines = () => {
+export const hideGridlines = () => {
   if (!state.gridlines) return
   state.gridlines.style.display = 'none'
 }

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

@@ -139,7 +139,7 @@ export function createMeasurements({$anchor, $target}) {
         node_label_id:  state.distances.length,
       }
 
-      document.body.appendChild($measurement)
+      document.body.insertAdjacentElement('afterend', $measurement)
       state.distances[state.distances.length] = $measurement
     })
 }

app/features/metatip.js

@@ -63,7 +63,7 @@ const mouseMove = e => {
 export function showTip(target, e) {
   if (!state.active.tip) { // create
     const tip = render(target)
-    document.body.appendChild(tip)
+    document.body.insertAdjacentElement('afterend', tip)
 
     positionTip(tip, e)
     observe({tip, target})

app/features/selectable.js

@@ -139,6 +139,10 @@ export function Selectable(visbug) {
 
         did_hide = false
       }
+
+      if (!e.metaKey) {
+        document.body.style.cursor = ''
+      }
     }
   }
 
@@ -602,7 +606,7 @@ export function Selectable(visbug) {
         isFixed: isFixed(el),
       }
 
-      document.body.appendChild(label)
+      document.body.insertAdjacentElement('afterend', label)
 
       $(label).on('query', ({detail}) => {
         if (!detail.text) return
@@ -635,7 +639,7 @@ export function Selectable(visbug) {
 
       handle.position = { el, node_label_id: id }
 
-      document.body.appendChild(handle)
+      document.body.insertAdjacentElement('afterend', handle)
 
       handles[handles.length] = handle
       return handle
@@ -648,7 +652,7 @@ export function Selectable(visbug) {
         hover_state.element.remove()
 
       hover_state.element = document.createElement('visbug-hover')
-      document.body.appendChild(hover_state.element)
+      document.body.insertAdjacentElement('afterend',hover_state.element)
       hover_state.element.position = {el}
 
       return hover_state.element
@@ -661,7 +665,7 @@ export function Selectable(visbug) {
         hover_state.label.remove()
 
       hover_state.label = document.createElement('visbug-label')
-      document.body.appendChild(hover_state.label)
+      document.body.insertAdjacentElement('afterend', hover_state.label)
 
       hover_state.label.text = text
       hover_state.label.position = {
@@ -682,7 +686,7 @@ export function Selectable(visbug) {
         hover_state.element.remove()
 
       hover_state.element = document.createElement('visbug-corners')
-      document.body.appendChild(hover_state.element)
+      document.body.insertAdjacentElement('afterend', hover_state.element)
       hover_state.element.position = {el}
 
       return hover_state.element