Fix opacity reset (cvat-ai#7186)

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>)

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,
  };

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