14444672009

Committed 14 Apr 2025 11:37AM UTC coverage: 57.921% (-0.2%) from 58.076%

Build # 14444672009

Build Type

push

github

Committed by

web-flow

Commit Message

Merge pull request #4208 from terrestris/draw-cut-button

feat: highlight the cut geometry

Run Details

508 of 981 branches covered (51.78%)

Branch coverage included in aggregate %.

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

2 existing lines in 1 file now uncovered.

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

0.0

/src/Button/DrawCutButton/DrawCutButton.tsx

import React, {FC, useCallback, useRef, useState} from 'react';

import {Popconfirm, PopconfirmProps} from 'antd';

import OlFeature from 'ol/Feature';
import OlGeometry from 'ol/geom/Geometry';
import OlVectorLayer from 'ol/layer/Vector';
import OlVectorSource from 'ol/source/Vector';
import OlStyleStroke from 'ol/style/Stroke';
import OlStyle, { StyleLike as OlStyleLike } from 'ol/style/Style';

import {useDrawCut} from '@terrestris/react-util';
import useOlLayer from '@terrestris/react-util/dist/Hooks/useOlLayer/useOlLayer';

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

interface OwnProps {
  /**
   * Style object / style function for drawn feature.
   */
  drawStyle?: OlStyleLike;
  /**
   * Style object / style function for highlighting the cut geometry.
   */
  highlightStyle?: OlStyleLike;
  /**
   * The vector layer which will be used for digitize features.
   * The standard digitizeLayer can be retrieved via `DigitizeUtil.getDigitizeLayer(map)`.
   */
  digitizeLayer?: OlVectorLayer<OlVectorSource>;
  /**
   * Text to show in the Popconfirm after drawing the cut.
   */
  popConfirmText?: string;
  /**
   * Props to pass to the antd Popconfirm component.
   */
  popConfirmProps?: Omit<PopconfirmProps, 'onConfirm'|'onCancel'|'open'|'title'>;
}

export type DrawCutProps = OwnProps & Partial<ToggleButtonProps>;

export const defaultHighlightStyle = new OlStyle({
  stroke: new OlStyleStroke({
    color: 'rgba(232, 38, 11, 0.9)',
    width: 2
  })
});

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

export const DrawCutButton: FC<DrawCutProps> = ({
  digitizeLayer,
  drawStyle,
  className,
  pressed,
  popConfirmProps,
  highlightStyle = defaultHighlightStyle,
  popConfirmText = 'Perform cut?',
  ...passThroughProps
}) => {
  const [popOpen, setPopOpen] = useState(false);

  const promise = useRef<PromiseWithResolvers<boolean>>();

  const highlightLayer = useOlLayer(() => new OlVectorLayer({
    source: new OlVectorSource(),
    style: highlightStyle
  }), []);

  const onCutStart = useCallback((geom: OlGeometry) => {
    if (promise.current) {
      promise.current.reject();
    }

    promise.current = Promise.withResolvers();

    highlightLayer?.getSource()?.clear();
    highlightLayer?.getSource()?.addFeature(new OlFeature(geom));

    setPopOpen(true);

    return promise.current.promise;
  }, [highlightLayer]);

  const resolvePopConfirm = useCallback((value: boolean) => {
    return () => {
      promise.current?.resolve(value);
      promise.current = undefined;
      highlightLayer?.getSource()?.clear();
      setPopOpen(false);
    };
  }, [highlightLayer]);

  useDrawCut({
    digitizeLayer,
    drawStyle,
    active: !!pressed,
    onCutStart
  });

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

  const btnWrapperClass = `${CSS_PREFIX}digitize-button-wrapper`;

  return (
    <span className={btnWrapperClass}>
      <Popconfirm
        open={popOpen}
        onConfirm={resolvePopConfirm(true)}
        onCancel={resolvePopConfirm(false)}
        title={popConfirmText}
        {...popConfirmProps}
      >
        <ToggleButton
          pressed={pressed}
          className={finalClassName}
          disabled={popOpen}
          {...passThroughProps}
        />
      </Popconfirm>
    </span>
  );
};

export default DrawCutButton;

