fix(fabric.Canvas): Update backgroundImage and overlayImage coordinat…

…es on zoom change (fabricjs#6777)

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"
   },

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;

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];