diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx index 5b9150a2..de8a6222 100644 --- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx +++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx @@ -9,7 +9,6 @@ import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox'; import Select, { SelectValue } from 'antd/lib/select'; import Radio, { RadioChangeEvent } from 'antd/lib/radio'; import Input from 'antd/lib/input'; -import InputNumber from 'antd/lib/input-number'; interface InputElementParameters { attrID: number; @@ -17,7 +16,6 @@ interface InputElementParameters { values: string[]; currentValue: string; onChange(value: string): void; - ref: React.RefObject; } function renderInputElement(parameters: InputElementParameters): JSX.Element { @@ -27,7 +25,6 @@ function renderInputElement(parameters: InputElementParameters): JSX.Element { values, currentValue, onChange, - ref, } = parameters; const renderCheckbox = (): JSX.Element => ( @@ -114,7 +111,6 @@ function renderInputElement(parameters: InputElementParameters): JSX.Element { } }} onKeyDown={handleKeydown} - ref={ref as React.RefObject} /> @@ -259,8 +255,6 @@ interface Props { function AttributeEditor(props: Props): JSX.Element { const { attribute, currentValue, onChange } = props; const { inputType, values, id: attrID } = attribute; - const ref = inputType === 'number' ? React.createRef() - : React.createRef(); return (
@@ -268,7 +262,6 @@ function AttributeEditor(props: Props): JSX.Element {
{renderInputElement({ attrID, - ref, inputType, currentValue, values, diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx index 9ee0f8a9..73786bc3 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx @@ -4,20 +4,16 @@ import React from 'react'; -import { - Row, - Col, - Select, - Button, - InputNumber, - Radio, -} from 'antd'; - -import { RadioChangeEvent } from 'antd/lib/radio'; +import { Row, Col } from 'antd/lib/grid'; +import Select from 'antd/lib/select'; +import Button from 'antd/lib/button'; +import InputNumber from 'antd/lib/input-number'; +import Radio, { RadioChangeEvent } from 'antd/lib/radio'; import Text from 'antd/lib/typography/Text'; import { RectDrawingMethod } from 'cvat-canvas'; import { ShapeType } from 'reducers/interfaces'; +import { clamp } from 'utils/math'; interface Props { shapeType: ShapeType; @@ -117,7 +113,15 @@ function DrawShapePopoverComponent(props: Props): JSX.Element { { + if (typeof (value) === 'number') { + onChangePoints(Math.floor( + clamp(value, minimumPoints, Number.MAX_SAFE_INTEGER), + )); + } else if (!value) { + onChangePoints(undefined); + } + }} className='cvat-draw-shape-popover-points-selector' min={minimumPoints} value={numberOfPoints} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx index dc7952cf..12ccd044 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx @@ -4,26 +4,21 @@ import React from 'react'; -import { - Row, - Col, - Icon, - Select, - Radio, - Input, - Collapse, - Checkbox, - InputNumber, - Dropdown, - Menu, - Button, - Modal, - Popover, -} from 'antd'; - +import { Row, Col } from 'antd/lib/grid'; +import Icon from 'antd/lib/icon'; +import Select from 'antd/lib/select'; +import Radio, { RadioChangeEvent } from 'antd/lib/radio'; +import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox'; +import Input from 'antd/lib/input'; +import InputNumber from 'antd/lib/input-number'; +import Collapse from 'antd/lib/collapse'; +import Dropdown from 'antd/lib/dropdown'; +import Menu from 'antd/lib/menu'; +import Button from 'antd/lib/button'; +import Modal from 'antd/lib/modal'; +import Popover from 'antd/lib/popover'; import Text from 'antd/lib/typography/Text'; -import { RadioChangeEvent } from 'antd/lib/radio'; -import { CheckboxChangeEvent } from 'antd/lib/checkbox'; + import ColorChanger from 'components/annotation-page/standard-workspace/objects-side-bar/color-changer'; import { @@ -36,9 +31,8 @@ import { ForegroundIcon, } from 'icons'; -import { - ObjectType, ShapeType, -} from 'reducers/interfaces'; +import { ObjectType, ShapeType } from 'reducers/interfaces'; +import { clamp } from 'utils/math'; function ItemMenu( serverID: number | undefined, @@ -463,7 +457,7 @@ function ItemAttributeComponent(props: ItemAttributeComponentProps): JSX.Element } if (attrInputType === 'number') { - const [min, max, step] = attrValues; + const [min, max, step] = attrValues.map((value: string): number => +value); return ( <> @@ -476,15 +470,17 @@ function ItemAttributeComponent(props: ItemAttributeComponentProps): JSX.Element { - if (typeof (value) !== 'undefined') { - changeAttribute(attrID, `${value}`); + if (typeof (value) === 'number') { + changeAttribute( + attrID, `${clamp(value, min, max)}`, + ); } }} value={+attrValue} className='cvat-object-item-number-attribute' - min={+min} - max={+max} - step={+step} + min={min} + max={max} + step={step} /> diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/propagate-confirm.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/propagate-confirm.tsx index 9f68bb64..66bebffa 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/propagate-confirm.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/propagate-confirm.tsx @@ -17,8 +17,8 @@ interface Props { frameNumber: number; propagateObject(): void; cancel(): void; - changePropagateFrames(value: number | undefined): void; - changeUpToFrame(value: number | undefined): void; + changePropagateFrames(value: number): void; + changeUpToFrame(value: number): void; } export default function PropagateConfirmComponent(props: Props): JSX.Element { diff --git a/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx b/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx index d3a727ee..794fb755 100644 --- a/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx +++ b/cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx @@ -19,7 +19,7 @@ interface Props { frameNumber: number; inputFrameRef: React.RefObject; onSliderChange(value: SliderValue): void; - onInputChange(value: number | undefined): void; + onInputChange(value: number): void; onURLIconClick(): void; } @@ -34,7 +34,7 @@ function PlayerNavigation(props: Props): JSX.Element { onURLIconClick, } = props; - const [frameInputValue, setFrameInputValue] = useState(frameNumber); + const [frameInputValue, setFrameInputValue] = useState(frameNumber); if (frameNumber !== frameInputValue) { setFrameInputValue(frameNumber); } diff --git a/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx index 5942fbae..53648454 100644 --- a/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx +++ b/cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx @@ -36,7 +36,7 @@ interface Props { onFirstFrame(): void; onLastFrame(): void; onSliderChange(value: SliderValue): void; - onInputChange(value: number | undefined): void; + onInputChange(value: number): void; onURLIconClick(): void; onUndoClick(): void; onRedoClick(): void; diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx index 868b1ddb..e92c0f26 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx @@ -145,15 +145,9 @@ class DrawShapePopoverContainer extends React.PureComponent { }; private onChangePoints = (value: number | undefined): void => { - if (typeof (value) === 'undefined') { - this.setState({ - numberOfPoints: value, - }); - } else if (typeof (value) === 'number') { - this.setState({ - numberOfPoints: Math.max(value, this.minimumPoints), - }); - } + this.setState({ + numberOfPoints: value, + }); }; private onChangeLabel = (value: string): void => { diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/propagate-confirm.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/propagate-confirm.tsx index e795cd56..f0de8809 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/propagate-confirm.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/propagate-confirm.tsx @@ -13,7 +13,6 @@ import { import { CombinedState } from 'reducers/interfaces'; import PropagateConfirmComponent from 'components/annotation-page/standard-workspace/propagate-confirm'; -import { clamp } from 'utils/math'; interface StateToProps { objectState: any | null; diff --git a/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx b/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx index ebde5bd3..150fb9e6 100644 --- a/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx +++ b/cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx @@ -403,7 +403,7 @@ class AnnotationTopBarContainer extends React.PureComponent { onChangeFrame(value as number); }; - private onChangePlayerInputValue = (value: number | undefined): void => { + private onChangePlayerInputValue = (value: number): void => { const { onSwitchPlay, onChangeFrame,