From b3974ae23a354004f62ff67b961e039e15baea79 Mon Sep 17 00:00:00 2001
From: Kirill Lakhov <kirill.9992@gmail.com>
Date: Wed, 29 Nov 2023 12:11:15 +0300
Subject: [PATCH] Fix opacity reset (#7186)

---
 ...231127_123423_klakhov_fix_opacity_reset.md |  4 ++
 cvat-ui/src/reducers/settings-reducer.ts      | 41 ++++++++-----------
 cvat-ui/src/utils/clamp-opacity.ts            | 36 ++++++++++++++++
 3 files changed, 56 insertions(+), 25 deletions(-)
 create mode 100644 changelog.d/20231127_123423_klakhov_fix_opacity_reset.md
 create mode 100644 cvat-ui/src/utils/clamp-opacity.ts

diff --git a/changelog.d/20231127_123423_klakhov_fix_opacity_reset.md b/changelog.d/20231127_123423_klakhov_fix_opacity_reset.md
new file mode 100644
index 000000000000..e013df1baa5f
--- /dev/null
+++ b/changelog.d/20231127_123423_klakhov_fix_opacity_reset.md
@@ -0,0 +1,4 @@
+### Fixed
+
+- Shape settings **opacity** and **selected opacity** reset on each frame change
+  (<https://github.com/opencv/cvat/pull/7186>)
diff --git a/cvat-ui/src/reducers/settings-reducer.ts b/cvat-ui/src/reducers/settings-reducer.ts
index 48a08dafe02d..3590084b60c8 100644
--- a/cvat-ui/src/reducers/settings-reducer.ts
+++ b/cvat-ui/src/reducers/settings-reducer.ts
@@ -12,7 +12,7 @@ import { AnnotationActionTypes } from 'actions/annotation-actions';
 import {
     SettingsState, GridColor, FrameSpeed, ColorBy,
 } from 'reducers';
-import { ObjectState, ShapeType, DimensionType } from 'cvat-core-wrapper';
+import { clampOpacity } from 'utils/clamp-opacity';
 
 const defaultState: SettingsState = {
     shapes: {
@@ -441,37 +441,28 @@ export default (state = defaultState, action: AnyAction): SettingsState => {
         case AnnotationActionTypes.UPLOAD_JOB_ANNOTATIONS_SUCCESS:
         case AnnotationActionTypes.CREATE_ANNOTATIONS_SUCCESS:
         case AnnotationActionTypes.CHANGE_FRAME_SUCCESS: {
-            {
-                const MIN_OPACITY = 30;
-                const { shapes: { opacity } } = state;
-                if (opacity < MIN_OPACITY) {
-                    return {
-                        ...state,
-                        shapes: {
-                            ...state.shapes,
-                            opacity: MIN_OPACITY,
-                            selectedOpacity: MIN_OPACITY * 2,
-                        },
-                    };
-                }
-            }
-
-            return state;
+            const { states } = action.payload;
+            const { shapes } = state;
+            const [clampedOpacity, clampedSelectedOpacity] = clampOpacity(states, shapes);
+            return {
+                ...state,
+                shapes: {
+                    ...state.shapes,
+                    opacity: clampedOpacity,
+                    selectedOpacity: clampedSelectedOpacity,
+                },
+            };
         }
         case BoundariesActionTypes.RESET_AFTER_ERROR:
         case AnnotationActionTypes.GET_JOB_SUCCESS: {
             const { job, states } = action.payload;
+            const { shapes } = state;
             const filters = [...state.imageFilters];
             filters.forEach((imageFilter) => {
                 imageFilter.modifier.currentProcessedImage = null;
             });
 
-            const withMasks = states
-                .some((_state: ObjectState): boolean => _state.shapeType === ShapeType.MASK);
-            const opacity = withMasks || job.dimension === DimensionType.DIMENSION_3D ?
-                Math.max(state.shapes.opacity, 30) : state.shapes.opacity;
-            const selectedOpacity = withMasks || job.dimension === DimensionType.DIMENSION_3D ?
-                Math.max(state.shapes.selectedOpacity, 60) : state.shapes.selectedOpacity;
+            const [clampedOpacity, clampedSelectedOpacity] = clampOpacity(states, shapes, job);
 
             return {
                 ...state,
@@ -480,8 +471,8 @@ export default (state = defaultState, action: AnyAction): SettingsState => {
                 },
                 shapes: {
                     ...defaultState.shapes,
-                    opacity,
-                    selectedOpacity,
+                    opacity: clampedOpacity,
+                    selectedOpacity: clampedSelectedOpacity,
                 },
                 imageFilters: filters,
             };
diff --git a/cvat-ui/src/utils/clamp-opacity.ts b/cvat-ui/src/utils/clamp-opacity.ts
new file mode 100644
index 000000000000..f520260324e3
--- /dev/null
+++ b/cvat-ui/src/utils/clamp-opacity.ts
@@ -0,0 +1,36 @@
+// Copyright (C) 2023 CVAT.ai Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import { Job } from 'cvat-core-wrapper';
+import { ShapeType, DimensionType } from 'cvat-core/src/enums';
+import ObjectState from 'cvat-core/src/object-state';
+import { SettingsState } from 'reducers';
+
+export function clampOpacity(
+    states: ObjectState[],
+    shapes: SettingsState['shapes'],
+    job?: Job,
+): [number, number] {
+    const ENHANCED_DEFAULT_OPACITY = 30;
+    const ENHANCED_DEFAULT_SELECTED_OPACITY = 60;
+
+    if (shapes.opacity >= ENHANCED_DEFAULT_OPACITY && shapes.selectedOpacity >= ENHANCED_DEFAULT_SELECTED_OPACITY) {
+        return [shapes.opacity, shapes.selectedOpacity];
+    }
+
+    const opacity = Math.max(shapes.opacity, ENHANCED_DEFAULT_OPACITY);
+    const selectedOpacity = Math.max(shapes.selectedOpacity, ENHANCED_DEFAULT_SELECTED_OPACITY);
+
+    if (job?.dimension === DimensionType.DIMENSION_3D) {
+        return [opacity, selectedOpacity];
+    }
+
+    const withMasks = states
+        .some((_state: ObjectState): boolean => _state.shapeType === ShapeType.MASK);
+    if (withMasks) {
+        return [opacity, selectedOpacity];
+    }
+
+    return [shapes.opacity, shapes.selectedOpacity];
+}