diff --git a/package.json b/package.json index f53a15f..8189c26 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "konva-inspector", - "version": "0.0.6", + "version": "0.0.7", "description": "Devtools for your Konva App", "license": "MIT", "repository": { diff --git a/src/pages/panel/components/Element.tsx b/src/pages/panel/components/Element.tsx index 86a80f9..9e609b5 100644 --- a/src/pages/panel/components/Element.tsx +++ b/src/pages/panel/components/Element.tsx @@ -39,7 +39,8 @@ export default function Element({ }; const shouldHighlight = - searchText.length && node.className.startsWith(searchText); + searchText.length && + node.className.toLowerCase().startsWith(searchText.toLowerCase()); return ( <>
{ const [alwaysInspect, setAlwaysInspect] = useState(false); const [isDarkMode, setIsDarkMode] = useState(false); + // Handle dark theme useEffect(() => { chrome.storage.session.get(["isDarkMode"]).then((res) => { if ("isDarkMode" in res) { @@ -31,6 +32,7 @@ const Panel: React.FC = () => { }); }, []); + // handle tree useEffect(() => { getStageTree(); @@ -43,6 +45,7 @@ const Panel: React.FC = () => { }; }, []); + // handle host app reload useEffect(() => { function handleReload() { setTrees([]); @@ -59,6 +62,7 @@ const Panel: React.FC = () => { }; }, []); + // handle always inspect useEffect(() => { if (alwaysInspect) { // TODO: handle multi stages @@ -125,7 +129,9 @@ const Panel: React.FC = () => { setActiveNode(data); if (data) { alwaysInspect && - document.getElementById(data._id.toString()).scrollIntoView(); + document.getElementById(data._id.toString()).scrollIntoView({ + behavior: "smooth", + }); } else { setAlwaysInspect(false); } diff --git a/src/pages/panel/devtools/konvaDevtoolsOverlay.ts b/src/pages/panel/devtools/konvaDevtoolsOverlay.ts index 0109928..4ef5145 100644 --- a/src/pages/panel/devtools/konvaDevtoolsOverlay.ts +++ b/src/pages/panel/devtools/konvaDevtoolsOverlay.ts @@ -24,20 +24,50 @@ export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) { overlayEl = document.createElement("div"); overlayEl.style.backgroundColor = "rgba(0, 161, 255, 0.3)"; + overlayEl.style.zIndex = "99999999999"; + overlayEl.style.fontFamily = + "SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace"; Object.assign(overlayEl.style, { ...position("0", "0", "0", "0"), pointerEvents: "none", transformOrigin: "top left", }); + const tooltip = document.createElement("div"); + tooltip.style.backgroundColor = "rgba(0, 0, 0, 0.8)"; + tooltip.style.position = "absolute"; + tooltip.style.top = "-35px"; + tooltip.style.left = "0"; + tooltip.style.display = "flex"; + tooltip.style.gap = "5px"; + tooltip.style.color = "white"; + tooltip.style.padding = "4px 8px"; + tooltip.style.borderRadius = "4px"; + tooltip.style.width = "max-content"; + + const leftTooltip = document.createElement("div"); + leftTooltip.style.color = "#61dafb"; + + const separator = document.createElement("div"); + separator.textContent = "|"; + + const rightTooltip = document.createElement("div"); + + tooltip.append(leftTooltip); + tooltip.append(separator); + tooltip.append(rightTooltip); + overlayEl.appendChild(tooltip); document.body.appendChild(overlayEl); + function calibrateOverlay() { const content = devtools.content(stageIndex); const contentBounds = content.getBoundingClientRect(); const stage = devtools.stage(stageIndex); + const scrollX = window.pageXOffset || document.documentElement.scrollLeft; + const scrollY = window.pageYOffset || document.documentElement.scrollTop; overlayEl.style.transform = `translate(${ - contentBounds.x + stage.x() - }px, ${contentBounds.y + stage.y()}px)`; + contentBounds.x + stage.x() + scrollX + }px, ${contentBounds.y + stage.y() + scrollY}px)`; } let throttle = 0; @@ -52,6 +82,13 @@ export default function konvaDevtoolsOverlay(devtools: KonvaDevtools) { overlayEl.style.width = rect.width.toString() + "px"; overlayEl.style.height = rect.height.toString() + "px"; + leftTooltip.textContent = node.getClassName(); + rightTooltip.textContent = `${rect.width.toFixed( + 2 + )}px x ${rect.height.toFixed(2)}px (${rect.x.toFixed( + 2 + )}, ${rect.y.toFixed(2)})`; + if (throttle <= 0) { calibrateOverlay(); throttle = 15;