From 66b3056e3f36d6df11b8c9184bc0c0a2090bfb6a Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Fri, 24 Nov 2023 20:15:20 +0300 Subject: [PATCH 1/7] fixed reset on `change:frame` --- cvat-ui/src/reducers/settings-reducer.ts | 37 ++++++++++-------------- cvat-ui/src/utils/opacity-checker.ts | 26 +++++++++++++++++ 2 files changed, 42 insertions(+), 21 deletions(-) create mode 100644 cvat-ui/src/utils/opacity-checker.ts diff --git a/cvat-ui/src/reducers/settings-reducer.ts b/cvat-ui/src/reducers/settings-reducer.ts index 48a08dafe02d..bef54308535d 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/opacity-checker'; const defaultState: SettingsState = { shapes: { @@ -442,18 +442,17 @@ export default (state = defaultState, action: AnyAction): SettingsState => { 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, - }, - }; - } + const { states } = action.payload; + const { shapes } = state; + const [clampedOpacity, clampedSelectedOpacity] = clampOpacity(states, shapes); + return { + ...state, + shapes: { + ...state.shapes, + opacity: clampedOpacity, + selectedOpacity: clampedSelectedOpacity, + }, + }; } return state; @@ -461,17 +460,13 @@ export default (state = defaultState, action: AnyAction): SettingsState => { 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 +475,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/opacity-checker.ts b/cvat-ui/src/utils/opacity-checker.ts new file mode 100644 index 000000000000..0a5fac4cbe18 --- /dev/null +++ b/cvat-ui/src/utils/opacity-checker.ts @@ -0,0 +1,26 @@ +// 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 DEFAULT_OPACITY = 30; + const DEFAULT_SELECTED_OPACITY = 60; + + const withMasks = states + .some((_state: ObjectState): boolean => _state.shapeType === ShapeType.MASK); + const opacity = withMasks || job?.dimension === DimensionType.DIMENSION_3D ? + Math.max(shapes.opacity, DEFAULT_OPACITY) : shapes.opacity; + const selectedOpacity = withMasks || job?.dimension === DimensionType.DIMENSION_3D ? + Math.max(shapes.selectedOpacity, DEFAULT_SELECTED_OPACITY) : shapes.selectedOpacity; + + return [opacity, selectedOpacity]; +} From f0c329d00b354adbe57d7abd6bb2755afc91a1a0 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Fri, 24 Nov 2023 20:19:44 +0300 Subject: [PATCH 2/7] updated default opacity --- cvat-ui/src/reducers/settings-reducer.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cvat-ui/src/reducers/settings-reducer.ts b/cvat-ui/src/reducers/settings-reducer.ts index bef54308535d..24fc97d99287 100644 --- a/cvat-ui/src/reducers/settings-reducer.ts +++ b/cvat-ui/src/reducers/settings-reducer.ts @@ -17,8 +17,8 @@ import { clampOpacity } from 'utils/opacity-checker'; const defaultState: SettingsState = { shapes: { colorBy: ColorBy.LABEL, - opacity: 3, - selectedOpacity: 30, + opacity: 30, + selectedOpacity: 60, outlined: false, outlineColor: '#000000', showBitmap: false, From 11df4d39d3523510c5c837c65ebe178d78b95183 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Sun, 26 Nov 2023 13:52:01 +0300 Subject: [PATCH 3/7] discard auto-setting in case of change frame --- cvat-ui/src/reducers/settings-reducer.ts | 29 ++++++++++-------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/cvat-ui/src/reducers/settings-reducer.ts b/cvat-ui/src/reducers/settings-reducer.ts index 24fc97d99287..50e5b2cc5386 100644 --- a/cvat-ui/src/reducers/settings-reducer.ts +++ b/cvat-ui/src/reducers/settings-reducer.ts @@ -439,23 +439,18 @@ export default (state = defaultState, action: AnyAction): SettingsState => { }; } case AnnotationActionTypes.UPLOAD_JOB_ANNOTATIONS_SUCCESS: - case AnnotationActionTypes.CREATE_ANNOTATIONS_SUCCESS: - case AnnotationActionTypes.CHANGE_FRAME_SUCCESS: { - { - const { states } = action.payload; - const { shapes } = state; - const [clampedOpacity, clampedSelectedOpacity] = clampOpacity(states, shapes); - return { - ...state, - shapes: { - ...state.shapes, - opacity: clampedOpacity, - selectedOpacity: clampedSelectedOpacity, - }, - }; - } - - return state; + case AnnotationActionTypes.CREATE_ANNOTATIONS_SUCCESS: { + 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: { From d3d4c818d4fadea83709cdbed594e463f62cbdc3 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Mon, 27 Nov 2023 09:04:47 +0300 Subject: [PATCH 4/7] renamed file --- cvat-ui/src/reducers/settings-reducer.ts | 2 +- cvat-ui/src/utils/{opacity-checker.ts => clamp-opacity.ts} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename cvat-ui/src/utils/{opacity-checker.ts => clamp-opacity.ts} (100%) diff --git a/cvat-ui/src/reducers/settings-reducer.ts b/cvat-ui/src/reducers/settings-reducer.ts index 50e5b2cc5386..29d873c33b6b 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 { clampOpacity } from 'utils/opacity-checker'; +import { clampOpacity } from 'utils/clamp-opacity'; const defaultState: SettingsState = { shapes: { diff --git a/cvat-ui/src/utils/opacity-checker.ts b/cvat-ui/src/utils/clamp-opacity.ts similarity index 100% rename from cvat-ui/src/utils/opacity-checker.ts rename to cvat-ui/src/utils/clamp-opacity.ts From c5bbd225ba34c4918b3e57b6afc57ee19d53a7f9 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Mon, 27 Nov 2023 12:38:35 +0300 Subject: [PATCH 5/7] applied comments & added changelog --- changelog.d/20231127_123423_klakhov_fix_opacity_reset.md | 4 ++++ cvat-ui/src/reducers/settings-reducer.ts | 4 ++-- cvat-ui/src/utils/clamp-opacity.ts | 8 ++++---- 3 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 changelog.d/20231127_123423_klakhov_fix_opacity_reset.md 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..097b81272073 --- /dev/null +++ b/changelog.d/20231127_123423_klakhov_fix_opacity_reset.md @@ -0,0 +1,4 @@ +### Fixed + +- Resetting appearance opacity on each `change:frame` + () diff --git a/cvat-ui/src/reducers/settings-reducer.ts b/cvat-ui/src/reducers/settings-reducer.ts index 29d873c33b6b..dbf70f8a4d94 100644 --- a/cvat-ui/src/reducers/settings-reducer.ts +++ b/cvat-ui/src/reducers/settings-reducer.ts @@ -17,8 +17,8 @@ import { clampOpacity } from 'utils/clamp-opacity'; const defaultState: SettingsState = { shapes: { colorBy: ColorBy.LABEL, - opacity: 30, - selectedOpacity: 60, + opacity: 3, + selectedOpacity: 30, outlined: false, outlineColor: '#000000', showBitmap: false, diff --git a/cvat-ui/src/utils/clamp-opacity.ts b/cvat-ui/src/utils/clamp-opacity.ts index 0a5fac4cbe18..53f719b835f2 100644 --- a/cvat-ui/src/utils/clamp-opacity.ts +++ b/cvat-ui/src/utils/clamp-opacity.ts @@ -12,15 +12,15 @@ export function clampOpacity( shapes: SettingsState['shapes'], job?: Job, ): [number, number] { - const DEFAULT_OPACITY = 30; - const DEFAULT_SELECTED_OPACITY = 60; + const ENHANCED_DEFAULT_OPACITY = 30; + const ENHANCED_DEFAULT_SELECTED_OPACITY = 60; const withMasks = states .some((_state: ObjectState): boolean => _state.shapeType === ShapeType.MASK); const opacity = withMasks || job?.dimension === DimensionType.DIMENSION_3D ? - Math.max(shapes.opacity, DEFAULT_OPACITY) : shapes.opacity; + Math.max(shapes.opacity, ENHANCED_DEFAULT_OPACITY) : shapes.opacity; const selectedOpacity = withMasks || job?.dimension === DimensionType.DIMENSION_3D ? - Math.max(shapes.selectedOpacity, DEFAULT_SELECTED_OPACITY) : shapes.selectedOpacity; + Math.max(shapes.selectedOpacity, ENHANCED_DEFAULT_SELECTED_OPACITY) : shapes.selectedOpacity; return [opacity, selectedOpacity]; } From 6358dc6478ef28d869d165ecb3c5a226fc92216a Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Tue, 28 Nov 2023 15:15:56 +0300 Subject: [PATCH 6/7] fixed changelog --- changelog.d/20231127_123423_klakhov_fix_opacity_reset.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/changelog.d/20231127_123423_klakhov_fix_opacity_reset.md b/changelog.d/20231127_123423_klakhov_fix_opacity_reset.md index 097b81272073..e013df1baa5f 100644 --- a/changelog.d/20231127_123423_klakhov_fix_opacity_reset.md +++ b/changelog.d/20231127_123423_klakhov_fix_opacity_reset.md @@ -1,4 +1,4 @@ ### Fixed -- Resetting appearance opacity on each `change:frame` +- Shape settings **opacity** and **selected opacity** reset on each frame change () From bbc09d4936a34caa81da410d70cb79fc2c961e6b Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Tue, 28 Nov 2023 15:40:24 +0300 Subject: [PATCH 7/7] reverted check on change frame --- cvat-ui/src/reducers/settings-reducer.ts | 3 ++- cvat-ui/src/utils/clamp-opacity.ts | 20 +++++++++++++++----- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/cvat-ui/src/reducers/settings-reducer.ts b/cvat-ui/src/reducers/settings-reducer.ts index dbf70f8a4d94..3590084b60c8 100644 --- a/cvat-ui/src/reducers/settings-reducer.ts +++ b/cvat-ui/src/reducers/settings-reducer.ts @@ -439,7 +439,8 @@ export default (state = defaultState, action: AnyAction): SettingsState => { }; } case AnnotationActionTypes.UPLOAD_JOB_ANNOTATIONS_SUCCESS: - case AnnotationActionTypes.CREATE_ANNOTATIONS_SUCCESS: { + case AnnotationActionTypes.CREATE_ANNOTATIONS_SUCCESS: + case AnnotationActionTypes.CHANGE_FRAME_SUCCESS: { const { states } = action.payload; const { shapes } = state; const [clampedOpacity, clampedSelectedOpacity] = clampOpacity(states, shapes); diff --git a/cvat-ui/src/utils/clamp-opacity.ts b/cvat-ui/src/utils/clamp-opacity.ts index 53f719b835f2..f520260324e3 100644 --- a/cvat-ui/src/utils/clamp-opacity.ts +++ b/cvat-ui/src/utils/clamp-opacity.ts @@ -15,12 +15,22 @@ export function clampOpacity( 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); - const opacity = withMasks || job?.dimension === DimensionType.DIMENSION_3D ? - Math.max(shapes.opacity, ENHANCED_DEFAULT_OPACITY) : shapes.opacity; - const selectedOpacity = withMasks || job?.dimension === DimensionType.DIMENSION_3D ? - Math.max(shapes.selectedOpacity, ENHANCED_DEFAULT_SELECTED_OPACITY) : shapes.selectedOpacity; + if (withMasks) { + return [opacity, selectedOpacity]; + } - return [opacity, selectedOpacity]; + return [shapes.opacity, shapes.selectedOpacity]; }