Fix interaction of overlapping markers

darthmaim · Aug 29, 2024 · e84417c · e84417c
1 parent 48cfa36
commit e84417c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/packages/tyria/src/events.ts b/packages/tyria/src/events.ts
@@ -51,6 +51,8 @@ export class TyriaEventTarget {
       throw new Error('Unknown event type');
     }
 
+    console.log(event.type, event);
+
     for(const listener of this.#eventListeners[event.type as E]) {
       listener(event);
     }

diff --git a/packages/tyria/src/handlers/interaction.ts b/packages/tyria/src/handlers/interaction.ts
@@ -3,7 +3,7 @@ import { Point } from "../types";
 import { Handler, HandlerResponse, WrappedEvent } from "./handler";
 
 export class InteractionHandler extends Handler {
-  #hovering: false | { layer: Layer, markerId: string };
+  #hovering: undefined | { layer: Layer, markerId: string };
 
   pointermove(event: WrappedEvent<PointerEvent>): HandlerResponse {
     const at: Point = [event.nativeEvent.offsetX, event.nativeEvent.offsetY];
@@ -13,20 +13,18 @@ export class InteractionHandler extends Handler {
       x: at[0], y: at[1], target
     };
 
-    if(target && !this.#hovering) {
-      this.#hovering = target;
-      this.map.canvas.style.cursor = 'pointer';
+    const changedTarget = this.#hovering?.layer !== target?.layer || this.#hovering?.markerId !== target?.markerId;
 
-      this.map.dispatchEvent({ type: 'marker.over', map: this.map, ...target });
+    if(changedTarget && this.#hovering) {
+      this.map.canvas.style.cursor = 'grab';
+      this.map.dispatchEvent({ type: 'marker.leave', map: this.map, ...this.#hovering });
     }
 
-    if(!target && this.#hovering) {
-      const wasHovering = this.#hovering;
+    this.#hovering = target;
 
-      this.#hovering = false;
-      this.map.canvas.style.cursor = 'grab';
-
-      this.map.dispatchEvent({ type: 'marker.leave', map: this.map, ...wasHovering });
+    if(target && changedTarget) {
+      this.map.canvas.style.cursor = 'pointer';
+      this.map.dispatchEvent({ type: 'marker.over', map: this.map, ...target });
     }
   }
 }
diff --git a/packages/tyria/src/layers/MarkerLayer.ts b/packages/tyria/src/layers/MarkerLayer.ts
@@ -70,7 +70,9 @@ export class MarkerLayer implements Layer {
   }
 
   hitTest(hit: Point, context: LayerHitTestContext): undefined | { markerId: string } {
-    const markersInViewport = this.#getMarkersInViewport(context.state);
+    // get markers in viewport and reverse the order,
+    // because they are rendered bottom-to-top, we want to hit-test top-to-bottom
+    const markersInViewport = this.#getMarkersInViewport(context.state).reverse();
 
     for(const marker of markersInViewport) {
       const position = context.map.mapCoordinateToCanvasPixel(marker.position);