Janady13/thatdeveloperguy-website / app/experience/HotspotOverlay.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/thatdeveloperguy-website / app/experience/HotspotOverlay.tsx
Date	Not specified in source
Repository	Janady13/thatdeveloperguy-website
Revision	2bea2ebdff0e34494bff597d4fa9c8422a0c3a94
Branch	main
Path or archive member	app/experience/HotspotOverlay.tsx
Original SHA-256	a22262a58c53cdf6820867a1fa39992c4a27655d2cf31198f34cbc86194cbca2
Git blob SHA	0947bcf497bdc2219a5e493858a7fda054d247ee
Reading-copy SHA-256	a22262a58c53cdf6820867a1fa39992c4a27655d2cf31198f34cbc86194cbca2

Original source ↗

Recovered source transcript

Download complete source text ↓22 lines · 1.4 KB

import type { MouseEvent } from 'react';
import type { SceneCanvas, SceneHotspot } from '../../src/contracts/scene';
import { sceneViewBox } from './scene-coordinate-map';

export interface ResolvedHotspot extends SceneHotspot { href: string }
interface Props { label: string; canvas: SceneCanvas; hotspots: ResolvedHotspot[]; onFocus: (id: string | null) => void; onActivate: (hotspot: ResolvedHotspot, event: MouseEvent<Element>) => void }

/** Real anchors drawn as invisible hit shapes in room coordinates. Modified clicks and new-tab opens are left to the browser. */
export function HotspotOverlay({ label, canvas, hotspots, onFocus, onActivate }: Props) {
  return (
    <svg className="scene-hits" viewBox={sceneViewBox(canvas)} preserveAspectRatio="xMidYMid meet" role="navigation" aria-label={`${label} destinations`}>
      {hotspots.map(h => (
        <a key={h.id} href={h.href} aria-label={h.label} className="scene-hit" data-hit={h.id} tabIndex={0}
          onMouseEnter={() => onFocus(h.id)} onMouseLeave={() => onFocus(null)} onFocus={() => onFocus(h.id)} onBlur={() => onFocus(null)}
          onClick={event => { if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) return; onActivate(h, event); }}>
          <rect x={h.hit.x} y={h.hit.y} width={h.hit.width} height={h.hit.height} rx={6} />
        </a>
      ))}
    </svg>
  );
}