diff --git a/CHANGELOG.md b/CHANGELOG.md index 55389d36..9ea983ca 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/Node.ts b/src/Node.ts index e4af527d..90329333 100644 --- a/src/Node.ts +++ b/src/Node.ts @@ -2444,31 +2444,27 @@ export abstract class Node { * @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 { - const _margin = - margin === undefined - ? {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 - ); + isClientRectOnScreen( + margin: { x: number; y: number } = { x: 0, y: 0 } + ): boolean { const stage = this.getStage(); - if(!stage) return false; + if (!stage) { + return false; + } const screenRect = { - x: (-stage.x() - _margin.x) / stage.scaleX(), - y: (-stage.y() - _margin.y) / stage.scaleY(), - width: (stage.width() + _margin.x) / stage.scaleX(), - height: (stage.height() + + _margin.y) / stage.scaleY() + x: -margin.x, + y: -margin.y, + width: stage.width() + margin.x, + height: stage.height() + margin.y, }; - return haveIntersection(screenRect, this.getClientRect({relativeTo: stage as any})); + return Util.haveIntersection(screenRect, this.getClientRect()); } preventDefault: GetSet; diff --git a/test/unit/Node-test.ts b/test/unit/Node-test.ts index be2b4821..f1ef7f84 100644 --- a/test/unit/Node-test.ts +++ b/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, - y: stage.getHeight() / 2, + x: stage.width() / 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: 1, y: 0}), true); - assert.equal(circle.isClientRectOnScreen({x: 0, y: 1}), false); - + assert.equal(circle.isClientRectOnScreen({ x: 10, y: 0 }), true); + assert.equal(circle.isClientRectOnScreen({ x: 0, y: 10 }), false); + + stage.x(10); + assert.equal(circle.isClientRectOnScreen(), true); }); });