Merge pull request #1314 from opencv/bs/batch_of_fixes

React UI: Batch of fixes

cvat-canvas/src/typescript/editHandler.ts

@@ -96,15 +96,21 @@ export class EditHandlerImpl implements EditHandler {
         let mouseY: number | null = null;
 
         this.canvas.on('mousedown.edit', (e: MouseEvent): void => {
-            if (e.which === 1) {
+            if (e.button === 0) {
                 mouseX = e.clientX;
                 mouseY = e.clientY;
+            } else if (e.button === 2 && this.editLine) {
+                if (this.editData.state.shapeType === 'points'
+                    || this.editLine.attr('points').split(' ').length > 2
+                ) {
+                    (this.editLine as any).draw('undo');
+                }
             }
         });
 
         this.canvas.on('mouseup.edit', (e: MouseEvent): void => {
             const threshold = 10; // px
-            if (e.which === 1) {
+            if (e.button === 0) {
                 if (Math.sqrt( // l2 distance < threshold
                     ((mouseX - e.clientX) ** 2)
                     + ((mouseY - e.clientY) ** 2),

cvat-core/src/annotations-collection.js

@@ -317,7 +317,7 @@
 
                     // Push outside shape after each annotation shape
                     // Any not outside shape rewrites it
-                    if (!((object.frame + 1) in keyframes)) {
+                    if (!((object.frame + 1) in keyframes) && object.frame + 1 <= this.stopFrame) {
                         keyframes[object.frame + 1] = JSON
                             .parse(JSON.stringify(keyframes[object.frame]));
                         keyframes[object.frame + 1].outside = true;

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<Input | InputNumber>;
 }
 
 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<Input>}
                 />
             </div>
         </>
@@ -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<InputNumber>()
-        : React.createRef<Input>();
 
     return (
         <div>
@@ -268,7 +262,6 @@ function AttributeEditor(props: Props): JSX.Element {
             <hr />
             {renderInputElement({
                 attrID,
-                ref,
                 inputType,
                 currentValue,
                 values,

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx

@@ -4,20 +4,16 @@
 
 import React from 'react';
 
-import {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import Select from 'antd/lib/select';
-    Col,
+import Button from 'antd/lib/button';
-    Select,
+import InputNumber from 'antd/lib/input-number';
-    Button,
+import Radio, { RadioChangeEvent } from 'antd/lib/radio';
-    InputNumber,
-    Radio,
-} from 'antd';
-
-import { 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 {
                         </Col>
                         <Col span={10}>
                             <InputNumber
-                                onChange={onChangePoints}
+                                onChange={(value: number | undefined) => {
+                                    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}

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx

@@ -4,26 +4,21 @@
 
 import React from 'react';
 
-import {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import Icon from 'antd/lib/icon';
-    Col,
+import Select from 'antd/lib/select';
-    Icon,
+import Radio, { RadioChangeEvent } from 'antd/lib/radio';
-    Select,
+import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
-    Radio,
+import Input from 'antd/lib/input';
-    Input,
+import InputNumber from 'antd/lib/input-number';
-    Collapse,
+import Collapse from 'antd/lib/collapse';
-    Checkbox,
+import Dropdown from 'antd/lib/dropdown';
-    InputNumber,
+import Menu from 'antd/lib/menu';
-    Dropdown,
+import Button from 'antd/lib/button';
-    Menu,
+import Modal from 'antd/lib/modal';
-    Button,
+import Popover from 'antd/lib/popover';
-    Modal,
-    Popover,
-} from 'antd';
-
 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 {
+import { ObjectType, ShapeType } from 'reducers/interfaces';
-    ObjectType, ShapeType,
+import { clamp } from 'utils/math';
-} from 'reducers/interfaces';
 
 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
                     <InputNumber
                         size='small'
                         onChange={(value: number | undefined): void => {
-                            if (typeof (value) !== 'undefined') {
+                            if (typeof (value) === 'number') {
-                                changeAttribute(attrID, `${value}`);
+                                changeAttribute(
+                                    attrID, `${clamp(value, min, max)}`,
+                                );
                             }
                         }}
                         value={+attrValue}
                         className='cvat-object-item-number-attribute'
-                        min={+min}
+                        min={min}
-                        max={+max}
+                        max={max}
-                        step={+step}
+                        step={step}
                     />
                 </Col>
             </>

cvat-ui/src/components/annotation-page/standard-workspace/propagate-confirm.tsx

@@ -4,21 +4,21 @@
 
 import React from 'react';
 
-import {
+import Modal from 'antd/lib/modal';
-    Modal,
+import InputNumber from 'antd/lib/input-number';
-    InputNumber,
-} from 'antd';
-
 import Text from 'antd/lib/typography/Text';
+import { clamp } from 'utils/math';
 
 interface Props {
     visible: boolean;
     propagateFrames: number;
     propagateUpToFrame: number;
+    stopFrame: number;
+    frameNumber: number;
     propagateObject(): void;
     cancel(): void;
-    changePropagateFrames(value: number | undefined): void;
+    changePropagateFrames(value: number): void;
-    changeUpToFrame(value: number | undefined): void;
+    changeUpToFrame(value: number): void;
 }
 
 export default function PropagateConfirmComponent(props: Props): JSX.Element {
@@ -26,12 +26,16 @@ export default function PropagateConfirmComponent(props: Props): JSX.Element {
         visible,
         propagateFrames,
         propagateUpToFrame,
+        stopFrame,
+        frameNumber,
         propagateObject,
         changePropagateFrames,
         changeUpToFrame,
         cancel,
     } = props;
 
+    const minPropagateFrames = 1;
+
     return (
         <Modal
             okType='primary'
@@ -44,14 +48,37 @@ export default function PropagateConfirmComponent(props: Props): JSX.Element {
         >
             <div className='cvat-propagate-confirm'>
                 <Text>Do you want to make a copy of the object on</Text>
-                <InputNumber size='small' min={1} value={propagateFrames} onChange={changePropagateFrames} />
+                <InputNumber
+                    size='small'
+                    min={minPropagateFrames}
+                    value={propagateFrames}
+                    onChange={(value: number | undefined) => {
+                        if (typeof (value) === 'number') {
+                            changePropagateFrames(Math.floor(
+                                clamp(value, minPropagateFrames, Number.MAX_SAFE_INTEGER),
+                            ));
+                        }
+                    }}
+                />
                 {
                     propagateFrames > 1
                         ? <Text> frames </Text>
                         : <Text> frame </Text>
                 }
                 <Text>up to the </Text>
-                <InputNumber size='small' value={propagateUpToFrame} onChange={changeUpToFrame} />
+                <InputNumber
+                    size='small'
+                    value={propagateUpToFrame}
+                    min={frameNumber + 1}
+                    max={stopFrame}
+                    onChange={(value: number | undefined) => {
+                        if (typeof (value) === 'number') {
+                            changeUpToFrame(Math.floor(
+                                clamp(value, frameNumber + 1, stopFrame),
+                            ));
+                        }
+                    }}
+                />
                 <Text>frame</Text>
             </div>
         </Modal>

cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx

@@ -2,27 +2,24 @@
 //
 // SPDX-License-Identifier: MIT
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
-import {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import Icon from 'antd/lib/icon';
-    Col,
+import Slider, { SliderValue } from 'antd/lib/slider';
-    Icon,
+import Tooltip from 'antd/lib/tooltip';
-    Slider,
+import InputNumber from 'antd/lib/input-number';
-    Tooltip,
-    InputNumber,
-} from 'antd';
-
-import { SliderValue } from 'antd/lib/slider';
 import Text from 'antd/lib/typography/Text';
 
+import { clamp } from 'utils/math';
+
 interface Props {
     startFrame: number;
     stopFrame: number;
     frameNumber: number;
     inputFrameRef: React.RefObject<InputNumber>;
     onSliderChange(value: SliderValue): void;
-    onInputChange(value: number | undefined): void;
+    onInputChange(value: number): void;
     onURLIconClick(): void;
 }
 
@@ -37,6 +34,14 @@ function PlayerNavigation(props: Props): JSX.Element {
         onURLIconClick,
     } = props;
 
+    const [frameInputValue, setFrameInputValue] = useState<number>(frameNumber);
+
+    useEffect(() => {
+        if (frameNumber !== frameInputValue) {
+            setFrameInputValue(frameNumber);
+        }
+    }, [frameNumber]);
+
     return (
         <>
             <Col className='cvat-player-controls'>
@@ -68,9 +73,21 @@ function PlayerNavigation(props: Props): JSX.Element {
                 <InputNumber
                     className='cvat-player-frame-selector'
                     type='number'
-                    value={frameNumber || 0}
+                    value={frameInputValue}
                     // https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput
-                    onChange={onInputChange}
+                    onChange={(value: number | undefined) => {
+                        if (typeof (value) === 'number') {
+                            setFrameInputValue(Math.floor(
+                                clamp(value, startFrame, stopFrame),
+                            ));
+                        }
+                    }}
+                    onBlur={() => {
+                        onInputChange(frameInputValue);
+                    }}
+                    onPressEnter={() => {
+                        onInputChange(frameInputValue);
+                    }}
                     ref={inputFrameRef}
                 />
             </Col>

cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx

@@ -4,12 +4,8 @@
 
 import React from 'react';
 
-import {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import InputNumber from 'antd/lib/input-number';
-    Col,
-    InputNumber,
-} from 'antd';
-
 import { SliderValue } from 'antd/lib/slider';
 
 import { Workspace } from 'reducers/interfaces';
@@ -40,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;

cvat-ui/src/components/settings-page/player-settings.tsx

@@ -4,28 +4,17 @@
 
 import React from 'react';
 
-import {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
-    Col,
+import Slider from 'antd/lib/slider';
-    Checkbox,
+import Select from 'antd/lib/select';
-    Slider,
+import InputNumber from 'antd/lib/input-number';
-    Select,
+import Icon from 'antd/lib/icon';
-    InputNumber,
-    Icon,
-} from 'antd';
-
 import Text from 'antd/lib/typography/Text';
-import { CheckboxChangeEvent } from 'antd/lib/checkbox';
-
-import {
-    BackJumpIcon,
-    ForwardJumpIcon,
-} from 'icons';
 
-import {
+import { clamp } from 'utils/math';
-    FrameSpeed,
+import { BackJumpIcon, ForwardJumpIcon } from 'icons';
-    GridColor,
+import { FrameSpeed, GridColor } from 'reducers/interfaces';
-} from 'reducers/interfaces';
 
 interface Props {
     frameStep: number;
@@ -78,18 +67,28 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
         onChangeSaturationLevel,
     } = props;
 
+    const minFrameStep = 2;
+    const maxFrameStep = 1000;
+    const minGridSize = 5;
+    const maxGridSize = 1000;
+
+
     return (
         <div className='cvat-player-settings'>
             <Row type='flex' align='bottom' className='cvat-player-settings-step'>
                 <Col>
                     <Text className='cvat-text-color'> Player step </Text>
                     <InputNumber
-                        min={2}
+                        min={minFrameStep}
-                        max={1000}
+                        max={maxFrameStep}
                         value={frameStep}
                         onChange={(value: number | undefined): void => {
-                            if (value) {
+                            if (typeof (value) === 'number') {
-                                onChangeFrameStep(value);
+                                onChangeFrameStep(
+                                    Math.floor(
+                                        clamp(value, minFrameStep, maxFrameStep),
+                                    ),
+                                );
                             }
                         }}
                     />
@@ -138,14 +137,15 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element {
                 <Col span={8} className='cvat-player-settings-grid-size'>
                     <Text className='cvat-text-color'> Grid size </Text>
                     <InputNumber
-                        min={5}
+                        min={minGridSize}
-                        max={1000}
+                        max={maxGridSize}
-                        step={1}
                         value={gridSize}
                         disabled={!grid}
                         onChange={(value: number | undefined): void => {
-                            if (value) {
+                            if (typeof (value) === 'number') {
-                                onChangeGridSize(value);
+                                onChangeGridSize(Math.floor(
+                                    clamp(value, minGridSize, maxGridSize),
+                                ));
                             }
                         }}
                     />

cvat-ui/src/components/settings-page/workspace-settings.tsx

@@ -4,15 +4,12 @@
 
 import React from 'react';
 
-import {
+import { Row, Col } from 'antd/lib/grid';
-    Row,
+import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
-    Col,
+import InputNumber from 'antd/lib/input-number';
-    Checkbox,
-    InputNumber,
-} from 'antd';
-
 import Text from 'antd/lib/typography/Text';
-import { CheckboxChangeEvent } from 'antd/lib/checkbox';
+
+import { clamp } from 'utils/math';
 
 interface Props {
     autoSave: boolean;
@@ -37,6 +34,11 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
         onSwitchShowingInterpolatedTracks,
     } = props;
 
+    const minAutoSaveInterval = 5;
+    const maxAutoSaveInterval = 60;
+    const minAAMMargin = 0;
+    const maxAAMMargin = 1000;
+
     return (
         <div className='cvat-workspace-settings'>
             <Row type='flex'>
@@ -56,13 +58,19 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                 <Col className='cvat-workspace-settings-auto-save-interval'>
                     <Text type='secondary'> Auto save every </Text>
                     <InputNumber
-                        min={5}
+                        min={minAutoSaveInterval}
-                        max={60}
+                        max={maxAutoSaveInterval}
                         step={1}
                         value={Math.round(autoSaveInterval / (60 * 1000))}
                         onChange={(value: number | undefined): void => {
-                            if (value) {
+                            if (typeof (value) === 'number') {
-                                onChangeAutoSaveInterval(value * 60 * 1000);
+                                onChangeAutoSaveInterval(Math.floor(
+                                    clamp(
+                                        value,
+                                        minAutoSaveInterval,
+                                        maxAutoSaveInterval,
+                                    ),
+                                ) * 60 * 1000);
                             }
                         }}
                     />
@@ -89,12 +97,14 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element {
                 <Col>
                     <Text className='cvat-text-color'> Attribute annotation mode (AAM) zoom margin </Text>
                     <InputNumber
-                        min={0}
+                        min={minAAMMargin}
-                        max={1000}
+                        max={maxAAMMargin}
                         value={aamZoomMargin}
                         onChange={(value: number | undefined): void => {
                             if (typeof (value) === 'number') {
-                                onChangeAAMZoomMargin(value);
+                                onChangeAAMZoomMargin(Math.floor(
+                                    clamp(value, minAAMMargin, maxAAMMargin),
+                                ));
                             }
                         }}
                     />

cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx

@@ -145,15 +145,9 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
     };
 
     private onChangePoints = (value: number | undefined): void => {
-        if (typeof (value) === 'undefined') {
+        this.setState({
-            this.setState({
+            numberOfPoints: value,
-                numberOfPoints: value,
+        });
-            });
-        } else if (typeof (value) === 'number') {
-            this.setState({
-                numberOfPoints: Math.max(value, this.minimumPoints),
-            });
-        }
     };
 
     private onChangeLabel = (value: string): void => {

cvat-ui/src/containers/annotation-page/standard-workspace/propagate-confirm.tsx

@@ -88,23 +88,20 @@ class PropagateConfirmContainer extends React.PureComponent<Props> {
         propagateObject(jobInstance, objectState, frameNumber + 1, propagateUpToFrame);
     };
 
-    private changePropagateFrames = (value: number | undefined): void => {
+    private changePropagateFrames = (value: number): void => {
         const { changePropagateFrames } = this.props;
-        if (typeof (value) !== 'undefined') {
+        changePropagateFrames(value);
-            changePropagateFrames(value);
-        }
     };
 
-    private changeUpToFrame = (value: number | undefined): void => {
+    private changeUpToFrame = (value: number): void => {
         const {
             stopFrame,
             frameNumber,
             changePropagateFrames,
         } = this.props;
-        if (typeof (value) !== 'undefined') {
+
-            const propagateFrames = Math.max(0, Math.min(stopFrame, value)) - frameNumber;
+        const propagateFrames = Math.max(0, Math.min(stopFrame, value)) - frameNumber;
-            changePropagateFrames(propagateFrames);
+        changePropagateFrames(propagateFrames);
-        }
     };
 
     public render(): JSX.Element {
@@ -122,6 +119,8 @@ class PropagateConfirmContainer extends React.PureComponent<Props> {
             <PropagateConfirmComponent
                 visible={objectState !== null}
                 propagateUpToFrame={propagateUpToFrame}
+                stopFrame={stopFrame}
+                frameNumber={frameNumber}
                 propagateFrames={propagateUpToFrame - frameNumber}
                 propagateObject={this.propagateObject}
                 changePropagateFrames={this.changePropagateFrames}

cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx

@@ -10,7 +10,7 @@ import { withRouter } from 'react-router';
 import { RouteComponentProps } from 'react-router-dom';
 import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
 
-import { InputNumber } from 'antd';
+import InputNumber from 'antd/lib/input-number';
 import { SliderValue } from 'antd/lib/slider';
 
 import {
@@ -403,14 +403,15 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
         onChangeFrame(value as number);
     };
 
-    private onChangePlayerInputValue = (value: number | undefined): void => {
+    private onChangePlayerInputValue = (value: number): void => {
         const {
             onSwitchPlay,
             onChangeFrame,
             playing,
+            frameNumber,
         } = this.props;
 
-        if (typeof (value) !== 'undefined') {
+        if (value !== frameNumber) {
             if (playing) {
                 onSwitchPlay(false);
             }

cvat-ui/src/utils/math.ts

@@ -0,0 +1,4 @@
+/* eslint-disable-next-line import/prefer-default-export */
+export function clamp(value: number, min: number, max: number): number {
+    return Math.max(Math.min(value, max), min);
+}