import { Sphere, Html, Line } from "@react-three/drei" import React from "react" import { Config } from "./config-threed" import { FOCI, getCameraOffset, setUrlFocusParam } from "./zoom_beacons_constants-threed" import { useSpring, animated } from "@react-spring/three" const DEBUG = false const beaconColor = "#0266b5" const beaconSize = window.innerWidth > 768 ? 40 : 60 interface ZoomBeaconsProps { config: Config activeFocus: string setActiveFocus(focus: string): void } const BeaconPulse = () => { const { scale, opacity } = useSpring({ from: { scale: 1, opacity: 0.75 }, to: async (next) => { while (true) { await next({ scale: 2.5, opacity: 0 }) await new Promise(resolve => setTimeout(resolve, 2000)) await next({ scale: 1, opacity: 0.75, immediate: true }) } }, config: { duration: 1500 } }) return ( // {/* */} // ) } export const ZoomBeacons = (props: ZoomBeaconsProps) => { const [hoveredFocus, setHoveredFocus] = React.useState("") const { activeFocus, setActiveFocus } = props const gardenBedDiv = document.querySelector('.garden-bed-3d-model') as HTMLElement | null return {FOCI(props.config).map(focus => { const camera = getCameraOffset(focus) return {DEBUG && } { setActiveFocus(activeFocus ? "" : focus.label) setUrlFocusParam(focus.label) setHoveredFocus("") if (gardenBedDiv) { gardenBedDiv.style.cursor = "" } }} onPointerEnter={() => { setHoveredFocus(focus.label) if (gardenBedDiv) { gardenBedDiv.style.cursor = activeFocus ? "zoom-out" : "zoom-in" } }} onPointerLeave={() => { setHoveredFocus("") if (gardenBedDiv) { gardenBedDiv.style.cursor = "" } }} receiveShadow={true} visible={activeFocus ? false : true} args={[beaconSize * (hoveredFocus == focus.label ? 1.5 : 1) * ((!activeFocus && props.config.sizePreset == "Genesis XL") ? 1.5 : 1), 12, 12, ]}> {!activeFocus && } {activeFocus == focus.label &&

e.stopPropagation()} onPointerMove={e => e.stopPropagation()}>

{focus.label}

{ setActiveFocus("") setUrlFocusParam("") }}> ❌

{focus.info.description}

} })} }