Make markers clickable

Author: hasparus

src/app/(main)/community/events/map/engine.ts

@@ -361,6 +361,7 @@ class MapEngine implements MapHandle {
   private notifyHoverChange(index: number) {
     if (index === this.hoveredMarkerIndex) return
     this.hoveredMarkerIndex = index
+    this.updateCursor()
     if (!this.onActiveMarkerChange) return
     if (this.destroyed) return
     const id =
@@ -370,6 +371,12 @@ class MapEngine implements MapHandle {
     this.onActiveMarkerChange(id)
   }
 
+  private updateCursor() {
+    if (this.pointer.active) return
+    this.canvas.style.cursor =
+      this.hoveredMarkerIndex >= 0 ? "pointer" : "default"
+  }
+
   private updatePointerTrail(px: number, py: number) {
     const now = performance.now() * 0.001
     const maxGap = this.cellSize * this.pixelRatio * 1.5
@@ -473,14 +480,16 @@ class MapEngine implements MapHandle {
     this.canvas.setPointerCapture(event.pointerId)
     this.canvas.style.cursor = "move"
     this.notifyHoverChange(-1)
+    this.pointerTrail.fill(-1)
+    this.trailCount = 0
   }
 
   private handlePointerMove = (event: PointerEvent) => {
     this.hoverPointer.x = event.clientX
     this.hoverPointer.y = event.clientY
     this.hoverPointer.hasValue = true
     const devicePos = this.pointerToDevice(event.clientX, event.clientY)
-    if (devicePos) {
+    if (devicePos && !this.pointer.active) {
       this.updatePointerTrail(devicePos[0], devicePos[1])
     }
     if (!this.pointer.active) {
@@ -527,7 +536,6 @@ class MapEngine implements MapHandle {
     if (!this.pointer.active || event.pointerId !== this.pointer.id) return
     this.pointer.active = false
     this.canvas.releasePointerCapture(event.pointerId)
-    this.canvas.style.cursor = "default"
     this.pointer.lastMoveTime = 0
     if (event.type === "pointerup") {
       this.updateHoveredMarkerFromClient(event.clientX, event.clientY)

src/app/(main)/community/events/map/map-tooltip.tsx

@@ -2,31 +2,23 @@
 
 import { meetups } from "@/components/meetups"
 
-export type MeetupMapPointer = {
-  x: number
-  y: number
-  visible: boolean
-}
-
 const meetupNameById = new Map(meetups.map(({ node }) => [node.id, node.name]))
 
 type MapTooltipProps = {
   id: string
   activeMeetupId: string | null
-  pointer: MeetupMapPointer
 }
 
-export function MapTooltip({ id, activeMeetupId, pointer }: MapTooltipProps) {
-  if (!activeMeetupId || !pointer.visible) return null
-  const name = meetupNameById.get(activeMeetupId)
-  if (!name) return null
+export function MapTooltip({ id, activeMeetupId }: MapTooltipProps) {
+  const name = activeMeetupId && meetupNameById.get(activeMeetupId)
   return (
     <span
       id={id}
       role="tooltip"
-      className="pointer-events-none absolute left-0 top-0 z-10 hidden min-w-0 whitespace-nowrap border border-neu-200/40 bg-neu-0/40 px-2 py-1 text-xs font-medium text-neu-900 shadow-sm backdrop-blur-sm group-hover/map:flex"
+      className="pointer-events-none absolute left-0 top-0 z-10 hidden min-w-0 whitespace-nowrap border border-neu-200/40 bg-neu-0/40 px-2 py-[3px] text-xs text-neu-900 shadow-sm backdrop-blur-sm group-hover/map:flex"
       style={{
-        transform: `translate3d(calc(${pointer.x}px - 50%), calc(${pointer.y}px - 50% - 24px), 0)`,
+        transform: `translate3d(calc(var(--x) - 50%), calc(var(--y) - 50% - 22px), 0)`,
+        visibility: activeMeetupId ? "visible" : "hidden",
       }}
     >
       {name}

src/app/(main)/community/events/meetups-map.tsx

@@ -12,7 +12,7 @@ import { useTheme } from "next-themes"
 import { meetups } from "@/components/meetups"
 
 import { bootMeetupsMap, type MapHandle, type MarkerPoint } from "./map/engine"
-import { MapTooltip, type MeetupMapPointer } from "./map/map-tooltip"
+import { MapTooltip } from "./map/map-tooltip"
 import { MapSkeleton } from "./map-skeleton"
 import { MeetupsList } from "./meetups-list"
 import { asRgbString, MAP_COLORS, MapColors } from "./map/map-colors"
@@ -45,34 +45,33 @@ export function MeetupsMap() {
 
   const [status, setStatus] = useState<MapStatus>("loading")
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
-  const [pointer, setPointer] = useState<MeetupMapPointer>({
-    x: 0,
-    y: 0,
-    visible: false,
-  })
 
   const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
+    const tooltip = document.getElementById("map-tooltip")
+    if (!tooltip) return
     const rect = event.currentTarget.getBoundingClientRect()
     const x = event.clientX - rect.left
     const y = event.clientY - rect.top
-    setPointer(previous => {
-      if (
-        previous.visible &&
-        Math.abs(previous.x - x) < 0.5 &&
-        Math.abs(previous.y - y) < 0.5
-      ) {
-        return previous
-      }
-      return { x, y, visible: true }
-    })
+    tooltip.style.setProperty("--x", `${x}px`)
+    tooltip.style.setProperty("--y", `${y}px`)
   }
 
   const handlePointerLeave = () => {
-    setPointer(previous =>
-      previous.visible
-        ? { x: previous.x, y: previous.y, visible: false }
-        : previous,
-    )
+    const tooltip = document.getElementById("map-tooltip")
+    if (!tooltip) return
+    tooltip.style.removeProperty("--x")
+    tooltip.style.removeProperty("--y")
+  }
+
+  const activeMeetup = useMemo(
+    () => meetups.find(m => m.node.id === activeMeetupId),
+    [activeMeetupId],
+  )
+
+  const handleMapClick = () => {
+    if (activeMeetup?.node.link) {
+      window.open(activeMeetup.node.link, "_blank", "noopener,noreferrer")
+    }
   }
 
   useEffect(() => {
@@ -158,6 +157,8 @@ export function MeetupsMap() {
         className="group/map relative grow border-neu-200 bg-[--sea] dark:border-neu-50 dark:bg-[--sea] md:border-l"
         onPointerMove={handlePointerMove}
         onPointerLeave={handlePointerLeave}
+        onClick={handleMapClick}
+        style={{ cursor: activeMeetup ? "pointer" : "default" }}
       >
         <canvas
           ref={canvasRef}
@@ -171,11 +172,7 @@ export function MeetupsMap() {
           }}
         />
 
-        <MapTooltip
-          id="map-tooltip"
-          activeMeetupId={activeMeetupId}
-          pointer={pointer}
-        />
+        <MapTooltip id="map-tooltip" activeMeetupId={activeMeetupId} />
 
         <InfoTip />