22960711092

Committed 11 Mar 2026 03:34PM UTC coverage: 68.111% (-0.4%) from 68.478%

Build # 22960711092

Build Type

Pull #4501

github

Committed by

web-flow

Commit Message

Merge 17295d1c3 into 0e236b75f

Pull Request Pull Request #4501: Feat(MapComponent) : Add pointermove map event

Coverage Stats

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]);

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

    const checkPointerRest = (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);
      }

      olEvt.type = 'pointerrest';
      map.dispatchEvent(olEvt);
    };

    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);
      }
    };

  }, [map, firePointerRest, isMouseOverMapEl, pointerRestInterval, lastPointerPixel, pointerRestTolerance]);

  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	useEffect(() => {	55✔
48	if (!map) {	46✔
49	return;	1✔
50	}
51
52	const checkPointerRest = (olEvt: OlMapBrowserEvent<PointerEvent \| KeyboardEvent \| WheelEvent>): void => {	45✔
53
NEW 54	if (olEvt.dragging \|\| !isMouseOverMapEl) {	×
NEW 55	return;	×
56	}
NEW 57	const target: EventTarget \| null = olEvt?.originalEvent?.target;	×
NEW 58	if (target && (target as HTMLElement).tagName?.toLowerCase() !== 'canvas') {	×
NEW 59	return;	×
60	}
61
NEW 62	const pixel: Pixel = olEvt.pixel;	×
63
NEW 64	if (lastPointerPixel) {	×
NEW 65	const deltaX: number = Math.abs(lastPointerPixel[0] - pixel[0]);	×
NEW 66	const deltaY: number = Math.abs(lastPointerPixel[1] - pixel[1]);	×
67
NEW 68	if (deltaX > pointerRestTolerance \|\| deltaY > pointerRestTolerance) {	×
NEW 69	setLastPointerPixel(pixel);	×
70	} else {
NEW 71	return;	×
72	}
73	} else {
NEW 74	setLastPointerPixel(pixel);	×
75	}
76
NEW 77	olEvt.type = 'pointerrest';	×
NEW 78	map.dispatchEvent(olEvt);	×
79	};
80
81	const debouncedCheckPointerRest: DebouncedFunc<(
82	evt: OlMapBrowserEvent<PointerEvent \| KeyboardEvent \| WheelEvent>
83	) => void> =
84	_debounce(	45✔
85	checkPointerRest,
86	pointerRestInterval
87	);
88
89	if (map) {	45!
90	if (firePointerRest) {	45✔
91	map.on('pointermove', debouncedCheckPointerRest);	4✔
92	}
93	}
94	return () => {	45✔
95	if (firePointerRest) {	45✔
96	map.un('pointermove', debouncedCheckPointerRest);	4✔
97	}
98	};
99
100	}, [map, firePointerRest, isMouseOverMapEl, pointerRestInterval, lastPointerPixel, pointerRestTolerance]);
101
102	if (!map) {	55✔
103	return <></>;	1✔
104	}
105
106	return (	54✔
107	<div
108	id={mapDivId}
109	ref={refCallback}
110	className="map"
111	onMouseOver={() => setIsMouseOverMapEl(true)}	2✔
112	onMouseOut={() => setIsMouseOverMapEl(false)}	1✔
113	role="presentation"
114	{...passThroughProps}
115	/>
116	);
117	};
118
119	export default MapComponent;

terrestris / react-geo / 22960711092

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