polish method

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 - Fix fill pattern for `Konva.Text` when the pattern has an offset or rotation
 - `Konva.names` and `Konva.ids` are removed
 - new `flipEnabled` property for `Konva.Transformer`.
+- new `node.isClientRectOnScreen()` method
 
 ## 7.2.5
 

src/Node.ts

@@ -2444,31 +2444,27 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
    * @param {Number} margin.y
    * @returns {Boolean}
    * @name Konva.Node#isClientRectOnScreen
+   * @example
+   * // get index
+   * // default calculations
+   * var isOnScreen = node.isClientRectOnScreen()
+   * // increase object size (or screen size) for cases when objects close to the screen still need to be marked as "visible"
+   * var isOnScreen = node.isClientRectOnScreen({ x: stage.width(), y: stage.height() })
    */
-  isClientRectOnScreen(margin?: number | {x: number; y: number;}): boolean {
+  isClientRectOnScreen(
-    const _margin = 
+    margin: { x: number; y: number } = { x: 0, y: 0 }
-      margin === undefined
+  ): boolean {
-        ? {x: 0, y: 0} 
-        : isNaN(margin as any)
-          ? margin as {x: number; y: number;} 
-          : {x: margin as number, y: margin as number}
-    ;
-    type Rect = {[k in 'x'|'y'|'width'|'height']: number};
-    const haveIntersection = (r1: Rect, r2: Rect) => !(
-      r2.x > r1.x + r1.width ||
-      r2.x + r2.width < r1.x ||
-      r2.y > r1.y + r1.height ||
-      r2.y + r2.height < r1.y
-    );
     const stage = this.getStage();
-    if(!stage) return false;
+    if (!stage) {
+      return false;
+    }
     const screenRect = {
-      x: (-stage.x() - _margin.x) / stage.scaleX(),
+      x: -margin.x,
-      y: (-stage.y() - _margin.y) / stage.scaleY(),
+      y: -margin.y,
-      width: (stage.width() +  _margin.x) / stage.scaleX(),
+      width: stage.width() + margin.x,
-      height: (stage.height() +  + _margin.y) / stage.scaleY()
+      height: stage.height() + margin.y,
     };
-    return haveIntersection(screenRect, this.getClientRect({relativeTo: stage as any}));
+    return Util.haveIntersection(screenRect, this.getClientRect());
   }
 
   preventDefault: GetSet<boolean, this>;

test/unit/Node-test.ts

@@ -3776,28 +3776,35 @@ describe('Node', function () {
   });
 
   // ======================================================
-  test('isClientRectOnScreen() method', function () {
+  it('isClientRectOnScreen() method', function () {
     var stage = addStage();
     var layer = new Konva.Layer();
     var circle = new Konva.Circle({
-      x: stage.getWidth() / 2,
+      x: stage.width() / 2,
-      y: stage.getHeight() / 2,
+      y: stage.height() / 2,
       radius: 30,
       fill: 'green',
       stroke: 'black',
       strokeWidth: 4,
     });
 
+    assert.equal(
+      circle.isClientRectOnScreen(),
+      false,
+      'not visible when not on stage'
+    );
+
     layer.add(circle);
     stage.add(layer);
 
     assert.equal(circle.isClientRectOnScreen(), true);
 
-    circle.x(-circle.radius() - circle.strokeWidth()/2 - 1); // Move circle 1px outside of visible area
+    circle.x(-circle.radius() - circle.strokeWidth() / 2 - 1); // Move circle 1px outside of visible area
     assert.equal(circle.isClientRectOnScreen(), false);
-    assert.equal(circle.isClientRectOnScreen(1), true);
+    assert.equal(circle.isClientRectOnScreen({ x: 10, y: 0 }), true);
-    assert.equal(circle.isClientRectOnScreen({x: 1, y: 0}), true);
+    assert.equal(circle.isClientRectOnScreen({ x: 0, y: 10 }), false);
-    assert.equal(circle.isClientRectOnScreen({x: 0, y: 1}), false);
 
+    stage.x(10);
+    assert.equal(circle.isClientRectOnScreen(), true);
   });
 });