[CVAT-UI]: Appearance settings in AAM, keyframe navigation and other buttons in AAM (#1820)
Boris Sekachev
6 years ago
committed by
GitHub
parent
76280be4ad
commit
757f0ade17
@ -0,0 +1,214 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { Dispatch } from 'react';
|
||||
import { AnyAction } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import Radio, { RadioChangeEvent } from 'antd/lib/radio';
|
||||
import Slider, { SliderValue } from 'antd/lib/slider';
|
||||
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||
import Collapse from 'antd/lib/collapse';
|
||||
|
||||
import { ColorBy, CombinedState } from 'reducers/interfaces';
|
||||
import {
|
||||
collapseAppearance as collapseAppearanceAction,
|
||||
updateTabContentHeight as updateTabContentHeightAction,
|
||||
} from 'actions/annotation-actions';
|
||||
import {
|
||||
changeShapesColorBy as changeShapesColorByAction,
|
||||
changeShapesOpacity as changeShapesOpacityAction,
|
||||
changeSelectedShapesOpacity as changeSelectedShapesOpacityAction,
|
||||
changeShapesBlackBorders as changeShapesBlackBordersAction,
|
||||
changeShowBitmap as changeShowBitmapAction,
|
||||
changeShowProjections as changeShowProjectionsAction,
|
||||
} from 'actions/settings-actions';
|
||||
|
||||
interface StateToProps {
|
||||
appearanceCollapsed: boolean;
|
||||
colorBy: ColorBy;
|
||||
opacity: number;
|
||||
selectedOpacity: number;
|
||||
blackBorders: boolean;
|
||||
showBitmap: boolean;
|
||||
showProjections: boolean;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
collapseAppearance(): void;
|
||||
changeShapesColorBy(event: RadioChangeEvent): void;
|
||||
changeShapesOpacity(event: SliderValue): void;
|
||||
changeSelectedShapesOpacity(event: SliderValue): void;
|
||||
changeShapesBlackBorders(event: CheckboxChangeEvent): void;
|
||||
changeShowBitmap(event: CheckboxChangeEvent): void;
|
||||
changeShowProjections(event: CheckboxChangeEvent): void;
|
||||
}
|
||||
|
||||
export function computeHeight(): number {
|
||||
const [sidebar] = window.document.getElementsByClassName('cvat-objects-sidebar');
|
||||
const [appearance] = window.document.getElementsByClassName('cvat-objects-appearance-collapse');
|
||||
const [tabs] = Array.from(
|
||||
window.document.querySelectorAll('.cvat-objects-sidebar-tabs > .ant-tabs-card-bar'),
|
||||
);
|
||||
|
||||
if (sidebar && appearance && tabs) {
|
||||
const maxHeight = sidebar ? sidebar.clientHeight : 0;
|
||||
const appearanceHeight = appearance ? appearance.clientHeight : 0;
|
||||
const tabsHeight = tabs ? tabs.clientHeight : 0;
|
||||
return maxHeight - appearanceHeight - tabsHeight;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const {
|
||||
annotation: {
|
||||
appearanceCollapsed,
|
||||
},
|
||||
settings: {
|
||||
shapes: {
|
||||
colorBy,
|
||||
opacity,
|
||||
selectedOpacity,
|
||||
blackBorders,
|
||||
showBitmap,
|
||||
showProjections,
|
||||
},
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
appearanceCollapsed,
|
||||
colorBy,
|
||||
opacity,
|
||||
selectedOpacity,
|
||||
blackBorders,
|
||||
showBitmap,
|
||||
showProjections,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function mapDispatchToProps(dispatch: Dispatch<AnyAction>): DispatchToProps {
|
||||
return {
|
||||
collapseAppearance(): void {
|
||||
dispatch(collapseAppearanceAction());
|
||||
const [collapser] = window.document
|
||||
.getElementsByClassName('cvat-objects-appearance-collapse');
|
||||
|
||||
if (collapser) {
|
||||
const listener = (event: Event): void => {
|
||||
if ((event as TransitionEvent).propertyName === 'height') {
|
||||
const height = computeHeight();
|
||||
dispatch(updateTabContentHeightAction(height));
|
||||
collapser.removeEventListener('transitionend', listener);
|
||||
}
|
||||
};
|
||||
|
||||
collapser.addEventListener('transitionend', listener);
|
||||
}
|
||||
},
|
||||
changeShapesColorBy(event: RadioChangeEvent): void {
|
||||
dispatch(changeShapesColorByAction(event.target.value));
|
||||
},
|
||||
changeShapesOpacity(value: SliderValue): void {
|
||||
dispatch(changeShapesOpacityAction(value as number));
|
||||
},
|
||||
changeSelectedShapesOpacity(value: SliderValue): void {
|
||||
dispatch(changeSelectedShapesOpacityAction(value as number));
|
||||
},
|
||||
changeShapesBlackBorders(event: CheckboxChangeEvent): void {
|
||||
dispatch(changeShapesBlackBordersAction(event.target.checked));
|
||||
},
|
||||
changeShowBitmap(event: CheckboxChangeEvent): void {
|
||||
dispatch(changeShowBitmapAction(event.target.checked));
|
||||
},
|
||||
changeShowProjections(event: CheckboxChangeEvent): void {
|
||||
dispatch(changeShowProjectionsAction(event.target.checked));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
type Props = StateToProps & DispatchToProps;
|
||||
|
||||
function AppearanceBlock(props: Props): JSX.Element {
|
||||
const {
|
||||
appearanceCollapsed,
|
||||
colorBy,
|
||||
opacity,
|
||||
selectedOpacity,
|
||||
blackBorders,
|
||||
showBitmap,
|
||||
showProjections,
|
||||
collapseAppearance,
|
||||
changeShapesColorBy,
|
||||
changeShapesOpacity,
|
||||
changeSelectedShapesOpacity,
|
||||
changeShapesBlackBorders,
|
||||
changeShowBitmap,
|
||||
changeShowProjections,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
onChange={collapseAppearance}
|
||||
activeKey={appearanceCollapsed ? [] : ['appearance']}
|
||||
className='cvat-objects-appearance-collapse'
|
||||
>
|
||||
<Collapse.Panel
|
||||
header={
|
||||
<Text strong>Appearance</Text>
|
||||
}
|
||||
key='appearance'
|
||||
>
|
||||
<div className='cvat-objects-appearance-content'>
|
||||
<Text type='secondary'>Color by</Text>
|
||||
<Radio.Group value={colorBy} onChange={changeShapesColorBy}>
|
||||
<Radio.Button value={ColorBy.INSTANCE}>{ColorBy.INSTANCE}</Radio.Button>
|
||||
<Radio.Button value={ColorBy.GROUP}>{ColorBy.GROUP}</Radio.Button>
|
||||
<Radio.Button value={ColorBy.LABEL}>{ColorBy.LABEL}</Radio.Button>
|
||||
</Radio.Group>
|
||||
<Text type='secondary'>Opacity</Text>
|
||||
<Slider
|
||||
onChange={changeShapesOpacity}
|
||||
value={opacity}
|
||||
min={0}
|
||||
max={100}
|
||||
/>
|
||||
<Text type='secondary'>Selected opacity</Text>
|
||||
<Slider
|
||||
onChange={changeSelectedShapesOpacity}
|
||||
value={selectedOpacity}
|
||||
min={0}
|
||||
max={100}
|
||||
/>
|
||||
<Checkbox
|
||||
onChange={changeShapesBlackBorders}
|
||||
checked={blackBorders}
|
||||
>
|
||||
Black borders
|
||||
</Checkbox>
|
||||
<Checkbox
|
||||
onChange={changeShowBitmap}
|
||||
checked={showBitmap}
|
||||
>
|
||||
Show bitmap
|
||||
</Checkbox>
|
||||
<Checkbox
|
||||
onChange={changeShowProjections}
|
||||
checked={showProjections}
|
||||
>
|
||||
Show projections
|
||||
</Checkbox>
|
||||
</div>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
);
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(React.memo(AppearanceBlock));
|
||||
@ -1,107 +0,0 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import Radio, { RadioChangeEvent } from 'antd/lib/radio';
|
||||
import Slider, { SliderValue } from 'antd/lib/slider';
|
||||
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||
import Collapse from 'antd/lib/collapse';
|
||||
|
||||
import { ColorBy } from 'reducers/interfaces';
|
||||
|
||||
interface Props {
|
||||
appearanceCollapsed: boolean;
|
||||
colorBy: ColorBy;
|
||||
opacity: number;
|
||||
selectedOpacity: number;
|
||||
blackBorders: boolean;
|
||||
showBitmap: boolean;
|
||||
showProjections: boolean;
|
||||
|
||||
collapseAppearance(): void;
|
||||
changeShapesColorBy(event: RadioChangeEvent): void;
|
||||
changeShapesOpacity(event: SliderValue): void;
|
||||
changeSelectedShapesOpacity(event: SliderValue): void;
|
||||
changeShapesBlackBorders(event: CheckboxChangeEvent): void;
|
||||
changeShowBitmap(event: CheckboxChangeEvent): void;
|
||||
changeShowProjections(event: CheckboxChangeEvent): void;
|
||||
}
|
||||
|
||||
function AppearanceBlock(props: Props): JSX.Element {
|
||||
const {
|
||||
appearanceCollapsed,
|
||||
colorBy,
|
||||
opacity,
|
||||
selectedOpacity,
|
||||
blackBorders,
|
||||
showBitmap,
|
||||
showProjections,
|
||||
collapseAppearance,
|
||||
changeShapesColorBy,
|
||||
changeShapesOpacity,
|
||||
changeSelectedShapesOpacity,
|
||||
changeShapesBlackBorders,
|
||||
changeShowBitmap,
|
||||
changeShowProjections,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Collapse
|
||||
onChange={collapseAppearance}
|
||||
activeKey={appearanceCollapsed ? [] : ['appearance']}
|
||||
className='cvat-objects-appearance-collapse'
|
||||
>
|
||||
<Collapse.Panel
|
||||
header={
|
||||
<Text strong>Appearance</Text>
|
||||
}
|
||||
key='appearance'
|
||||
>
|
||||
<div className='cvat-objects-appearance-content'>
|
||||
<Text type='secondary'>Color by</Text>
|
||||
<Radio.Group value={colorBy} onChange={changeShapesColorBy}>
|
||||
<Radio.Button value={ColorBy.INSTANCE}>{ColorBy.INSTANCE}</Radio.Button>
|
||||
<Radio.Button value={ColorBy.GROUP}>{ColorBy.GROUP}</Radio.Button>
|
||||
<Radio.Button value={ColorBy.LABEL}>{ColorBy.LABEL}</Radio.Button>
|
||||
</Radio.Group>
|
||||
<Text type='secondary'>Opacity</Text>
|
||||
<Slider
|
||||
onChange={changeShapesOpacity}
|
||||
value={opacity}
|
||||
min={0}
|
||||
max={100}
|
||||
/>
|
||||
<Text type='secondary'>Selected opacity</Text>
|
||||
<Slider
|
||||
onChange={changeSelectedShapesOpacity}
|
||||
value={selectedOpacity}
|
||||
min={0}
|
||||
max={100}
|
||||
/>
|
||||
<Checkbox
|
||||
onChange={changeShapesBlackBorders}
|
||||
checked={blackBorders}
|
||||
>
|
||||
Black borders
|
||||
</Checkbox>
|
||||
<Checkbox
|
||||
onChange={changeShowBitmap}
|
||||
checked={showBitmap}
|
||||
>
|
||||
Show bitmap
|
||||
</Checkbox>
|
||||
<Checkbox
|
||||
onChange={changeShowProjections}
|
||||
checked={showProjections}
|
||||
>
|
||||
Show projections
|
||||
</Checkbox>
|
||||
</div>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(AppearanceBlock);
|
||||
@ -0,0 +1,175 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { Col } from 'antd/lib/grid';
|
||||
import Select from 'antd/lib/select';
|
||||
import Radio, { RadioChangeEvent } from 'antd/lib/radio';
|
||||
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||
import Input from 'antd/lib/input';
|
||||
import InputNumber from 'antd/lib/input-number';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
|
||||
import consts from 'consts';
|
||||
import { clamp } from 'utils/math';
|
||||
|
||||
interface Props {
|
||||
attrInputType: string;
|
||||
attrValues: string[];
|
||||
attrValue: string;
|
||||
attrName: string;
|
||||
attrID: number;
|
||||
changeAttribute(attrID: number, value: string): void;
|
||||
}
|
||||
|
||||
function attrIsTheSame(
|
||||
prevProps: Props,
|
||||
nextProps: Props,
|
||||
): boolean {
|
||||
return nextProps.attrID === prevProps.attrID
|
||||
&& nextProps.attrValue === prevProps.attrValue
|
||||
&& nextProps.attrName === prevProps.attrName
|
||||
&& nextProps.attrInputType === prevProps.attrInputType
|
||||
&& nextProps.attrValues
|
||||
.map((value: string, id: number): boolean => prevProps.attrValues[id] === value)
|
||||
.every((value: boolean): boolean => value);
|
||||
}
|
||||
|
||||
function ItemAttributeComponent(props: Props): JSX.Element {
|
||||
const {
|
||||
attrInputType,
|
||||
attrValues,
|
||||
attrValue,
|
||||
attrName,
|
||||
attrID,
|
||||
changeAttribute,
|
||||
} = props;
|
||||
|
||||
if (attrInputType === 'checkbox') {
|
||||
return (
|
||||
<Col span={24}>
|
||||
<Checkbox
|
||||
className='cvat-object-item-checkbox-attribute'
|
||||
checked={attrValue === 'true'}
|
||||
onChange={(event: CheckboxChangeEvent): void => {
|
||||
const value = event.target.checked ? 'true' : 'false';
|
||||
changeAttribute(attrID, value);
|
||||
}}
|
||||
>
|
||||
<Text strong className='cvat-text'>
|
||||
{attrName}
|
||||
</Text>
|
||||
</Checkbox>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
|
||||
if (attrInputType === 'radio') {
|
||||
return (
|
||||
<Col span={24}>
|
||||
<fieldset className='cvat-object-item-radio-attribute'>
|
||||
<legend>
|
||||
<Text strong className='cvat-text'>{attrName}</Text>
|
||||
</legend>
|
||||
<Radio.Group
|
||||
size='small'
|
||||
value={attrValue}
|
||||
onChange={(event: RadioChangeEvent): void => {
|
||||
changeAttribute(attrID, event.target.value);
|
||||
}}
|
||||
>
|
||||
{ attrValues.map((value: string): JSX.Element => (
|
||||
<Radio key={value} value={value}>
|
||||
{value === consts.UNDEFINED_ATTRIBUTE_VALUE
|
||||
? consts.NO_BREAK_SPACE : value}
|
||||
</Radio>
|
||||
)) }
|
||||
</Radio.Group>
|
||||
</fieldset>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
|
||||
if (attrInputType === 'select') {
|
||||
return (
|
||||
<>
|
||||
<Col span={24}>
|
||||
<Text strong className='cvat-text'>
|
||||
{attrName}
|
||||
</Text>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Select
|
||||
size='small'
|
||||
onChange={(value: string): void => {
|
||||
changeAttribute(attrID, value);
|
||||
}}
|
||||
value={attrValue}
|
||||
className='cvat-object-item-select-attribute'
|
||||
>
|
||||
{ attrValues.map((value: string): JSX.Element => (
|
||||
<Select.Option key={value} value={value}>
|
||||
{value === consts.UNDEFINED_ATTRIBUTE_VALUE
|
||||
? consts.NO_BREAK_SPACE : value}
|
||||
</Select.Option>
|
||||
)) }
|
||||
</Select>
|
||||
</Col>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (attrInputType === 'number') {
|
||||
const [min, max, step] = attrValues.map((value: string): number => +value);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Col span={24}>
|
||||
<Text strong className='cvat-text'>
|
||||
{attrName}
|
||||
</Text>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<InputNumber
|
||||
size='small'
|
||||
onChange={(value: number | undefined): void => {
|
||||
if (typeof (value) === 'number') {
|
||||
changeAttribute(
|
||||
attrID, `${clamp(value, min, max)}`,
|
||||
);
|
||||
}
|
||||
}}
|
||||
value={+attrValue}
|
||||
className='cvat-object-item-number-attribute'
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
/>
|
||||
</Col>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Col span={24}>
|
||||
<Text strong className='cvat-text'>
|
||||
{attrName}
|
||||
</Text>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Input
|
||||
size='small'
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {
|
||||
changeAttribute(attrID, event.target.value);
|
||||
}}
|
||||
value={attrValue}
|
||||
className='cvat-object-item-text-attribute'
|
||||
/>
|
||||
</Col>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(ItemAttributeComponent, attrIsTheSame);
|
||||
@ -0,0 +1,131 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Icon from 'antd/lib/icon';
|
||||
import Select, { OptionProps } from 'antd/lib/select';
|
||||
import Dropdown from 'antd/lib/dropdown';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
|
||||
import { ObjectType, ShapeType } from 'reducers/interfaces';
|
||||
import ItemMenu from './object-item-menu';
|
||||
|
||||
interface Props {
|
||||
clientID: number;
|
||||
serverID: number | undefined;
|
||||
labelID: number;
|
||||
labels: any[];
|
||||
shapeType: ShapeType;
|
||||
objectType: ObjectType;
|
||||
type: string;
|
||||
locked: boolean;
|
||||
copyShortcut: string;
|
||||
pasteShortcut: string;
|
||||
propagateShortcut: string;
|
||||
toBackgroundShortcut: string;
|
||||
toForegroundShortcut: string;
|
||||
removeShortcut: string;
|
||||
changeLabel(labelID: string): void;
|
||||
copy(): void;
|
||||
remove(): void;
|
||||
propagate(): void;
|
||||
createURL(): void;
|
||||
switchOrientation(): void;
|
||||
toBackground(): void;
|
||||
toForeground(): void;
|
||||
resetCuboidPerspective(): void;
|
||||
}
|
||||
|
||||
function ItemTopComponent(props: Props): JSX.Element {
|
||||
const {
|
||||
clientID,
|
||||
serverID,
|
||||
labelID,
|
||||
labels,
|
||||
shapeType,
|
||||
objectType,
|
||||
type,
|
||||
locked,
|
||||
copyShortcut,
|
||||
pasteShortcut,
|
||||
propagateShortcut,
|
||||
toBackgroundShortcut,
|
||||
toForegroundShortcut,
|
||||
removeShortcut,
|
||||
changeLabel,
|
||||
copy,
|
||||
remove,
|
||||
propagate,
|
||||
createURL,
|
||||
switchOrientation,
|
||||
toBackground,
|
||||
toForeground,
|
||||
resetCuboidPerspective,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Row type='flex' align='middle'>
|
||||
<Col span={10}>
|
||||
<Text style={{ fontSize: 12 }}>{clientID}</Text>
|
||||
<br />
|
||||
<Text type='secondary' style={{ fontSize: 10 }}>{type}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Tooltip title='Change current label'>
|
||||
<Select
|
||||
size='small'
|
||||
value={`${labelID}`}
|
||||
onChange={changeLabel}
|
||||
showSearch
|
||||
filterOption={(input: string, option: React.ReactElement<OptionProps>) => {
|
||||
const { children } = option.props;
|
||||
if (typeof (children) === 'string') {
|
||||
return children.toLowerCase().includes(input.toLowerCase());
|
||||
}
|
||||
|
||||
return false;
|
||||
}}
|
||||
>
|
||||
{ labels.map((label: any): JSX.Element => (
|
||||
<Select.Option key={label.id} value={`${label.id}`}>
|
||||
{label.name}
|
||||
</Select.Option>
|
||||
))}
|
||||
</Select>
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<Dropdown
|
||||
placement='bottomLeft'
|
||||
overlay={ItemMenu({
|
||||
serverID,
|
||||
locked,
|
||||
shapeType,
|
||||
objectType,
|
||||
copyShortcut,
|
||||
pasteShortcut,
|
||||
propagateShortcut,
|
||||
toBackgroundShortcut,
|
||||
toForegroundShortcut,
|
||||
removeShortcut,
|
||||
copy,
|
||||
remove,
|
||||
propagate,
|
||||
createURL,
|
||||
switchOrientation,
|
||||
toBackground,
|
||||
toForeground,
|
||||
resetCuboidPerspective,
|
||||
})}
|
||||
>
|
||||
<Icon type='more' />
|
||||
</Dropdown>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(ItemTopComponent);
|
||||
@ -0,0 +1,262 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Icon from 'antd/lib/icon';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
|
||||
import {
|
||||
ObjectOutsideIcon,
|
||||
FirstIcon,
|
||||
LastIcon,
|
||||
PreviousIcon,
|
||||
NextIcon,
|
||||
} from 'icons';
|
||||
import { ObjectType, ShapeType } from 'reducers/interfaces';
|
||||
|
||||
interface Props {
|
||||
objectType: ObjectType;
|
||||
shapeType: ShapeType;
|
||||
occluded: boolean;
|
||||
outside: boolean | undefined;
|
||||
locked: boolean;
|
||||
pinned: boolean;
|
||||
hidden: boolean;
|
||||
keyframe: boolean | undefined;
|
||||
outsideDisabled: boolean;
|
||||
hiddenDisabled: boolean;
|
||||
keyframeDisabled: boolean;
|
||||
switchOccludedShortcut: string;
|
||||
switchOutsideShortcut: string;
|
||||
switchLockShortcut: string;
|
||||
switchHiddenShortcut: string;
|
||||
switchKeyFrameShortcut: string;
|
||||
nextKeyFrameShortcut: string;
|
||||
prevKeyFrameShortcut: string;
|
||||
|
||||
navigateFirstKeyframe: null | (() => void);
|
||||
navigatePrevKeyframe: null | (() => void);
|
||||
navigateNextKeyframe: null | (() => void);
|
||||
navigateLastKeyframe: null | (() => void);
|
||||
|
||||
setOccluded(): void;
|
||||
unsetOccluded(): void;
|
||||
setOutside(): void;
|
||||
unsetOutside(): void;
|
||||
setKeyframe(): void;
|
||||
unsetKeyframe(): void;
|
||||
lock(): void;
|
||||
unlock(): void;
|
||||
pin(): void;
|
||||
unpin(): void;
|
||||
hide(): void;
|
||||
show(): void;
|
||||
}
|
||||
|
||||
function ItemButtonsComponent(props: Props): JSX.Element {
|
||||
const {
|
||||
objectType,
|
||||
shapeType,
|
||||
occluded,
|
||||
outside,
|
||||
locked,
|
||||
pinned,
|
||||
hidden,
|
||||
keyframe,
|
||||
outsideDisabled,
|
||||
hiddenDisabled,
|
||||
keyframeDisabled,
|
||||
switchOccludedShortcut,
|
||||
switchOutsideShortcut,
|
||||
switchLockShortcut,
|
||||
switchHiddenShortcut,
|
||||
switchKeyFrameShortcut,
|
||||
nextKeyFrameShortcut,
|
||||
prevKeyFrameShortcut,
|
||||
|
||||
navigateFirstKeyframe,
|
||||
navigatePrevKeyframe,
|
||||
navigateNextKeyframe,
|
||||
navigateLastKeyframe,
|
||||
|
||||
setOccluded,
|
||||
unsetOccluded,
|
||||
setOutside,
|
||||
unsetOutside,
|
||||
setKeyframe,
|
||||
unsetKeyframe,
|
||||
lock,
|
||||
unlock,
|
||||
pin,
|
||||
unpin,
|
||||
hide,
|
||||
show,
|
||||
} = props;
|
||||
|
||||
const outsideStyle = outsideDisabled ? { opacity: 0.5, pointerEvents: 'none' as 'none' } : {};
|
||||
const hiddenStyle = hiddenDisabled ? { opacity: 0.5, pointerEvents: 'none' as 'none' } : {};
|
||||
const keyframeStyle = keyframeDisabled ? { opacity: 0.5, pointerEvents: 'none' as 'none' } : {};
|
||||
|
||||
|
||||
if (objectType === ObjectType.TRACK) {
|
||||
return (
|
||||
<Row type='flex' align='middle' justify='space-around'>
|
||||
<Col span={20} style={{ textAlign: 'center' }}>
|
||||
<Row type='flex' justify='space-around'>
|
||||
<Col>
|
||||
{ navigateFirstKeyframe
|
||||
? <Icon component={FirstIcon} onClick={navigateFirstKeyframe} />
|
||||
: <Icon component={FirstIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
|
||||
</Col>
|
||||
<Col>
|
||||
{ navigatePrevKeyframe
|
||||
? (
|
||||
<Tooltip title={`Go to previous keyframe ${prevKeyFrameShortcut}`}>
|
||||
<Icon
|
||||
component={PreviousIcon}
|
||||
onClick={navigatePrevKeyframe}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
: <Icon component={PreviousIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
|
||||
</Col>
|
||||
<Col>
|
||||
{ navigateNextKeyframe
|
||||
? (
|
||||
<Tooltip title={`Go to next keyframe ${nextKeyFrameShortcut}`}>
|
||||
<Icon
|
||||
component={NextIcon}
|
||||
onClick={navigateNextKeyframe}
|
||||
/>
|
||||
</Tooltip>
|
||||
)
|
||||
: <Icon component={NextIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
|
||||
</Col>
|
||||
<Col>
|
||||
{ navigateLastKeyframe
|
||||
? <Icon component={LastIcon} onClick={navigateLastKeyframe} />
|
||||
: <Icon component={LastIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' justify='space-around'>
|
||||
<Col>
|
||||
<Tooltip title={`Switch outside property ${switchOutsideShortcut}`}>
|
||||
{ outside
|
||||
? (
|
||||
<Icon
|
||||
component={ObjectOutsideIcon}
|
||||
onClick={unsetOutside}
|
||||
style={outsideStyle}
|
||||
/>
|
||||
)
|
||||
: <Icon type='select' onClick={setOutside} style={outsideStyle} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col>
|
||||
<Tooltip title={`Switch lock property ${switchLockShortcut}`}>
|
||||
{ locked
|
||||
? <Icon type='lock' theme='filled' onClick={unlock} />
|
||||
: <Icon type='unlock' onClick={lock} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col>
|
||||
<Tooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
|
||||
{ occluded
|
||||
? <Icon type='team' onClick={unsetOccluded} />
|
||||
: <Icon type='user' onClick={setOccluded} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col>
|
||||
<Tooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
|
||||
{ hidden
|
||||
? <Icon type='eye-invisible' theme='filled' onClick={show} style={hiddenStyle} />
|
||||
: <Icon type='eye' onClick={hide} style={hiddenStyle} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col>
|
||||
<Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`}>
|
||||
{ keyframe
|
||||
? <Icon type='star' theme='filled' onClick={unsetKeyframe} style={keyframeStyle} />
|
||||
: <Icon type='star' onClick={setKeyframe} style={keyframeStyle} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
{
|
||||
shapeType !== ShapeType.POINTS && (
|
||||
<Col>
|
||||
<Tooltip title='Switch pinned property'>
|
||||
{ pinned
|
||||
? <Icon type='pushpin' theme='filled' onClick={unpin} />
|
||||
: <Icon type='pushpin' onClick={pin} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
if (objectType === ObjectType.TAG) {
|
||||
return (
|
||||
<Row type='flex' align='middle' justify='space-around'>
|
||||
<Col span={20} style={{ textAlign: 'center' }}>
|
||||
<Row type='flex' justify='space-around'>
|
||||
<Col>
|
||||
<Tooltip title={`Switch lock property ${switchLockShortcut}`}>
|
||||
{ locked
|
||||
? <Icon type='lock' onClick={unlock} theme='filled' />
|
||||
: <Icon type='unlock' onClick={lock} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Row type='flex' align='middle' justify='space-around'>
|
||||
<Col span={20} style={{ textAlign: 'center' }}>
|
||||
<Row type='flex' justify='space-around'>
|
||||
<Col>
|
||||
<Tooltip title={`Switch lock property ${switchLockShortcut}`}>
|
||||
{ locked
|
||||
? <Icon type='lock' onClick={unlock} theme='filled' />
|
||||
: <Icon type='unlock' onClick={lock} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col>
|
||||
<Tooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
|
||||
{ occluded
|
||||
? <Icon type='team' onClick={unsetOccluded} />
|
||||
: <Icon type='user' onClick={setOccluded} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col>
|
||||
<Tooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
|
||||
{ hidden
|
||||
? <Icon type='eye-invisible' onClick={show} />
|
||||
: <Icon type='eye' onClick={hide} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
{
|
||||
shapeType !== ShapeType.POINTS && (
|
||||
<Col>
|
||||
<Tooltip title='Switch pinned property'>
|
||||
{ pinned
|
||||
? <Icon type='pushpin' theme='filled' onClick={unpin} />
|
||||
: <Icon type='pushpin' onClick={pin} />}
|
||||
</Tooltip>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(ItemButtonsComponent);
|
||||
@ -0,0 +1,86 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { Row } from 'antd/lib/grid';
|
||||
import Collapse from 'antd/lib/collapse';
|
||||
|
||||
import ItemAttribute from './object-item-attribute';
|
||||
|
||||
interface Props {
|
||||
collapsed: boolean;
|
||||
attributes: any[];
|
||||
values: Record<number, string>;
|
||||
changeAttribute(attrID: number, value: string): void;
|
||||
collapse(): void;
|
||||
}
|
||||
|
||||
export function attrValuesAreEqual(
|
||||
next: Record<number, string>, prev: Record<number, string>,
|
||||
): boolean {
|
||||
const prevKeys = Object.keys(prev);
|
||||
const nextKeys = Object.keys(next);
|
||||
|
||||
return nextKeys.length === prevKeys.length
|
||||
&& nextKeys.map((key: string): boolean => prev[+key] === next[+key])
|
||||
.every((value: boolean) => value);
|
||||
}
|
||||
|
||||
function attrAreTheSame(
|
||||
prevProps: Props,
|
||||
nextProps: Props,
|
||||
): boolean {
|
||||
return nextProps.collapsed === prevProps.collapsed
|
||||
&& nextProps.attributes === prevProps.attributes
|
||||
&& attrValuesAreEqual(nextProps.values, prevProps.values);
|
||||
}
|
||||
|
||||
function ItemAttributesComponent(props: Props): JSX.Element {
|
||||
const {
|
||||
collapsed,
|
||||
attributes,
|
||||
values,
|
||||
changeAttribute,
|
||||
collapse,
|
||||
} = props;
|
||||
|
||||
const sorted = [...attributes]
|
||||
.sort((a: any, b: any): number => a.inputType.localeCompare(b.inputType));
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Collapse
|
||||
className='cvat-objects-sidebar-state-item-collapse'
|
||||
activeKey={collapsed ? [] : ['details']}
|
||||
onChange={collapse}
|
||||
>
|
||||
<Collapse.Panel
|
||||
header={<span style={{ fontSize: '11px' }}>Details</span>}
|
||||
key='details'
|
||||
>
|
||||
{ sorted.map((attribute: any): JSX.Element => (
|
||||
<Row
|
||||
key={attribute.id}
|
||||
type='flex'
|
||||
align='middle'
|
||||
justify='start'
|
||||
className='cvat-object-item-attribute-wrapper'
|
||||
>
|
||||
<ItemAttribute
|
||||
attrValue={values[attribute.id]}
|
||||
attrInputType={attribute.inputType}
|
||||
attrName={attribute.name}
|
||||
attrID={attribute.id}
|
||||
attrValues={attribute.values}
|
||||
changeAttribute={changeAttribute}
|
||||
/>
|
||||
</Row>
|
||||
))}
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(ItemAttributesComponent, attrAreTheSame);
|
||||
@ -0,0 +1,139 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import Icon from 'antd/lib/icon';
|
||||
import Menu from 'antd/lib/menu';
|
||||
import Button from 'antd/lib/button';
|
||||
import Modal from 'antd/lib/modal';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
|
||||
import { BackgroundIcon, ForegroundIcon, ResetPerspectiveIcon } from 'icons';
|
||||
import { ObjectType, ShapeType } from 'reducers/interfaces';
|
||||
|
||||
interface Props {
|
||||
serverID: number | undefined;
|
||||
locked: boolean;
|
||||
shapeType: ShapeType;
|
||||
objectType: ObjectType;
|
||||
copyShortcut: string;
|
||||
pasteShortcut: string;
|
||||
propagateShortcut: string;
|
||||
toBackgroundShortcut: string;
|
||||
toForegroundShortcut: string;
|
||||
removeShortcut: string;
|
||||
copy: (() => void);
|
||||
remove: (() => void);
|
||||
propagate: (() => void);
|
||||
createURL: (() => void);
|
||||
switchOrientation: (() => void);
|
||||
toBackground: (() => void);
|
||||
toForeground: (() => void);
|
||||
resetCuboidPerspective: (() => void);
|
||||
}
|
||||
|
||||
export default function ItemMenu(props: Props): JSX.Element {
|
||||
const {
|
||||
serverID,
|
||||
locked,
|
||||
shapeType,
|
||||
objectType,
|
||||
copyShortcut,
|
||||
pasteShortcut,
|
||||
propagateShortcut,
|
||||
toBackgroundShortcut,
|
||||
toForegroundShortcut,
|
||||
removeShortcut,
|
||||
copy,
|
||||
remove,
|
||||
propagate,
|
||||
createURL,
|
||||
switchOrientation,
|
||||
toBackground,
|
||||
toForeground,
|
||||
resetCuboidPerspective,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Menu className='cvat-object-item-menu'>
|
||||
<Menu.Item>
|
||||
<Button disabled={serverID === undefined} type='link' icon='link' onClick={createURL}>
|
||||
Create object URL
|
||||
</Button>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<Tooltip title={`${copyShortcut} and ${pasteShortcut}`}>
|
||||
<Button type='link' icon='copy' onClick={copy}>
|
||||
Make a copy
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<Tooltip title={`${propagateShortcut}`}>
|
||||
<Button type='link' icon='block' onClick={propagate}>
|
||||
Propagate
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Menu.Item>
|
||||
{ [ShapeType.POLYGON, ShapeType.POLYLINE, ShapeType.CUBOID].includes(shapeType) && (
|
||||
<Menu.Item>
|
||||
<Button type='link' icon='retweet' onClick={switchOrientation}>
|
||||
Switch orientation
|
||||
</Button>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{shapeType === ShapeType.CUBOID && (
|
||||
<Menu.Item>
|
||||
<Button type='link' onClick={resetCuboidPerspective}>
|
||||
<Icon component={ResetPerspectiveIcon} />
|
||||
Reset perspective
|
||||
</Button>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{objectType !== ObjectType.TAG && (
|
||||
<Menu.Item>
|
||||
<Tooltip title={`${toBackgroundShortcut}`}>
|
||||
<Button type='link' onClick={toBackground}>
|
||||
<Icon component={BackgroundIcon} />
|
||||
To background
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{objectType !== ObjectType.TAG && (
|
||||
<Menu.Item>
|
||||
<Tooltip title={`${toForegroundShortcut}`}>
|
||||
<Button type='link' onClick={toForeground}>
|
||||
<Icon component={ForegroundIcon} />
|
||||
To foreground
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Menu.Item>
|
||||
)}
|
||||
<Menu.Item>
|
||||
<Tooltip title={`${removeShortcut}`}>
|
||||
<Button
|
||||
type='link'
|
||||
icon='delete'
|
||||
onClick={(): void => {
|
||||
if (locked) {
|
||||
Modal.confirm({
|
||||
title: 'Object is locked',
|
||||
content: 'Are you sure you want to remove it?',
|
||||
onOk() {
|
||||
remove();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
remove();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,296 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { LogType } from 'cvat-logger';
|
||||
import { Canvas } from 'cvat-canvas-wrapper';
|
||||
import { ThunkDispatch } from 'utils/redux';
|
||||
import { updateAnnotationsAsync, changeFrameAsync } from 'actions/annotation-actions';
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import ItemButtonsComponent from 'components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons';
|
||||
|
||||
interface OwnProps {
|
||||
clientID: number;
|
||||
outsideDisabled?: boolean;
|
||||
hiddenDisabled?: boolean;
|
||||
keyframeDisabled?: boolean;
|
||||
}
|
||||
|
||||
interface StateToProps {
|
||||
objectState: any;
|
||||
jobInstance: any;
|
||||
frameNumber: number;
|
||||
normalizedKeyMap: Record<string, string>;
|
||||
canvasInstance: Canvas;
|
||||
outsideDisabled: boolean;
|
||||
hiddenDisabled: boolean;
|
||||
keyframeDisabled: boolean;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
updateAnnotations(statesToUpdate: any[]): void;
|
||||
changeFrame(frame: number): void;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
|
||||
const {
|
||||
annotation: {
|
||||
annotations: {
|
||||
states,
|
||||
},
|
||||
job: {
|
||||
instance: jobInstance,
|
||||
},
|
||||
player: {
|
||||
frame: {
|
||||
number: frameNumber,
|
||||
},
|
||||
},
|
||||
canvas: {
|
||||
instance: canvasInstance,
|
||||
},
|
||||
},
|
||||
shortcuts: {
|
||||
normalizedKeyMap,
|
||||
},
|
||||
} = state;
|
||||
|
||||
const {
|
||||
clientID,
|
||||
outsideDisabled,
|
||||
hiddenDisabled,
|
||||
keyframeDisabled,
|
||||
} = own;
|
||||
const [objectState] = states
|
||||
.filter((_objectState): boolean => _objectState.clientID === clientID);
|
||||
|
||||
return {
|
||||
objectState,
|
||||
normalizedKeyMap,
|
||||
frameNumber,
|
||||
jobInstance,
|
||||
canvasInstance,
|
||||
outsideDisabled: typeof (outsideDisabled) === 'undefined' ? false : outsideDisabled,
|
||||
hiddenDisabled: typeof (hiddenDisabled) === 'undefined' ? false : hiddenDisabled,
|
||||
keyframeDisabled: typeof (keyframeDisabled) === 'undefined' ? false : keyframeDisabled,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: ThunkDispatch): DispatchToProps {
|
||||
return {
|
||||
updateAnnotations(states: any[]) {
|
||||
dispatch(updateAnnotationsAsync(states));
|
||||
},
|
||||
changeFrame(frame: number): void {
|
||||
dispatch(changeFrameAsync(frame));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
class ItemButtonsWrapper extends React.PureComponent<StateToProps & DispatchToProps> {
|
||||
private navigateFirstKeyframe = (): void => {
|
||||
const { objectState, frameNumber } = this.props;
|
||||
const { first } = objectState.keyframes;
|
||||
if (first !== frameNumber) {
|
||||
this.changeFrame(first);
|
||||
}
|
||||
};
|
||||
|
||||
private navigatePrevKeyframe = (): void => {
|
||||
const { objectState, frameNumber } = this.props;
|
||||
const { prev } = objectState.keyframes;
|
||||
if (prev !== null && prev !== frameNumber) {
|
||||
this.changeFrame(prev);
|
||||
}
|
||||
};
|
||||
|
||||
private navigateNextKeyframe = (): void => {
|
||||
const { objectState, frameNumber } = this.props;
|
||||
const { next } = objectState.keyframes;
|
||||
if (next !== null && next !== frameNumber) {
|
||||
this.changeFrame(next);
|
||||
}
|
||||
};
|
||||
|
||||
private navigateLastKeyframe = (): void => {
|
||||
const { objectState, frameNumber } = this.props;
|
||||
const { last } = objectState.keyframes;
|
||||
if (last !== frameNumber) {
|
||||
this.changeFrame(last);
|
||||
}
|
||||
};
|
||||
|
||||
private lock = (): void => {
|
||||
const { objectState, jobInstance } = this.props;
|
||||
jobInstance.logger.log(LogType.lockObject, { locked: true });
|
||||
objectState.lock = true;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private unlock = (): void => {
|
||||
const { objectState, jobInstance } = this.props;
|
||||
jobInstance.logger.log(LogType.lockObject, { locked: false });
|
||||
objectState.lock = false;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private pin = (): void => {
|
||||
const { objectState } = this.props;
|
||||
objectState.pinned = true;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private unpin = (): void => {
|
||||
const { objectState } = this.props;
|
||||
objectState.pinned = false;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private show = (): void => {
|
||||
const { objectState } = this.props;
|
||||
objectState.hidden = false;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private hide = (): void => {
|
||||
const { objectState } = this.props;
|
||||
objectState.hidden = true;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private setOccluded = (): void => {
|
||||
const { objectState } = this.props;
|
||||
objectState.occluded = true;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private unsetOccluded = (): void => {
|
||||
const { objectState } = this.props;
|
||||
objectState.occluded = false;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private setOutside = (): void => {
|
||||
const { objectState } = this.props;
|
||||
objectState.outside = true;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private unsetOutside = (): void => {
|
||||
const { objectState } = this.props;
|
||||
objectState.outside = false;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private setKeyframe = (): void => {
|
||||
const { objectState } = this.props;
|
||||
objectState.keyframe = true;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private unsetKeyframe = (): void => {
|
||||
const { objectState } = this.props;
|
||||
objectState.keyframe = false;
|
||||
this.commit();
|
||||
};
|
||||
|
||||
private commit(): void {
|
||||
const {
|
||||
objectState,
|
||||
updateAnnotations,
|
||||
} = this.props;
|
||||
|
||||
updateAnnotations([objectState]);
|
||||
}
|
||||
|
||||
private changeFrame(frame: number): void {
|
||||
const { changeFrame, canvasInstance } = this.props;
|
||||
if (canvasInstance.isAbleToChangeFrame()) {
|
||||
changeFrame(frame);
|
||||
}
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
const {
|
||||
objectState,
|
||||
normalizedKeyMap,
|
||||
frameNumber,
|
||||
outsideDisabled,
|
||||
hiddenDisabled,
|
||||
keyframeDisabled,
|
||||
} = this.props;
|
||||
|
||||
const {
|
||||
first,
|
||||
prev,
|
||||
next,
|
||||
last,
|
||||
} = objectState.keyframes || {
|
||||
first: null, // shapes don't have keyframes, so we use null
|
||||
prev: null,
|
||||
next: null,
|
||||
last: null,
|
||||
};
|
||||
|
||||
return (
|
||||
<ItemButtonsComponent
|
||||
objectType={objectState.objectType}
|
||||
shapeType={objectState.shapeType}
|
||||
occluded={objectState.occluded}
|
||||
outside={objectState.outside}
|
||||
locked={objectState.lock}
|
||||
pinned={objectState.pinned}
|
||||
hidden={objectState.hidden}
|
||||
keyframe={objectState.keyframe}
|
||||
switchOccludedShortcut={normalizedKeyMap.SWITCH_OCCLUDED}
|
||||
switchOutsideShortcut={normalizedKeyMap.SWITCH_OUTSIDE}
|
||||
switchLockShortcut={normalizedKeyMap.SWITCH_LOCK}
|
||||
switchHiddenShortcut={normalizedKeyMap.SWITCH_HIDDEN}
|
||||
switchKeyFrameShortcut={normalizedKeyMap.SWITCH_KEYFRAME}
|
||||
nextKeyFrameShortcut={normalizedKeyMap.NEXT_KEY_FRAME}
|
||||
prevKeyFrameShortcut={normalizedKeyMap.PREV_KEY_FRAME}
|
||||
outsideDisabled={outsideDisabled}
|
||||
hiddenDisabled={hiddenDisabled}
|
||||
keyframeDisabled={keyframeDisabled}
|
||||
|
||||
navigateFirstKeyframe={
|
||||
first >= frameNumber || first === null
|
||||
? null : this.navigateFirstKeyframe
|
||||
}
|
||||
navigatePrevKeyframe={
|
||||
prev === frameNumber || prev === null
|
||||
? null : this.navigatePrevKeyframe
|
||||
}
|
||||
navigateNextKeyframe={
|
||||
next === frameNumber || next === null
|
||||
? null : this.navigateNextKeyframe
|
||||
}
|
||||
navigateLastKeyframe={
|
||||
last <= frameNumber || last === null
|
||||
? null : this.navigateLastKeyframe
|
||||
}
|
||||
|
||||
setOccluded={this.setOccluded}
|
||||
unsetOccluded={this.unsetOccluded}
|
||||
setOutside={this.setOutside}
|
||||
unsetOutside={this.unsetOutside}
|
||||
setKeyframe={this.setKeyframe}
|
||||
unsetKeyframe={this.unsetKeyframe}
|
||||
lock={this.lock}
|
||||
unlock={this.unlock}
|
||||
pin={this.pin}
|
||||
unpin={this.unpin}
|
||||
hide={this.hide}
|
||||
show={this.show}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(ItemButtonsWrapper);
|
||||
@ -1,254 +0,0 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { RadioChangeEvent } from 'antd/lib/radio';
|
||||
import { SliderValue } from 'antd/lib/slider';
|
||||
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||
|
||||
import ObjectsSidebarComponent from 'components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar';
|
||||
import {
|
||||
CombinedState,
|
||||
ColorBy,
|
||||
} from 'reducers/interfaces';
|
||||
|
||||
import {
|
||||
collapseSidebar as collapseSidebarAction,
|
||||
collapseAppearance as collapseAppearanceAction,
|
||||
updateTabContentHeight as updateTabContentHeightAction,
|
||||
} from 'actions/annotation-actions';
|
||||
|
||||
import {
|
||||
changeShapesColorBy as changeShapesColorByAction,
|
||||
changeShapesOpacity as changeShapesOpacityAction,
|
||||
changeSelectedShapesOpacity as changeSelectedShapesOpacityAction,
|
||||
changeShapesBlackBorders as changeShapesBlackBordersAction,
|
||||
changeShowBitmap as changeShowUnlabeledRegionsAction,
|
||||
changeShowProjections as changeShowProjectionsAction,
|
||||
} from 'actions/settings-actions';
|
||||
|
||||
import { Canvas } from 'cvat-canvas-wrapper';
|
||||
|
||||
interface StateToProps {
|
||||
sidebarCollapsed: boolean;
|
||||
appearanceCollapsed: boolean;
|
||||
colorBy: ColorBy;
|
||||
opacity: number;
|
||||
selectedOpacity: number;
|
||||
blackBorders: boolean;
|
||||
showBitmap: boolean;
|
||||
showProjections: boolean;
|
||||
canvasInstance: Canvas;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
collapseSidebar(): void;
|
||||
collapseAppearance(): void;
|
||||
updateTabContentHeight(): void;
|
||||
changeShapesColorBy(colorBy: ColorBy): void;
|
||||
changeShapesOpacity(shapesOpacity: number): void;
|
||||
changeSelectedShapesOpacity(selectedShapesOpacity: number): void;
|
||||
changeShapesBlackBorders(blackBorders: boolean): void;
|
||||
changeShowBitmap(showBitmap: boolean): void;
|
||||
changeShowProjections(showProjections: boolean): void;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const {
|
||||
annotation: {
|
||||
sidebarCollapsed,
|
||||
appearanceCollapsed,
|
||||
canvas: {
|
||||
instance: canvasInstance,
|
||||
},
|
||||
},
|
||||
settings: {
|
||||
shapes: {
|
||||
colorBy,
|
||||
opacity,
|
||||
selectedOpacity,
|
||||
blackBorders,
|
||||
showBitmap,
|
||||
showProjections,
|
||||
},
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
sidebarCollapsed,
|
||||
appearanceCollapsed,
|
||||
colorBy,
|
||||
opacity,
|
||||
selectedOpacity,
|
||||
blackBorders,
|
||||
showBitmap,
|
||||
showProjections,
|
||||
canvasInstance,
|
||||
};
|
||||
}
|
||||
|
||||
function computeHeight(): number {
|
||||
const [sidebar] = window.document.getElementsByClassName('cvat-objects-sidebar');
|
||||
const [appearance] = window.document.getElementsByClassName('cvat-objects-appearance-collapse');
|
||||
const [tabs] = Array.from(
|
||||
window.document.querySelectorAll('.cvat-objects-sidebar-tabs > .ant-tabs-card-bar'),
|
||||
);
|
||||
|
||||
if (sidebar && appearance && tabs) {
|
||||
const maxHeight = sidebar ? sidebar.clientHeight : 0;
|
||||
const appearanceHeight = appearance ? appearance.clientHeight : 0;
|
||||
const tabsHeight = tabs ? tabs.clientHeight : 0;
|
||||
return maxHeight - appearanceHeight - tabsHeight;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||
return {
|
||||
collapseSidebar(): void {
|
||||
dispatch(collapseSidebarAction());
|
||||
},
|
||||
collapseAppearance(): void {
|
||||
dispatch(collapseAppearanceAction());
|
||||
|
||||
const [collapser] = window.document
|
||||
.getElementsByClassName('cvat-objects-appearance-collapse');
|
||||
|
||||
if (collapser) {
|
||||
collapser.addEventListener('transitionend', () => {
|
||||
dispatch(
|
||||
updateTabContentHeightAction(
|
||||
computeHeight(),
|
||||
),
|
||||
);
|
||||
}, { once: true });
|
||||
}
|
||||
},
|
||||
updateTabContentHeight(): void {
|
||||
dispatch(
|
||||
updateTabContentHeightAction(
|
||||
computeHeight(),
|
||||
),
|
||||
);
|
||||
},
|
||||
changeShapesColorBy(colorBy: ColorBy): void {
|
||||
dispatch(changeShapesColorByAction(colorBy));
|
||||
},
|
||||
changeShapesOpacity(shapesOpacity: number): void {
|
||||
dispatch(changeShapesOpacityAction(shapesOpacity));
|
||||
},
|
||||
changeSelectedShapesOpacity(selectedShapesOpacity: number): void {
|
||||
dispatch(changeSelectedShapesOpacityAction(selectedShapesOpacity));
|
||||
},
|
||||
changeShapesBlackBorders(blackBorders: boolean): void {
|
||||
dispatch(changeShapesBlackBordersAction(blackBorders));
|
||||
},
|
||||
changeShowBitmap(showBitmap: boolean) {
|
||||
dispatch(changeShowUnlabeledRegionsAction(showBitmap));
|
||||
},
|
||||
changeShowProjections(showProjections: boolean) {
|
||||
dispatch(changeShowProjectionsAction(showProjections));
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
type Props = StateToProps & DispatchToProps;
|
||||
class ObjectsSideBarContainer extends React.PureComponent<Props> {
|
||||
public componentDidMount(): void {
|
||||
window.addEventListener('resize', this.alignTabHeight);
|
||||
this.alignTabHeight();
|
||||
}
|
||||
|
||||
public componentWillUnmount(): void {
|
||||
window.removeEventListener('resize', this.alignTabHeight);
|
||||
}
|
||||
|
||||
private alignTabHeight = (): void => {
|
||||
const {
|
||||
sidebarCollapsed,
|
||||
updateTabContentHeight,
|
||||
} = this.props;
|
||||
|
||||
if (!sidebarCollapsed) {
|
||||
updateTabContentHeight();
|
||||
}
|
||||
};
|
||||
|
||||
private changeShapesColorBy = (event: RadioChangeEvent): void => {
|
||||
const { changeShapesColorBy } = this.props;
|
||||
changeShapesColorBy(event.target.value);
|
||||
};
|
||||
|
||||
private changeShapesOpacity = (value: SliderValue): void => {
|
||||
const { changeShapesOpacity } = this.props;
|
||||
changeShapesOpacity(value as number);
|
||||
};
|
||||
|
||||
private changeSelectedShapesOpacity = (value: SliderValue): void => {
|
||||
const { changeSelectedShapesOpacity } = this.props;
|
||||
changeSelectedShapesOpacity(value as number);
|
||||
};
|
||||
|
||||
private changeShapesBlackBorders = (event: CheckboxChangeEvent): void => {
|
||||
const { changeShapesBlackBorders } = this.props;
|
||||
changeShapesBlackBorders(event.target.checked);
|
||||
};
|
||||
|
||||
private changeShowBitmap = (event: CheckboxChangeEvent): void => {
|
||||
const { changeShowBitmap } = this.props;
|
||||
changeShowBitmap(event.target.checked);
|
||||
};
|
||||
|
||||
private changeShowProjections = (event: CheckboxChangeEvent): void => {
|
||||
const { changeShowProjections } = this.props;
|
||||
changeShowProjections(event.target.checked);
|
||||
};
|
||||
|
||||
public render(): JSX.Element {
|
||||
const {
|
||||
sidebarCollapsed,
|
||||
appearanceCollapsed,
|
||||
colorBy,
|
||||
opacity,
|
||||
selectedOpacity,
|
||||
blackBorders,
|
||||
showBitmap,
|
||||
showProjections,
|
||||
canvasInstance,
|
||||
collapseSidebar,
|
||||
collapseAppearance,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<ObjectsSidebarComponent
|
||||
sidebarCollapsed={sidebarCollapsed}
|
||||
appearanceCollapsed={appearanceCollapsed}
|
||||
colorBy={colorBy}
|
||||
opacity={opacity}
|
||||
selectedOpacity={selectedOpacity}
|
||||
blackBorders={blackBorders}
|
||||
showBitmap={showBitmap}
|
||||
showProjections={showProjections}
|
||||
canvasInstance={canvasInstance}
|
||||
collapseSidebar={collapseSidebar}
|
||||
collapseAppearance={collapseAppearance}
|
||||
changeShapesColorBy={this.changeShapesColorBy}
|
||||
changeShapesOpacity={this.changeShapesOpacity}
|
||||
changeSelectedShapesOpacity={this.changeSelectedShapesOpacity}
|
||||
changeShapesBlackBorders={this.changeShapesBlackBorders}
|
||||
changeShowBitmap={this.changeShowBitmap}
|
||||
changeShowProjections={this.changeShowProjections}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(ObjectsSideBarContainer);
|
||||
Loading…
Reference in New Issue