diff --git a/src/Layer.js b/src/Layer.js index 43cc70c8..6cc02e16 100644 --- a/src/Layer.js +++ b/src/Layer.js @@ -29,8 +29,9 @@ var pos = Kinetic.Util._getXY(Array.prototype.slice.call(arguments)), p, colorKey, shape; - if(this.isVisible() && this.isListening()) { + if(this.isVisible()) { p = this.hitCanvas.context._context.getImageData(pos.x | 0, pos.y | 0, 1, 1).data; + // this indicates that a hit pixel may have been found if(p[3] === 255) { colorKey = Kinetic.Util._rgbToHex(p[0], p[1], p[2]); @@ -40,15 +41,16 @@ pixel: p }; } - // if no shape mapped to that pixel, return pixel array - else if(p[0] > 0 || p[1] > 0 || p[2] > 0 || p[3] > 0) { + else { + // if no shape mapped to that pixel, just return the pixel array return { pixel: p }; } } - - return null; + else { + return null; + } }, drawScene: function(canvas) { canvas = canvas || this.getCanvas(); diff --git a/src/Stage.js b/src/Stage.js index ea5a3d66..75ef30b5 100644 --- a/src/Stage.js +++ b/src/Stage.js @@ -358,7 +358,7 @@ obj = this.getIntersection(this.getPointerPosition()), shape = obj && obj.shape ? obj.shape : undefined; - if(shape) { + if(shape && shape.isListening()) { if(!Kinetic.isDragging() && obj.pixel[3] === 255 && (!this.targetShape || this.targetShape._id !== shape._id)) { if(this.targetShape) { this.targetShape._fireAndBubble(MOUSEOUT, evt, shape); @@ -405,7 +405,7 @@ Kinetic.listenClickTap = true; - if (shape) { + if (shape && shape.isListening()) { this.clickStartShape = shape; shape._fireAndBubble(MOUSEDOWN, evt); } @@ -438,7 +438,7 @@ Kinetic.inDblClickWindow = false; }, Kinetic.dblClickWindow); - if (shape) { + if (shape && shape.isListening()) { shape._fireAndBubble(MOUSEUP, evt); // detect if click or double click occurred @@ -474,7 +474,7 @@ Kinetic.listenClickTap = true; - if (shape) { + if (shape && shape.isListening()) { this.tapStartShape = shape; shape._fireAndBubble(TOUCHSTART, evt); @@ -505,7 +505,7 @@ Kinetic.inDblClickWindow = false; }, Kinetic.dblClickWindow); - if (shape) { + if (shape && shape.isListening()) { shape._fireAndBubble(TOUCHEND, evt); // detect if tap or double tap occurred @@ -537,7 +537,7 @@ obj = this.getIntersection(this.getPointerPosition()), shape = obj && obj.shape ? obj.shape : undefined; - if (shape) { + if (shape && shape.isListening()) { shape._fireAndBubble(TOUCHMOVE, evt); // only call preventDefault if the shape is listening for events diff --git a/test/functional/MouseEvents-test.js b/test/functional/MouseEvents-test.js index 8ae3cd33..64f07dc2 100644 --- a/test/functional/MouseEvents-test.js +++ b/test/functional/MouseEvents-test.js @@ -180,6 +180,73 @@ suite('MouseEvents', function() { Kinetic.DD._endDragAfter({dragEndNode:circle}); }); + // ====================================================== + test('test listening true/false with clicks', function() { + var stage = addStage(); + + var top = stage.content.getBoundingClientRect().top; + + var layer = new Kinetic.Layer(); + + var circle = new Kinetic.Circle({ + x: stage.getWidth() / 2, + y: stage.getHeight() / 2, + radius: 70, + fill: 'green', + stroke: 'black', + strokeWidth: 4, + name: 'myCircle' + }); + + var clickCount = 0; + + circle.on('click', function() { + clickCount++; + }); + + layer.add(circle); + stage.add(layer); + + // ----------------------------------- + stage._mousedown({ + clientX: 291, + clientY: 112 + top + }); + Kinetic.DD._endDragBefore(); + stage._mouseup({ + clientX: 291, + clientY: 112 + top + }); + assert.equal(clickCount, 1, 'should be 1 click'); + + // ----------------------------------- + circle.setListening(false); + stage._mousedown({ + clientX: 291, + clientY: 112 + top + }); + Kinetic.DD._endDragBefore(); + stage._mouseup({ + clientX: 291, + clientY: 112 + top + }); + assert.equal(clickCount, 1, 'should be 1 click even though another click occurred'); + + // ----------------------------------- + circle.setListening(true); + stage._mousedown({ + clientX: 291, + clientY: 112 + top + }); + Kinetic.DD._endDragBefore(); + stage._mouseup({ + clientX: 291, + clientY: 112 + top + }); + assert.equal(clickCount, 2, 'should be 2 clicks'); + + }); + // ====================================================== test('click mapping', function() { var stage = addStage(); diff --git a/test/unit/Layer-test.js b/test/unit/Layer-test.js index 3852fba5..630eb24c 100644 --- a/test/unit/Layer-test.js +++ b/test/unit/Layer-test.js @@ -132,7 +132,7 @@ suite('Layer', function() { assert.equal(layer.getIntersection(300, 100).shape.getId(), 'greenCircle', 'shape should be greenCircle'); assert.equal(layer.getIntersection(380, 100).shape.getId(), 'redCircle', 'shape should be redCircle'); - assert.equal(layer.getIntersection(100, 100), null, 'shape should be null'); + assert.equal(layer.getIntersection(100, 100).shape, null, 'shape should be null'); }); diff --git a/test/unit/Stage-test.js b/test/unit/Stage-test.js index 6f56510f..6a4f4449 100644 --- a/test/unit/Stage-test.js +++ b/test/unit/Stage-test.js @@ -171,7 +171,7 @@ suite('Stage', function() { assert.equal(stage.getIntersection(300, 100).shape.getId(), 'greenCircle', 'shape should be greenCircle'); assert.equal(stage.getIntersection(380, 100).shape.getId(), 'redCircle', 'shape should be redCircle'); - assert.equal(stage.getIntersection(100, 100), null, 'shape should be null'); + assert.equal(stage.getIntersection(100, 100).shape, null, 'shape should be null'); });