Save drawn shape on submit in single shape mode

cvat-ui/src/components/annotation-page/single-shape-workspace/single-shape-sidebar/single-shape-sidebar.tsx

@@ -37,6 +37,7 @@ import GlobalHotKeys from 'utils/mousetrap-react';
 import { ShortcutScope } from 'utils/enums';
 import { registerComponentShortcuts } from 'actions/shortcuts-actions';
 import { subKeyMap } from 'utils/component-subkeymap';
+import { finishDraw, finishDrawAvailable } from 'utils/drawing';
 
 enum ReducerActionType {
     SWITCH_AUTO_NEXT_FRAME = 'SWITCH_AUTO_NEXT_FRAME',
@@ -295,6 +296,12 @@ function SingleShapeSidebar(): JSX.Element {
         if (typeof state.nextFrame === 'number') {
             appDispatch(changeFrameAsync(state.nextFrame));
         } else if ((forceSave || state.saveOnFinish) && !savingRef.current) {
+            const finishDrawing = finishDrawAvailable(activeControl);
+            if (finishDrawing) {
+                const canvas = store.getState().annotation.canvas.instance as Canvas;
+                finishDraw(canvas, activeControl);
+            }
+
             savingRef.current = true;
 
             appDispatch(finishCurrentJobAsync()).then(() => {

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

@@ -18,6 +18,7 @@ import CVATTooltip from 'components/common/cvat-tooltip';
 import { ShortcutScope } from 'utils/enums';
 import { subKeyMap } from 'utils/component-subkeymap';
 import GlobalHotKeys, { KeyMap } from 'utils/mousetrap-react';
+import { finishDrawAvailable } from 'utils/drawing';
 import SaveAnnotationsButton from './save-annotations-button';
 
 interface Props {
@@ -78,13 +79,7 @@ function LeftGroup(props: Props): JSX.Element {
         onSwitchToolsBlockerState,
     } = props;
 
-    const includesDoneButton = [
-        ActiveControl.DRAW_POLYGON,
-        ActiveControl.DRAW_POLYLINE,
-        ActiveControl.DRAW_POINTS,
-        ActiveControl.AI_TOOLS,
-        ActiveControl.OPENCV_TOOLS,
-    ].includes(activeControl);
+    const includesDoneButton = finishDrawAvailable(activeControl);
 
     const includesToolsBlockerButton =
         [ActiveControl.OPENCV_TOOLS, ActiveControl.AI_TOOLS].includes(activeControl) && toolsBlockerState.buttonVisible;

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

@@ -41,6 +41,7 @@ import isAbleToChangeFrame from 'utils/is-able-to-change-frame';
 import { KeyMap } from 'utils/mousetrap-react';
 import { switchToolsBlockerState } from 'actions/settings-actions';
 import { writeLatestFrame } from 'utils/remember-latest-frame';
+import { finishDraw } from 'utils/drawing';
 
 interface StateToProps {
     jobInstance: Job;
@@ -546,15 +547,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
 
     private onFinishDraw = (): void => {
         const { activeControl, canvasInstance } = this.props;
-        if (
-            [ActiveControl.AI_TOOLS, ActiveControl.OPENCV_TOOLS].includes(activeControl) &&
-            canvasInstance instanceof Canvas
-        ) {
-            canvasInstance.interact({ enabled: false });
-            return;
-        }
-
-        canvasInstance.draw({ enabled: false });
+        finishDraw(canvasInstance, activeControl);
     };
 
     private onSwitchToolsBlockerState = (): void => {

cvat-ui/src/utils/drawing.ts

@@ -0,0 +1,29 @@
+// Copyright (C) 2024 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import { Canvas } from 'cvat-canvas-wrapper';
+import { Canvas3d } from 'cvat-canvas3d-wrapper';
+import { ActiveControl } from 'reducers';
+
+export function finishDrawAvailable(activeControl: ActiveControl): boolean {
+    return [
+        ActiveControl.DRAW_POLYGON,
+        ActiveControl.DRAW_POLYLINE,
+        ActiveControl.DRAW_POINTS,
+        ActiveControl.AI_TOOLS,
+        ActiveControl.OPENCV_TOOLS,
+    ].includes(activeControl);
+}
+
+export function finishDraw(canvas: Canvas | Canvas3d, activeControl: ActiveControl): void {
+    if (
+        [ActiveControl.AI_TOOLS, ActiveControl.OPENCV_TOOLS].includes(activeControl) &&
+        canvas instanceof Canvas
+    ) {
+        canvas.interact({ enabled: false });
+        return;
+    }
+
+    canvas.draw({ enabled: false });
+}