From d789087dd36bdf8ee9c71342a38e950128ae8716 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Tue, 24 Mar 2020 19:46:44 +0300 Subject: [PATCH] Fixed ui failing in propagate confirmation --- .../standard-workspace/propagate-confirm.tsx | 41 +++++++++++++++---- .../top-bar/player-navigation.tsx | 7 +++- .../settings-page/player-settings.tsx | 11 +++-- .../settings-page/workspace-settings.tsx | 10 +++-- .../standard-workspace/propagate-confirm.tsx | 18 ++++---- 5 files changed, 63 insertions(+), 24 deletions(-) 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 f47d5b12d..9f68bb643 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 @@ -4,17 +4,17 @@ import React from 'react'; -import { - Modal, - InputNumber, -} from 'antd'; - +import Modal from 'antd/lib/modal'; +import InputNumber from 'antd/lib/input-number'; 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; @@ -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 (
Do you want to make a copy of the object on - + { + if (typeof (value) === 'number') { + changePropagateFrames(Math.floor( + clamp(value, minPropagateFrames, Number.MAX_SAFE_INTEGER), + )); + } + }} + /> { propagateFrames > 1 ? frames : frame } up to the - + { + if (typeof (value) === 'number') { + changeUpToFrame(Math.floor( + clamp(value, frameNumber + 1, stopFrame), + )); + } + }} + /> frame
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 11a59deeb..d3a727ee9 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 @@ -35,6 +35,9 @@ function PlayerNavigation(props: Props): JSX.Element { } = props; const [frameInputValue, setFrameInputValue] = useState(frameNumber); + if (frameNumber !== frameInputValue) { + setFrameInputValue(frameNumber); + } return ( <> @@ -71,7 +74,9 @@ function PlayerNavigation(props: Props): JSX.Element { // https://stackoverflow.com/questions/38256332/in-react-whats-the-difference-between-onchange-and-oninput onChange={(value: number | undefined) => { if (typeof (value) === 'number') { - setFrameInputValue(clamp(value, stopFrame, startFrame)); + setFrameInputValue(Math.floor( + clamp(value, stopFrame, startFrame), + )); } }} onBlur={() => { diff --git a/cvat-ui/src/components/settings-page/player-settings.tsx b/cvat-ui/src/components/settings-page/player-settings.tsx index 84717863b..779a03b01 100644 --- a/cvat-ui/src/components/settings-page/player-settings.tsx +++ b/cvat-ui/src/components/settings-page/player-settings.tsx @@ -84,7 +84,11 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { value={frameStep} onChange={(value: number | undefined): void => { if (typeof (value) === 'number') { - onChangeFrameStep(clamp(value, minFrameStep, maxFrameStep)); + onChangeFrameStep( + Math.floor( + clamp(value, minFrameStep, maxFrameStep), + ), + ); } }} /> @@ -135,12 +139,13 @@ export default function PlayerSettingsComponent(props: Props): JSX.Element { { if (typeof (value) === 'number') { - onChangeGridSize(clamp(value, minGridSize, maxGridSize)); + onChangeGridSize(Math.floor( + clamp(value, minGridSize, maxGridSize), + )); } }} /> diff --git a/cvat-ui/src/components/settings-page/workspace-settings.tsx b/cvat-ui/src/components/settings-page/workspace-settings.tsx index 237701781..52ba4a506 100644 --- a/cvat-ui/src/components/settings-page/workspace-settings.tsx +++ b/cvat-ui/src/components/settings-page/workspace-settings.tsx @@ -64,13 +64,13 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element { value={Math.round(autoSaveInterval / (60 * 1000))} onChange={(value: number | undefined): void => { if (typeof (value) === 'number') { - onChangeAutoSaveInterval( + onChangeAutoSaveInterval(Math.floor( clamp( value, minAutoSaveInterval, maxAutoSaveInterval, - ) * 60 * 1000, - ); + ), + ) * 60 * 1000); } }} /> @@ -102,7 +102,9 @@ export default function WorkspaceSettingsComponent(props: Props): JSX.Element { value={aamZoomMargin} onChange={(value: number | undefined): void => { if (typeof (value) === 'number') { - onChangeAAMZoomMargin(clamp(value, minAAMMargin, maxAAMMargin)); + onChangeAAMZoomMargin(Math.floor( + clamp(value, minAAMMargin, maxAAMMargin), + )); } }} /> 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 e7c4d7063..e795cd567 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,6 +13,7 @@ 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; @@ -88,23 +89,20 @@ class PropagateConfirmContainer extends React.PureComponent { 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; - changePropagateFrames(propagateFrames); - } + + const propagateFrames = Math.max(0, Math.min(stopFrame, value)) - frameNumber; + changePropagateFrames(propagateFrames); }; public render(): JSX.Element { @@ -122,6 +120,8 @@ class PropagateConfirmContainer extends React.PureComponent {