Tags on frame (#75)
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