14444367980

Committed 14 Apr 2025 11:21AM UTC coverage: 57.921%. First build

Build # 14444367980

Build Type

Pull #4208

github

Committed by

web-flow

Commit Message

Merge 02928c031 into fd2dc8037

Pull Request Pull Request #4208: feat: highlight the cut geometry

Run Details

508 of 980 branches covered (51.84%)

Branch coverage included in aggregate %.

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

1013 of 1646 relevant lines covered (61.54%)

11.09 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>;
  /**
   * Props to pass to the antd Popconfirm component.
   */
  popConfirmProps?: Omit<PopconfirmProps, 'onConfirm'|'onCancel'|'open'>;
}

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,
  ...passThroughProps
}) => {
  const [popOpen, setPopOpen] = useState(false);

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

  const highlightLayer = useOlLayer(() => {
    return 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);
    }
  }, []);

  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={"Perform Cut"}
        {...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	* Props to pass to the antd Popconfirm component.
34	*/
35	popConfirmProps?: Omit<PopconfirmProps, 'onConfirm'\|'onCancel'\|'open'>;
36	}
37
38	export type DrawCutProps = OwnProps & Partial<ToggleButtonProps>;
39
NEW 40	export const defaultHighlightStyle = new OlStyle({	×
41	stroke: new OlStyleStroke({
42	color: 'rgba(232, 38, 11, 0.9)',
43	width: 2
44	})
45	});
46
47	/**
48	* The className added to this component.
49	*/
50	const defaultClassName = `${CSS_PREFIX}drawcutbutton`;	×
51
52	export const DrawCutButton: FC<DrawCutProps> = ({	×
53	digitizeLayer,
54	drawStyle,
55	className,
56	pressed,
57	popConfirmProps,
58	highlightStyle = defaultHighlightStyle,	×
59	...passThroughProps
60	}) => {
61	const [popOpen, setPopOpen] = useState(false);	×
62
63	const promise = useRef<PromiseWithResolvers<boolean>>();	×
64
NEW 65	const highlightLayer = useOlLayer(() => {	×
NEW 66	return new OlVectorLayer({	×
67	source: new OlVectorSource(),
68	style: highlightStyle
69	})
70	}, []);
71
NEW 72	const onCutStart = useCallback((geom: OlGeometry) => {	×
73	if (promise.current) {	×
74	promise.current.reject();	×
75	}
76
77	promise.current = Promise.withResolvers();	×
78
NEW 79	highlightLayer?.getSource()?.clear();	×
NEW 80	highlightLayer?.getSource()?.addFeature(new OlFeature(geom));	×
81
82	setPopOpen(true);	×
83
84	return promise.current.promise;	×
85	}, [highlightLayer])
86
87	const resolvePopConfirm = useCallback((value: boolean) => {	×
88	return () => {	×
89	promise.current?.resolve(value);	×
90	promise.current = undefined;	×
NEW 91	highlightLayer?.getSource()?.clear();	×
92	setPopOpen(false);	×
93	}
94	}, []);
95
96	useDrawCut({	×
97	digitizeLayer,
98	drawStyle,
99	active: !!pressed,
100	onCutStart
101	});
102
103	const finalClassName = className	×
104	? `${defaultClassName} ${className}`
105	: defaultClassName;
106
107	const btnWrapperClass = `${CSS_PREFIX}digitize-button-wrapper`;	×
108
109	return (	×
110	<span className={btnWrapperClass}>
111	<Popconfirm
112	open={popOpen}
113	onConfirm={resolvePopConfirm(true)}
114	onCancel={resolvePopConfirm(false)}
115	title={"Perform Cut"}
116	{...popConfirmProps}
117	>
118	<ToggleButton
119	pressed={pressed}
120	className={finalClassName}
121	disabled={popOpen}
122	{...passThroughProps}
123	/>
124	</Popconfirm>
125	</span>
126	);
127	};
128
129	export default DrawCutButton;

terrestris / react-geo / 14444367980

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