fix(fabric.Object): geometry mixin fix partiallyOnscreen (fabricjs#6402)

shanicerae · Jan 16, 2021 · 6cb8e79 · 6cb8e79
1 parent c67e6b6
commit 6cb8e79
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/src/mixins/object_geometry.mixin.js b/src/mixins/object_geometry.mixin.js
@@ -193,12 +193,13 @@
         return false;
       }
       var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br;
-      var points = this.getCoords(true, calculate), point;
-      for (var i = 0; i < 4; i++) {
-        point = points[i];
-        if (point.x <= pointBR.x && point.x >= pointTL.x && point.y <= pointBR.y && point.y >= pointTL.y) {
-          return true;
-        }
+      var points = this.getCoords(true, calculate);
+      // if some point is on screen, the object is on screen.
+      if (points.some(function(point) {
+        return point.x <= pointBR.x && point.x >= pointTL.x &&
+        point.y <= pointBR.y && point.y >= pointTL.y;
+      })) {
+        return true;
       }
       // no points on screen, check intersection with absolute coordinates
       if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) {
@@ -238,7 +239,11 @@
       if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) {
         return true;
       }
-      return this._containsCenterOfCanvas(pointTL, pointBR, calculate);
+      var allPointsAreOutside = this.getCoords(true, calculate).every(function(point) {
+        return (point.x >= pointBR.x || point.x <= pointTL.x) &&
+        (point.y >= pointBR.y || point.y <= pointTL.y);
+      });
+      return allPointsAreOutside && this._containsCenterOfCanvas(pointTL, pointBR, calculate);
     },
 
     /**

diff --git a/test/unit/object_geometry.js b/test/unit/object_geometry.js
@@ -896,4 +896,16 @@
     assert.equal(cObj.isPartiallyOnScreen(true), true, 'after zooming object is partially onScreen and offScreen');
   });
 
+  QUnit.test('isPartiallyOnScreen with object inside and outside of canvas', function(assert) {
+    var cObj = new fabric.Object({ left: 5, top: 5, width: 100, height: 100, strokeWidth: 0});
+    cObj.canvas = new fabric.StaticCanvas(null, { width: 120, height: 120, enableRetinaScaling: false});
+    cObj.canvas.calcViewportBoundaries();
+    assert.equal(cObj.isPartiallyOnScreen(true), false,'object is completely onScreen');
+    cObj.left = -20;
+    cObj.top = -20;
+    cObj.scaleX = 2;
+    cObj.scaleY = 2;
+    cObj.setCoords();
+    assert.equal(cObj.isPartiallyOnScreen(true), true, 'object has all corners outside screen but contains canvas');
+  });
 })();