Receive value for 'Reset zoom' option from settings saved by user

CHANGELOG.md

@@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - An invalid project/org handling in webhooks (<https://github.com/opencv/cvat/pull/5707>)
 - Warning `key` is undefined on project page (<https://github.com/opencv/cvat/pull/5876>)
 - Invalid mask when running automatic annotation on a task (<https://github.com/opencv/cvat/pull/5883>)
+- Option 'Reset zoom' now restored as user specified when reload CVAT (<https://github.com/opencv/cvat/pull/5908>)
 - Cloud storage content listing when the manifest name contains special characters
   (<https://github.com/opencv/cvat/pull/5873>)
 - Width and height in CVAT dataset format mask annotations (<https://github.com/opencv/cvat/pull/5905>)

cvat-canvas3d/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas3d",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas3D library",
   "main": "src/canvas3d.ts",
   "scripts": {

cvat-canvas3d/src/typescript/canvas3d.ts

@@ -14,7 +14,6 @@ import {
     MouseInteraction,
     ShapeProperties,
     GroupData,
-    Configuration,
     SplitData,
     MergeData,
 } from './canvas3dModel';
@@ -108,10 +107,6 @@ class Canvas3dImpl implements Canvas3d {
         this.model.configureShapes(shapeProperties);
     }
 
-    public configure(configuration: Configuration): void {
-        this.model.configure(configuration);
-    }
-
     public activate(clientID: number | null, attributeID: number | null = null): void {
         this.model.activate(typeof clientID === 'number' ? String(clientID) : null, attributeID);
     }

cvat-canvas3d/src/typescript/canvas3dController.ts

@@ -6,14 +6,13 @@
 import { ObjectState } from '.';
 import {
     Canvas3dModel, Mode, DrawData, ActiveElement,
-    GroupData, Configuration, MergeData, SplitData,
+    GroupData, MergeData, SplitData,
 } from './canvas3dModel';
 
 export interface Canvas3dController {
     readonly drawData: DrawData;
     readonly activeElement: ActiveElement;
     readonly groupData: GroupData;
-    readonly configuration: Configuration;
     readonly imageIsDeleted: boolean;
     readonly objects: ObjectState[];
     mode: Mode;
@@ -53,10 +52,6 @@ export class Canvas3dControllerImpl implements Canvas3dController {
         return this.model.groupData;
     }
 
-    public get configuration(): Configuration {
-        return this.model.configuration;
-    }
-
     public get objects(): ObjectState[] {
         return this.model.objects;
     }

cvat-canvas3d/src/typescript/canvas3dModel.ts

@@ -28,10 +28,6 @@ export interface SplitData {
     enabled: boolean;
 }
 
-export interface Configuration {
-    resetZoom?: boolean;
-}
-
 export interface Image {
     renderWidth: number;
     renderHeight: number;
@@ -90,7 +86,6 @@ export enum UpdateReasons {
     MERGE = 'merge',
     SPLIT = 'split',
     FITTED_CANVAS = 'fitted_canvas',
-    CONFIG_UPDATED = 'config_updated',
     SHAPES_CONFIG_UPDATED = 'shapes_config_updated',
 }
 
@@ -119,7 +114,6 @@ export interface Canvas3dDataModel {
     groupData: GroupData;
     mergeData: MergeData;
     splitData: SplitData;
-    configuration: Configuration;
     isFrameUpdating: boolean;
     nextSetupRequest: {
         frameData: any;
@@ -133,7 +127,6 @@ export interface Canvas3dModel {
     readonly imageIsDeleted: boolean;
     readonly groupData: GroupData;
     readonly mergeData: MergeData;
-    readonly configuration: Configuration;
     readonly objects: ObjectState[];
     setup(frameData: any, objectStates: ObjectState[]): void;
     isAbleToChangeFrame(): boolean;
@@ -142,7 +135,6 @@ export interface Canvas3dModel {
     dragCanvas(enable: boolean): void;
     activate(clientID: string | null, attributeID: number | null): void;
     configureShapes(shapeProperties: ShapeProperties): void;
-    configure(configuration: Configuration): void;
     fit(): void;
     group(groupData: GroupData): void;
     split(splitData: SplitData): void;
@@ -196,9 +188,6 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
                 selectedOpacity: 60,
                 colorBy: 'Label',
             },
-            configuration: {
-                resetZoom: false,
-            },
             isFrameUpdating: false,
             nextSetupRequest: null,
         };
@@ -388,14 +377,6 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
         this.notify(UpdateReasons.MERGE);
     }
 
-    public configure(configuration: Configuration): void {
-        if (typeof configuration.resetZoom === 'boolean') {
-            this.data.configuration.resetZoom = configuration.resetZoom;
-        }
-
-        this.notify(UpdateReasons.CONFIG_UPDATED);
-    }
-
     public configureShapes(shapeProperties: ShapeProperties): void {
         if (typeof shapeProperties.opacity === 'number') {
             this.data.shapeProperties.opacity = Math.max(0, Math.min(shapeProperties.opacity, 100));
@@ -424,10 +405,6 @@ export class Canvas3dModelImpl extends MasterImpl implements Canvas3dModel {
         this.notify(UpdateReasons.FITTED_CANVAS);
     }
 
-    public get configuration(): Configuration {
-        return { ...this.data.configuration };
-    }
-
     public get groupData(): GroupData {
         return { ...this.data.groupData };
     }

cvat-canvas3d/src/typescript/canvas3dView.ts

@@ -458,9 +458,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                 viewType.rayCaster.renderer.setFromCamera(viewType.rayCaster.mouseVector, viewType.camera);
                 const intersects = viewType.rayCaster.renderer.intersectObjects(this.getAllVisibleCuboids(), false);
                 if (!intersects.length) {
-                    const { x, y, z } = this.action.frameCoordinates;
-                    this.positionAllViews(x, y, z, true);
-                    this.updateCameraFrustrumPlane();
+                    this.fitCanvas(true);
                 }
                 return;
             }
@@ -606,6 +604,12 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
         model.subscribe(this);
     }
 
+    private fitCanvas(animation: boolean): void {
+        const { x, y, z } = this.action.frameCoordinates;
+        this.positionAllViews(x, y, z, animation);
+        this.updateCameraFrustrumPlane();
+    }
+
     private getAllVisibleCuboids(view: ViewType = ViewType.PERSPECTIVE): THREE.Mesh[] {
         return Object.values(this.drawnObjects)
             .map(({ cuboid }) => cuboid[view]).filter((mesh: THREE.Mesh) => mesh.visible);
@@ -1155,6 +1159,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                     model.updateCanvasObjects();
                 } finally {
                     model.unlockFrameUpdating();
+                    this.dispatchEvent(new CustomEvent('canvas.setup'));
                 }
             };
 
@@ -1192,6 +1197,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                             canvasContext.strokeText('IMAGE REMOVED', width / 2, height / 2);
                             canvasContext.fillStyle = 'black';
                             canvasContext.fillText('IMAGE REMOVED', width / 2, height / 2);
+                            this.dispatchEvent(new CustomEvent('canvas.setup'));
                         } finally {
                             model.unlockFrameUpdating();
                         }
@@ -1202,8 +1208,6 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
                             overlay.remove();
                         }
                     }
-
-                    this.dispatchEvent(new CustomEvent('canvas.setup'));
                 } finally {
                     URL.revokeObjectURL(objectURL);
                 }
@@ -1322,6 +1326,7 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
             this.mode = Mode.IDLE;
             this.dispatchEvent(new CustomEvent('canvas.canceled'));
         } else if (reason === UpdateReasons.FITTED_CANVAS) {
+            this.fitCanvas(false);
             this.dispatchEvent(new CustomEvent('canvas.fit'));
         } else if (reason === UpdateReasons.GROUP) {
             if (!model.groupData.enabled && this.statesToBeGrouped.length) {
@@ -1459,18 +1464,11 @@ export class Canvas3dViewImpl implements Canvas3dView, Listener {
         const material = points.material.clone();
         if (!this.views.perspective.camera) return;
 
-        if (this.model.configuration.resetZoom) {
-            points.geometry.computeBoundingBox();
-            this.cameraSettings.perspective.position = getCameraSettingsToFitScene(
-                this.views.perspective.camera as THREE.PerspectiveCamera, points.geometry.boundingBox,
-            );
-            this.positionAllViews(
-                this.action.frameCoordinates.x,
-                this.action.frameCoordinates.y,
-                this.action.frameCoordinates.z,
-                false,
-            );
-        }
+        // updating correct camera settings
+        points.geometry.computeBoundingBox();
+        this.cameraSettings.perspective.position = getCameraSettingsToFitScene(
+            this.views.perspective.camera as THREE.PerspectiveCamera, points.geometry.boundingBox,
+        );
 
         this.sceneBBox = new THREE.Box3().setFromObject(points);
         this.views.perspective.scene.add(points.clone());

cvat-ui/package.json

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

cvat-ui/src/components/annotation-page/canvas/views/canvas3d/canvas-wrapper3D.tsx

@@ -489,11 +489,13 @@ const Canvas3DWrapperComponent = React.memo((props: Props): ReactElement => {
 
     const initialSetup = (): void => {
         const canvasInstanceDOM = canvasInstance.html() as ViewsDOM;
+        canvasInstanceDOM.perspective.addEventListener('canvas.setup', () => {
+            canvasInstance.fit();
+        }, { once: true });
         canvasInstanceDOM.perspective.addEventListener('canvas.setup', onCanvasSetup);
         canvasInstanceDOM.perspective.addEventListener('canvas.canceled', onCanvasCancel);
         canvasInstanceDOM.perspective.addEventListener('canvas.dragstart', onCanvasDragStart);
         canvasInstanceDOM.perspective.addEventListener('canvas.dragstop', onCanvasDragDone);
-        canvasInstance.configure({ resetZoom });
     };
 
     const keyControlsKeyDown = (key: KeyboardEvent): void => {
@@ -547,7 +549,17 @@ const Canvas3DWrapperComponent = React.memo((props: Props): ReactElement => {
     }, [activatedStateID]);
 
     useEffect(() => {
-        canvasInstance.configure({ resetZoom });
+        let listener: EventListener | null = null;
+        if (resetZoom) {
+            listener = () => canvasInstance.fit();
+            canvasInstance.html().perspective.addEventListener('canvas.setup', listener);
+        }
+
+        return () => {
+            if (listener) {
+                canvasInstance.html().perspective.removeEventListener('canvas.setup', listener);
+            }
+        };
     }, [resetZoom]);
 
     const updateShapesView = (): void => {

cvat-ui/src/components/header/header.tsx

@@ -225,6 +225,10 @@ function HeaderContainer(props: Props): JSX.Element {
         });
     }, [tool]);
 
+    const closeSettings = useCallback(() => {
+        switchSettingsDialog(false);
+    }, []);
+
     const resetOrganization = (): void => {
         localStorage.removeItem('currentOrganization');
         if (/(webhooks)|(\d+)/.test(window.location.pathname)) {
@@ -536,7 +540,7 @@ function HeaderContainer(props: Props): JSX.Element {
                     </span>
                 </Dropdown>
             </div>
-            <SettingsModal visible={settingsDialogShown} onClose={() => switchSettingsDialog(false)} />
+            <SettingsModal visible={settingsDialogShown} onClose={closeSettings} />
             {renderChangePasswordItem && <ChangePasswordDialog onClose={() => switchChangePasswordDialog(false)} />}
         </Layout.Header>
     );

cvat-ui/src/components/header/settings-modal/settings-modal.tsx

@@ -1,9 +1,11 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
-import React, { useEffect } from 'react';
+import _ from 'lodash';
+import React, { useCallback, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Tabs from 'antd/lib/tabs';
 import Text from 'antd/lib/typography/Text';
@@ -29,34 +31,36 @@ const SettingsModal = (props: SettingsModalProps): JSX.Element => {
     const settings = useSelector((state: CombinedState) => state.settings);
     const dispatch = useDispatch();
 
-    const onSaveSettings = (): void => {
+    const onSaveSettings = useCallback(() => {
         const settingsForSaving: any = {};
         for (const [key, value] of Object.entries(settings)) {
-            if (typeof value === 'object') {
+            if (['player', 'workspace'].includes(key)) {
                 settingsForSaving[key] = value;
             }
         }
+
         localStorage.setItem('clientSettings', JSON.stringify(settingsForSaving));
         notification.success({
-            message: 'Settings was successfully saved',
+            message: 'Settings were successfully saved',
             className: 'cvat-notification-notice-save-settings-success',
         });
-    };
+
+        onClose();
+    }, [onClose, settings]);
 
     useEffect(() => {
         try {
-            const newSettings: any = {};
+            const newSettings = _.pick(settings, 'player', 'workspace');
             const settingsString = localStorage.getItem('clientSettings') as string;
             if (!settingsString) return;
             const loadedSettings = JSON.parse(settingsString);
-            for (const [sectionKey, section] of Object.entries(settings)) {
+            for (const [sectionKey, section] of Object.entries(newSettings)) {
                 for (const [key, value] of Object.entries(section)) {
                     let settedValue = value;
                     if (sectionKey in loadedSettings && key in loadedSettings[sectionKey]) {
                         settedValue = loadedSettings[sectionKey][key];
+                        Object.defineProperty(newSettings[(sectionKey as 'player' | 'workspace')], key, { value: settedValue });
                     }
-                    if (!(sectionKey in newSettings)) newSettings[sectionKey] = {};
-                    newSettings[sectionKey][key] = settedValue;
                 }
             }
             dispatch(setSettings(newSettings));
@@ -77,7 +81,7 @@ const SettingsModal = (props: SettingsModalProps): JSX.Element => {
             className='cvat-settings-modal'
             footer={(
                 <>
-                    <Tooltip title='Will save settings from this page and appearance settings on standard workspace page in browser'>
+                    <Tooltip title='Will save settings to restore them after the app is reopened'>
                         <Button className='cvat-save-settings-button' type='primary' onClick={onSaveSettings}>
                             Save
                         </Button>

cvat-ui/src/reducers/settings-reducer.ts

@@ -1,4 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2023 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -412,7 +413,6 @@ export default (state = defaultState, action: AnyAction): SettingsState => {
                 ...state,
                 player: {
                     ...state.player,
-                    resetZoom: job && job.mode === 'annotation',
                 },
                 shapes: {
                     ...defaultState.shapes,

tests/cypress/e2e/actions_tasks/case_100_settings_default_number_of_points_in_polygon_approximation.js

@@ -43,7 +43,6 @@ context('Settings. Default number of points in polygon approximation.', () => {
                     const sliderAttrValuemax = slider.attr('aria-valuemax');
                     cy.saveSettings();
                     cy.closeNotification('.cvat-notification-notice-save-settings-success');
-                    cy.closeSettings();
                     cy.reload();
                     testCheckSliderAttrValuenow(sliderAttrValueNow);
                     cy.contains('strong', 'less').click();