From 31b269b6ec7d8dfc667acf65a90cc262efc6f96c Mon Sep 17 00:00:00 2001
From: Andrea Bogazzi <andreabogazzi79@gmail.com>
Date: Sat, 9 Jan 2021 11:23:45 +0100
Subject: [PATCH] fix(fabric.Canvas): Update backgroundImage and overlayImage
 coordinates on zoom change (#6777)

---
 package.json               |  2 +-
 src/static_canvas.class.js | 11 ++++++++++-
 test/unit/canvas_static.js | 19 +++++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index e1102353a50..d73470e6c8e 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,7 @@
     "nyc": "^15.1.0",
     "onchange": "^3.x.x",
     "pixelmatch": "^4.0.2",
-    "qunit": "2.9.2",
+    "qunit": "^2.13.0",
     "testem": "^3.2.0",
     "uglify-js": "3.3.x"
   },
diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js
index 7f129448a55..6ffd756f250 100644
--- a/src/static_canvas.class.js
+++ b/src/static_canvas.class.js
@@ -676,7 +676,10 @@
      * @chainable true
      */
     setViewportTransform: function (vpt) {
-      var activeObject = this._activeObject, object, i, len;
+      var activeObject = this._activeObject,
+          backgroundObject = this.backgroundImage,
+          overlayObject = this.overlayImage,
+          object, i, len;
       this.viewportTransform = vpt;
       for (i = 0, len = this._objects.length; i < len; i++) {
         object = this._objects[i];
@@ -685,6 +688,12 @@
       if (activeObject) {
         activeObject.setCoords();
       }
+      if (backgroundObject) {
+        backgroundObject.setCoords(true);
+      }
+      if (overlayObject) {
+        overlayObject.setCoords(true);
+      }
       this.calcViewportBoundaries();
       this.renderOnAddRemove && this.requestRenderAll();
       return this;
diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js
index 619be566c7b..d99c18751c0 100644
--- a/test/unit/canvas_static.js
+++ b/test/unit/canvas_static.js
@@ -1624,6 +1624,25 @@
     canvas.viewportTransform = fabric.StaticCanvas.prototype.viewportTransform;
   });
 
+  QUnit.test('setViewportTransform calls objects setCoords', function(assert) {
+    var vpt = [2, 0, 0, 2, 50, 50];
+    assert.deepEqual(canvas.viewportTransform, [1, 0, 0, 1, 0, 0], 'initial viewport is identity matrix');
+    var rect = new fabric.Rect({ width: 10, heigth: 10 });
+    var rectBg = new fabric.Rect({ width: 10, heigth: 10 });
+    var rectOverlay = new fabric.Rect({ width: 10, heigth: 10 });
+    canvas.add(rect);
+    canvas.cancelRequestedRender();
+    canvas.backgroundImage = rectBg;
+    canvas.overlayImage = rectOverlay;
+    assert.deepEqual(rect.lineCoords.tl, new fabric.Point(0,0), 'rect linecoords are set for normal viewport');
+    assert.equal(rectBg.lineCoords, undefined, 'rectBg linecoords are not set');
+    assert.equal(rectOverlay.lineCoords, undefined, 'rectOverlay linecoords are not set');
+    canvas.setViewportTransform(vpt);
+    assert.deepEqual(rect.lineCoords.tl, new fabric.Point(50,50), 'rect linecoords are set');
+    assert.deepEqual(rectBg.lineCoords.tl,  new fabric.Point(0,0), 'rectBg linecoords are set');
+    assert.deepEqual(rectOverlay.lineCoords.tl,  new fabric.Point(0,0), 'rectOverlay linecoords are set');
+  });
+
   QUnit.test('getZoom', function(assert) {
     assert.ok(typeof canvas.getZoom === 'function');
     var vpt = [2, 0, 0, 2, 50, 50];