14441543399

Committed 14 Apr 2025 08:54AM UTC coverage: 58.076% (-0.5%) from 58.59%

Build # 14441543399

Build Type

push

github

Committed by

web-flow

Commit Message

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

feat: added DrawCutButton

Run Details

508 of 979 branches covered (51.89%)

Branch coverage included in aggregate %.

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

1013 of 1640 relevant lines covered (61.77%)

11.14 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 { StyleLike as OlStyleLike } from 'ol/style/Style';
import OlVectorLayer from "ol/layer/Vector";
import OlVectorSource from "ol/source/Vector";

import {useDrawCut} from "@terrestris/react-util";

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

interface OwnProps {
  /**
   * Style object / style function for drawn feature.
   */
  drawStyle?: 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>;

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

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

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

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

    promise.current = Promise.withResolvers();

    setPopOpen(true);

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

  const resolvePopConfirm = useCallback((value: boolean) => {
    return () => {
      promise.current?.resolve(value);
      promise.current = undefined;
      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 { StyleLike as OlStyleLike } from 'ol/style/Style';
6	import OlVectorLayer from "ol/layer/Vector";
7	import OlVectorSource from "ol/source/Vector";
8
9	import {useDrawCut} from "@terrestris/react-util";
10
11	import ToggleButton, {ToggleButtonProps} from "../ToggleButton/ToggleButton";
12	import { CSS_PREFIX } from '../../constants';
13
14	interface OwnProps {
15	/**
16	* Style object / style function for drawn feature.
17	*/
18	drawStyle?: OlStyleLike;
19	/**
20	* The vector layer which will be used for digitize features.
21	* The standard digitizeLayer can be retrieved via `DigitizeUtil.getDigitizeLayer(map)`.
22	*/
23	digitizeLayer?: OlVectorLayer<OlVectorSource>;
24	/**
25	* Props to pass to the antd Popconfirm component.
26	*/
27	popConfirmProps?: Omit<PopconfirmProps, 'onConfirm'\|'onCancel'\|'open'>;
28	}
29
30	export type DrawCutProps = OwnProps & Partial<ToggleButtonProps>;
31
32	/**
33	* The className added to this component.
34	*/
NEW 35	const defaultClassName = `${CSS_PREFIX}drawcutbutton`;	×
36
NEW 37	export const DrawCutButton: FC<DrawCutProps> = ({	×
38	digitizeLayer,
39	drawStyle,
40	className,
41	pressed,
42	popConfirmProps,
43	...passThroughProps
44	}) => {
NEW 45	const [popOpen, setPopOpen] = useState(false);	×
46
NEW 47	const promise = useRef<PromiseWithResolvers<boolean>>();	×
48
NEW 49	const onCutStart = useCallback(() => {	×
NEW 50	if (promise.current) {	×
NEW 51	promise.current.reject();	×
52	}
53
NEW 54	promise.current = Promise.withResolvers();	×
55
NEW 56	setPopOpen(true);	×
57
NEW 58	return promise.current.promise;	×
59	}, [])
60
NEW 61	const resolvePopConfirm = useCallback((value: boolean) => {	×
NEW 62	return () => {	×
NEW 63	promise.current?.resolve(value);	×
NEW 64	promise.current = undefined;	×
NEW 65	setPopOpen(false);	×
66	}
67	}, []);
68
NEW 69	useDrawCut({	×
70	digitizeLayer,
71	drawStyle,
72	active: !!pressed,
73	onCutStart
74	});
75
NEW 76	const finalClassName = className	×
77	? `${defaultClassName} ${className}`
78	: defaultClassName;
79
NEW 80	const btnWrapperClass = `${CSS_PREFIX}digitize-button-wrapper`;	×
81
NEW 82	return (	×
83	<span className={btnWrapperClass}>
84	<Popconfirm
85	open={popOpen}
86	onConfirm={resolvePopConfirm(true)}
87	onCancel={resolvePopConfirm(false)}
88	title={"Perform Cut"}
89	{...popConfirmProps}
90	>
91	<ToggleButton
92	pressed={pressed}
93	className={finalClassName}
94	disabled={popOpen}
95	{...passThroughProps}
96	/>
97	</Popconfirm>
98	</span>
99	);
100	};
101
102	export default DrawCutButton;

terrestris / react-geo / 14441543399

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