Save drawn shape on submit in single shape mode

changelog.d/20241210_120116_klakhov_improve_single_shape_save.md

@@ -0,0 +1,4 @@
+### Added
+
+- Saving drawn shape on submit in `single shape` mode
+  (<https://github.com/cvat-ai/cvat/pull/8807>)

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.67.0",
+  "version": "1.67.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

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',
@@ -260,7 +261,7 @@ function SingleShapeSidebar(): JSX.Element {
             appDispatch(rememberObject({
                 activeObjectType: ObjectType.SHAPE,
                 activeLabelID: state.label.id,
-                activeShapeType: labelShapeType(state.label),
+                activeShapeType: labelShapeType(state.labelType),
             }));
 
             canvas.draw({
@@ -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(() => {
@@ -310,7 +317,7 @@ function SingleShapeSidebar(): JSX.Element {
                 savingRef.current = false;
             });
         }
-    }, [state.saveOnFinish, state.nextFrame, jobInstance]);
+    }, [state.saveOnFinish, state.nextFrame, jobInstance, activeControl]);
 
     useEffect(() => {
         const defaultLabelInstance = defaultLabel ? state.labels

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/reducers/annotation-reducer.ts

@@ -31,13 +31,18 @@ function updateActivatedStateID(newStates: any[], prevActivatedStateID: number |
         null;
 }
 
-export function labelShapeType(label?: Label): ShapeType | null {
-    if (label && Object.values(ShapeType).includes(label.type as any)) {
-        return label.type as unknown as ShapeType;
-    }
-    if (label?.type === LabelType.TAG) {
-        return null;
+export function labelShapeType(labelData?: Label | Partial<LabelType>): ShapeType | null {
+    const labelType = labelData instanceof Label ? labelData.type : labelData;
+    if (labelType) {
+        if (Object.values(ShapeType).includes(labelType as any)) {
+            return labelType as unknown as ShapeType;
+        }
+
+        if (labelType === LabelType.TAG) {
+            return null;
+        }
     }
+
     return ShapeType.RECTANGLE;
 }
 

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 });
+}