import {
attachTooltipToHighlight,
createHighlight,
getElementsPositionInDocument,
positionHighlight
} from "./utils/highlight.js";
import { createWindowElement } from "./utils/window.js";
const icon = '';
var xray_default = {
id: "astro:xray",
name: "Inspect",
icon,
init(canvas, eventTarget) {
let islandsOverlays = [];
addIslandsOverlay();
document.addEventListener("astro:after-swap", addIslandsOverlay);
document.addEventListener("astro:page-load", refreshIslandsOverlayPositions);
function onPageClick(event) {
const target = event.target;
if (!target)
return;
if (!target.closest)
return;
if (target.closest("astro-dev-toolbar"))
return;
event.preventDefault();
event.stopPropagation();
eventTarget.dispatchEvent(
new CustomEvent("toggle-app", {
detail: {
state: false
}
})
);
}
eventTarget.addEventListener("app-toggled", (event) => {
if (event.detail.state === true) {
document.addEventListener("click", onPageClick, true);
} else {
document.removeEventListener("click", onPageClick, true);
}
});
function addIslandsOverlay() {
islandsOverlays.forEach(({ highlightElement }) => {
highlightElement.remove();
});
islandsOverlays = [];
const islands = document.querySelectorAll("astro-island");
if (islands.length === 0) {
const window2 = createWindowElement(
`
It looks like there are no interactive component islands on this page. Did you forget to add a client directive to your interactive UI component?
` ); canvas.append(window2); return; } islands.forEach((island) => { const computedStyle = window.getComputedStyle(island); const islandElement = island.children[0] || island; if (islandElement.offsetParent === null || computedStyle.display === "none") { return; } const rect = islandElement.getBoundingClientRect(); const highlight = createHighlight(rect); const tooltip = buildIslandTooltip(island); const { isFixed } = getElementsPositionInDocument(islandElement); if (isFixed) { tooltip.style.position = highlight.style.position = "fixed"; } attachTooltipToHighlight(highlight, tooltip, islandElement); canvas.append(highlight); islandsOverlays.push({ highlightElement: highlight, island: islandElement }); }); ["scroll", "resize"].forEach((event) => { window.addEventListener(event, refreshIslandsOverlayPositions); }); } function refreshIslandsOverlayPositions() { islandsOverlays.forEach(({ highlightElement, island: islandElement }) => { const rect = islandElement.getBoundingClientRect(); positionHighlight(highlightElement, rect); }); } function buildIslandTooltip(island) { const tooltip = document.createElement("astro-dev-toolbar-tooltip"); tooltip.sections = []; const islandProps = island.getAttribute("props") ? JSON.parse(island.getAttribute("props")) : {}; const islandClientDirective = island.getAttribute("client"); if (islandClientDirective) { tooltip.sections.push({ title: "Client directive", inlineTitle: `client:${islandClientDirective}
`
});
}
const islandPropsEntries = Object.entries(islandProps).filter(
(prop) => !prop[0].startsWith("data-astro-cid-")
);
if (islandPropsEntries.length > 0) {
tooltip.sections.push({
title: "Props",
content: `${JSON.stringify(
Object.fromEntries(islandPropsEntries.map((prop) => [prop[0], prop[1][1]])),
void 0,
2
)}
`
});
}
const islandComponentPath = island.getAttribute("component-url");
if (islandComponentPath) {
tooltip.sections.push({
content: islandComponentPath,
clickDescription: "Click to go to file",
async clickAction() {
await fetch(
"/__open-in-editor?file=" + encodeURIComponent(
window.__astro_dev_toolbar__.root + islandComponentPath.slice(1)
)
);
}
});
}
return tooltip;
}
}
};
export {
xray_default as default
};