Skip to content

Commit

Permalink
fix: wrong position of canvas is scrollable
Browse files Browse the repository at this point in the history
  • Loading branch information
maitrungduc1410 committed Jun 5, 2023
1 parent f23bd50 commit 82e22b2
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 5 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "konva-inspector",
"version": "0.0.6",
"version": "0.0.7",
"description": "Devtools for your Konva App",
"license": "MIT",
"repository": {
Expand Down
3 changes: 2 additions & 1 deletion src/pages/panel/components/Element.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
<div
Expand Down
8 changes: 7 additions & 1 deletion src/pages/panel/components/Panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const Panel: React.FC = () => {
const [alwaysInspect, setAlwaysInspect] = useState<boolean>(false);
const [isDarkMode, setIsDarkMode] = useState<boolean>(false);

// Handle dark theme
useEffect(() => {
chrome.storage.session.get(["isDarkMode"]).then((res) => {
if ("isDarkMode" in res) {
Expand All @@ -31,6 +32,7 @@ const Panel: React.FC = () => {
});
}, []);

// handle tree
useEffect(() => {
getStageTree();

Expand All @@ -43,6 +45,7 @@ const Panel: React.FC = () => {
};
}, []);

// handle host app reload
useEffect(() => {
function handleReload() {
setTrees([]);
Expand All @@ -59,6 +62,7 @@ const Panel: React.FC = () => {
};
}, []);

// handle always inspect
useEffect(() => {
if (alwaysInspect) {
// TODO: handle multi stages
Expand Down Expand Up @@ -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);
}
Expand Down
41 changes: 39 additions & 2 deletions src/pages/panel/devtools/konvaDevtoolsOverlay.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 82e22b2

Please sign in to comment.