From dd4a0884da15d0d6b5760fba97fccdc0f539c198 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Wed, 1 Apr 2020 00:26:36 +0300 Subject: [PATCH] Special behaviour for the attribute value __undefined__ --- cvat-canvas/src/typescript/canvasView.ts | 4 +++- cvat-canvas/src/typescript/consts.ts | 2 ++ .../attribute-editor.tsx | 16 ++++++++++++---- .../attribute-annotation-workspace/styles.scss | 2 -- .../objects-side-bar/object-item.tsx | 12 ++++++++---- cvat-ui/src/consts.ts | 9 +++++++++ cvat-ui/src/utils/enviroment.ts | 2 +- 7 files changed, 35 insertions(+), 12 deletions(-) create mode 100644 cvat-ui/src/consts.ts diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts index 5d614948..75963144 100644 --- a/cvat-canvas/src/typescript/canvasView.ts +++ b/cvat-canvas/src/typescript/canvasView.ts @@ -1356,7 +1356,9 @@ export class CanvasViewImpl implements CanvasView, Listener { return this.adoptedText.text((block): void => { block.tspan(`${label.name} ${clientID}`).style('text-transform', 'uppercase'); for (const attrID of Object.keys(attributes)) { - block.tspan(`${attrNames[attrID]}: ${attributes[attrID]}`).attr({ + const value = attributes[attrID] === consts.UNDEFINED_ATTRIBUTE_VALUE + ? '' : attributes[attrID]; + block.tspan(`${attrNames[attrID]}: ${value}`).attr({ attrID, dy: '1em', x: 0, diff --git a/cvat-canvas/src/typescript/consts.ts b/cvat-canvas/src/typescript/consts.ts index 1c36351d..23a36f11 100644 --- a/cvat-canvas/src/typescript/consts.ts +++ b/cvat-canvas/src/typescript/consts.ts @@ -10,6 +10,7 @@ const AREA_THRESHOLD = 9; const SIZE_THRESHOLD = 3; const POINTS_STROKE_WIDTH = 1.5; const POINTS_SELECTED_STROKE_WIDTH = 4; +const UNDEFINED_ATTRIBUTE_VALUE = '__undefined__'; export default { BASE_STROKE_WIDTH, @@ -20,4 +21,5 @@ export default { SIZE_THRESHOLD, POINTS_STROKE_WIDTH, POINTS_SELECTED_STROKE_WIDTH, + UNDEFINED_ATTRIBUTE_VALUE, }; diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx index de8a6222..50cec85a 100644 --- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx +++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx @@ -10,6 +10,8 @@ import Select, { SelectValue } from 'antd/lib/select'; import Radio, { RadioChangeEvent } from 'antd/lib/radio'; import Input from 'antd/lib/input'; +import consts from 'consts'; + interface InputElementParameters { attrID: number; inputType: string; @@ -53,7 +55,9 @@ function renderInputElement(parameters: InputElementParameters): JSX.Element { )} > {values.map((value: string): JSX.Element => ( - {value} + + {value === consts.UNDEFINED_ATTRIBUTE_VALUE ? '\u00a0' : value} + ))} @@ -71,7 +75,9 @@ function renderInputElement(parameters: InputElementParameters): JSX.Element { )} > {values.map((value: string): JSX.Element => ( - {value} + + {value === consts.UNDEFINED_ATTRIBUTE_VALUE ? '\u00a0' : value} + ))} @@ -193,7 +199,9 @@ function renderList(parameters: ListParameters): JSX.Element | null { [key: string]: (keyEvent?: KeyboardEvent) => void; } = {}; - values.slice(0, 10).forEach((value: string, index: number): void => { + const filteredValues = values + .filter((value: string): boolean => value !== consts.UNDEFINED_ATTRIBUTE_VALUE); + filteredValues.slice(0, 10).forEach((value: string, index: number): void => { const key = `SET_${index}_VALUE`; keyMap[key] = { name: `Set value "${value}"`, @@ -214,7 +222,7 @@ function renderList(parameters: ListParameters): JSX.Element | null { return (
- {values.map((value: string, index: number): JSX.Element => ( + {filteredValues.map((value: string, index: number): JSX.Element => (
{`${index}:`} {` ${value}`} diff --git a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss index 1f8de841..231cc13b 100644 --- a/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss +++ b/cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss @@ -48,9 +48,7 @@ margin: 10px 0px 10px 10px; } - .attribute-annotation-sidebar-attr-elem-wrapper { - display: inline-block; width: 60%; } diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx index fcf0fe38..efd81d67 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx @@ -20,7 +20,7 @@ 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 consts from 'consts'; import { ObjectOutsideIcon, FirstIcon, @@ -30,10 +30,10 @@ import { BackgroundIcon, ForegroundIcon, } from 'icons'; - import { ObjectType, ShapeType } from 'reducers/interfaces'; import { clamp } from 'utils/math'; + function ItemMenu( serverID: number | undefined, locked: boolean, @@ -508,7 +508,9 @@ function ItemAttributeComponent(props: ItemAttributeComponentProps): JSX.Element }} > { attrValues.map((value: string): JSX.Element => ( - {value} + + {value === consts.UNDEFINED_ATTRIBUTE_VALUE ? '\u00a0' : value} + )) } @@ -534,7 +536,9 @@ function ItemAttributeComponent(props: ItemAttributeComponentProps): JSX.Element className='cvat-object-item-select-attribute' > { attrValues.map((value: string): JSX.Element => ( - {value} + + {value === consts.UNDEFINED_ATTRIBUTE_VALUE ? '\u00a0' : value} + )) } diff --git a/cvat-ui/src/consts.ts b/cvat-ui/src/consts.ts new file mode 100644 index 00000000..666dc98d --- /dev/null +++ b/cvat-ui/src/consts.ts @@ -0,0 +1,9 @@ +// Copyright (C) 2019-2020 Intel Corporation +// +// SPDX-License-Identifier: MIT + +const UNDEFINED_ATTRIBUTE_VALUE = '__undefined__'; + +export default { + UNDEFINED_ATTRIBUTE_VALUE, +}; diff --git a/cvat-ui/src/utils/enviroment.ts b/cvat-ui/src/utils/enviroment.ts index e1f01755..137e9dd1 100644 --- a/cvat-ui/src/utils/enviroment.ts +++ b/cvat-ui/src/utils/enviroment.ts @@ -2,6 +2,6 @@ // // SPDX-License-Identifier: MIT -export default function isDev() { +export default function isDev(): boolean { return process.env.NODE_ENV === 'development'; }