From dfcc69c4efef112a62ea0d5bbd89362e7fc8529e Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Fri, 21 Oct 2022 12:01:15 +0300 Subject: [PATCH] Minor improvements of z order feature (#5145) * Do not switch z layer when changing objects * Added z order sorting * Added z indication * Updated version & changelog --- CHANGELOG.md | 3 ++ cvat-ui/package.json | 2 +- .../objects-side-bar/objects-list.tsx | 39 +++++++++++++++---- .../states-ordering-selector.tsx | 4 ++ .../objects-side-bar/styles.scss | 5 +++ .../objects-side-bar/objects-list.tsx | 5 ++- cvat-ui/src/reducers/annotation-reducer.ts | 9 +++-- cvat-ui/src/reducers/index.ts | 1 + 8 files changed, 54 insertions(+), 14 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 325a416d..1007c599 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - REST API tests with skeletons () - Host schema auto-detection in SDK () - Server compatibility checks in SDK () +- Objects sorting option in the sidebar, by z order. Additional visualization when the sorting is applied +() - Added YOLOv5 serverless function NVIDIA GPU support () ### Changed @@ -54,6 +56,7 @@ non-ascii paths while adding files from "Connected file share" (issue #4428) () - Skeleton points exported out of order in the COCO Keypoints format () +- Changing an object causes current z layer to be set to the maximum () ### Security - TDB diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 2d8bea45..42d9fd44 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.42.4", + "version": "1.42.5", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx index 244e7e4d..2b27a07c 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx @@ -1,11 +1,15 @@ // Copyright (C) 2020-2022 Intel Corporation +// Copyright (C) 2022 CVAT.ai Corporation // // SPDX-License-Identifier: MIT import React from 'react'; +import Text from 'antd/lib/typography/Text'; + import { StatesOrdering } from 'reducers'; import ObjectItemContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-item'; +import { ObjectState } from 'cvat-core-wrapper'; import ObjectListHeader from './objects-list-header'; interface Props { @@ -47,6 +51,7 @@ function ObjectListComponent(props: Props): JSX.Element { showAllStates, } = props; + let latestZOrder: number | null = null; return ( <>
{sortedStatesID.map( - (id: number): JSX.Element => ( - - ), + (id: number): JSX.Element => { + const object = objectStates.find((state: ObjectState) => state.clientID === id); + const zOrder = object?.zOrder || latestZOrder; + + const renderZLayer = latestZOrder !== zOrder && statesOrdering === StatesOrdering.Z_ORDER; + if (renderZLayer) { + latestZOrder = zOrder; + } + + return ( + + {renderZLayer && ( +
+ + {`Layer ${zOrder}`} + +
+ )} + + + ); + }, )}
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector.tsx index 4faed95a..be1219e2 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector.tsx @@ -1,4 +1,5 @@ // Copyright (C) 2020-2022 Intel Corporation +// Copyright (C) 2022 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -35,6 +36,9 @@ function StatesOrderingSelectorComponent(props: StatesOrderingSelectorComponentP {StatesOrdering.UPDATED} + + {StatesOrdering.Z_ORDER} + ); diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss index 189602e6..c1479894 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss @@ -1,4 +1,5 @@ // Copyright (C) 2020-2022 Intel Corporation +// Copyright (C) 2022 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -158,6 +159,10 @@ overflow-y: auto; } +.cvat-objects-sidebar-z-layer-mark { + text-align: center; +} + .cvat-objects-sidebar-state-item.cvat-objects-sidebar-state-active-item { border-top: 2px solid $object-item-border-color; border-right: 2px solid $object-item-border-color; diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx index 47a8dbe1..b2eb399a 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx @@ -1,4 +1,5 @@ // Copyright (C) 2020-2022 Intel Corporation +// Copyright (C) 2022 CVAT.ai Corporation // // SPDX-License-Identifier: MIT @@ -152,8 +153,10 @@ function sortAndMap(objectStates: ObjectState[], ordering: StatesOrdering): numb sorted = [...objectStates].sort((a: any, b: any): number => a.clientID - b.clientID); } else if (ordering === StatesOrdering.ID_DESCENT) { sorted = [...objectStates].sort((a: any, b: any): number => b.clientID - a.clientID); - } else { + } else if (ordering === StatesOrdering.UPDATED) { sorted = [...objectStates].sort((a: any, b: any): number => b.updated - a.updated); + } else { + sorted = [...objectStates].sort((a: any, b: any): number => a.zOrder - b.zOrder); } return sorted.map((state: any) => state.clientID); diff --git a/cvat-ui/src/reducers/annotation-reducer.ts b/cvat-ui/src/reducers/annotation-reducer.ts index ada22763..7147c2b6 100644 --- a/cvat-ui/src/reducers/annotation-reducer.ts +++ b/cvat-ui/src/reducers/annotation-reducer.ts @@ -9,6 +9,7 @@ import { AuthActionTypes } from 'actions/auth-actions'; import { BoundariesActionTypes } from 'actions/boundaries-actions'; import { Canvas, CanvasMode } from 'cvat-canvas-wrapper'; import { Canvas3d } from 'cvat-canvas3d-wrapper'; +import { clamp } from 'utils/math'; import { ActiveControl, @@ -631,7 +632,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { zLayer: { min: minZLayer, max: maxZLayer, - cur: maxZLayer, + cur: clamp(state.annotations.zLayer.cur, minZLayer, maxZLayer), }, states: nextStates, history, @@ -1007,7 +1008,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { zLayer: { min: minZ, max: maxZ, - cur: maxZ, + cur: clamp(state.annotations.zLayer.cur, minZ, maxZ), }, }, }; @@ -1028,7 +1029,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { zLayer: { min: minZ, max: maxZ, - cur: maxZ, + cur: clamp(state.annotations.zLayer.cur, minZ, maxZ), }, }, }; @@ -1066,7 +1067,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => { activatedStateID, zLayer: { ...state.annotations.zLayer, - cur: Math.max(Math.min(cur, max), min), + cur: clamp(cur, min, max), }, }, }; diff --git a/cvat-ui/src/reducers/index.ts b/cvat-ui/src/reducers/index.ts index 5926941d..5a1d12e4 100644 --- a/cvat-ui/src/reducers/index.ts +++ b/cvat-ui/src/reducers/index.ts @@ -590,6 +590,7 @@ export enum StatesOrdering { ID_DESCENT = 'ID - descent', ID_ASCENT = 'ID - ascent', UPDATED = 'Updated time', + Z_ORDER = 'Z Order', } export enum ContextMenuType {