From b52ba6cb68eda5e4cb59063a51ad13bf8655d7e1 Mon Sep 17 00:00:00 2001 From: Ignatius Bagus Date: Mon, 25 Sep 2023 17:45:58 +0700 Subject: [PATCH 1/2] feat: overhaul element highlighter --- src/client/highlight.js | 171 +++++++++------------------------------- 1 file changed, 37 insertions(+), 134 deletions(-) diff --git a/src/client/highlight.js b/src/client/highlight.js index 787875b..fde12ef 100644 --- a/src/client/highlight.js +++ b/src/client/highlight.js @@ -1,148 +1,51 @@ -// @ts-nocheck - const dom = { area: document.createElement('div'), x: document.createElement('div'), y: document.createElement('div'), }; -Object.assign(dom.area.style, { - position: 'fixed', - backgroundColor: 'rgba(0, 136, 204, 0.2)', - zIndex: '2147483647', - pointerEvents: 'none', -}); - -Object.assign(dom.x.style, { - position: 'fixed', - borderStyle: 'dashed', - borderColor: 'rgb(0, 136, 204)', - borderWidth: '1px 0', - zIndex: '2147483647', - left: '0', - width: '100vw', - pointerEvents: 'none', -}); - -Object.assign(dom.y.style, { - position: 'fixed', - borderStyle: 'dashed', - borderColor: 'rgb(0, 136, 204)', - borderWidth: '0 1px', - zIndex: '2147483647', - top: '0', - height: '100vh', - pointerEvents: 'none', -}); - -function getOffset(element) { - const styles = getComputedStyle(element); - const margin = { - top: Math.max(parseInt(styles.marginTop), 0), - right: Math.max(parseInt(styles.marginRight), 0), - bottom: Math.max(parseInt(styles.marginBottom), 0), - left: Math.max(parseInt(styles.marginLeft), 0), - }; - - const rect = { - width: element.offsetWidth + margin.right + margin.left, - height: element.offsetHeight + margin.top + margin.bottom, - top: element.offsetTop - margin.top, - left: element.offsetLeft - margin.left, - }; - - let parent = element; - while ((parent = parent.offsetParent || parent.ownerDocument.defaultView.frameElement)) { - rect.top += parent.offsetTop; - rect.left += parent.offsetLeft; - } - - parent = element; - while ((parent = parent.parentElement || parent.ownerDocument.defaultView.frameElement)) { - rect.top -= parent.scrollTop; - rect.left -= parent.scrollLeft; - } - - rect.right = rect.left + rect.width; - rect.bottom = rect.top + rect.height; - - return rect; -} - -function getBoundingRect(node) { - if (node.type == 'element') return getOffset(node.detail); - - const union = { - top: Infinity, - left: Infinity, - bottom: -Infinity, - right: -Infinity, - }; - - for (const child of node.children) { - const rect = getBoundingRect(child); - if (rect.top < union.top) union.top = rect.top; - if (rect.left < union.left) union.left = rect.left; - if (rect.bottom > union.bottom) union.bottom = rect.bottom; - if (rect.right > union.right) union.right = rect.right; - } - - union.width = union.right - union.left; - union.height = union.bottom - union.top; - - return union; -} - +/** @param {Pick} [node] */ export function highlight(node) { - if (!node) { + if (!node || node.type !== 'element' || !node.detail) { dom.area.remove(); dom.x.remove(); dom.y.remove(); return; } - const box = getBoundingRect(node); - Object.assign(dom.area.style, { - top: box.top + 'px', - left: box.left + 'px', - width: box.width + 'px', - height: box.height + 'px', - }); - document.body.append(dom.area); - - Object.assign(dom.x.style, { - top: box.top + 'px', - height: box.height - 2 + 'px', - }); - document.body.append(dom.x); - - Object.assign(dom.y.style, { - left: box.left + 'px', - width: box.width - 2 + 'px', - }); - document.body.append(dom.y); -} - -let target = null; -function handleMousemove(e) { - target = e.target; - highlight({ type: 'element', detail: target }); -} - -function handleClick() { - stopPicker(); - window.__svelte_devtools_select_element(target); -} - -export function stopPicker() { - document.removeEventListener('mousemove', handleMousemove, true); - highlight(null); -} - -export function startPicker() { - document.addEventListener('mousemove', handleMousemove, true); - document.addEventListener('click', handleClick, { - capture: true, - once: true, - }); + const { clientWidth, scrollHeight } = document.documentElement; + const style = window.getComputedStyle(node.detail); + const rect = node.detail.getBoundingClientRect(); + + // TODO: handle sticky position + const position = style.position === 'fixed' ? 'fixed' : 'absolute'; + const offset = style.position !== 'fixed' ? window.scrollY : 0; + + dom.area.style.setProperty('z-index', '65536'); + dom.area.style.setProperty('background-color', 'rgba(0, 136, 204, 0.2)'); + dom.area.style.setProperty('position', position); + dom.area.style.setProperty('top', `${offset + rect.top}px`); + dom.area.style.setProperty('left', `${rect.left}px`); + dom.area.style.setProperty('width', `${rect.width}px`); + dom.area.style.setProperty('height', `${rect.height}px`); + + dom.x.style.setProperty('z-index', '65536'); + dom.x.style.setProperty('border', '0px dashed rgb(0, 136, 204)'); + dom.x.style.setProperty('border-width', '1px 0px'); + dom.x.style.setProperty('position', position); + dom.x.style.setProperty('top', `${offset + rect.top}px`); + dom.x.style.setProperty('width', `${clientWidth}px`); + dom.x.style.setProperty('height', `${rect.height}px`); + + dom.y.style.setProperty('z-index', '65536'); + dom.y.style.setProperty('border', '0px dashed rgb(0, 136, 204)'); + dom.y.style.setProperty('border-width', '0px 1px'); + dom.y.style.setProperty('position', 'absolute'); + dom.y.style.setProperty('left', `${rect.left}px`); + dom.y.style.setProperty('width', `${rect.width}px`); + dom.y.style.setProperty('height', `${scrollHeight}px`); + + document.body.appendChild(dom.area); + document.body.appendChild(dom.x); + document.body.appendChild(dom.y); } From 3146c9c16facac37e4f859ceea311da8f97cc27b Mon Sep 17 00:00:00 2001 From: Ignatius Bagus Date: Thu, 28 Sep 2023 12:44:37 +0700 Subject: [PATCH 2/2] disable checks, rename, scroll to view --- src/client/index.js | 2 +- src/lib/nodes/Node.svelte | 2 +- src/routes/+layout.svelte | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/client/index.js b/src/client/index.js index d79f4ad..97dd31c 100644 --- a/src/client/index.js +++ b/src/client/index.js @@ -22,7 +22,7 @@ window.addEventListener('message', ({ data, source }) => { if (data.type === 'ext/select') { const node = getNode(data.payload); // @ts-expect-error - saved for `inspect()` - if (node) window.$s = node.detail; + if (node) window.$n = node.detail; } else if (data.type === 'ext/highlight') { const node = getNode(data.payload); return highlight(node); diff --git a/src/lib/nodes/Node.svelte b/src/lib/nodes/Node.svelte index 2e19d19..e33b7cc 100644 --- a/src/lib/nodes/Node.svelte +++ b/src/lib/nodes/Node.svelte @@ -178,7 +178,7 @@ } li :global(> .selected::after) { - content: '== $s'; + content: '== $n'; margin-left: 0.5rem; } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 504892b..538d4da 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -101,8 +101,8 @@