Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-16 21:46:22 -05:00
Code Issues Activity

Ensure dev overlay x-ray highlight goes over the island (#9227)

Browse source 
* Ensure dev overlay x-ray highlight goes over the island

* oops
This commit is contained in:
Matthew Phillips 2023-11-29 08:46:35 -05:00 committed by GitHub
parent 4fe523b006
commit 4b8a42406b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/spicy-starfishes-shake.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Ensure overlay x-ray z-index is higher than the island

13
packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts
View file

@ -15,6 +15,19 @@ export function createHighlight(rect: DOMRect, icon?: Icon) {
return highlight;
}
export function getHighlightZIndex(el: Element) {
let highestZIndex = 0;
let current: Element | ParentNode | null = el;
while(current instanceof Element) {
let zIndex = Number(getComputedStyle(current).zIndex);
if(!Number.isNaN(zIndex) && zIndex > highestZIndex) {
highestZIndex = zIndex;
}
current = current.parentNode;
}
return highestZIndex + 1;
}
export function positionHighlight(highlight: DevOverlayHighlight, rect: DOMRect) {
highlight.style.display = 'block';
// Make an highlight that is 10px bigger than the element on all sides

6
packages/astro/src/runtime/client/dev-overlay/plugins/xray.ts
View file

@ -1,6 +1,6 @@
import type { DevOverlayMetadata, DevOverlayPlugin } from '../../../../@types/astro.js';
import type { DevOverlayHighlight } from '../ui-library/highlight.js';
import { attachTooltipToHighlight, createHighlight, positionHighlight } from './utils/highlight.js';
import { attachTooltipToHighlight, createHighlight, getHighlightZIndex, positionHighlight } from './utils/highlight.js';
const icon =
'<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#fff" d="M7.9 1.5v-.4a1.1 1.1 0 0 1 2.2 0v.4a1.1 1.1 0 1 1-2.2 0Zm-6.4 8.6a1.1 1.1 0 1 0 0-2.2h-.4a1.1 1.1 0 0 0 0 2.2h.4ZM12 3.7a1.1 1.1 0 0 0 1.4-.7l.4-1.1a1.1 1.1 0 0 0-2.1-.8l-.4 1.2a1.1 1.1 0 0 0 .7 1.4Zm-9.7 7.6-1.2.4a1.1 1.1 0 1 0 .8 2.1l1-.4a1.1 1.1 0 1 0-.6-2ZM20.8 17a1.9 1.9 0 0 1 0 2.6l-1.2 1.2a1.9 1.9 0 0 1-2.6 0l-4.3-4.2-1.6 3.6a1.9 1.9 0 0 1-1.7 1.2A1.9 1.9 0 0 1 7.5 20L2.7 5a1.9 1.9 0 0 1 2.4-2.4l15 5a1.9 1.9 0 0 1 .2 3.4l-3.7 1.6 4.2 4.3ZM19 18.3 14.6 14a1.9 1.9 0 0 1 .6-3l3.2-1.5L5.1 5.1l4.3 13.3 1.5-3.2a1.9 1.9 0 0 1 3-.6l4.4 4.4.7-.7Z"/></svg>';
@ -41,6 +41,10 @@ export default {
const tooltip = buildIslandTooltip(island);
attachTooltipToHighlight(highlight, tooltip, islandElement);
// Set the z-index to be 1 higher than the greatest z-index in the stack.
const zIndex = getHighlightZIndex(islandElement);
tooltip.style.zIndex = highlight.style.zIndex = zIndex+'';
canvas.append(highlight);
islandsOverlays.push({ highlightElement: highlight, island: islandElement });
});