Keyboard shortcut to delete frame (fixes #5369) (#5370)

This fixes #5369 by adding keyboard shortcut [x] that delete a frame
without prompt.

Co-authored-by: Scotty Kwok <scottykwok@sebit.word>
Co-authored-by: Boris Sekachev <sekachev.bs@gmail.com>

CHANGELOG.md

@@ -21,6 +21,7 @@ from online detectors & interactors) (<https://github.com/opencv/cvat/pull/4543>
 - Authentication with social accounts google & github (<https://github.com/opencv/cvat/pull/5147>, <https://github.com/opencv/cvat/pull/5181>, <https://github.com/opencv/cvat/pull/5295>)
 - REST API tests to export job datasets & annotations and validate their structure  (<https://github.com/opencv/cvat/pull/5160>)
 - Propagation backward on UI (<https://github.com/opencv/cvat/pull/5355>)
+- Keyboard shortcut to delete a frame (Alt + Del) (<https://github.com/opencv/cvat/pull/5369>)
 - A PyTorch dataset adapter layer in the SDK
   (<https://github.com/opencv/cvat/pull/5417>)
 - A way to debug the server deployed with Docker (<https://github.com/opencv/cvat/issues/5327>)

cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx

@@ -23,6 +23,7 @@ interface Props {
     frameNumber: number;
     frameFilename: string;
     frameDeleted: boolean;
+    deleteFrameShortcut: string;
     focusFrameInputShortcut: string;
     inputFrameRef: React.RefObject<Input>;
     onSliderChange(value: number): void;
@@ -41,6 +42,7 @@ function PlayerNavigation(props: Props): JSX.Element {
         frameNumber,
         frameFilename,
         frameDeleted,
+        deleteFrameShortcut,
         focusFrameInputShortcut,
         inputFrameRef,
         onSliderChange,
@@ -104,7 +106,7 @@ function PlayerNavigation(props: Props): JSX.Element {
                             <LinkOutlined className='cvat-player-frame-url-icon' onClick={onURLIconClick} />
                         </CVATTooltip>
                         { (!frameDeleted) ? (
-                            <CVATTooltip title='Delete the frame'>
+                            <CVATTooltip title={`Delete the frame ${deleteFrameShortcut}`}>
                                 <DeleteOutlined className='cvat-player-delete-frame' onClick={showDeleteFrameDialog} />
                             </CVATTooltip>
                         ) : (

cvat-ui/src/components/annotation-page/top-bar/top-bar.tsx

@@ -33,6 +33,7 @@ interface Props {
     drawShortcut: string;
     switchToolsBlockerShortcut: string;
     playPauseShortcut: string;
+    deleteFrameShortcut: string;
     nextFrameShortcut: string;
     previousFrameShortcut: string;
     forwardShortcut: string;
@@ -91,6 +92,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
         drawShortcut,
         switchToolsBlockerShortcut,
         playPauseShortcut,
+        deleteFrameShortcut,
         nextFrameShortcut,
         previousFrameShortcut,
         forwardShortcut,
@@ -154,6 +156,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
                     <PlayerButtons
                         playing={playing}
                         playPauseShortcut={playPauseShortcut}
+                        deleteFrameShortcut={deleteFrameShortcut}
                         nextFrameShortcut={nextFrameShortcut}
                         previousFrameShortcut={previousFrameShortcut}
                         forwardShortcut={forwardShortcut}
@@ -177,6 +180,7 @@ export default function AnnotationTopBarComponent(props: Props): JSX.Element {
                         frameNumber={frameNumber}
                         frameFilename={frameFilename}
                         frameDeleted={frameDeleted}
+                        deleteFrameShortcut={deleteFrameShortcut}
                         focusFrameInputShortcut={focusFrameInputShortcut}
                         inputFrameRef={inputFrameRef}
                         onSliderChange={onSliderChange}

cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx

@@ -639,6 +639,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
             SAVE_JOB: keyMap.SAVE_JOB,
             UNDO: keyMap.UNDO,
             REDO: keyMap.REDO,
+            DELETE_FRAME: keyMap.DELETE_FRAME,
             NEXT_FRAME: keyMap.NEXT_FRAME,
             PREV_FRAME: keyMap.PREV_FRAME,
             FORWARD_FRAME: keyMap.FORWARD_FRAME,
@@ -668,6 +669,12 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
                     this.onSaveAnnotation();
                 }
             },
+            DELETE_FRAME: (event: KeyboardEvent | undefined) => {
+                preventDefault(event);
+                if (canvasIsReady) {
+                    this.onDeleteFrame();
+                }
+            },
             NEXT_FRAME: (event: KeyboardEvent | undefined) => {
                 preventDefault(event);
                 if (canvasIsReady) {
@@ -760,6 +767,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
                     // this shortcut is handled in interactionHandler.ts separatelly
                     switchToolsBlockerShortcut={normalizedKeyMap.SWITCH_TOOLS_BLOCKER_STATE}
                     playPauseShortcut={normalizedKeyMap.PLAY_PAUSE}
+                    deleteFrameShortcut={normalizedKeyMap.DELETE_FRAME}
                     nextFrameShortcut={normalizedKeyMap.NEXT_FRAME}
                     previousFrameShortcut={normalizedKeyMap.PREV_FRAME}
                     forwardShortcut={normalizedKeyMap.FORWARD_FRAME}

cvat-ui/src/reducers/shortcuts-reducer.ts

@@ -258,6 +258,13 @@ const defaultKeyMap = ({
         action: 'keydown',
         applicable: [DimensionType.DIM_2D, DimensionType.DIM_3D],
     },
+    DELETE_FRAME: {
+        name: 'Delete frame',
+        description: 'Delete frame',
+        sequences: ['alt+del'],
+        action: 'keydown',
+        applicable: [DimensionType.DIM_2D, DimensionType.DIM_3D],
+    },
     NEXT_FRAME: {
         name: 'Next frame',
         description: 'Go to the next frame',