@trackunit/react-map 0.1.25 → 0.1.27

package/index.cjs.js

@@ -7577,14 +7577,17 @@ const degreesPerPixel = (zoom, tileSize) => 360 / (tileSize * Math.pow(2, zoom))
 const shapesUnderCursor = (position, features, options) => {
     const { zoom, tileSize, strokeWidthFor, visibleFillFor, layerGeodesic, featureStyles } = options;
     // Densify before boundary-distance and point-in-polygon math so stroke/fill
-    // hit-tests follow great-circle arcs on large polygons.
+    // hit-tests follow great-circle arcs on large polygons. Always defer to
+    // densifyGeodesicFeatures' per-feature resolution (geodesic override > layer
+    // default) rather than short-circuiting on layerGeodesic === false — that
+    // matches the Mapbox render path, so the hit-test geometry never diverges
+    // from the painted edge when a feature opts into geodesic under a non-geodesic
+    // layer. The util returns the original collection when nothing is densified.
     const featureCollection = {
         type: "FeatureCollection",
         features: Array.from(features),
     };
-    const densifiedFeatures = layerGeodesic !== false
-        ? reactMapAdapterShared.densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features
-        : features;
+    const densifiedFeatures = reactMapAdapterShared.densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features;
     const degPerPx = degreesPerPixel(zoom, tileSize);
     const hits = [];
     for (const feature of densifiedFeatures) {
@@ -7696,14 +7699,16 @@ const promoteToFront = (order, id) => order.includes(id) ? [id, ...order.filter(
  * preserved and translucent fills do not compound under the winner.
  */
 const computePromotionGroupFills = (members, winnerId, restingPeerFills = new Map(), layerGeodesic = undefined, featureStyles = undefined) => {
-    // Densify before peer-vs-winner clip so promotion clips follow great-circle arcs.
+    // Densify before peer-vs-winner clip so promotion clips follow great-circle
+    // arcs. Always defer to densifyGeodesicFeatures' per-feature resolution
+    // (geodesic override > layer default) rather than short-circuiting on
+    // layerGeodesic === false — keeps the clip geometry in step with the render
+    // path. The util returns the original collection when nothing is densified.
     const featureCollection = {
         type: "FeatureCollection",
         features: Array.from(members),
     };
-    const densifiedMembers = layerGeodesic !== false
-        ? reactMapAdapterShared.densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features
-        : members;
+    const densifiedMembers = reactMapAdapterShared.densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features;
     const geometries = new Map();
     for (const feature of densifiedMembers) {
         if (feature.id === undefined)
@@ -7743,14 +7748,16 @@ const computePromotionGroupFills = (members, winnerId, restingPeerFills = new Ma
 const computeFillTiling = (input) => {
     const { features, viewportBounds, resolveStackOrder, selectedFeatureId, suppressedFeatureIds, layerGeodesic, featureStyles, } = input;
     // Densify before any polygon/boundary math so clip geometry follows great-circle
-    // arcs on large polygons (mirrors the ADR-0024 precedent for edge labels).
+    // arcs on large polygons (mirrors the ADR-0024 precedent for edge labels). Always
+    // defer to densifyGeodesicFeatures' per-feature resolution (geodesic override >
+    // layer default) rather than short-circuiting on layerGeodesic === false — keeps
+    // the clip geometry in step with the Mapbox render path. The util returns the
+    // original collection when nothing is densified.
     const featureCollection = {
         type: "FeatureCollection",
         features: Array.from(features),
     };
-    const densifiedFeatures = layerGeodesic !== false
-        ? reactMapAdapterShared.densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features
-        : features;
+    const densifiedFeatures = reactMapAdapterShared.densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features;
     const records = [];
     for (const feature of densifiedFeatures) {
         if (feature.id === undefined)
@@ -10128,6 +10135,8 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
     }, [suppressedFillIdsByHandle]);
     const debounceTimerRef = react.useRef(null);
     const idleRecomputeTimerRef = react.useRef(null);
+    /** Pending deferred selection re-tile (double-rAF handle); see selection effect. */
+    const selectionRecomputeRafRef = react.useRef(null);
     // Currently emitted overrides — used for hit-testing visible fills in handleSettle.
     const prevFillOverridesRef = react.useRef(EMPTY_OVERRIDES);
     const prevZIndexOverridesRef = react.useRef(EMPTY_ZINDEX_OVERRIDES);
@@ -10382,8 +10391,30 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
             return;
         recompute();
     }, [recompute, tilingContentKey]);
+    // Selection forces the selected feature to the front of its overlap group,
+    // which requires a resting re-tile (computeFillTiling depends on
+    // selectedFeatureId via resolveStackOrder). For large layers that re-tile is
+    // expensive (~600ms for 200 polygons over global bounds) and must NOT block
+    // the interaction's first paint — e.g. a panel opening on the clicked feature.
+    // Defer it past the next paint with a double rAF so the click commits and
+    // paints immediately, then the selected polygon restacks one frame later.
+    // Rapid selections coalesce: each schedule cancels the previous pending one.
     react.useEffect(() => {
-        recompute();
+        if (selectionRecomputeRafRef.current !== null) {
+            cancelAnimationFrame(selectionRecomputeRafRef.current);
+        }
+        selectionRecomputeRafRef.current = requestAnimationFrame(() => {
+            selectionRecomputeRafRef.current = requestAnimationFrame(() => {
+                selectionRecomputeRafRef.current = null;
+                recompute();
+            });
+        });
+        return () => {
+            if (selectionRecomputeRafRef.current !== null) {
+                cancelAnimationFrame(selectionRecomputeRafRef.current);
+                selectionRecomputeRafRef.current = null;
+            }
+        };
     }, [recompute, selectedFeatureId]);
     // Suppression changes must trigger a recompute so EMPTY_FILL entries are
     // added / removed even when the map is idle (covers the decorations-vs-tiling
@@ -10635,7 +10666,24 @@ const Layers = ({ layers, api, onEntityClick, onEntityDblClick }) => {
     const [viewportStyleOverrides, setViewportStyleOverrides] = react.useState(new Map());
     const [fillGeometryOverrides, setFillGeometryOverrides] = react.useState(new Map());
     const [zIndexOverrides, setZIndexOverrides] = react.useState(new Map());
+    // Mirror the authoritative hovered entity into a ref. The settle channel fires
+    // on a ~120ms debounce (outside React's render cycle) and needs to read the
+    // current hover synchronously.
+    const hoveredEntityRef = react.useRef(layers.interaction.hoveredEntity);
+    react.useEffect(() => {
+        hoveredEntityRef.current = layers.interaction.hoveredEntity;
+    }, [layers.interaction.hoveredEntity]);
     const onSettledHover = react.useCallback((handleId, featureId) => {
+        // Z-order truth: markers and clusters render above shapes (DOM/symbol portals
+        // over the polygon canvas). When a point entity is the current hovered entity
+        // it is the authoritative top hit under the cursor, so the shape settle — which
+        // is not itself position-gated against the marker layer — must not overwrite it.
+        // Without this guard, moving onto an asset pill that overlaps a site would leave
+        // the covered site as `hoveredEntity` (a stale cross-channel hover write). We read
+        // the single source of truth (`hoveredEntity`) rather than a parallel guard flag.
+        const hovered = hoveredEntityRef.current;
+        if (hovered !== null && (hovered.type === "marker" || hovered.type === "cluster"))
+            return;
         // Fill tiling only fires on polygonal features — shapeType is always "polygon".
         layers.hover({ type: "shape", id: featureId, handleId, shapeType: "polygon" });
     }, [layers]);
@@ -10697,17 +10745,27 @@ const Layers = ({ layers, api, onEntityClick, onEntityDblClick }) => {
         });
     }, [layers.handles, adaptiveByLayer, viewportStyleOverrides, fillGeometryOverrides, zIndexOverrides, queryAt]);
     const { renderedSourceIds, hasSourceReadiness, readyRevision } = useLayerHandleSync(layerPort, enrichedHandles, layers.interaction, decorationLayers);
-    const hoveredEntityRef = react.useRef(layers.interaction.hoveredEntity);
-    react.useEffect(() => {
-        hoveredEntityRef.current = layers.interaction.hoveredEntity;
-    }, [layers.interaction.hoveredEntity]);
     const coordinatedSelect = react.useCallback((entity) => {
-        if (entity !== null && hoveredEntityRef.current !== null) {
-            layers.select(hoveredEntityRef.current);
-        }
-        else {
+        const hovered = hoveredEntityRef.current;
+        if (entity === null || hovered === null) {
             layers.select(entity);
+            return;
+        }
+        // Default to the entity the click actually carried — it is the freshest,
+        // most direct signal of what the user hit, and it hit-tests per element
+        // for markers/clusters/routes. The single exception is a shape-on-shape
+        // conflict: the adapter resolves polygon clicks with its own z-order and
+        // full (unclipped) hit areas, so it cannot honor the fill-tiling ownership
+        // model that decides which overlapping site is visually on top (ADR-0021).
+        // There the settle-resolved hovered shape is the precise winner, so we
+        // trust it instead. This is also why an asset pill overlapping a site
+        // selects the asset: a marker click is never a shape, so it bypasses the
+        // exception even when a stale site shape is still the hovered entity.
+        if (entity.type === "shape" && hovered.type === "shape") {
+            layers.select(hovered);
+            return;
         }
+        layers.select(entity);
     }, [layers]);
     const fitOnDblClick = useDblClickFit(api, layers.handles);
     const handleDblClick = react.useCallback((entity) => {

package/index.esm.js

@@ -7576,14 +7576,17 @@ const degreesPerPixel = (zoom, tileSize) => 360 / (tileSize * Math.pow(2, zoom))
 const shapesUnderCursor = (position, features, options) => {
     const { zoom, tileSize, strokeWidthFor, visibleFillFor, layerGeodesic, featureStyles } = options;
     // Densify before boundary-distance and point-in-polygon math so stroke/fill
-    // hit-tests follow great-circle arcs on large polygons.
+    // hit-tests follow great-circle arcs on large polygons. Always defer to
+    // densifyGeodesicFeatures' per-feature resolution (geodesic override > layer
+    // default) rather than short-circuiting on layerGeodesic === false — that
+    // matches the Mapbox render path, so the hit-test geometry never diverges
+    // from the painted edge when a feature opts into geodesic under a non-geodesic
+    // layer. The util returns the original collection when nothing is densified.
     const featureCollection = {
         type: "FeatureCollection",
         features: Array.from(features),
     };
-    const densifiedFeatures = layerGeodesic !== false
-        ? densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features
-        : features;
+    const densifiedFeatures = densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features;
     const degPerPx = degreesPerPixel(zoom, tileSize);
     const hits = [];
     for (const feature of densifiedFeatures) {
@@ -7695,14 +7698,16 @@ const promoteToFront = (order, id) => order.includes(id) ? [id, ...order.filter(
  * preserved and translucent fills do not compound under the winner.
  */
 const computePromotionGroupFills = (members, winnerId, restingPeerFills = new Map(), layerGeodesic = undefined, featureStyles = undefined) => {
-    // Densify before peer-vs-winner clip so promotion clips follow great-circle arcs.
+    // Densify before peer-vs-winner clip so promotion clips follow great-circle
+    // arcs. Always defer to densifyGeodesicFeatures' per-feature resolution
+    // (geodesic override > layer default) rather than short-circuiting on
+    // layerGeodesic === false — keeps the clip geometry in step with the render
+    // path. The util returns the original collection when nothing is densified.
     const featureCollection = {
         type: "FeatureCollection",
         features: Array.from(members),
     };
-    const densifiedMembers = layerGeodesic !== false
-        ? densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features
-        : members;
+    const densifiedMembers = densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features;
     const geometries = new Map();
     for (const feature of densifiedMembers) {
         if (feature.id === undefined)
@@ -7742,14 +7747,16 @@ const computePromotionGroupFills = (members, winnerId, restingPeerFills = new Ma
 const computeFillTiling = (input) => {
     const { features, viewportBounds, resolveStackOrder, selectedFeatureId, suppressedFeatureIds, layerGeodesic, featureStyles, } = input;
     // Densify before any polygon/boundary math so clip geometry follows great-circle
-    // arcs on large polygons (mirrors the ADR-0024 precedent for edge labels).
+    // arcs on large polygons (mirrors the ADR-0024 precedent for edge labels). Always
+    // defer to densifyGeodesicFeatures' per-feature resolution (geodesic override >
+    // layer default) rather than short-circuiting on layerGeodesic === false — keeps
+    // the clip geometry in step with the Mapbox render path. The util returns the
+    // original collection when nothing is densified.
     const featureCollection = {
         type: "FeatureCollection",
         features: Array.from(features),
     };
-    const densifiedFeatures = layerGeodesic !== false
-        ? densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features
-        : features;
+    const densifiedFeatures = densifyGeodesicFeatures(featureCollection, layerGeodesic ?? true, featureStyles).features;
     const records = [];
     for (const feature of densifiedFeatures) {
         if (feature.id === undefined)
@@ -10127,6 +10134,8 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
     }, [suppressedFillIdsByHandle]);
     const debounceTimerRef = useRef(null);
     const idleRecomputeTimerRef = useRef(null);
+    /** Pending deferred selection re-tile (double-rAF handle); see selection effect. */
+    const selectionRecomputeRafRef = useRef(null);
     // Currently emitted overrides — used for hit-testing visible fills in handleSettle.
     const prevFillOverridesRef = useRef(EMPTY_OVERRIDES);
     const prevZIndexOverridesRef = useRef(EMPTY_ZINDEX_OVERRIDES);
@@ -10381,8 +10390,30 @@ const useShapeFillTiling = ({ api, handles, onFillGeometriesChange, onZIndexOver
             return;
         recompute();
     }, [recompute, tilingContentKey]);
+    // Selection forces the selected feature to the front of its overlap group,
+    // which requires a resting re-tile (computeFillTiling depends on
+    // selectedFeatureId via resolveStackOrder). For large layers that re-tile is
+    // expensive (~600ms for 200 polygons over global bounds) and must NOT block
+    // the interaction's first paint — e.g. a panel opening on the clicked feature.
+    // Defer it past the next paint with a double rAF so the click commits and
+    // paints immediately, then the selected polygon restacks one frame later.
+    // Rapid selections coalesce: each schedule cancels the previous pending one.
     useEffect(() => {
-        recompute();
+        if (selectionRecomputeRafRef.current !== null) {
+            cancelAnimationFrame(selectionRecomputeRafRef.current);
+        }
+        selectionRecomputeRafRef.current = requestAnimationFrame(() => {
+            selectionRecomputeRafRef.current = requestAnimationFrame(() => {
+                selectionRecomputeRafRef.current = null;
+                recompute();
+            });
+        });
+        return () => {
+            if (selectionRecomputeRafRef.current !== null) {
+                cancelAnimationFrame(selectionRecomputeRafRef.current);
+                selectionRecomputeRafRef.current = null;
+            }
+        };
     }, [recompute, selectedFeatureId]);
     // Suppression changes must trigger a recompute so EMPTY_FILL entries are
     // added / removed even when the map is idle (covers the decorations-vs-tiling
@@ -10634,7 +10665,24 @@ const Layers = ({ layers, api, onEntityClick, onEntityDblClick }) => {
     const [viewportStyleOverrides, setViewportStyleOverrides] = useState(new Map());
     const [fillGeometryOverrides, setFillGeometryOverrides] = useState(new Map());
     const [zIndexOverrides, setZIndexOverrides] = useState(new Map());
+    // Mirror the authoritative hovered entity into a ref. The settle channel fires
+    // on a ~120ms debounce (outside React's render cycle) and needs to read the
+    // current hover synchronously.
+    const hoveredEntityRef = useRef(layers.interaction.hoveredEntity);
+    useEffect(() => {
+        hoveredEntityRef.current = layers.interaction.hoveredEntity;
+    }, [layers.interaction.hoveredEntity]);
     const onSettledHover = useCallback((handleId, featureId) => {
+        // Z-order truth: markers and clusters render above shapes (DOM/symbol portals
+        // over the polygon canvas). When a point entity is the current hovered entity
+        // it is the authoritative top hit under the cursor, so the shape settle — which
+        // is not itself position-gated against the marker layer — must not overwrite it.
+        // Without this guard, moving onto an asset pill that overlaps a site would leave
+        // the covered site as `hoveredEntity` (a stale cross-channel hover write). We read
+        // the single source of truth (`hoveredEntity`) rather than a parallel guard flag.
+        const hovered = hoveredEntityRef.current;
+        if (hovered !== null && (hovered.type === "marker" || hovered.type === "cluster"))
+            return;
         // Fill tiling only fires on polygonal features — shapeType is always "polygon".
         layers.hover({ type: "shape", id: featureId, handleId, shapeType: "polygon" });
     }, [layers]);
@@ -10696,17 +10744,27 @@ const Layers = ({ layers, api, onEntityClick, onEntityDblClick }) => {
         });
     }, [layers.handles, adaptiveByLayer, viewportStyleOverrides, fillGeometryOverrides, zIndexOverrides, queryAt]);
     const { renderedSourceIds, hasSourceReadiness, readyRevision } = useLayerHandleSync(layerPort, enrichedHandles, layers.interaction, decorationLayers);
-    const hoveredEntityRef = useRef(layers.interaction.hoveredEntity);
-    useEffect(() => {
-        hoveredEntityRef.current = layers.interaction.hoveredEntity;
-    }, [layers.interaction.hoveredEntity]);
     const coordinatedSelect = useCallback((entity) => {
-        if (entity !== null && hoveredEntityRef.current !== null) {
-            layers.select(hoveredEntityRef.current);
-        }
-        else {
+        const hovered = hoveredEntityRef.current;
+        if (entity === null || hovered === null) {
             layers.select(entity);
+            return;
+        }
+        // Default to the entity the click actually carried — it is the freshest,
+        // most direct signal of what the user hit, and it hit-tests per element
+        // for markers/clusters/routes. The single exception is a shape-on-shape
+        // conflict: the adapter resolves polygon clicks with its own z-order and
+        // full (unclipped) hit areas, so it cannot honor the fill-tiling ownership
+        // model that decides which overlapping site is visually on top (ADR-0021).
+        // There the settle-resolved hovered shape is the precise winner, so we
+        // trust it instead. This is also why an asset pill overlapping a site
+        // selects the asset: a marker click is never a shape, so it bypasses the
+        // exception even when a stale site shape is still the hovered entity.
+        if (entity.type === "shape" && hovered.type === "shape") {
+            layers.select(hovered);
+            return;
         }
+        layers.select(entity);
     }, [layers]);
     const fitOnDblClick = useDblClickFit(api, layers.handles);
     const handleDblClick = useCallback((entity) => {

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@trackunit/react-map",
-  "version": "0.1.25",
+  "version": "0.1.27",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-components": "2.1.36",
-    "@trackunit/css-class-variance-utilities": "1.13.40",
-    "@trackunit/react-form-components": "2.1.38",
-    "@trackunit/react-core-hooks": "1.17.49",
-    "@trackunit/geo-json-utils": "1.14.43",
-    "@trackunit/i18n-library-translation": "2.0.37",
-    "@trackunit/react-modal": "2.1.39",
+    "@trackunit/react-components": "2.1.38",
+    "@trackunit/css-class-variance-utilities": "1.13.42",
+    "@trackunit/react-form-components": "2.1.40",
+    "@trackunit/react-core-hooks": "1.17.51",
+    "@trackunit/geo-json-utils": "1.14.45",
+    "@trackunit/i18n-library-translation": "2.0.39",
+    "@trackunit/react-modal": "2.1.41",
     "react-minimal-pie-chart": "^8.4.0",
-    "@trackunit/react-map-adapter-shared": "0.0.24",
-    "@trackunit/react-map-color-utils": "0.0.9",
-    "@trackunit/ui-design-tokens": "1.13.40",
+    "@trackunit/react-map-adapter-shared": "0.0.26",
+    "@trackunit/react-map-color-utils": "0.0.11",
+    "@trackunit/ui-design-tokens": "1.13.42",
     "@floating-ui/react": "^0.26.25",
     "es-toolkit": "^1.39.10",
     "tailwind-merge": "^2.0.0",