16910231513

Committed 12 Aug 2025 01:24PM UTC coverage: 57.289% (-0.3%) from 57.562%

Build # 16910231513

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #4368 from terrestris/searchfield-without-autocomplete

allow SearchField with external data display

Run Details

532 of 1040 branches covered (51.15%)

Branch coverage included in aggregate %.

0 of 5 new or added lines in 1 file covered. (0.0%)

1036 of 1697 relevant lines covered (61.05%)

10.8 hits per line

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

50.0

/src/Button/CopyButton/CopyButton.tsx

import React, {
  useCallback,
  useMemo,
} from 'react';

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

import OlLayerVector from 'ol/layer/Vector';

import OlSourceVector from 'ol/source/Vector';

import OlStyle from 'ol/style/Style';

import AnimateUtil from '@terrestris/ol-util/dist/AnimateUtil/AnimateUtil';
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?: OlLayerVector<OlSourceVector>;
  /**
   * Listener function for the 'select' event of the ol.interaction.Select
   * if in `Copy` mode.
   * See https://openlayers.org/en/latest/apidoc/module-ol_interaction_Select-SelectEvent.html
   * for more information.
   */
  onFeatureCopy?: (event: OlSelectEvent) => void;
}

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

// The class name for the component.
const defaultClassName = `${CSS_PREFIX}copybutton`;

const CopyButton: React.FC<CopyButtonProps> = ({
  className,
  digitizeLayer,
  onFeatureCopy,
  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) => {
    const feat = event.selected[0];

    if (!feat || !layer || !map) {
      return;
    }

    const copy = feat.clone();

    layer.getSource()?.addFeature(copy);

    onFeatureCopy?.(event);

    AnimateUtil.moveFeature(
      map,
      layer as OlLayerVector<OlSourceVector>,
      copy,
      500,
      50,
      layer.getStyle() as OlStyle
    );
  }, [layer, onFeatureCopy, map]);

  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 CopyButton;

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

terrestris / react-geo / 16910231513

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