|
|
|
@ -3,7 +3,6 @@
|
|
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
|
|
|
|
import { Row, Col } from 'antd/lib/grid';
|
|
|
|
import { Row, Col } from 'antd/lib/grid';
|
|
|
|
import Icon from 'antd/lib/icon';
|
|
|
|
import Icon from 'antd/lib/icon';
|
|
|
|
import Select from 'antd/lib/select';
|
|
|
|
import Select from 'antd/lib/select';
|
|
|
|
@ -18,6 +17,7 @@ import Button from 'antd/lib/button';
|
|
|
|
import Modal from 'antd/lib/modal';
|
|
|
|
import Modal from 'antd/lib/modal';
|
|
|
|
import Popover from 'antd/lib/popover';
|
|
|
|
import Popover from 'antd/lib/popover';
|
|
|
|
import Text from 'antd/lib/typography/Text';
|
|
|
|
import Text from 'antd/lib/typography/Text';
|
|
|
|
|
|
|
|
import Tooltip from 'antd/lib/tooltip';
|
|
|
|
|
|
|
|
|
|
|
|
import ColorChanger from 'components/annotation-page/standard-workspace/objects-side-bar/color-changer';
|
|
|
|
import ColorChanger from 'components/annotation-page/standard-workspace/objects-side-bar/color-changer';
|
|
|
|
|
|
|
|
|
|
|
|
@ -38,6 +38,12 @@ function ItemMenu(
|
|
|
|
serverID: number | undefined,
|
|
|
|
serverID: number | undefined,
|
|
|
|
locked: boolean,
|
|
|
|
locked: boolean,
|
|
|
|
objectType: ObjectType,
|
|
|
|
objectType: ObjectType,
|
|
|
|
|
|
|
|
copyShortcut: string,
|
|
|
|
|
|
|
|
pasteShortcut: string,
|
|
|
|
|
|
|
|
propagateShortcut: string,
|
|
|
|
|
|
|
|
toBackgroundShortcut: string,
|
|
|
|
|
|
|
|
toForegroundShortcut: string,
|
|
|
|
|
|
|
|
removeShortcut: string,
|
|
|
|
copy: (() => void),
|
|
|
|
copy: (() => void),
|
|
|
|
remove: (() => void),
|
|
|
|
remove: (() => void),
|
|
|
|
propagate: (() => void),
|
|
|
|
propagate: (() => void),
|
|
|
|
@ -46,58 +52,68 @@ function ItemMenu(
|
|
|
|
toForeground: (() => void),
|
|
|
|
toForeground: (() => void),
|
|
|
|
): JSX.Element {
|
|
|
|
): JSX.Element {
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Menu key='unique' className='cvat-object-item-menu'>
|
|
|
|
<Menu className='cvat-object-item-menu'>
|
|
|
|
<Menu.Item>
|
|
|
|
<Menu.Item>
|
|
|
|
<Button disabled={serverID === undefined} type='link' icon='link' onClick={createURL}>
|
|
|
|
<Button disabled={serverID === undefined} type='link' icon='link' onClick={createURL}>
|
|
|
|
Create object URL
|
|
|
|
Create object URL
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item>
|
|
|
|
<Menu.Item>
|
|
|
|
<Button type='link' icon='copy' onClick={copy}>
|
|
|
|
<Tooltip title={`${copyShortcut} and ${pasteShortcut}`}>
|
|
|
|
Make a copy
|
|
|
|
<Button type='link' icon='copy' onClick={copy}>
|
|
|
|
</Button>
|
|
|
|
Make a copy
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu.Item>
|
|
|
|
<Menu.Item>
|
|
|
|
<Menu.Item>
|
|
|
|
<Button type='link' icon='block' onClick={propagate}>
|
|
|
|
<Tooltip title={`${propagateShortcut}`}>
|
|
|
|
Propagate
|
|
|
|
<Button type='link' icon='block' onClick={propagate}>
|
|
|
|
</Button>
|
|
|
|
Propagate
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu.Item>
|
|
|
|
{ objectType !== ObjectType.TAG && (
|
|
|
|
{ objectType !== ObjectType.TAG && (
|
|
|
|
<>
|
|
|
|
<Menu.Item>
|
|
|
|
<Menu.Item>
|
|
|
|
<Tooltip title={`${toBackgroundShortcut}`}>
|
|
|
|
<Button type='link' onClick={toBackground}>
|
|
|
|
<Button type='link' onClick={toBackground}>
|
|
|
|
<Icon component={BackgroundIcon} />
|
|
|
|
<Icon component={BackgroundIcon} />
|
|
|
|
To background
|
|
|
|
To background
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
|
</Menu.Item>
|
|
|
|
</Tooltip>
|
|
|
|
<Menu.Item>
|
|
|
|
</Menu.Item>
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
{ objectType !== ObjectType.TAG && (
|
|
|
|
|
|
|
|
<Menu.Item>
|
|
|
|
|
|
|
|
<Tooltip title={`${toForegroundShortcut}`}>
|
|
|
|
<Button type='link' onClick={toForeground}>
|
|
|
|
<Button type='link' onClick={toForeground}>
|
|
|
|
<Icon component={ForegroundIcon} />
|
|
|
|
<Icon component={ForegroundIcon} />
|
|
|
|
To foreground
|
|
|
|
To foreground
|
|
|
|
</Button>
|
|
|
|
</Button>
|
|
|
|
</Menu.Item>
|
|
|
|
</Tooltip>
|
|
|
|
</>
|
|
|
|
</Menu.Item>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
<Menu.Item>
|
|
|
|
<Menu.Item>
|
|
|
|
<Button
|
|
|
|
<Tooltip title={`${removeShortcut}`}>
|
|
|
|
type='link'
|
|
|
|
<Button
|
|
|
|
icon='delete'
|
|
|
|
type='link'
|
|
|
|
onClick={(): void => {
|
|
|
|
icon='delete'
|
|
|
|
if (locked) {
|
|
|
|
onClick={(): void => {
|
|
|
|
Modal.confirm({
|
|
|
|
if (locked) {
|
|
|
|
title: 'Object is locked',
|
|
|
|
Modal.confirm({
|
|
|
|
content: 'Are you sure you want to remove it?',
|
|
|
|
title: 'Object is locked',
|
|
|
|
onOk() {
|
|
|
|
content: 'Are you sure you want to remove it?',
|
|
|
|
remove();
|
|
|
|
onOk() {
|
|
|
|
},
|
|
|
|
remove();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
} else {
|
|
|
|
});
|
|
|
|
remove();
|
|
|
|
} else {
|
|
|
|
}
|
|
|
|
remove();
|
|
|
|
}}
|
|
|
|
}
|
|
|
|
>
|
|
|
|
}}
|
|
|
|
Remove
|
|
|
|
>
|
|
|
|
</Button>
|
|
|
|
Remove
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu.Item>
|
|
|
|
</Menu>
|
|
|
|
</Menu>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
@ -111,6 +127,12 @@ interface ItemTopComponentProps {
|
|
|
|
objectType: ObjectType;
|
|
|
|
objectType: ObjectType;
|
|
|
|
type: string;
|
|
|
|
type: string;
|
|
|
|
locked: boolean;
|
|
|
|
locked: boolean;
|
|
|
|
|
|
|
|
copyShortcut: string;
|
|
|
|
|
|
|
|
pasteShortcut: string;
|
|
|
|
|
|
|
|
propagateShortcut: string;
|
|
|
|
|
|
|
|
toBackgroundShortcut: string;
|
|
|
|
|
|
|
|
toForegroundShortcut: string;
|
|
|
|
|
|
|
|
removeShortcut: string;
|
|
|
|
changeLabel(labelID: string): void;
|
|
|
|
changeLabel(labelID: string): void;
|
|
|
|
copy(): void;
|
|
|
|
copy(): void;
|
|
|
|
remove(): void;
|
|
|
|
remove(): void;
|
|
|
|
@ -129,6 +151,12 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element {
|
|
|
|
objectType,
|
|
|
|
objectType,
|
|
|
|
type,
|
|
|
|
type,
|
|
|
|
locked,
|
|
|
|
locked,
|
|
|
|
|
|
|
|
copyShortcut,
|
|
|
|
|
|
|
|
pasteShortcut,
|
|
|
|
|
|
|
|
propagateShortcut,
|
|
|
|
|
|
|
|
toBackgroundShortcut,
|
|
|
|
|
|
|
|
toForegroundShortcut,
|
|
|
|
|
|
|
|
removeShortcut,
|
|
|
|
changeLabel,
|
|
|
|
changeLabel,
|
|
|
|
copy,
|
|
|
|
copy,
|
|
|
|
remove,
|
|
|
|
remove,
|
|
|
|
@ -146,13 +174,15 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element {
|
|
|
|
<Text type='secondary' style={{ fontSize: 10 }}>{type}</Text>
|
|
|
|
<Text type='secondary' style={{ fontSize: 10 }}>{type}</Text>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col span={12}>
|
|
|
|
<Col span={12}>
|
|
|
|
<Select size='small' value={`${labelID}`} onChange={changeLabel}>
|
|
|
|
<Tooltip title='Change current label'>
|
|
|
|
{ labels.map((label: any): JSX.Element => (
|
|
|
|
<Select size='small' value={`${labelID}`} onChange={changeLabel}>
|
|
|
|
<Select.Option key={label.id} value={`${label.id}`}>
|
|
|
|
{ labels.map((label: any): JSX.Element => (
|
|
|
|
{label.name}
|
|
|
|
<Select.Option key={label.id} value={`${label.id}`}>
|
|
|
|
</Select.Option>
|
|
|
|
{label.name}
|
|
|
|
))}
|
|
|
|
</Select.Option>
|
|
|
|
</Select>
|
|
|
|
))}
|
|
|
|
|
|
|
|
</Select>
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col span={2}>
|
|
|
|
<Col span={2}>
|
|
|
|
<Dropdown
|
|
|
|
<Dropdown
|
|
|
|
@ -161,6 +191,12 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element {
|
|
|
|
serverID,
|
|
|
|
serverID,
|
|
|
|
locked,
|
|
|
|
locked,
|
|
|
|
objectType,
|
|
|
|
objectType,
|
|
|
|
|
|
|
|
copyShortcut,
|
|
|
|
|
|
|
|
pasteShortcut,
|
|
|
|
|
|
|
|
propagateShortcut,
|
|
|
|
|
|
|
|
toBackgroundShortcut,
|
|
|
|
|
|
|
|
toForegroundShortcut,
|
|
|
|
|
|
|
|
removeShortcut,
|
|
|
|
copy,
|
|
|
|
copy,
|
|
|
|
remove,
|
|
|
|
remove,
|
|
|
|
propagate,
|
|
|
|
propagate,
|
|
|
|
@ -187,6 +223,13 @@ interface ItemButtonsComponentProps {
|
|
|
|
pinned: boolean;
|
|
|
|
pinned: boolean;
|
|
|
|
hidden: boolean;
|
|
|
|
hidden: boolean;
|
|
|
|
keyframe: boolean | undefined;
|
|
|
|
keyframe: boolean | undefined;
|
|
|
|
|
|
|
|
switchOccludedShortcut: string;
|
|
|
|
|
|
|
|
switchOutsideShortcut: string;
|
|
|
|
|
|
|
|
switchLockShortcut: string;
|
|
|
|
|
|
|
|
switchHiddenShortcut: string;
|
|
|
|
|
|
|
|
switchKeyFrameShortcut: string;
|
|
|
|
|
|
|
|
nextKeyFrameShortcut: string;
|
|
|
|
|
|
|
|
prevKeyFrameShortcut: string;
|
|
|
|
|
|
|
|
|
|
|
|
navigateFirstKeyframe: null | (() => void);
|
|
|
|
navigateFirstKeyframe: null | (() => void);
|
|
|
|
navigatePrevKeyframe: null | (() => void);
|
|
|
|
navigatePrevKeyframe: null | (() => void);
|
|
|
|
@ -217,6 +260,13 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
|
|
|
|
pinned,
|
|
|
|
pinned,
|
|
|
|
hidden,
|
|
|
|
hidden,
|
|
|
|
keyframe,
|
|
|
|
keyframe,
|
|
|
|
|
|
|
|
switchOccludedShortcut,
|
|
|
|
|
|
|
|
switchOutsideShortcut,
|
|
|
|
|
|
|
|
switchLockShortcut,
|
|
|
|
|
|
|
|
switchHiddenShortcut,
|
|
|
|
|
|
|
|
switchKeyFrameShortcut,
|
|
|
|
|
|
|
|
nextKeyFrameShortcut,
|
|
|
|
|
|
|
|
prevKeyFrameShortcut,
|
|
|
|
|
|
|
|
|
|
|
|
navigateFirstKeyframe,
|
|
|
|
navigateFirstKeyframe,
|
|
|
|
navigatePrevKeyframe,
|
|
|
|
navigatePrevKeyframe,
|
|
|
|
@ -249,12 +299,26 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ navigatePrevKeyframe
|
|
|
|
{ navigatePrevKeyframe
|
|
|
|
? <Icon component={PreviousIcon} onClick={navigatePrevKeyframe} />
|
|
|
|
? (
|
|
|
|
|
|
|
|
<Tooltip title={`Go to previous keyframe ${prevKeyFrameShortcut}`}>
|
|
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
|
|
component={PreviousIcon}
|
|
|
|
|
|
|
|
onClick={navigatePrevKeyframe}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
|
|
|
|
)
|
|
|
|
: <Icon component={PreviousIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
|
|
|
|
: <Icon component={PreviousIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ navigateNextKeyframe
|
|
|
|
{ navigateNextKeyframe
|
|
|
|
? <Icon component={NextIcon} onClick={navigateNextKeyframe} />
|
|
|
|
? (
|
|
|
|
|
|
|
|
<Tooltip title={`Go to next keyframe ${nextKeyFrameShortcut}`}>
|
|
|
|
|
|
|
|
<Icon
|
|
|
|
|
|
|
|
component={NextIcon}
|
|
|
|
|
|
|
|
onClick={navigateNextKeyframe}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
|
|
|
|
)
|
|
|
|
: <Icon component={NextIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
|
|
|
|
: <Icon component={NextIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />}
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
@ -265,36 +329,48 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
|
|
|
|
</Row>
|
|
|
|
</Row>
|
|
|
|
<Row type='flex' justify='space-around'>
|
|
|
|
<Row type='flex' justify='space-around'>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ outside
|
|
|
|
<Tooltip title={`Switch outside property ${switchOutsideShortcut}`}>
|
|
|
|
? <Icon component={ObjectOutsideIcon} onClick={unsetOutside} />
|
|
|
|
{ outside
|
|
|
|
: <Icon type='select' onClick={setOutside} />}
|
|
|
|
? <Icon component={ObjectOutsideIcon} onClick={unsetOutside} />
|
|
|
|
|
|
|
|
: <Icon type='select' onClick={setOutside} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ locked
|
|
|
|
<Tooltip title={`Switch lock property ${switchLockShortcut}`}>
|
|
|
|
? <Icon type='lock' onClick={unlock} />
|
|
|
|
{ locked
|
|
|
|
: <Icon type='unlock' onClick={lock} />}
|
|
|
|
? <Icon type='lock' onClick={unlock} />
|
|
|
|
|
|
|
|
: <Icon type='unlock' onClick={lock} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ occluded
|
|
|
|
<Tooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
|
|
|
|
? <Icon type='team' onClick={unsetOccluded} />
|
|
|
|
{ occluded
|
|
|
|
: <Icon type='user' onClick={setOccluded} />}
|
|
|
|
? <Icon type='team' onClick={unsetOccluded} />
|
|
|
|
|
|
|
|
: <Icon type='user' onClick={setOccluded} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ hidden
|
|
|
|
<Tooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
|
|
|
|
? <Icon type='eye-invisible' onClick={show} />
|
|
|
|
{ hidden
|
|
|
|
: <Icon type='eye' onClick={hide} />}
|
|
|
|
? <Icon type='eye-invisible' onClick={show} />
|
|
|
|
|
|
|
|
: <Icon type='eye' onClick={hide} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ keyframe
|
|
|
|
<Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`}>
|
|
|
|
? <Icon type='star' theme='filled' onClick={unsetKeyframe} />
|
|
|
|
{ keyframe
|
|
|
|
: <Icon type='star' onClick={setKeyframe} />}
|
|
|
|
? <Icon type='star' theme='filled' onClick={unsetKeyframe} />
|
|
|
|
|
|
|
|
: <Icon type='star' onClick={setKeyframe} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
shapeType !== ShapeType.POINTS && (
|
|
|
|
shapeType !== ShapeType.POINTS && (
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ pinned
|
|
|
|
<Tooltip title='Switch pinned property'>
|
|
|
|
? <Icon type='pushpin' theme='filled' onClick={unpin} />
|
|
|
|
{ pinned
|
|
|
|
: <Icon type='pushpin' onClick={pin} />}
|
|
|
|
? <Icon type='pushpin' theme='filled' onClick={unpin} />
|
|
|
|
|
|
|
|
: <Icon type='pushpin' onClick={pin} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -310,9 +386,11 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
|
|
|
|
<Col span={20} style={{ textAlign: 'center' }}>
|
|
|
|
<Col span={20} style={{ textAlign: 'center' }}>
|
|
|
|
<Row type='flex' justify='space-around'>
|
|
|
|
<Row type='flex' justify='space-around'>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ locked
|
|
|
|
<Tooltip title={`Switch lock property ${switchLockShortcut}`}>
|
|
|
|
? <Icon type='lock' onClick={unlock} />
|
|
|
|
{ locked
|
|
|
|
: <Icon type='unlock' onClick={lock} />}
|
|
|
|
? <Icon type='lock' onClick={unlock} />
|
|
|
|
|
|
|
|
: <Icon type='unlock' onClick={lock} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Row>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
@ -325,26 +403,34 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
|
|
|
|
<Col span={20} style={{ textAlign: 'center' }}>
|
|
|
|
<Col span={20} style={{ textAlign: 'center' }}>
|
|
|
|
<Row type='flex' justify='space-around'>
|
|
|
|
<Row type='flex' justify='space-around'>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ locked
|
|
|
|
<Tooltip title={`Switch lock property ${switchLockShortcut}`}>
|
|
|
|
? <Icon type='lock' onClick={unlock} />
|
|
|
|
{ locked
|
|
|
|
: <Icon type='unlock' onClick={lock} />}
|
|
|
|
? <Icon type='lock' onClick={unlock} />
|
|
|
|
|
|
|
|
: <Icon type='unlock' onClick={lock} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ occluded
|
|
|
|
<Tooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
|
|
|
|
? <Icon type='team' onClick={unsetOccluded} />
|
|
|
|
{ occluded
|
|
|
|
: <Icon type='user' onClick={setOccluded} />}
|
|
|
|
? <Icon type='team' onClick={unsetOccluded} />
|
|
|
|
|
|
|
|
: <Icon type='user' onClick={setOccluded} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ hidden
|
|
|
|
<Tooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
|
|
|
|
? <Icon type='eye-invisible' onClick={show} />
|
|
|
|
{ hidden
|
|
|
|
: <Icon type='eye' onClick={hide} />}
|
|
|
|
? <Icon type='eye-invisible' onClick={show} />
|
|
|
|
|
|
|
|
: <Icon type='eye' onClick={hide} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
shapeType !== ShapeType.POINTS && (
|
|
|
|
shapeType !== ShapeType.POINTS && (
|
|
|
|
<Col>
|
|
|
|
<Col>
|
|
|
|
{ pinned
|
|
|
|
<Tooltip title='Switch pinned property'>
|
|
|
|
? <Icon type='pushpin' theme='filled' onClick={unpin} />
|
|
|
|
{ pinned
|
|
|
|
: <Icon type='pushpin' onClick={pin} />}
|
|
|
|
? <Icon type='pushpin' theme='filled' onClick={unpin} />
|
|
|
|
|
|
|
|
: <Icon type='pushpin' onClick={pin} />}
|
|
|
|
|
|
|
|
</Tooltip>
|
|
|
|
</Col>
|
|
|
|
</Col>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@ -587,6 +673,7 @@ function ItemAttributesComponent(props: ItemAttributesComponentProps): JSX.Eleme
|
|
|
|
const ItemAttributes = React.memo(ItemAttributesComponent, attrAreTheSame);
|
|
|
|
const ItemAttributes = React.memo(ItemAttributesComponent, attrAreTheSame);
|
|
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
interface Props {
|
|
|
|
|
|
|
|
normalizedKeyMap: Record<string, string>;
|
|
|
|
activated: boolean;
|
|
|
|
activated: boolean;
|
|
|
|
objectType: ObjectType;
|
|
|
|
objectType: ObjectType;
|
|
|
|
shapeType: ShapeType;
|
|
|
|
shapeType: ShapeType;
|
|
|
|
@ -653,6 +740,7 @@ function objectItemsAreEqual(prevProps: Props, nextProps: Props): boolean {
|
|
|
|
&& nextProps.collapsed === prevProps.collapsed
|
|
|
|
&& nextProps.collapsed === prevProps.collapsed
|
|
|
|
&& nextProps.labels === prevProps.labels
|
|
|
|
&& nextProps.labels === prevProps.labels
|
|
|
|
&& nextProps.attributes === prevProps.attributes
|
|
|
|
&& nextProps.attributes === prevProps.attributes
|
|
|
|
|
|
|
|
&& nextProps.normalizedKeyMap === prevProps.normalizedKeyMap
|
|
|
|
&& nextProps.navigateFirstKeyframe === prevProps.navigateFirstKeyframe
|
|
|
|
&& nextProps.navigateFirstKeyframe === prevProps.navigateFirstKeyframe
|
|
|
|
&& nextProps.navigatePrevKeyframe === prevProps.navigatePrevKeyframe
|
|
|
|
&& nextProps.navigatePrevKeyframe === prevProps.navigatePrevKeyframe
|
|
|
|
&& nextProps.navigateNextKeyframe === prevProps.navigateNextKeyframe
|
|
|
|
&& nextProps.navigateNextKeyframe === prevProps.navigateNextKeyframe
|
|
|
|
@ -681,6 +769,7 @@ function ObjectItemComponent(props: Props): JSX.Element {
|
|
|
|
attributes,
|
|
|
|
attributes,
|
|
|
|
labels,
|
|
|
|
labels,
|
|
|
|
collapsed,
|
|
|
|
collapsed,
|
|
|
|
|
|
|
|
normalizedKeyMap,
|
|
|
|
navigateFirstKeyframe,
|
|
|
|
navigateFirstKeyframe,
|
|
|
|
navigatePrevKeyframe,
|
|
|
|
navigatePrevKeyframe,
|
|
|
|
navigateNextKeyframe,
|
|
|
|
navigateNextKeyframe,
|
|
|
|
@ -748,6 +837,12 @@ function ObjectItemComponent(props: Props): JSX.Element {
|
|
|
|
objectType={objectType}
|
|
|
|
objectType={objectType}
|
|
|
|
type={type}
|
|
|
|
type={type}
|
|
|
|
locked={locked}
|
|
|
|
locked={locked}
|
|
|
|
|
|
|
|
copyShortcut={normalizedKeyMap.COPY_SHAPE}
|
|
|
|
|
|
|
|
pasteShortcut={normalizedKeyMap.PASTE_SHAPE}
|
|
|
|
|
|
|
|
propagateShortcut={normalizedKeyMap.PROPAGATE_OBJECT}
|
|
|
|
|
|
|
|
toBackgroundShortcut={normalizedKeyMap.TO_BACKGROUND}
|
|
|
|
|
|
|
|
toForegroundShortcut={normalizedKeyMap.TO_FOREGROUND}
|
|
|
|
|
|
|
|
removeShortcut={normalizedKeyMap.DELETE_OBJECT}
|
|
|
|
changeLabel={changeLabel}
|
|
|
|
changeLabel={changeLabel}
|
|
|
|
copy={copy}
|
|
|
|
copy={copy}
|
|
|
|
remove={remove}
|
|
|
|
remove={remove}
|
|
|
|
@ -765,6 +860,13 @@ function ObjectItemComponent(props: Props): JSX.Element {
|
|
|
|
pinned={pinned}
|
|
|
|
pinned={pinned}
|
|
|
|
hidden={hidden}
|
|
|
|
hidden={hidden}
|
|
|
|
keyframe={keyframe}
|
|
|
|
keyframe={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}
|
|
|
|
navigateFirstKeyframe={navigateFirstKeyframe}
|
|
|
|
navigateFirstKeyframe={navigateFirstKeyframe}
|
|
|
|
navigatePrevKeyframe={navigatePrevKeyframe}
|
|
|
|
navigatePrevKeyframe={navigatePrevKeyframe}
|
|
|
|
navigateNextKeyframe={navigateNextKeyframe}
|
|
|
|
navigateNextKeyframe={navigateNextKeyframe}
|
|
|
|
|
Dmitry Kalinin
6 years ago
committed by
GitHub