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