23000745830

Committed 12 Mar 2026 11:55AM UTC coverage: 68.111% (-0.4%) from 68.478%

Build # 23000745830

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #4501 from ahennr/feat/pointer-rest-coordinate-info

Feat(MapComponent) : Add pointermove map event

Run Details

696 of 1111 branches covered (62.65%)

Branch coverage included in aggregate %.

16 of 31 new or added lines in 1 file covered. (51.61%)

1284 of 1796 relevant lines covered (71.49%)

14.75 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

55.56

/src/Map/MapComponent/MapComponent.tsx

import React, {
  useCallback, JSX, FC, ComponentProps, useState, useEffect
} from 'react';

import {
  DebouncedFunc
} from 'lodash';
import _debounce from 'lodash/debounce';

import OlMap from 'ol/Map';
import OlMapBrowserEvent from 'ol/MapBrowserEvent';
import {
  Pixel
} from 'ol/pixel';

export type MapComponentProps = ComponentProps<'div'> & {
  firePointerRest?: boolean;
  map: OlMap;
  mapDivId?: string;
  pointerRestInterval?: number;
  pointerRestTolerance?: number;
};

export const MapComponent: FC<MapComponentProps> = ({
  firePointerRest = false,
  pointerRestInterval = 1,
  pointerRestTolerance = 1,
  map,
  mapDivId = 'map',
  ...passThroughProps
}): JSX.Element => {

  const [lastPointerPixel, setLastPointerPixel] = useState<Pixel>([-Infinity, -Infinity]);
  const [isMouseOverMapEl, setIsMouseOverMapEl] = useState<boolean>(false);

  const refCallback = useCallback((ref: HTMLDivElement) => {
    if (!map) {
      return;
    }
    if (ref === null) {
      map.setTarget(undefined);
    } else {
      map.setTarget(ref);
    }
  }, [map]);

  const checkPointerRest = useCallback((olEvt: OlMapBrowserEvent<PointerEvent | KeyboardEvent | WheelEvent>): void => {

    if (olEvt.dragging || !isMouseOverMapEl) {
      return;
    }
    const target: EventTarget | null = olEvt?.originalEvent?.target;
    if (target && (target as HTMLElement).tagName?.toLowerCase() !== 'canvas') {
      return;
    }

    const pixel: Pixel = olEvt.pixel;

    if (lastPointerPixel) {
      const deltaX: number = Math.abs(lastPointerPixel[0] - pixel[0]);
      const deltaY: number = Math.abs(lastPointerPixel[1] - pixel[1]);

      if (deltaX > pointerRestTolerance || deltaY > pointerRestTolerance) {
        setLastPointerPixel(pixel);
      } else {
        return;
      }
    } else {
      setLastPointerPixel(pixel);
    }

    const pointerRestEvent = new OlMapBrowserEvent<PointerEvent | KeyboardEvent | WheelEvent>(
      'pointerrest', map, olEvt.originalEvent
    );

    map.dispatchEvent(pointerRestEvent);
  }, [isMouseOverMapEl, lastPointerPixel, map, pointerRestTolerance]);

  useEffect(() => {
    if (!map) {
      return;
    }

    const debouncedCheckPointerRest: DebouncedFunc<(
      evt: OlMapBrowserEvent<PointerEvent | KeyboardEvent | WheelEvent>
    ) => void> =
      _debounce(
        checkPointerRest,
        pointerRestInterval
      );

    if (map) {
      if (firePointerRest) {
        map.on('pointermove', debouncedCheckPointerRest);
      }
    }
    return () => {
      if (firePointerRest) {
        map.un('pointermove', debouncedCheckPointerRest);
      }
    };

  }, [checkPointerRest, firePointerRest, map, pointerRestInterval]);

  if (!map) {
    return <></>;
  }

  return (
    <div
      id={mapDivId}
      ref={refCallback}
      className="map"
      onMouseOver={() => setIsMouseOverMapEl(true)}
      onMouseOut={() => setIsMouseOverMapEl(false)}
      role="presentation"
      {...passThroughProps}
    />
  );
};

export default MapComponent;

