Implemented propagate backward (#5355)
<!-- Raised an issue to propose your change (https://github.com/cvat-ai/cvat/issues). It helps to avoid duplication of efforts from multiple independent contributors. Discuss your ideas with maintainers to be sure that changes will be approved and merged. Read the [CONTRIBUTION](https://github.com/cvat-ai/cvat/blob/develop/CONTRIBUTING.md) guide. --> <!-- Provide a general summary of your changes in the Title above --> ### Motivation and context Resolved #2998 <img width="428" alt="image" src="https://user-images.githubusercontent.com/40690378/203806586-1367477b-cfff-46f1-947b-d0292cd6f02e.png"> ### How has this been tested? <!-- Please describe in detail how you tested your changes. Include details of your testing environment, and the tests you ran to see how your change affects other areas of the code, etc. --> ### Checklist <!-- Go over all the following points, and put an `x` in all the boxes that apply. If an item isn't applicable by a reason then ~~explicitly strikethrough~~ the whole line. If you don't do that github will show an incorrect process for the pull request. If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [x] I submit my changes into the `develop` branch - [x] I have added a description of my changes into [CHANGELOG](https://github.com/cvat-ai/cvat/blob/develop/CHANGELOG.md) file - [ ] I have updated the [documentation]( https://github.com/cvat-ai/cvat/blob/develop/README.md#documentation) accordingly - [x] I have added tests to cover my changes - [x] I have linked related issues ([read github docs]( https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword)) - [x] I have increased versions of npm packages if it is necessary ([cvat-canvas](https://github.com/cvat-ai/cvat/tree/develop/cvat-canvas#versioning), [cvat-core](https://github.com/cvat-ai/cvat/tree/develop/cvat-core#versioning), [cvat-data](https://github.com/cvat-ai/cvat/tree/develop/cvat-data#versioning) and [cvat-ui](https://github.com/cvat-ai/cvat/tree/develop/cvat-ui#versioning)) ### License - [x] I submit _my code changes_ under the same [MIT License]( https://github.com/cvat-ai/cvat/blob/develop/LICENSE) that covers the project. Feel free to contact the maintainers if that's a concern.main
Boris Sekachev
3 years ago
committed by
GitHub
parent
2ecd8c7b0c
commit
460df331e4
@ -1,82 +1,155 @@
|
||||
// Copyright (C) 2020-2022 Intel Corporation
|
||||
// Copyright (C) 2022 CVAT.ai Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import Modal from 'antd/lib/modal';
|
||||
import InputNumber from 'antd/lib/input-number';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import Radio, { RadioChangeEvent } from 'antd/lib/radio';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Slider from 'antd/lib/slider';
|
||||
import { clamp } from 'utils/math';
|
||||
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
|
||||
import { propagateObjectAsync, switchPropagateVisibility } from 'actions/annotation-actions';
|
||||
import { CombinedState } from 'reducers';
|
||||
|
||||
interface Props {
|
||||
visible: boolean;
|
||||
propagateFrames: number;
|
||||
propagateUpToFrame: number;
|
||||
stopFrame: number;
|
||||
frameNumber: number;
|
||||
propagateObject(): void;
|
||||
cancel(): void;
|
||||
changePropagateFrames(value: number): void;
|
||||
changeUpToFrame(value: number): void;
|
||||
export enum PropagateDirection {
|
||||
FORWARD = 'forward',
|
||||
BACKWARD = 'backward',
|
||||
}
|
||||
|
||||
export default function PropagateConfirmComponent(props: Props): JSX.Element {
|
||||
const {
|
||||
visible,
|
||||
propagateFrames,
|
||||
propagateUpToFrame,
|
||||
stopFrame,
|
||||
frameNumber,
|
||||
propagateObject,
|
||||
changePropagateFrames,
|
||||
changeUpToFrame,
|
||||
cancel,
|
||||
} = props;
|
||||
function PropagateConfirmComponent(): JSX.Element {
|
||||
const dispatch = useDispatch();
|
||||
const visible = useSelector((state: CombinedState) => state.annotation.propagate.visible);
|
||||
const frameNumber = useSelector((state: CombinedState) => state.annotation.player.frame.number);
|
||||
const startFrame = useSelector((state: CombinedState) => state.annotation.job.instance.startFrame);
|
||||
const stopFrame = useSelector((state: CombinedState) => state.annotation.job.instance.stopFrame);
|
||||
const [targetFrame, setTargetFrame] = useState<number>(frameNumber);
|
||||
|
||||
const propagateFrames = Math.abs(targetFrame - frameNumber);
|
||||
const propagateDirection = targetFrame >= frameNumber ? PropagateDirection.FORWARD : PropagateDirection.BACKWARD;
|
||||
|
||||
const minPropagateFrames = 1;
|
||||
useEffect(() => {
|
||||
const propagateForwardAvailable = stopFrame - frameNumber >= 1;
|
||||
const propagateBackwardAvailable = frameNumber - startFrame >= 1;
|
||||
if (propagateForwardAvailable) {
|
||||
setTargetFrame(stopFrame);
|
||||
} else if (propagateBackwardAvailable) {
|
||||
setTargetFrame(startFrame);
|
||||
}
|
||||
}, [visible]);
|
||||
|
||||
const updateTargetFrame = (direction: PropagateDirection, _propagateFrames: number): void => {
|
||||
if (direction === PropagateDirection.FORWARD) {
|
||||
setTargetFrame(clamp(frameNumber + _propagateFrames, startFrame, stopFrame));
|
||||
} else {
|
||||
setTargetFrame(clamp(frameNumber - _propagateFrames, startFrame, stopFrame));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
okType='primary'
|
||||
okText='Yes'
|
||||
cancelText='Cancel'
|
||||
onOk={propagateObject}
|
||||
onCancel={cancel}
|
||||
onOk={() => {
|
||||
dispatch(propagateObjectAsync(frameNumber, targetFrame))
|
||||
.then(() => dispatch(switchPropagateVisibility(false)));
|
||||
}}
|
||||
onCancel={() => dispatch(switchPropagateVisibility(false))}
|
||||
title='Confirm propagation'
|
||||
visible={visible}
|
||||
destroyOnClose
|
||||
okButtonProps={{ disabled: !propagateFrames }}
|
||||
>
|
||||
<div className='cvat-propagate-confirm'>
|
||||
<Text>Do you want to make a copy of the object on</Text>
|
||||
<InputNumber
|
||||
className='cvat-propagate-confirm-object-on-frames'
|
||||
size='small'
|
||||
min={minPropagateFrames}
|
||||
value={propagateFrames}
|
||||
onChange={(value: number | undefined | string) => {
|
||||
if (typeof value !== 'undefined') {
|
||||
changePropagateFrames(
|
||||
Math.floor(clamp(+value, minPropagateFrames, Number.MAX_SAFE_INTEGER)),
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{propagateFrames > 1 ? <Text> frames </Text> : <Text> frame </Text>}
|
||||
<Text>up to the </Text>
|
||||
<InputNumber
|
||||
className='cvat-propagate-confirm-object-up-to-frame'
|
||||
size='small'
|
||||
value={propagateUpToFrame}
|
||||
min={frameNumber + 1}
|
||||
max={stopFrame}
|
||||
onChange={(value: number | undefined | string) => {
|
||||
if (typeof value !== 'undefined') {
|
||||
changeUpToFrame(Math.floor(clamp(+value, frameNumber + 1, stopFrame)));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Text>frame</Text>
|
||||
<Row>
|
||||
<Col>
|
||||
<Text>Please, specify a direction</Text>
|
||||
</Col>
|
||||
<Col offset={1}>
|
||||
<Radio.Group
|
||||
size='small'
|
||||
value={propagateDirection}
|
||||
onChange={(e: RadioChangeEvent) => updateTargetFrame(e.target.value, propagateFrames)}
|
||||
>
|
||||
<Radio.Button disabled={frameNumber === startFrame} value={PropagateDirection.BACKWARD}>
|
||||
<ArrowLeftOutlined />
|
||||
</Radio.Button>
|
||||
<Radio.Button disabled={frameNumber === stopFrame} value={PropagateDirection.FORWARD}>
|
||||
<ArrowRightOutlined />
|
||||
</Radio.Button>
|
||||
</Radio.Group>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col>How many copies do you want to create?</Col>
|
||||
<Col offset={1}>
|
||||
<InputNumber
|
||||
className='cvat-propagate-confirm-object-on-frames'
|
||||
size='small'
|
||||
min={0}
|
||||
value={propagateFrames}
|
||||
onChange={(value: number) => {
|
||||
if (typeof value !== 'undefined') {
|
||||
updateTargetFrame(propagateDirection, +value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr />
|
||||
<Row className='cvat-propagate-up-to-wrapper'>
|
||||
<Col span={24}>
|
||||
<Text>Or specify a range where copies will be created </Text>
|
||||
</Col>
|
||||
<Col className='cvat-propagate-slider-wrapper' span={12} offset={1}>
|
||||
<Slider
|
||||
range
|
||||
min={startFrame}
|
||||
max={stopFrame}
|
||||
marks={frameNumber !== targetFrame ? {
|
||||
[frameNumber]: 'FROM',
|
||||
[targetFrame]: 'TO',
|
||||
} : undefined}
|
||||
onChange={([value1, value2]: [number, number]) => {
|
||||
const value = value1 === frameNumber || value1 === targetFrame ? value2 : value1;
|
||||
if (value < frameNumber) {
|
||||
setTargetFrame(clamp(value, startFrame, frameNumber));
|
||||
} else {
|
||||
setTargetFrame(clamp(value, frameNumber, stopFrame));
|
||||
}
|
||||
}}
|
||||
value={[frameNumber, targetFrame] as [number, number]}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<InputNumber
|
||||
size='small'
|
||||
className='cvat-propagate-confirm-up-to-input'
|
||||
min={startFrame}
|
||||
max={stopFrame}
|
||||
value={targetFrame}
|
||||
onChange={(value: number) => {
|
||||
if (typeof value !== 'undefined') {
|
||||
if (value > frameNumber) {
|
||||
setTargetFrame(clamp(+value, frameNumber, stopFrame));
|
||||
} else if (value < frameNumber) {
|
||||
setTargetFrame(clamp(+value, startFrame, frameNumber));
|
||||
} else {
|
||||
setTargetFrame(frameNumber);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(PropagateConfirmComponent);
|
||||
|
||||
@ -1,114 +0,0 @@
|
||||
// Copyright (C) 2020-2022 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import {
|
||||
propagateObject as propagateObjectAction,
|
||||
changePropagateFrames as changePropagateFramesAction,
|
||||
propagateObjectAsync,
|
||||
} from 'actions/annotation-actions';
|
||||
|
||||
import { CombinedState } from 'reducers';
|
||||
import PropagateConfirmComponent from 'components/annotation-page/standard-workspace/propagate-confirm';
|
||||
|
||||
interface StateToProps {
|
||||
objectState: any | null;
|
||||
frameNumber: number;
|
||||
stopFrame: number;
|
||||
propagateFrames: number;
|
||||
jobInstance: any;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
cancel(): void;
|
||||
propagateObject(sessionInstance: any, objectState: any, from: number, to: number): void;
|
||||
changePropagateFrames(frames: number): void;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const {
|
||||
annotation: {
|
||||
propagate: { objectState, frames: propagateFrames },
|
||||
job: {
|
||||
instance: { stopFrame },
|
||||
instance: jobInstance,
|
||||
},
|
||||
player: {
|
||||
frame: { number: frameNumber },
|
||||
},
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
objectState,
|
||||
frameNumber,
|
||||
stopFrame,
|
||||
propagateFrames,
|
||||
jobInstance,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||
return {
|
||||
propagateObject(sessionInstance: any, objectState: any, from: number, to: number): void {
|
||||
dispatch(propagateObjectAsync(sessionInstance, objectState, from, to));
|
||||
},
|
||||
changePropagateFrames(frames: number): void {
|
||||
dispatch(changePropagateFramesAction(frames));
|
||||
},
|
||||
cancel(): void {
|
||||
dispatch(propagateObjectAction(null));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
type Props = StateToProps & DispatchToProps;
|
||||
class PropagateConfirmContainer extends React.PureComponent<Props> {
|
||||
private propagateObject = (): void => {
|
||||
const {
|
||||
propagateObject, objectState, propagateFrames, frameNumber, stopFrame, jobInstance,
|
||||
} = this.props;
|
||||
|
||||
const propagateUpToFrame = Math.min(frameNumber + propagateFrames, stopFrame);
|
||||
propagateObject(jobInstance, objectState, frameNumber + 1, propagateUpToFrame);
|
||||
};
|
||||
|
||||
private changePropagateFrames = (value: number): void => {
|
||||
const { changePropagateFrames } = this.props;
|
||||
changePropagateFrames(value);
|
||||
};
|
||||
|
||||
private changeUpToFrame = (value: number): void => {
|
||||
const { stopFrame, frameNumber, changePropagateFrames } = this.props;
|
||||
|
||||
const propagateFrames = Math.max(0, Math.min(stopFrame, value)) - frameNumber;
|
||||
changePropagateFrames(propagateFrames);
|
||||
};
|
||||
|
||||
public render(): JSX.Element {
|
||||
const {
|
||||
frameNumber, stopFrame, propagateFrames, cancel, objectState,
|
||||
} = this.props;
|
||||
|
||||
const propagateUpToFrame = Math.min(frameNumber + propagateFrames, stopFrame);
|
||||
|
||||
return (
|
||||
<PropagateConfirmComponent
|
||||
visible={objectState !== null}
|
||||
propagateUpToFrame={propagateUpToFrame}
|
||||
stopFrame={stopFrame}
|
||||
frameNumber={frameNumber}
|
||||
propagateFrames={propagateUpToFrame - frameNumber}
|
||||
propagateObject={this.propagateObject}
|
||||
changePropagateFrames={this.changePropagateFrames}
|
||||
changeUpToFrame={this.changeUpToFrame}
|
||||
cancel={cancel}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(PropagateConfirmContainer);
|
||||
Loading…
Reference in New Issue