diff --git a/app/components/selection/distance.element.js b/app/components/selection/distance.element.js
index 2a984542..8b77b5c2 100644
--- a/app/components/selection/distance.element.js
+++ b/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`)
diff --git a/app/components/selection/offscreenLabel.element.js b/app/components/selection/offscreenLabel.element.js
index b45eb4db..552a7599 100644
--- a/app/components/selection/offscreenLabel.element.js
+++ b/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'
})
-}
\ No newline at end of file
+}
diff --git a/app/components/selection/overlay.element.js b/app/components/selection/overlay.element.js
index af84dd0d..e72072fb 100644
--- a/app/components/selection/overlay.element.js
+++ b/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')
diff --git a/app/components/styles.store.js b/app/components/styles.store.js
index 89c5f07c..2a6c78df 100644
--- a/app/components/styles.store.js
+++ b/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)
diff --git a/app/components/vis-bug/vis-bug.artboard.css b/app/components/vis-bug/vis-bug.artboard.css
new file mode 100644
index 00000000..14003d53
--- /dev/null
+++ b/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;
+}
diff --git a/app/components/vis-bug/vis-bug.element.js b/app/components/vis-bug/vis-bug.element.js
index 82a82cab..a21b7608 100644
--- a/app/components/vis-bug/vis-bug.element.js
+++ b/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'))
diff --git a/app/demo.js b/app/demo.js
new file mode 100644
index 00000000..939393c2
--- /dev/null
+++ b/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')
+ })
diff --git a/app/features/accessibility.js b/app/features/accessibility.js
index 1049519e..7de3f1d8 100644
--- a/app/features/accessibility.js
+++ b/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})
diff --git a/app/features/guides.js b/app/features/guides.js
index 4431d9cf..d454b1c2 100644
--- a/app/features/guides.js
+++ b/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'
}
diff --git a/app/features/imageswap.js b/app/features/imageswap.js
index 268cbddb..4dae48e0 100644
--- a/app/features/imageswap.js
+++ b/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])
}
}
diff --git a/app/features/index.js b/app/features/index.js
index 2af5becf..1cbfe207 100644
--- a/app/features/index.js
+++ b/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'
diff --git a/app/features/measurements.js b/app/features/measurements.js
index 76270f25..38a8c443 100644
--- a/app/features/measurements.js
+++ b/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
})
diff --git a/app/features/metatip.js b/app/features/metatip.js
index 6461366b..3181c4e7 100644
--- a/app/features/metatip.js
+++ b/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()
diff --git a/app/features/move.js b/app/features/move.js
index d38f9e32..553aa09e 100644
--- a/app/features/move.js
+++ b/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}
diff --git a/app/features/selectable.js b/app/features/selectable.js
index 71d48879..746b07c6 100644
--- a/app/features/selectable.js
+++ b/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
diff --git a/app/features/zoom.js b/app/features/zoom.js
new file mode 100644
index 00000000..1e94f78e
--- /dev/null
+++ b/app/features/zoom.js
@@ -0,0 +1,242 @@
+import { metaKey } from '../utilities/'
+import { hideGridlines } from './guides'
+import { ArtboardStyles } from '../components/styles.store'
+
+const MIN_SCALE = 0.05
+const MAX_SCALE = 8
+const STEP = 0.1
+
+const state = {
+ active: false,
+ baseTransform: 'none',
+ generation: 0,
+ originalBodyCursor: '',
+ originalBodyTransform: '',
+ originalBodyTransformOrigin: '',
+ originalScroll: {left: 0, top: 0},
+ originalStyleSheets: null,
+ pageShowHandler: null,
+ resizeObserver: null,
+ scale: 1,
+ selectionStash: null,
+ selectorEngine: null,
+ translate: {x: 0, y: 0},
+ mouse: {x: 0, y: 0},
+}
+
+const clamp = value => Math.min(MAX_SCALE, Math.max(MIN_SCALE, value))
+
+const transformFor = (scale, translate = state.translate) =>
+ `translate(${translate.x}px, ${translate.y}px) ${state.baseTransform === 'none' ? '' : `${state.baseTransform} `}scale(${scale})`.trim()
+
+const selectedNodes = () =>
+ state.selectorEngine ? [...state.selectorEngine.selection()] : []
+
+const restoreSelection = nodes => {
+ if (!state.selectorEngine) return
+
+ nodes
+ .filter(node => node.isConnected)
+ .reverse()
+ .forEach(node => state.selectorEngine.select(node))
+}
+
+const applyScale = async (nextScale, origin = state.mouse, resetTranslation = false) => {
+ if (!state.active) return
+
+ const body = document.body
+ const previousScale = state.scale
+ const previousTranslate = {...state.translate}
+ const scrollPosition = {left: window.scrollX, top: window.scrollY}
+ const rect = body.getBoundingClientRect()
+ const localPoint = {
+ x: (origin.x - rect.left) / previousScale,
+ y: (origin.y - rect.top) / previousScale,
+ }
+ if (!state.selectionStash)
+ state.selectionStash = selectedNodes()
+
+ state.scale = clamp(nextScale)
+ state.translate = resetTranslation
+ ? {x: 0, y: 0}
+ : {
+ x: previousTranslate.x + localPoint.x * (previousScale - state.scale),
+ y: previousTranslate.y + localPoint.y * (previousScale - state.scale),
+ }
+ if (state.selectorEngine && state.selectorEngine.selection().length)
+ state.selectorEngine.unselect_all({silent: true})
+ hideGridlines()
+
+ body.style.transformOrigin = '0 0'
+ body.style.transform = transformFor(state.scale)
+ const generation = ++state.generation
+ await new Promise(resolve => requestAnimationFrame(resolve))
+ if (generation !== state.generation) return
+
+ window.scrollTo({...scrollPosition, behavior: 'auto'})
+ restoreSelection(state.selectionStash)
+ state.selectionStash = null
+}
+
+export const zoomIn = (amount = STEP) =>
+ applyScale(state.scale + amount)
+
+export const zoomOut = (amount = STEP) =>
+ applyScale(state.scale - amount)
+
+export const zoomToFit = async () => {
+ if (!state.active) return
+
+ const body = document.body
+ const widthScale = window.innerWidth * 0.9 / body.scrollWidth
+ const heightScale = window.innerHeight * 0.9 / body.scrollHeight
+
+ await applyScale(Math.min(widthScale, heightScale), {
+ x: window.innerWidth / 2,
+ y: window.innerHeight / 2,
+ })
+}
+
+export const zoomToHomebase = async () => {
+ if (!state.active) return
+
+ await applyScale(1, {
+ x: window.innerWidth / 2,
+ y: window.innerHeight / 2,
+ }, true)
+ centerCanvas()
+}
+
+const isMetaKey = event => event[`${metaKey}Key`] || event.metaKey
+
+const handleKeydown = event => {
+ if (!isMetaKey(event)) return
+
+ const action = {
+ '=': zoomIn,
+ '+': zoomIn,
+ '-': zoomOut,
+ '0': zoomToHomebase,
+ '9': zoomToFit,
+ }[event.key]
+
+ if (!action) return
+ event.preventDefault()
+ action()
+}
+
+const handleWheel = event => {
+ if (!isMetaKey(event)) return
+
+ event.preventDefault()
+ state.mouse = {x: event.clientX, y: event.clientY}
+ document.body.style.cursor = event.deltaY < 0 ? 'zoom-in' : 'zoom-out'
+
+ const amount = Math.min(0.5, Math.max(0.02, Math.abs(event.deltaY) * 0.002))
+ event.deltaY < 0 ? zoomIn(amount) : zoomOut(amount)
+}
+
+const handleMousemove = event => {
+ state.mouse = {x: event.clientX, y: event.clientY}
+}
+
+const handleKeyup = event => {
+ if (!isMetaKey(event)) document.body.style.cursor = state.originalBodyCursor
+}
+
+const updateCanvasSize = () => {
+ if (!state.active) return
+
+ const html = document.documentElement
+ const body = document.body
+ const width = Math.max(body.scrollWidth, body.offsetWidth)
+ const height = Math.max(body.scrollHeight, body.offsetHeight)
+
+ html.style.setProperty('--visbug-artboard-width', `${width}px`)
+ html.style.setProperty('--visbug-artboard-height', `${height}px`)
+ html.style.setProperty('--visbug-artboard-canvas-width', `${Math.max(window.innerWidth, width * 2.5)}px`)
+ html.style.setProperty('--visbug-artboard-canvas-height', `${Math.max(window.innerHeight, window.innerHeight + height * 1.75)}px`)
+}
+
+const centerCanvas = () => window.scrollTo({
+ left: (document.documentElement.scrollWidth - window.innerWidth) / 2,
+ top: (document.documentElement.scrollHeight - window.innerHeight) / 2,
+ behavior: 'auto',
+})
+
+const start = selectorEngine => {
+ state.selectorEngine = selectorEngine
+ if (state.active || !document.body) return
+
+ state.active = true
+ state.scale = 1
+ state.baseTransform = getComputedStyle(document.body).transform
+ state.originalBodyCursor = document.body.style.cursor
+ state.originalBodyTransform = document.body.style.transform
+ state.originalBodyTransformOrigin = document.body.style.transformOrigin
+ state.originalScroll = {left: window.scrollX, top: window.scrollY}
+ state.originalStyleSheets = [...document.adoptedStyleSheets]
+ document.adoptedStyleSheets = [...state.originalStyleSheets, ArtboardStyles]
+ document.documentElement.setAttribute('data-visbug-artboard', '')
+ updateCanvasSize()
+
+ window.addEventListener('keydown', handleKeydown)
+ window.addEventListener('keyup', handleKeyup)
+ window.addEventListener('wheel', handleWheel, {passive: false})
+ window.addEventListener('mousemove', handleMousemove, {passive: true})
+ window.addEventListener('resize', updateCanvasSize)
+ state.resizeObserver = new ResizeObserver(updateCanvasSize)
+ state.resizeObserver.observe(document.body)
+
+ centerCanvas()
+ if (document.readyState !== 'complete') {
+ state.pageShowHandler = centerCanvas
+ window.addEventListener('pageshow', state.pageShowHandler, {once: true})
+ }
+}
+
+const stop = () => {
+ if (!state.active) return
+
+ state.active = false
+ state.generation++
+ window.removeEventListener('keydown', handleKeydown)
+ window.removeEventListener('keyup', handleKeyup)
+ window.removeEventListener('wheel', handleWheel)
+ window.removeEventListener('mousemove', handleMousemove)
+ window.removeEventListener('resize', updateCanvasSize)
+ state.resizeObserver && state.resizeObserver.disconnect()
+ state.resizeObserver = null
+ state.pageShowHandler && window.removeEventListener('pageshow', state.pageShowHandler)
+ state.pageShowHandler = null
+
+ document.body.style.transform = state.originalBodyTransform
+ document.body.style.transformOrigin = state.originalBodyTransformOrigin
+ document.body.style.cursor = state.originalBodyCursor
+ document.documentElement.removeAttribute('data-visbug-artboard')
+ for (const property of [
+ '--visbug-artboard-width',
+ '--visbug-artboard-height',
+ '--visbug-artboard-canvas-width',
+ '--visbug-artboard-canvas-height',
+ ]) document.documentElement.style.removeProperty(property)
+
+ document.adoptedStyleSheets = [...document.adoptedStyleSheets]
+ .filter(sheet => sheet !== ArtboardStyles)
+ window.scrollTo({...state.originalScroll, behavior: 'auto'})
+
+ if (state.selectionStash)
+ restoreSelection(state.selectionStash)
+
+ state.originalStyleSheets = null
+ state.originalBodyCursor = ''
+ state.originalBodyTransform = ''
+ state.originalBodyTransformOrigin = ''
+ state.originalScroll = {left: 0, top: 0}
+ state.selectorEngine = null
+ state.scale = 1
+ state.selectionStash = null
+ state.translate = {x: 0, y: 0}
+}
+
+export const Zoom = {start, stop}
diff --git a/app/features/zoom.test.js b/app/features/zoom.test.js
new file mode 100644
index 00000000..dfb10bae
--- /dev/null
+++ b/app/features/zoom.test.js
@@ -0,0 +1,46 @@
+import test from 'ava'
+import { setupPptrTab, teardownPptrTab, pptrMetaKey } from '../../tests/helpers.js'
+
+test.beforeEach(setupPptrTab)
+
+test('Artboard mode zooms and restores the document', async t => {
+ const {page} = t.context
+
+ await page.evaluate(() => {
+ document.documentElement.style.setProperty('--site-owned-value', 'kept')
+ document.querySelector('vis-bug').setAttribute('viewmode', 'artboard')
+ })
+
+ t.true(await page.$eval('html', html => html.hasAttribute('data-visbug-artboard')))
+
+ const metaKey = await pptrMetaKey(page)
+ await page.keyboard.down(metaKey)
+ await page.keyboard.press('=')
+ await page.keyboard.up(metaKey)
+ await new Promise(resolve => setTimeout(resolve, 180))
+
+ const transform = await page.$eval('body', body => getComputedStyle(body).transform)
+ t.not(transform, 'none')
+
+ await page.click('[intro] h1')
+ await page.keyboard.down(metaKey)
+ await page.keyboard.press('=')
+ await page.keyboard.press('=')
+ await page.keyboard.up(metaKey)
+ await new Promise(resolve => setTimeout(resolve, 50))
+ t.true(await page.$eval('[intro] h1', node => node.hasAttribute('data-selected')))
+
+ await page.$eval('vis-bug', visbug => visbug.setAttribute('viewmode', 'document'))
+
+ const restored = await page.evaluate(() => ({
+ artboard: document.documentElement.hasAttribute('data-visbug-artboard'),
+ siteValue: document.documentElement.style.getPropertyValue('--site-owned-value'),
+ transform: getComputedStyle(document.body).transform,
+ }))
+
+ t.false(restored.artboard)
+ t.is(restored.siteValue, 'kept')
+ t.is(restored.transform, 'none')
+})
+
+test.afterEach.always(teardownPptrTab)
diff --git a/app/index.html b/app/index.html
index 3b1a0eb0..72d51827 100644
--- a/app/index.html
+++ b/app/index.html
@@ -25,7 +25,7 @@
-
+
@@ -742,6 +742,7 @@
+
+