Fixed a wrong cache when a shape inside group has listening = false

CHANGELOG.md

@@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [new version][unreleased]
 
+### Fixed
+
+* Fixed a wrong cache when a shape inside group has `listening = false`
+
 ## [2.4.1][2018-10-08]
 
 ### Changed

konva.js

@@ -2,7 +2,7 @@
  * Konva JavaScript Framework v2.4.1
  * http://konvajs.github.io/
  * Licensed under the MIT
- * Date: Mon Oct 08 2018
+ * Date: Fri Oct 12 2018
  *
  * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
  * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@@ -3332,10 +3332,11 @@
      * @memberof Konva.Node.prototype
      * @returns {Boolean}
      */
-    shouldDrawHit: function(canvas) {
+    shouldDrawHit: function() {
       var layer = this.getLayer();
+
       return (
-        (canvas && canvas.isCache) ||
+        (!layer && this.isListening() && this.isVisible()) ||
         (layer &&
           layer.hitGraphEnabled() &&
           this.isListening() &&

src/Node.js

@@ -809,10 +809,11 @@
      * @memberof Konva.Node.prototype
      * @returns {Boolean}
      */
-    shouldDrawHit: function(canvas) {
+    shouldDrawHit: function() {
       var layer = this.getLayer();
+
       return (
-        (canvas && canvas.isCache) ||
+        (!layer && this.isListening() && this.isVisible()) ||
         (layer &&
           layer.hitGraphEnabled() &&
           this.isListening() &&

test/unit/Node-cache-test.js

@@ -869,4 +869,105 @@ suite('Caching', function() {
     compareLayerAndCanvas(layer, canvas, 5);
     assert.equal(stage.getIntersection({ x: 150, y: 100 }), rect);
   });
+
+  it('listening false on a shape should not create hit area', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var bigCircle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 100,
+      fill: 'green'
+    });
+
+    layer.add(bigCircle);
+
+    var smallCircle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 50,
+      fill: 'red',
+      listening: false
+    });
+
+    layer.add(smallCircle);
+    smallCircle.cache();
+    layer.draw();
+
+    var shape = stage.getIntersection({ x: 100, y: 100 });
+    assert.equal(shape, bigCircle);
+  });
+
+  it('listening false on a shape inside group should not create hit area', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group();
+    layer.add(group);
+
+    var bigCircle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 100,
+      fill: 'green'
+    });
+
+    group.add(bigCircle);
+
+    var smallCircle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 50,
+      fill: 'red',
+      listening: false
+    });
+
+    group.add(smallCircle);
+    group.cache();
+
+    layer.draw();
+    var shape = stage.getIntersection({ x: 100, y: 100 });
+    assert.equal(shape, bigCircle);
+  });
+  it('listening false on a group inside a group should not create hit area', function() {
+    var stage = addStage();
+
+    var layer = new Konva.Layer();
+    stage.add(layer);
+
+    var group = new Konva.Group();
+    layer.add(group);
+
+    var bigCircle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 100,
+      fill: 'green'
+    });
+    group.add(bigCircle);
+
+    var innerGroup = new Konva.Group({
+      listening: false
+    });
+    group.add(innerGroup);
+
+    var smallCircle = new Konva.Circle({
+      x: 100,
+      y: 100,
+      radius: 50,
+      fill: 'red'
+    });
+
+    innerGroup.add(smallCircle);
+    group.cache();
+
+    layer.draw();
+    var shape = stage.getIntersection({ x: 100, y: 100 });
+    assert.equal(shape, bigCircle);
+  });
 });