Fixed issue: fit:canvas may not generate in some cases

changelog.d/20241128_112750_sekachev.bs_fixed_fit.md

@@ -0,0 +1,4 @@
+### Fixed
+
+- fit:canvas event is not generated if to fit it from the controls sidebar
+  (<https://github.com/cvat-ai/cvat/pull/8750>)

cvat-canvas/src/typescript/canvasModel.ts

@@ -687,28 +687,34 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     public fit(): void {
         const { angle } = this.data;
 
+        let updatedScale = this.data.scale;
         if ((angle / 90) % 2) {
             // 90, 270, ..
-            this.data.scale = Math.min(
+            updatedScale = Math.min(
                 this.data.canvasSize.width / this.data.imageSize.height,
                 this.data.canvasSize.height / this.data.imageSize.width,
             );
         } else {
-            this.data.scale = Math.min(
+            updatedScale = Math.min(
                 this.data.canvasSize.width / this.data.imageSize.width,
                 this.data.canvasSize.height / this.data.imageSize.height,
             );
         }
 
-        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;
+        updatedScale = Math.min(Math.max(updatedScale, FrameZoom.MIN), FrameZoom.MAX);
+        const updatedTop = this.data.canvasSize.height / 2 - this.data.imageSize.height / 2;
+        const updatedLeft = 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;
+        if (updatedScale !== this.data.scale || updatedTop !== this.data.top || updatedLeft !== this.data.left) {
+            this.data.scale = updatedScale;
+            this.data.top = updatedTop;
+            this.data.left = updatedLeft;
 
-        this.notify(UpdateReasons.IMAGE_FITTED);
+            // 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);
+        }
     }
 
     public grid(stepX: number, stepY: number): void {

cvat-canvas/src/typescript/canvasView.ts

@@ -1651,12 +1651,6 @@ 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();
         });
 
@@ -1896,6 +1890,15 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 }),
             );
         } else if ([UpdateReasons.IMAGE_ZOOMED, UpdateReasons.IMAGE_FITTED].includes(reason)) {
+            if (reason === UpdateReasons.IMAGE_FITTED) {
+                this.canvas.dispatchEvent(
+                    new CustomEvent('canvas.fit', {
+                        bubbles: false,
+                        cancelable: true,
+                    }),
+                );
+            }
+
             this.moveCanvas();
             this.transformCanvas();
         } else if (reason === UpdateReasons.IMAGE_ROTATED) {