@trackunit/react-map-adapter-google 0.0.25 → 0.0.26

package/index.cjs.js

@@ -190,6 +190,13 @@ class GoogleMapsLayerPort {
          * the marker the user visibly clicked wins.
          */
         this.pointEntityClickedInTick = false;
+        /**
+         * True for one tick after a point (marker/cluster) hover-start is emitted.
+         * Mirrors {@link pointEntityClickedInTick} for hover: a symbol marker
+         * overlapping a site polygon can receive both the canvas hover and the
+         * polygon's geometric mouseover; the trailing shape hover is suppressed.
+         */
+        this.pointEntityHoveredInTick = false;
         this.mapClickListener = null;
         // Tracked sources, keyed by source ID
         this.markerSources = new Map();
@@ -1730,13 +1737,21 @@ class GoogleMapsLayerPort {
                 }
                 drawnMarkers = [];
             }
+            /** Exposed for shape-hover suppression when a symbol overlaps a site polygon. */
+            hitTestAtClient(clientX, clientY) {
+                const hit = this.findHitAtClient(clientX, clientY);
+                return hit !== null ? hit.featureId : null;
+            }
             findHit(event) {
+                return this.findHitAtClient(event.clientX, event.clientY);
+            }
+            findHitAtClient(clientX, clientY) {
                 const canvas = this.canvas;
                 if (canvas === null)
                     return null;
                 const rect = canvas.getBoundingClientRect();
-                const mouseX = event.clientX - rect.left;
-                const mouseY = event.clientY - rect.top;
+                const mouseX = clientX - rect.left;
+                const mouseY = clientY - rect.top;
                 let closestEntry = null;
                 let closestDist = Infinity;
                 for (const drawn of drawnMarkers) {
@@ -1754,6 +1769,7 @@ class GoogleMapsLayerPort {
         const overlay = new CanvasSymbolOverlay();
         overlay.setMap(map);
         tracked.canvasOverlay = overlay;
+        tracked.symbolHitTestAtClient = (clientX, clientY) => overlay.hitTestAtClient(clientX, clientY);
     }
     // ============================================================================
     // Private: Client-side clustering
@@ -2252,7 +2268,11 @@ class GoogleMapsLayerPort {
                 this.lastShapeClickEntity = entity;
                 this.emitEntityInteraction("click", entity);
             }),
-            shape.addListener("mouseover", () => {
+            shape.addListener("mouseover", (e) => {
+                const domEvent = e.domEvent;
+                if (domEvent instanceof MouseEvent && this.isSymbolMarkerAtClientPosition(domEvent.clientX, domEvent.clientY)) {
+                    return;
+                }
                 this.emitEntityInteraction("hover-start", entity);
             }),
             shape.addListener("mousemove", (e) => {
@@ -2382,6 +2402,17 @@ class GoogleMapsLayerPort {
             m.set("disableDoubleClickZoom", false);
         }, 0);
     }
+    /** True when a symbol canvas marker is under the given viewport client position. */
+    isSymbolMarkerAtClientPosition(clientX, clientY) {
+        for (const tracked of this.markerSources.values()) {
+            const hitTest = tracked.symbolHitTestAtClient;
+            if (hitTest === undefined)
+                continue;
+            if (hitTest(clientX, clientY) !== null)
+                return true;
+        }
+        return false;
+    }
     /** Emit entity interaction event to all subscribed handlers */
     emitEntityInteraction(type, entity) {
         if (type === "click") {
@@ -2427,6 +2458,16 @@ class GoogleMapsLayerPort {
                 }, 0);
             }
         }
+        if (type === "hover-start") {
+            if (entity.type === "shape" && this.pointEntityHoveredInTick)
+                return;
+            if (entity.type === "marker" || entity.type === "cluster") {
+                this.pointEntityHoveredInTick = true;
+                setTimeout(() => {
+                    this.pointEntityHoveredInTick = false;
+                }, 0);
+            }
+        }
         const event = { type, entity };
         this.interactionHandlers.forEach(handler => handler(event));
     }

package/index.esm.js

@@ -188,6 +188,13 @@ class GoogleMapsLayerPort {
          * the marker the user visibly clicked wins.
          */
         this.pointEntityClickedInTick = false;
+        /**
+         * True for one tick after a point (marker/cluster) hover-start is emitted.
+         * Mirrors {@link pointEntityClickedInTick} for hover: a symbol marker
+         * overlapping a site polygon can receive both the canvas hover and the
+         * polygon's geometric mouseover; the trailing shape hover is suppressed.
+         */
+        this.pointEntityHoveredInTick = false;
         this.mapClickListener = null;
         // Tracked sources, keyed by source ID
         this.markerSources = new Map();
@@ -1728,13 +1735,21 @@ class GoogleMapsLayerPort {
                 }
                 drawnMarkers = [];
             }
+            /** Exposed for shape-hover suppression when a symbol overlaps a site polygon. */
+            hitTestAtClient(clientX, clientY) {
+                const hit = this.findHitAtClient(clientX, clientY);
+                return hit !== null ? hit.featureId : null;
+            }
             findHit(event) {
+                return this.findHitAtClient(event.clientX, event.clientY);
+            }
+            findHitAtClient(clientX, clientY) {
                 const canvas = this.canvas;
                 if (canvas === null)
                     return null;
                 const rect = canvas.getBoundingClientRect();
-                const mouseX = event.clientX - rect.left;
-                const mouseY = event.clientY - rect.top;
+                const mouseX = clientX - rect.left;
+                const mouseY = clientY - rect.top;
                 let closestEntry = null;
                 let closestDist = Infinity;
                 for (const drawn of drawnMarkers) {
@@ -1752,6 +1767,7 @@ class GoogleMapsLayerPort {
         const overlay = new CanvasSymbolOverlay();
         overlay.setMap(map);
         tracked.canvasOverlay = overlay;
+        tracked.symbolHitTestAtClient = (clientX, clientY) => overlay.hitTestAtClient(clientX, clientY);
     }
     // ============================================================================
     // Private: Client-side clustering
@@ -2250,7 +2266,11 @@ class GoogleMapsLayerPort {
                 this.lastShapeClickEntity = entity;
                 this.emitEntityInteraction("click", entity);
             }),
-            shape.addListener("mouseover", () => {
+            shape.addListener("mouseover", (e) => {
+                const domEvent = e.domEvent;
+                if (domEvent instanceof MouseEvent && this.isSymbolMarkerAtClientPosition(domEvent.clientX, domEvent.clientY)) {
+                    return;
+                }
                 this.emitEntityInteraction("hover-start", entity);
             }),
             shape.addListener("mousemove", (e) => {
@@ -2380,6 +2400,17 @@ class GoogleMapsLayerPort {
             m.set("disableDoubleClickZoom", false);
         }, 0);
     }
+    /** True when a symbol canvas marker is under the given viewport client position. */
+    isSymbolMarkerAtClientPosition(clientX, clientY) {
+        for (const tracked of this.markerSources.values()) {
+            const hitTest = tracked.symbolHitTestAtClient;
+            if (hitTest === undefined)
+                continue;
+            if (hitTest(clientX, clientY) !== null)
+                return true;
+        }
+        return false;
+    }
     /** Emit entity interaction event to all subscribed handlers */
     emitEntityInteraction(type, entity) {
         if (type === "click") {
@@ -2425,6 +2456,16 @@ class GoogleMapsLayerPort {
                 }, 0);
             }
         }
+        if (type === "hover-start") {
+            if (entity.type === "shape" && this.pointEntityHoveredInTick)
+                return;
+            if (entity.type === "marker" || entity.type === "cluster") {
+                this.pointEntityHoveredInTick = true;
+                setTimeout(() => {
+                    this.pointEntityHoveredInTick = false;
+                }, 0);
+            }
+        }
         const event = { type, entity };
         this.interactionHandlers.forEach(handler => handler(event));
     }

package/migrations/entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/react/map-adapter-google/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-map-adapter-google",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/GoogleMapsLayerPort.d.ts

@@ -41,6 +41,13 @@ export declare class GoogleMapsLayerPort implements LayerPort {
      * the marker the user visibly clicked wins.
      */
     private pointEntityClickedInTick;
+    /**
+     * True for one tick after a point (marker/cluster) hover-start is emitted.
+     * Mirrors {@link pointEntityClickedInTick} for hover: a symbol marker
+     * overlapping a site polygon can receive both the canvas hover and the
+     * polygon's geometric mouseover; the trailing shape hover is suppressed.
+     */
+    private pointEntityHoveredInTick;
     private mapClickListener;
     private readonly markerSources;
     /** featureId → element, keyed by sourceId. Cleared when a source is removed. */
@@ -251,6 +258,8 @@ export declare class GoogleMapsLayerPort implements LayerPort {
      * overriding it. Re-enables on the next tick.
      */
     private suppressNativeZoom;
+    /** True when a symbol canvas marker is under the given viewport client position. */
+    private isSymbolMarkerAtClientPosition;
     /** Emit entity interaction event to all subscribed handlers */
     private emitEntityInteraction;
     /**