Fixed fit for images with different resolution (#6081)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [x] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [x] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

CHANGELOG.md

@@ -21,7 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - Tracking of multiple objects (30 and more) with TransT tracker
   (<https://github.com/opencv/cvat/pull/6073>)
-  - The issue azure.core.exceptions.ResourceExistsError: The specified blob already exists (<https://github.com/opencv/cvat/pull/6082>)
+- The issue azure.core.exceptions.ResourceExistsError: The specified blob already exists (<https://github.com/opencv/cvat/pull/6082>)
+- Image scaling when moving between images with different resolution (<https://github.com/opencv/cvat/pull/6081>)
 
 ### Security
 - TDB

cvat-canvas/package.json

 {
   "name": "cvat-canvas",
-  "version": "2.16.3",
+  "version": "2.16.4",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",
   "scripts": {

cvat-canvas/src/typescript/canvasModel.ts

@@ -77,6 +77,7 @@ export interface Configuration {
     shapeOpacity?: number;
     controlPointsSize?: number;
     outlinedBorders?: string | false;
+    resetZoom?: boolean;
 }
 
 export interface BrushTool {
@@ -160,6 +161,7 @@ export enum UpdateReasons {
     IMAGE_ZOOMED = 'image_zoomed',
     IMAGE_FITTED = 'image_fitted',
     IMAGE_MOVED = 'image_moved',
+    IMAGE_ROTATED = 'image_rotated',
     GRID_UPDATED = 'grid_updated',
 
     ISSUE_REGIONS_UPDATED = 'issue_regions_updated',
@@ -312,11 +314,12 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         imageIsDeleted: boolean;
         focusData: FocusData;
         gridSize: Size;
-        left: number;
         objects: any[];
         issueRegions: Record<number, { hidden: boolean; points: number[] }>;
         scale: number;
         top: number;
+        left: number;
+        fittedScale: number;
         zLayer: number | null;
         drawData: DrawData;
         editData: MasksEditData;
@@ -355,6 +358,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 selectedShapeOpacity: 0.5,
                 shapeOpacity: 0.2,
                 outlinedBorders: false,
+                resetZoom: true,
                 textFontSize: consts.DEFAULT_SHAPE_TEXT_SIZE,
                 controlPointsSize: consts.BASE_POINT_SIZE,
                 textPosition: consts.DEFAULT_SHAPE_TEXT_POSITION,
@@ -378,11 +382,12 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 height: 100,
                 width: 100,
             },
-            left: 0,
             objects: [],
             issueRegions: {},
             scale: 1,
             top: 0,
+            left: 0,
+            fittedScale: 0,
             zLayer: null,
             selected: null,
             mode: Mode.IDLE,
@@ -506,6 +511,12 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                     return;
                 }
 
+                const relativeScaling = this.data.scale / this.data.fittedScale;
+                const prevImageLeft = this.data.left;
+                const prevImageTop = this.data.top;
+                const prevImageWidth = this.data.imageSize.width;
+                const prevImageHeight = this.data.imageSize.height;
+
                 this.data.imageSize = {
                     height: frameData.height as number,
                     width: frameData.width as number,
@@ -516,6 +527,20 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 if (this.data.imageIsDeleted) {
                     this.data.angle = 0;
                 }
+
+                this.fit();
+
+                // restore correct image position after switching to a new frame
+                // if corresponding option is disabled
+                // prevImageHeight and prevImageWidth are initialized by 0 by default
+                if (prevImageHeight !== 0 && prevImageWidth !== 0 && !this.data.configuration.resetZoom) {
+                    const leftOffset = Math.round((this.data.imageSize.width - prevImageWidth) / 2);
+                    const topOffset = Math.round((this.data.imageSize.height - prevImageHeight) / 2);
+                    this.data.left = prevImageLeft - leftOffset;
+                    this.data.top = prevImageTop - topOffset;
+                    this.data.scale *= relativeScaling;
+                }
+
                 this.notify(UpdateReasons.IMAGE_CHANGED);
                 this.data.zLayer = zLayer;
                 this.data.objects = objectStates;
@@ -562,7 +587,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     public rotate(rotationAngle: number): void {
         if (this.data.angle !== rotationAngle && !this.data.imageIsDeleted) {
             this.data.angle = (360 + Math.floor(rotationAngle / 90) * 90) % 360;
-            this.fit();
+            this.notify(UpdateReasons.IMAGE_ROTATED);
         }
     }
 
@@ -592,10 +617,13 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         }
 
         this.data.scale = Math.min(Math.max(this.data.scale, FrameZoom.MIN), FrameZoom.MAX);
-
         this.data.top = this.data.canvasSize.height / 2 - this.data.imageSize.height / 2;
         this.data.left = this.data.canvasSize.width / 2 - this.data.imageSize.width / 2;
 
+        // scale is changed during zooming or translating
+        // so, remember fitted scale to compute fit-relative scaling
+        this.data.fittedScale = this.data.scale;
+
         this.notify(UpdateReasons.IMAGE_FITTED);
     }
 
@@ -813,6 +841,9 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         if (typeof configuration.forceFrameUpdate === 'boolean') {
             this.data.configuration.forceFrameUpdate = configuration.forceFrameUpdate;
         }
+        if (typeof configuration.resetZoom === 'boolean') {
+            this.data.configuration.resetZoom = configuration.resetZoom;
+        }
         if (typeof configuration.selectedShapeOpacity === 'number') {
             this.data.configuration.selectedShapeOpacity = configuration.selectedShapeOpacity;
         }

cvat-canvas/src/typescript/canvasView.ts

@@ -1220,6 +1220,12 @@ export class CanvasViewImpl implements CanvasView, Listener {
         // Setup event handlers
         this.canvas.addEventListener('dblclick', (e: MouseEvent): void => {
             this.controller.fit();
+            this.canvas.dispatchEvent(
+                new CustomEvent('canvas.fit', {
+                    bubbles: false,
+                    cancelable: true,
+                }),
+            );
             e.preventDefault();
         });
 
@@ -1460,14 +1466,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
         } else if ([UpdateReasons.IMAGE_ZOOMED, UpdateReasons.IMAGE_FITTED].includes(reason)) {
             this.moveCanvas();
             this.transformCanvas();
-            if (reason === UpdateReasons.IMAGE_FITTED) {
-                this.canvas.dispatchEvent(
-                    new CustomEvent('canvas.fit', {
-                        bubbles: false,
-                        cancelable: true,
-                    }),
-                );
-            }
+        } else if (reason === UpdateReasons.IMAGE_ROTATED) {
+            this.transformCanvas();
         } else if (reason === UpdateReasons.IMAGE_MOVED) {
             this.moveCanvas();
         } else if (reason === UpdateReasons.OBJECTS_UPDATED) {

cvat-ui/package.json

 {
   "name": "cvat-ui",
-  "version": "1.50.8",
+  "version": "1.50.9",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-wrapper.tsx

@@ -359,6 +359,7 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
             colorBy,
             outlined,
             outlineColor,
+            resetZoom,
         } = this.props;
         const { canvasInstance } = this.props as { canvasInstance: Canvas };
 
@@ -383,6 +384,7 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
             textFontSize,
             textPosition,
             textContent,
+            resetZoom,
         });
 
         this.initialSetup();
@@ -439,7 +441,8 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
             prevProps.textContent !== textContent ||
             prevProps.colorBy !== colorBy ||
             prevProps.outlineColor !== outlineColor ||
-            prevProps.outlined !== outlined
+            prevProps.outlined !== outlined ||
+            prevProps.resetZoom !== resetZoom
         ) {
             canvasInstance.configure({
                 undefinedAttrValue: config.UNDEFINED_ATTRIBUTE_VALUE,
@@ -456,6 +459,7 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
                 controlPointsSize,
                 textPosition,
                 textContent,
+                resetZoom,
             });
         }
 
@@ -502,22 +506,16 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
             this.updateCanvas();
         }
 
-        if (prevProps.frame !== frameData.number && resetZoom && workspace !== Workspace.ATTRIBUTE_ANNOTATION) {
-            canvasInstance.html().addEventListener(
-                'canvas.setup',
-                () => {
-                    canvasInstance.fit();
-                },
-                { once: true },
-            );
-        }
-
         if (prevProps.showBitmap !== showBitmap) {
             canvasInstance.bitmap(showBitmap);
         }
 
         if (prevProps.frameAngle !== frameAngle) {
             canvasInstance.rotate(frameAngle);
+            if (prevProps.frameData === frameData) {
+                // explicitly rotated, not a new frame
+                canvasInstance.fit();
+            }
         }
 
         if (prevProps.workspace !== workspace) {
@@ -859,6 +857,8 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
             if (activatedState && activatedState.objectType !== ObjectType.TAG) {
                 canvasInstance.activate(activatedStateID, activatedAttributeID);
             }
+        } else if (workspace === Workspace.ATTRIBUTE_ANNOTATION) {
+            canvasInstance.fit();
         }
     }
 
@@ -905,13 +905,11 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
                 `brightness(${brightnessLevel}) contrast(${contrastLevel}) saturate(${saturationLevel})`,
         });
 
-        // Events
+        canvasInstance.fitCanvas();
         canvasInstance.html().addEventListener(
             'canvas.setup',
             () => {
                 const { activatedStateID, activatedAttributeID } = this.props;
-                canvasInstance.fitCanvas();
-                canvasInstance.fit();
                 canvasInstance.activate(activatedStateID, activatedAttributeID);
             },
             { once: true },