KineticJS events dispatch bug

by pronebird

HTML

<script src="//cdn.jsdelivr.net/kineticjs/5.1.0/kinetic.min.js"></script>
<div id="stage"></div>

JavaScript

// Tip: Hold LMB and move mouse inside blue box
// Issue: Mouse events aren't captured on empty parts of layer

var stage = new Kinetic.Stage({ container: 'stage', width: 300, height: 300 });

var playgroundLayer = new Kinetic.Layer({
    x: 0, y: 0,
    width: stage.getWidth(),
    height: stage.getHeight()
});
var connectorLayer = new Kinetic.Layer({
    listening: false
});

// Uncomment this code
//playgroundLayer.add(new Kinetic.Rect({
//    fill: 'purple', 
//    width: stage.getWidth(), 
//    height: stage.getHeight()
//}));

var connector = new Kinetic.Line({
    points: [],
    stroke: 'violet',
    strokeWidth: 4
});

var anchor1 = new Kinetic.Circle({
    radius: 6,
    fill: 'violet'
});
var anchor2 = anchor1.clone();

playgroundLayer.on('mousedown', function (event) {
    console.log('mousedown');
    
    var x = event.evt.layerX;
    var y = event.evt.layerY;
    
    var pos = {x:x, y:y};
    
    connector.setPoints([ x, y, x, y ]);
    anchor1.setPosition(pos);
    anchor2.setPosition(pos);
    
    connectorLayer.add(connector, anchor1, anchor2);
    connectorLayer.draw();
}).on('mouseup', function (event) {
    console.log('mouseup');
    
    connector.remove();
    anchor1.remove();
    anchor2.remove();
    connectorLayer.draw();
}).on('mousemove', function (event) {
    console.log('mousemove');
    
    var x = event.evt.layerX;
    var y = event.evt.layerY;
    var points = connector.points().slice(0, 2);
    points.push(x, y);
    
    connector.setPoints(points);
    anchor1.setPosition({ x: points[0], y: points[1] });
    anchor2.setPosition({ x: points[2], y: points[3] });
    
    connectorLayer.draw();
}).on('mouseleave', function (event) {
    connector.remove();
    anchor1.remove();
    anchor2.remove();
    connectorLayer.draw();
});

// add hit box
playgroundLayer.add(new Kinetic.Rect({ 
    x: stage.getWidth() * 0.25,
    y: stage.getHeight() * 0.25,
    width: stage.getWidth() * 0.5,
    height: stage.getHeight() * 0.5,
   ...