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;