@trackunit/react-map 0.0.11 → 0.1.0

package/index.cjs.js

@@ -6813,7 +6813,7 @@ const noopGuard = (_active) => undefined;
  *   suppresses adapter hover-start/hover-end). Call with `false` when the DOM
  *   hover ends, allowing adapter events to flow again.
  */
-const useEntityInteraction = ({ layerPort, hover, select, dblClick, }) => {
+const useEntityInteraction = ({ layerPort, hover, select, dblClick, onClick, }) => {
     const hoverRef = react.useRef(hover);
     react.useEffect(() => {
         hoverRef.current = hover;
@@ -6826,6 +6826,10 @@ const useEntityInteraction = ({ layerPort, hover, select, dblClick, }) => {
     react.useEffect(() => {
         dblClickRef.current = dblClick;
     }, [dblClick]);
+    const onClickRef = react.useRef(onClick);
+    react.useEffect(() => {
+        onClickRef.current = onClick;
+    }, [onClick]);
     const guardRef = react.useRef(noopGuard);
     react.useEffect(() => {
         if (layerPort === null)
@@ -6843,6 +6847,7 @@ const useEntityInteraction = ({ layerPort, hover, select, dblClick, }) => {
             const { type } = event;
             switch (type) {
                 case "click":
+                    onClickRef.current?.(event.entity);
                     selectRef.current(event.entity);
                     break;
                 case "dblclick":
@@ -8916,7 +8921,7 @@ const applyPortalZIndex = (container, zIndex) => {
  * );
  * ```
  */
-const Layers = ({ layers, api }) => {
+const Layers = ({ layers, api, onEntityClick, onEntityDblClick }) => {
     const layerPort = useLayerPort();
     const [decorationLayers, setDecorationLayers] = react.useState([]);
     const [viewportStyleOverrides, setViewportStyleOverrides] = react.useState(new Map());
@@ -8950,12 +8955,17 @@ const Layers = ({ layers, api }) => {
             layers.select(entity);
         }
     }, [layers]);
-    const handleDblClick = useDblClickFit(api, layers.handles);
+    const fitOnDblClick = useDblClickFit(api, layers.handles);
+    const handleDblClick = react.useCallback((entity) => {
+        onEntityDblClick?.(entity);
+        fitOnDblClick?.(entity);
+    }, [onEntityDblClick, fitOnDblClick]);
     const setDomHoverActive = useEntityInteraction({
         layerPort,
         hover: layers.hover,
         select: coordinatedSelect,
         dblClick: handleDblClick,
+        onClick: onEntityClick,
     });
     const coordinatedHover = react.useCallback((entity) => {
         setDomHoverActive(entity !== null);

package/index.esm.js

@@ -6812,7 +6812,7 @@ const noopGuard = (_active) => undefined;
  *   suppresses adapter hover-start/hover-end). Call with `false` when the DOM
  *   hover ends, allowing adapter events to flow again.
  */
-const useEntityInteraction = ({ layerPort, hover, select, dblClick, }) => {
+const useEntityInteraction = ({ layerPort, hover, select, dblClick, onClick, }) => {
     const hoverRef = useRef(hover);
     useEffect(() => {
         hoverRef.current = hover;
@@ -6825,6 +6825,10 @@ const useEntityInteraction = ({ layerPort, hover, select, dblClick, }) => {
     useEffect(() => {
         dblClickRef.current = dblClick;
     }, [dblClick]);
+    const onClickRef = useRef(onClick);
+    useEffect(() => {
+        onClickRef.current = onClick;
+    }, [onClick]);
     const guardRef = useRef(noopGuard);
     useEffect(() => {
         if (layerPort === null)
@@ -6842,6 +6846,7 @@ const useEntityInteraction = ({ layerPort, hover, select, dblClick, }) => {
             const { type } = event;
             switch (type) {
                 case "click":
+                    onClickRef.current?.(event.entity);
                     selectRef.current(event.entity);
                     break;
                 case "dblclick":
@@ -8915,7 +8920,7 @@ const applyPortalZIndex = (container, zIndex) => {
  * );
  * ```
  */
-const Layers = ({ layers, api }) => {
+const Layers = ({ layers, api, onEntityClick, onEntityDblClick }) => {
     const layerPort = useLayerPort();
     const [decorationLayers, setDecorationLayers] = useState([]);
     const [viewportStyleOverrides, setViewportStyleOverrides] = useState(new Map());
@@ -8949,12 +8954,17 @@ const Layers = ({ layers, api }) => {
             layers.select(entity);
         }
     }, [layers]);
-    const handleDblClick = useDblClickFit(api, layers.handles);
+    const fitOnDblClick = useDblClickFit(api, layers.handles);
+    const handleDblClick = useCallback((entity) => {
+        onEntityDblClick?.(entity);
+        fitOnDblClick?.(entity);
+    }, [onEntityDblClick, fitOnDblClick]);
     const setDomHoverActive = useEntityInteraction({
         layerPort,
         hover: layers.hover,
         select: coordinatedSelect,
         dblClick: handleDblClick,
+        onClick: onEntityClick,
     });
     const coordinatedHover = useCallback((entity) => {
         setDomHoverActive(entity !== null);

package/package.json

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

package/src/layers/Layers.d.ts

@@ -1,3 +1,4 @@
+import { type Entity } from "@trackunit/react-map-adapter-shared";
 import type { MapApi } from "../core/types";
 import type { UseLayersReturn } from "./useLayers";
 type LayersProps = Readonly<{
@@ -5,6 +6,24 @@ type LayersProps = Readonly<{
     layers: UseLayersReturn;
     /** Map API for viewport-aware features (e.g. edge labels). Optional for backward compat. */
     api?: MapApi;
+    /**
+     * Called when the user directly clicks an entity on the map.
+     *
+     * Fires before the entity is selected, and **only** for genuine pointer
+     * clicks — programmatic `layers.select()` calls (e.g. from a list
+     * selection) do not trigger this callback. Use it to distinguish real
+     * map clicks from other selection sources, for example for analytics.
+     */
+    onEntityClick?: (entity: Entity) => void;
+    /**
+     * Called when the user directly double-clicks an entity on the map.
+     *
+     * Fires before the default fit behavior and **only** for genuine pointer
+     * double-clicks — programmatic interactions do not trigger this callback.
+     * Use it to distinguish real map double-clicks from other interaction
+     * sources, for example for analytics.
+     */
+    onEntityDblClick?: (entity: Entity) => void;
 }>;
 /**
  * `<Layers>` -- rendering bridge between layer handles and the map adapter.
@@ -28,5 +47,5 @@ type LayersProps = Readonly<{
  * );
  * ```
  */
-export declare const Layers: ({ layers, api }: LayersProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Layers: ({ layers, api, onEntityClick, onEntityDblClick }: LayersProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/layers/internal/useEntityInteraction.d.ts

@@ -4,6 +4,15 @@ type UseEntityInteractionConfig = Readonly<{
     hover: (entity: Entity | null) => void;
     select: (entity: Entity | null) => void;
     dblClick?: (entity: Entity) => void;
+    /**
+     * Called when the user clicks a map entity (marker, cluster, shape) directly
+     * on the map — fired before `select` and exclusively for real pointer clicks.
+     *
+     * Use this to distinguish a genuine user click from a programmatic
+     * `layers.select()` call (e.g. from a list selection), which does not flow
+     * through this callback.
+     */
+    onClick?: (entity: Entity) => void;
 }>;
 /**
  * Subscribes to entity interaction events (click, dblclick, hover-start,
@@ -17,5 +26,5 @@ type UseEntityInteractionConfig = Readonly<{
  *   suppresses adapter hover-start/hover-end). Call with `false` when the DOM
  *   hover ends, allowing adapter events to flow again.
  */
-export declare const useEntityInteraction: ({ layerPort, hover, select, dblClick, }: UseEntityInteractionConfig) => ((active: boolean) => void);
+export declare const useEntityInteraction: ({ layerPort, hover, select, dblClick, onClick, }: UseEntityInteractionConfig) => ((active: boolean) => void);
 export {};