1	import React, {FC, useCallback, useRef, useState} from 'react';
2
3	import {Popconfirm, PopconfirmProps} from 'antd';
4
5	import OlFeature from 'ol/Feature';
6	import OlGeometry from 'ol/geom/Geometry';
7	import OlVectorLayer from 'ol/layer/Vector';
8	import OlVectorSource from 'ol/source/Vector';
9	import OlStyleStroke from 'ol/style/Stroke';
10	import OlStyle, { StyleLike as OlStyleLike } from 'ol/style/Style';
11
12	import {useDrawCut} from '@terrestris/react-util';
13	import useOlLayer from '@terrestris/react-util/dist/Hooks/useOlLayer/useOlLayer';
14
15	import { CSS_PREFIX } from '../../constants';
16	import ToggleButton, {ToggleButtonProps} from '../ToggleButton/ToggleButton';
17
18	interface OwnProps {
19	/**
20	* Style object / style function for drawn feature.
21	*/
22	drawStyle?: OlStyleLike;
23	/**
24	* Style object / style function for highlighting the cut geometry.
25	*/
26	highlightStyle?: OlStyleLike;
27	/**
28	* The vector layer which will be used for digitize features.
29	* The standard digitizeLayer can be retrieved via `DigitizeUtil.getDigitizeLayer(map)`.
30	*/
31	digitizeLayer?: OlVectorLayer<OlVectorSource>;
32	/**
33	* Text to show in the Popconfirm after drawing the cut.
34	*/
35	popConfirmText?: string;
36	/**
37	* Props to pass to the antd Popconfirm component.
38	*/
39	popConfirmProps?: Omit<PopconfirmProps, 'onConfirm'\|'onCancel'\|'open'\|'title'>;
40	}
41
42	export type DrawCutProps = OwnProps & Partial<ToggleButtonProps>;
43
NEW 44	export const defaultHighlightStyle = new OlStyle({	×
45	stroke: new OlStyleStroke({
46	color: 'rgba(232, 38, 11, 0.9)',
47	width: 2
48	})
49	});
50
51	/**
52	* The className added to this component.
53	*/
54	const defaultClassName = `${CSS_PREFIX}drawcutbutton`;	×
55
56	export const DrawCutButton: FC<DrawCutProps> = ({	×
57	digitizeLayer,
58	drawStyle,
59	className,
60	pressed,
61	popConfirmProps,
62	highlightStyle = defaultHighlightStyle,	×
63	popConfirmText = 'Perform cut?',	×
64	...passThroughProps
65	}) => {
66	const [popOpen, setPopOpen] = useState(false);	×
67
68	const promise = useRef<PromiseWithResolvers<boolean>>();	×
69
NEW 70	const highlightLayer = useOlLayer(() => new OlVectorLayer({	×
71	source: new OlVectorSource(),
72	style: highlightStyle
73	}), []);
74
NEW 75	const onCutStart = useCallback((geom: OlGeometry) => {	×
76	if (promise.current) {	×
77	promise.current.reject();	×
78	}
79
80	promise.current = Promise.withResolvers();	×
81
NEW 82	highlightLayer?.getSource()?.clear();	×
NEW 83	highlightLayer?.getSource()?.addFeature(new OlFeature(geom));	×
84
UNCOV 85	setPopOpen(true);	×
86
87	return promise.current.promise;	×
88	}, [highlightLayer]);
89
90	const resolvePopConfirm = useCallback((value: boolean) => {	×
91	return () => {	×
92	promise.current?.resolve(value);	×
93	promise.current = undefined;	×
NEW 94	highlightLayer?.getSource()?.clear();	×
UNCOV 95	setPopOpen(false);	×
96	};
97	}, [highlightLayer]);
98
99	useDrawCut({	×
100	digitizeLayer,
101	drawStyle,
102	active: !!pressed,
103	onCutStart
104	});
105
106	const finalClassName = className	×
107	? `${defaultClassName} ${className}`
108	: defaultClassName;
109
110	const btnWrapperClass = `${CSS_PREFIX}digitize-button-wrapper`;	×
111
112	return (	×
113	<span className={btnWrapperClass}>
114	<Popconfirm
115	open={popOpen}
116	onConfirm={resolvePopConfirm(true)}
117	onCancel={resolvePopConfirm(false)}
118	title={popConfirmText}
119	{...popConfirmProps}
120	>
121	<ToggleButton
122	pressed={pressed}
123	className={finalClassName}
124	disabled={popOpen}
125	{...passThroughProps}
126	/>
127	</Popconfirm>
128	</span>
129	);
130	};
131
132	export default DrawCutButton;

terrestris / react-geo / 14444672009

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