From 86bd1f153d4c8c9a5ca649128a3aaa3eb40c595b Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris.sekachev@yandex.ru>
Date: Mon, 2 Dec 2024 18:12:50 +0200
Subject: [PATCH] Fixed issue: fit:canvas may not generate in some cases
 (#8750)

---
 .../20241128_112750_sekachev.bs_fixed_fit.md  |  4 ++++
 cvat-canvas/src/typescript/canvasModel.ts     | 24 ++++++++++++-------
 cvat-canvas/src/typescript/canvasView.ts      | 15 +++++++-----
 3 files changed, 28 insertions(+), 15 deletions(-)
 create mode 100644 changelog.d/20241128_112750_sekachev.bs_fixed_fit.md

diff --git a/changelog.d/20241128_112750_sekachev.bs_fixed_fit.md b/changelog.d/20241128_112750_sekachev.bs_fixed_fit.md
new file mode 100644
index 000000000000..cb5845dee0f7
--- /dev/null
+++ b/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>)
diff --git a/cvat-canvas/src/typescript/canvasModel.ts b/cvat-canvas/src/typescript/canvasModel.ts
index 0ad62484c14c..0225c738683b 100644
--- a/cvat-canvas/src/typescript/canvasModel.ts
+++ b/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 {
diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts
index d1bab2369521..f21255ab4213 100644
--- a/cvat-canvas/src/typescript/canvasView.ts
+++ b/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) {