isPartiallyOnScreen method

src/mixins/object_geometry.mixin.js

@@ -159,9 +159,9 @@
 
     /**
      * Checks if object is contained within the canvas with current viewportTransform
-     * the check is done stopping at first point that appear on screen
+     * the check is done stopping at first point that appears on screen
      * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
-     * @return {Boolean} true if object is fully contained within canvas
+     * @return {Boolean} true if object is fully or partially contained within canvas
      */
     isOnScreen: function(calculate) {
       if (!this.canvas) {
@@ -179,6 +179,19 @@
       if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) {
         return true;
       }
+      return this._containsCenterOfCanvas(pointTL, pointBR, calculate);
+    },
+
+    /**
+     * Checks if the object contains the midpoint between canvas extremities
+     * Does not make sense outside the context of isOnScreen and isPartiallyOnScreen
+     * @private
+     * @param {Fabric.Point} pointTL Top Left point
+     * @param {Fabric.Point} pointBR Top Right point
+     * @param {Boolean} calculate use coordinates of current position instead of .oCoords
+     * @return {Boolean} true if the objects containe the point
+     */
+    _containsCenterOfCanvas: function(pointTL, pointBR, calculate) {
       // worst case scenario the object is so big that contains the screen
       var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 };
       if (this.containsPoint(centerPoint, null, true, calculate)) {
@@ -187,6 +200,22 @@
       return false;
     },
 
+    /**
+     * Checks if object is partially contained within the canvas with current viewportTransform
+     * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords
+     * @return {Boolean} true if object is partially contained within canvas
+     */
+    isPartiallyOnScreen: function(calculate) {
+      if (!this.canvas) {
+        return false;
+      }
+      var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br;
+      if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) {
+        return true;
+      }
+      return this._containsCenterOfCanvas(pointTL, pointBR, calculate);
+    },
+
     /**
      * Method that returns an object with the object edges in it, given the coordinates of the corners
      * @private

test/unit/object_geometry.js

@@ -802,4 +802,24 @@
     assert.deepEqual(coords[3].y, 85, 'return bottom left with skewY skewX angle Y');
   });
 
+  QUnit.test('isPartiallyOnScreen', function(assert) {
+    var cObj = new fabric.Object({ left: 50, top: 50, width: 100, height: 100, strokeWidth: 0});
+    canvas.viewportTransform = [1, 0, 0, 1, 0, 0];
+    cObj.canvas = canvas;
+    cObj.left = -60;
+    cObj.top = -60;
+    cObj.setCoords();
+    assert.equal(cObj.isPartiallyOnScreen(true), true,'object is partially onScreen');
+    cObj.left = -110;
+    cObj.top = -110;
+    cObj.setCoords();
+    assert.equal(cObj.isPartiallyOnScreen(true), false,'object is completely offScreen and not partial');
+    cObj.left = 50;
+    cObj.top = 50;
+    cObj.setCoords();
+    assert.equal(cObj.isPartiallyOnScreen(true), false, 'object is completely on screen and not partial');
+    canvas.setZoom(2);
+    assert.equal(cObj.isPartiallyOnScreen(true), true, 'after zooming object is partially onScreen and offScreen');
+  });
+
 })();