1	import React, {
2	useCallback, JSX, FC, ComponentProps, useState, useEffect
3	} from 'react';
4
5	import {
6	DebouncedFunc
7	} from 'lodash';
8	import _debounce from 'lodash/debounce';
9
10	import OlMap from 'ol/Map';
11	import OlMapBrowserEvent from 'ol/MapBrowserEvent';
12	import {
13	Pixel
14	} from 'ol/pixel';
15
16	export type MapComponentProps = ComponentProps<'div'> & {
17	firePointerRest?: boolean;
18	map: OlMap;
19	mapDivId?: string;
20	pointerRestInterval?: number;
21	pointerRestTolerance?: number;
22	};
23
24	export const MapComponent: FC<MapComponentProps> = ({	4✔
25	firePointerRest = false,	50✔
26	pointerRestInterval = 1,	53✔
27	pointerRestTolerance = 1,	53✔
28	map,
29	mapDivId = 'map',	14✔
30	...passThroughProps
31	}): JSX.Element => {
32
33	const [lastPointerPixel, setLastPointerPixel] = useState<Pixel>([-Infinity, -Infinity]);	55✔
34	const [isMouseOverMapEl, setIsMouseOverMapEl] = useState<boolean>(false);	55✔
35
36	const refCallback = useCallback((ref: HTMLDivElement) => {	55✔
37	if (!map) {	84!
38	return;	×
39	}
40	if (ref === null) {	84✔
41	map.setTarget(undefined);	42✔
42	} else {
43	map.setTarget(ref);	42✔
44	}
45	}, [map]);
46
47	const checkPointerRest = useCallback((olEvt: OlMapBrowserEvent<PointerEvent \| KeyboardEvent \| WheelEvent>): void => {	55✔
48
NEW 49	if (olEvt.dragging \|\| !isMouseOverMapEl) {	×
NEW 50	return;	×
51	}
NEW 52	const target: EventTarget \| null = olEvt?.originalEvent?.target;	×
NEW 53	if (target && (target as HTMLElement).tagName?.toLowerCase() !== 'canvas') {	×
NEW 54	return;	×
55	}
56
NEW 57	const pixel: Pixel = olEvt.pixel;	×
58
NEW 59	if (lastPointerPixel) {	×
NEW 60	const deltaX: number = Math.abs(lastPointerPixel[0] - pixel[0]);	×
NEW 61	const deltaY: number = Math.abs(lastPointerPixel[1] - pixel[1]);	×
62
NEW 63	if (deltaX > pointerRestTolerance \|\| deltaY > pointerRestTolerance) {	×
NEW 64	setLastPointerPixel(pixel);	×
65	} else {
NEW 66	return;	×
67	}
68	} else {
NEW 69	setLastPointerPixel(pixel);	×
70	}
71
NEW 72	const pointerRestEvent = new OlMapBrowserEvent<PointerEvent \| KeyboardEvent \| WheelEvent>(	×
73	'pointerrest', map, olEvt.originalEvent
74	);
75
NEW 76	map.dispatchEvent(pointerRestEvent);	×
77	}, [isMouseOverMapEl, lastPointerPixel, map, pointerRestTolerance]);
78
79	useEffect(() => {	55✔
80	if (!map) {	46✔
81	return;	1✔
82	}
83
84	const debouncedCheckPointerRest: DebouncedFunc<(
85	evt: OlMapBrowserEvent<PointerEvent \| KeyboardEvent \| WheelEvent>
86	) => void> =
87	_debounce(	45✔
88	checkPointerRest,
89	pointerRestInterval
90	);
91
92	if (map) {	45!
93	if (firePointerRest) {	45✔
94	map.on('pointermove', debouncedCheckPointerRest);	4✔
95	}
96	}
97	return () => {	45✔
98	if (firePointerRest) {	45✔
99	map.un('pointermove', debouncedCheckPointerRest);	4✔
100	}
101	};
102
103	}, [checkPointerRest, firePointerRest, map, pointerRestInterval]);
104
105	if (!map) {	55✔
106	return <></>;	1✔
107	}
108
109	return (	54✔
110	<div
111	id={mapDivId}
112	ref={refCallback}
113	className="map"
114	onMouseOver={() => setIsMouseOverMapEl(true)}	2✔
115	onMouseOut={() => setIsMouseOverMapEl(false)}	1✔
116	role="presentation"
117	{...passThroughProps}
118	/>
119	);
120	};
121
122	export default MapComponent;

terrestris / react-geo / 23000745830

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous