15165845368

Committed 21 May 2025 03:08PM UTC coverage: 57.921%. First build

Build # 15165845368

Build Type

Pull #4236

github

Committed by

web-flow

Commit Message

Merge 3d227e8c6 into cbdddcaae

Pull Request Pull Request #4236: fix: fire delete event after removal of feature from source

Run Details

508 of 981 branches covered (51.78%)

Branch coverage included in aggregate %.

0 of 2 new or added lines in 2 files covered. (0.0%)

1013 of 1645 relevant lines covered (61.58%)

11.1 hits per line

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

60.87

/src/Button/DeleteButton/DeleteButton.tsx

import * as React from 'react';

import {useCallback, useMemo} from 'react';

import { SelectEvent as OlSelectEvent } from 'ol/interaction/Select';

import OlVectorLayer from 'ol/layer/Vector';

import OlSourceVector from 'ol/source/Vector';

import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
import { usePropOrDefault } from '@terrestris/react-util/dist/Hooks/usePropOrDefault/usePropOrDefault';
import {
  useSelectFeatures,
  UseSelectFeaturesProps
} from '@terrestris/react-util/dist/Hooks/useSelectFeatures/useSelectFeatures';
import { DigitizeUtil } from '@terrestris/react-util/dist/Util/DigitizeUtil';


import { CSS_PREFIX } from '../../constants';
import ToggleButton, {ToggleButtonProps} from '../ToggleButton/ToggleButton';

interface OwnProps {
  /**
   * The vector layer which will be used for digitize features.
   * The standard digitizeLayer can be retrieved via `DigitizeUtil.getDigitizeLayer(map)`.
   */
  digitizeLayer?: OlVectorLayer<OlSourceVector>;
  /**
   * Listener function for the 'select' event of the ol.interaction.Select
   * if in `Delete` mode.
   * See https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-SelectEvent.html
   * for more information.
   */
  onFeatureRemove?: (event: OlSelectEvent) => void;
}

export type DeleteButtonProps = OwnProps & Omit<UseSelectFeaturesProps,
  'layers'|'onFeatureSelect'|'featuresCollection'|'clearAfterSelect'|'active'> & Partial<ToggleButtonProps>;

/**
 * The className added to this component.
 */
const defaultClassName = `${CSS_PREFIX}deletebutton`;

export const DeleteButton: React.FC<DeleteButtonProps> = ({
  className,
  digitizeLayer,
  onFeatureRemove,
  selectStyle,
  selectInteractionConfig,
  hitTolerance,
  pressed,
  ...passThroughProps
}) => {

  const map = useMap();

  const layer = usePropOrDefault(
    digitizeLayer,
    () => map ? DigitizeUtil.getDigitizeLayer(map) : undefined,
    [map]
  );

  const layers = useMemo(() => layer ? [layer] : [], [layer]);

  const onFeatureSelect = useCallback((event: OlSelectEvent) => {
    if (!layer) {
      return;
    }
    const feat = event.selected[0];
    layer.getSource()?.removeFeature(feat);
    onFeatureRemove?.(event);
  }, [layer, onFeatureRemove]);

  useSelectFeatures({
    selectStyle,
    selectInteractionConfig,
    layers,
    active: !!pressed,
    hitTolerance,
    onFeatureSelect,
    clearAfterSelect: true
  });

  const finalClassName = className
    ? `${defaultClassName} ${className}`
    : defaultClassName;

  return (
    <ToggleButton
      pressed={pressed}
      className={finalClassName}
      {...passThroughProps}
    />
  );
};

export default DeleteButton;

1	import * as React from 'react';
2
3	import {useCallback, useMemo} from 'react';
4
5	import { SelectEvent as OlSelectEvent } from 'ol/interaction/Select';
6
7	import OlVectorLayer from 'ol/layer/Vector';
8
9	import OlSourceVector from 'ol/source/Vector';
10
11	import useMap from '@terrestris/react-util/dist/Hooks/useMap/useMap';
12	import { usePropOrDefault } from '@terrestris/react-util/dist/Hooks/usePropOrDefault/usePropOrDefault';
13	import {
14	useSelectFeatures,
15	UseSelectFeaturesProps
16	} from '@terrestris/react-util/dist/Hooks/useSelectFeatures/useSelectFeatures';
17	import { DigitizeUtil } from '@terrestris/react-util/dist/Util/DigitizeUtil';
18
19
20	import { CSS_PREFIX } from '../../constants';
21	import ToggleButton, {ToggleButtonProps} from '../ToggleButton/ToggleButton';
22
23	interface OwnProps {
24	/**
25	* The vector layer which will be used for digitize features.
26	* The standard digitizeLayer can be retrieved via `DigitizeUtil.getDigitizeLayer(map)`.
27	*/
28	digitizeLayer?: OlVectorLayer<OlSourceVector>;
29	/**
30	* Listener function for the 'select' event of the ol.interaction.Select
31	* if in `Delete` mode.
32	* See https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-SelectEvent.html
33	* for more information.
34	*/
35	onFeatureRemove?: (event: OlSelectEvent) => void;
36	}
37
38	export type DeleteButtonProps = OwnProps & Omit<UseSelectFeaturesProps,
39	'layers'\|'onFeatureSelect'\|'featuresCollection'\|'clearAfterSelect'\|'active'> & Partial<ToggleButtonProps>;
40
41	/**
42	* The className added to this component.
43	*/
44	const defaultClassName = `${CSS_PREFIX}deletebutton`;	1✔
45
46	export const DeleteButton: React.FC<DeleteButtonProps> = ({	1✔
47	className,
48	digitizeLayer,
49	onFeatureRemove,
50	selectStyle,
51	selectInteractionConfig,
52	hitTolerance,
53	pressed,
54	...passThroughProps
55	}) => {
56
57	const map = useMap();	3✔
58
59	const layer = usePropOrDefault(	3✔
60	digitizeLayer,
61	() => map ? DigitizeUtil.getDigitizeLayer(map) : undefined,	1!
62	[map]
63	);
64
65	const layers = useMemo(() => layer ? [layer] : [], [layer]);	3✔
66
67	const onFeatureSelect = useCallback((event: OlSelectEvent) => {	3✔
68	if (!layer) {	×
69	return;	×
70	}
71	const feat = event.selected[0];	×
72	layer.getSource()?.removeFeature(feat);	×
NEW 73	onFeatureRemove?.(event);	×
74	}, [layer, onFeatureRemove]);
75
76	useSelectFeatures({	3✔
77	selectStyle,
78	selectInteractionConfig,
79	layers,
80	active: !!pressed,
81	hitTolerance,
82	onFeatureSelect,
83	clearAfterSelect: true
84	});
85
86	const finalClassName = className	3!
87	? `${defaultClassName} ${className}`
88	: defaultClassName;
89
90	return (	3✔
91	<ToggleButton
92	pressed={pressed}
93	className={finalClassName}
94	{...passThroughProps}
95	/>
96	);
97	};
98
99	export default DeleteButton;

terrestris / react-geo / 15165845368

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