positionHighlight() — astro Function Reference

Architecture documentation for the positionHighlight() function in highlight.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient called by 1

Entity Profile

DevToolbar→ ToolbarClient→ positionHighlight() — astro Function Reference

Dependency Diagram

graph TD
  bd4cc7f9_e33a_cc94_f9b7_c99ef385e4ef["positionHighlight()"]
  21d4971d_ea22_2699_3ba8_0047fd0c2969["highlight.ts"]
  bd4cc7f9_e33a_cc94_f9b7_c99ef385e4ef -->|defined in| 21d4971d_ea22_2699_3ba8_0047fd0c2969
  10601dbc_206b_a957_fc0d_fe24ec4b3969["createHighlight()"]
  10601dbc_206b_a957_fc0d_fe24ec4b3969 -->|calls| bd4cc7f9_e33a_cc94_f9b7_c99ef385e4ef
  style bd4cc7f9_e33a_cc94_f9b7_c99ef385e4ef fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts lines 46–55

export function positionHighlight(highlight: DevToolbarHighlight, rect: DOMRect) {
	highlight.style.display = 'block';
	// If the highlight is fixed, don't position based on scroll
	const scrollY = highlight.style.position === 'fixed' ? 0 : window.scrollY;
	// Make an highlight that is 10px bigger than the element on all sides
	highlight.style.top = `${Math.max(rect.top + scrollY - 10, 0)}px`;
	highlight.style.left = `${Math.max(rect.left + window.scrollX - 10, 0)}px`;
	highlight.style.width = `${rect.width + 15}px`;
	highlight.style.height = `${rect.height + 15}px`;
}