From 4357161e9c207c114e00226d9c36f5d975c72ad5 Mon Sep 17 00:00:00 2001
From: Daniel Imfeld <daniel@imfeld.dev>
Date: Mon, 23 Oct 2023 10:03:17 -1000
Subject: [PATCH] Fix deck.gl layer click handler

---
 .changeset/shiny-mugs-attend.md |  5 +++++
 src/lib/Popup.svelte            | 24 +++++++++++++++++-------
 src/lib/context.ts              |  6 ++++++
 3 files changed, 28 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/shiny-mugs-attend.md

diff --git a/.changeset/shiny-mugs-attend.md b/.changeset/shiny-mugs-attend.md
new file mode 100644
index 0000000..2128776
--- /dev/null
+++ b/.changeset/shiny-mugs-attend.md
@@ -0,0 +1,5 @@
+---
+'svelte-maplibre': patch
+---
+
+Fix exception when clicking a deck.gl layer with a Popup
diff --git a/src/lib/Popup.svelte b/src/lib/Popup.svelte
index 3f51d40..96944bd 100644
--- a/src/lib/Popup.svelte
+++ b/src/lib/Popup.svelte
@@ -6,7 +6,12 @@
     type MapLayerTouchEvent,
   } from 'maplibre-gl';
   import { onDestroy, onMount, tick } from 'svelte';
-  import { mapContext, type DeckGlMouseEvent, type LayerEvent } from './context.js';
+  import {
+    mapContext,
+    type DeckGlMouseEvent,
+    type LayerEvent,
+    isDeckGlMouseEvent,
+  } from './context.js';
 
   /** Show the built-in close button. By default the close button will be shown
    * only if closeOnClickOutside and closeOnClickInside are not set. */
@@ -167,6 +172,14 @@
     };
   });
 
+  function skipHandlingEvent(e: MapLayerMouseEvent) {
+    if (!openIfTopMost) {
+      return false;
+    }
+    // Marker clicks are always only on the top-most marker. Otherwise check for the top-most layer.
+    return !('marker' in e) && !isDeckGlMouseEvent(e) && eventTopMost(e) !== $layer;
+  }
+
   let features: Feature[] | null = null;
   let touchOpenState: 'normal' | 'opening' | 'justOpened' = 'normal';
   function handleLayerClick(e: MapLayerMouseEvent | LayerEvent) {
@@ -174,11 +187,8 @@
       return;
     }
 
-    if (openIfTopMost) {
-      // Marker clicks are always only on the top-most marker. Otherwise check for the top-most layer.
-      if (!('marker' in e) && eventTopMost(e) !== $layer) {
-        return;
-      }
+    if (skipHandlingEvent(e)) {
+      return;
     }
 
     if ('layerType' in e) {
@@ -238,7 +248,7 @@
       return;
     }
 
-    if (openIfTopMost && eventTopMost(e) !== $layer) {
+    if (skipHandlingEvent(e)) {
       open = false;
       features = null;
       return;
diff --git a/src/lib/context.ts b/src/lib/context.ts
index 23a8540..6d22c3e 100644
--- a/src/lib/context.ts
+++ b/src/lib/context.ts
@@ -178,3 +178,9 @@ export function updatedZoomRangeContext(
     maxzoom,
   };
 }
+
+export function isDeckGlMouseEvent(
+  event: MapMouseEvent | DeckGlMouseEvent
+): event is DeckGlMouseEvent<unknown> {
+  return 'layerType' in event && event.layerType === 'deckgl';
+}