Do not allow to remove latest keyframe from UI (#7844)

cvat-ai · May 6, 2024 · 217bab8 · 217bab8
1 parent d238782
commit 217bab8
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 29 deletions.
diff --git a/changelog.d/20240503_105638_boris_do_not_allow_removing_last_keyframe.md b/changelog.d/20240503_105638_boris_do_not_allow_removing_last_keyframe.md
@@ -0,0 +1,4 @@
+### Changed
+
+- Remove keyframe button is disabled when there is only one keyframe element
+  (<https://github.com/cvat-ai/cvat/pull/7844>)
diff --git a/cvat-ui/package.json b/cvat-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.63.8",
+  "version": "1.63.9",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

diff --git a/...rc/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx b/...rc/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
@@ -1,4 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -26,7 +27,7 @@ import {
 
 interface Props {
     readonly: boolean;
-    parentID: number;
+    parentID: number | null;
     objectType: ObjectType;
     shapeType: ShapeType;
     occluded: boolean;
@@ -227,9 +228,9 @@ function SwitchKeyframe(props: Props): JSX.Element {
     return (
         <CVATTooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`}>
             {keyframe ? (
-                <StarFilled {...classes.keyframe.enabled} onClick={unsetKeyframe} style={keyframeStyle} />
+                <StarFilled style={keyframeStyle} onClick={unsetKeyframe} {...classes.keyframe.enabled} />
             ) : (
-                <StarOutlined {...classes.keyframe.disabled} onClick={setKeyframe} style={keyframeStyle} />
+                <StarOutlined style={keyframeStyle} onClick={setKeyframe} {...classes.keyframe.disabled} />
             )}
         </CVATTooltip>
     );

diff --git a/...-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-buttons.tsx b/...-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-buttons.tsx
@@ -1,10 +1,12 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
 import { connect } from 'react-redux';
 
+import { ObjectState, Job } from 'cvat-core-wrapper';
 import { EventScope } from 'cvat-logger';
 import isAbleToChangeFrame from 'utils/is-able-to-change-frame';
 import { ThunkDispatch } from 'utils/redux';
@@ -21,8 +23,8 @@ interface OwnProps {
 }
 
 interface StateToProps {
-    objectState: any;
-    jobInstance: any;
+    objectState: ObjectState;
+    jobInstance: Job;
     frameNumber: number;
     normalizedKeyMap: Record<string, string>;
     outsideDisabled: boolean;
@@ -60,7 +62,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
         objectState,
         normalizedKeyMap,
         frameNumber,
-        jobInstance,
+        jobInstance: jobInstance as Job,
         outsideDisabled: typeof outsideDisabled === 'undefined' ? false : outsideDisabled,
         hiddenDisabled: typeof hiddenDisabled === 'undefined' ? false : hiddenDisabled,
         keyframeDisabled: typeof keyframeDisabled === 'undefined' ? false : keyframeDisabled,
@@ -81,32 +83,32 @@ function mapDispatchToProps(dispatch: ThunkDispatch): DispatchToProps {
 class ItemButtonsWrapper extends React.PureComponent<StateToProps & DispatchToProps & OwnProps> {
     private navigateFirstKeyframe = (): void => {
         const { objectState, frameNumber } = this.props;
-        const { first } = objectState.keyframes;
-        if (first !== frameNumber) {
+        const { first } = objectState.keyframes as NonNullable<typeof objectState.keyframes>;
+        if (first !== null && first !== frameNumber) {
             this.changeFrame(first);
         }
     };
 
     private navigatePrevKeyframe = (): void => {
         const { objectState, frameNumber } = this.props;
-        const { prev } = objectState.keyframes;
+        const { prev } = objectState.keyframes as NonNullable<typeof objectState.keyframes>;
         if (prev !== null && prev !== frameNumber) {
             this.changeFrame(prev);
         }
     };
 
     private navigateNextKeyframe = (): void => {
         const { objectState, frameNumber } = this.props;
-        const { next } = objectState.keyframes;
+        const { next } = objectState.keyframes as NonNullable<typeof 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) {
+        const { last } = objectState.keyframes as NonNullable<typeof objectState.keyframes>;
+        if (last !== null && last !== frameNumber) {
             this.changeFrame(last);
         }
     };
@@ -237,18 +239,23 @@ class ItemButtonsWrapper extends React.PureComponent<StateToProps & DispatchToPr
             last: null,
         };
 
+        const {
+            parentID, objectType, shapeType,
+            occluded, outside, lock, pinned, hidden, keyframe,
+        } = objectState;
+
         return (
             <ItemButtonsComponent
                 readonly={readonly}
-                parentID={objectState.parentID}
-                objectType={objectState.objectType}
-                shapeType={objectState.shapeType}
-                occluded={objectState.occluded}
-                outside={objectState.outside}
-                locked={objectState.lock}
-                pinned={objectState.pinned}
-                hidden={objectState.hidden}
-                keyframe={objectState.keyframe}
+                parentID={parentID}
+                objectType={objectType}
+                shapeType={shapeType}
+                occluded={occluded}
+                outside={outside}
+                locked={lock}
+                pinned={pinned}
+                hidden={hidden}
+                keyframe={keyframe}
                 switchOccludedShortcut={normalizedKeyMap.SWITCH_OCCLUDED}
                 switchPinnedShortcut={normalizedKeyMap.SWITCH_PINNED}
                 switchOutsideShortcut={normalizedKeyMap.SWITCH_OUTSIDE}
@@ -259,11 +266,11 @@ class ItemButtonsWrapper extends React.PureComponent<StateToProps & DispatchToPr
                 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}
+                keyframeDisabled={keyframeDisabled || (first === last && keyframe)}
+                navigateFirstKeyframe={first === null || first >= frameNumber ? null : this.navigateFirstKeyframe}
+                navigatePrevKeyframe={prev === null || prev === frameNumber ? null : this.navigatePrevKeyframe}
+                navigateNextKeyframe={next === null || next === frameNumber ? null : this.navigateNextKeyframe}
+                navigateLastKeyframe={last === null || last <= frameNumber ? null : this.navigateLastKeyframe}
                 setOccluded={this.setOccluded}
                 unsetOccluded={this.unsetOccluded}
                 setOutside={this.setOutside}

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
@@ -418,8 +418,11 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
                 preventDefault(event);
                 const state = activatedState();
                 if (state && !readonly && state.objectType === ObjectType.TRACK) {
-                    state.keyframe = !state.keyframe;
-                    updateAnnotations([state]);
+                    const { first, last } = state.keyframes as NonNullable<typeof state.keyframes>;
+                    if (first !== last || !state.keyframe) {
+                        state.keyframe = !state.keyframe;
+                        updateAnnotations([state]);
+                    }
                 }
             },
             SWITCH_OUTSIDE: (event: KeyboardEvent | undefined) => {