Tags on frame (#75)
Kirill Lakhov
4 years ago
committed by
GitHub
parent
bddd44642d
commit
c0c469f824
@ -0,0 +1,53 @@
|
|||||||
|
// Copyright (C) 2022 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
import { useDispatch, useSelector } from 'react-redux';
|
||||||
|
import { CombinedState } from 'reducers/interfaces';
|
||||||
|
|
||||||
|
import Modal from 'antd/lib/modal';
|
||||||
|
import { removeObjectAsync, removeObject as removeObjectAction } from 'actions/annotation-actions';
|
||||||
|
|
||||||
|
export default function RemoveConfirmComponent(): JSX.Element | null {
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
const [title, setTitle] = useState('');
|
||||||
|
const objectState = useSelector((state: CombinedState) => state.annotation.remove.objectState);
|
||||||
|
const force = useSelector((state: CombinedState) => state.annotation.remove.force);
|
||||||
|
const jobInstance = useSelector((state: CombinedState) => state.annotation.job.instance);
|
||||||
|
const dispatch = useDispatch();
|
||||||
|
|
||||||
|
const onOk = useCallback(() => {
|
||||||
|
dispatch(removeObjectAsync(jobInstance, objectState, true));
|
||||||
|
}, [jobInstance, objectState]);
|
||||||
|
const onCancel = useCallback(() => {
|
||||||
|
dispatch(removeObjectAction(null, false));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const newVisible = !!objectState && !force && objectState.lock;
|
||||||
|
setTitle(objectState?.lock ? 'Object is locked' : 'Remove object');
|
||||||
|
setVisible(newVisible);
|
||||||
|
if (!newVisible && objectState) {
|
||||||
|
dispatch(removeObjectAsync(jobInstance, objectState, true));
|
||||||
|
}
|
||||||
|
}, [objectState, force]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
okType='primary'
|
||||||
|
okText='Yes'
|
||||||
|
cancelText='Cancel'
|
||||||
|
title={title}
|
||||||
|
visible={visible}
|
||||||
|
onOk={onOk}
|
||||||
|
onCancel={onCancel}
|
||||||
|
className='cvat-modal-confirm'
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
Are you sure you want to remove it?
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
// Copyright (C) 2022 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import Tag from 'antd/lib/tag';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { Action } from 'redux';
|
||||||
|
import { ThunkDispatch } from 'redux-thunk';
|
||||||
|
|
||||||
|
import {
|
||||||
|
removeObject as removeObjectAction,
|
||||||
|
} from 'actions/annotation-actions';
|
||||||
|
import { CombinedState, ObjectType } from 'reducers/interfaces';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
states: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
removeObject(objectState: any): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const {
|
||||||
|
annotation: {
|
||||||
|
annotations: { states },
|
||||||
|
},
|
||||||
|
} = state;
|
||||||
|
|
||||||
|
return {
|
||||||
|
states,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch: ThunkDispatch<CombinedState, {}, Action>): DispatchToProps {
|
||||||
|
return {
|
||||||
|
removeObject(objectState: any): void {
|
||||||
|
dispatch(removeObjectAction(objectState, false));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function FrameTags(props: StateToProps & DispatchToProps): JSX.Element {
|
||||||
|
const {
|
||||||
|
states,
|
||||||
|
removeObject,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const [frameTags, setFrameTags] = useState([] as any[]);
|
||||||
|
|
||||||
|
const onRemoveState = (objectState: any): void => {
|
||||||
|
removeObject(objectState);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFrameTags(states.filter((objectState: any): boolean => objectState.objectType === ObjectType.TAG));
|
||||||
|
}, [states]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{frameTags.map((tag: any) => (
|
||||||
|
<Tag
|
||||||
|
className='cvat-frame-tag'
|
||||||
|
color={tag.label.color}
|
||||||
|
onClose={() => {
|
||||||
|
onRemoveState(tag);
|
||||||
|
}}
|
||||||
|
key={tag.clientID}
|
||||||
|
closable
|
||||||
|
>
|
||||||
|
{tag.label.name}
|
||||||
|
</Tag>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(FrameTags);
|
||||||
Loading…
Reference in New Issue