Paper.js: Non consistent mouse event handling
I've encountered a bit weird issue when events attached to _Path_ items, sometimes are not triggered.
I tried both PaperScript and direct JavaScript, tested in 2 browsers: Chrome (incognito mode without plugins) and Firefox (mac os). I used the latest PaperJS release 0.9.22.
Steps to reproduce:
Load page. Then slowly move mouse inside the shape. If everything is ok, shape background should get green color. Reload page and try again several (5-10) times. I've noticed if bug appears, move mouse for some time around the shape and then likely shape is "fixed" and it is possible to select it again.
The code is
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.22/paper-full.min.js"></script>
</head>
<body>
<canvas width="600" height="400" id="test-canvas">Update browser</canvas>
<script>
function createBrokenSegment(center, distance, fillColor){
var point = distance / (3.1415) * 2.2;
var start = new paper.Point(center.x + distance, center.y);
var through = new paper.Point(center.x + point, center.y - point);
var to = new paper.Point(center.x, center.y-distance);
var item = paper.Path.Arc(start, through, to);
item.add(new paper.Point(center.x, center.y));
item.closed = true;
item.strokeColor = 'black';
item.onMouseEnter = function() {
this.fillColor = fillColor;
};
item.onClick = function() {
this.fillColor = 'orange';
};
item.onMouseLeave = function() {
this.fillColor = 'white';
};
return item;
}
window.onload = function() {
var canvas = document.getElementById("test-canvas");
paper.setup(canvas);
var tool = new paper.Tool();
createBrokenSegment(new paper.Point(200, 170), 50, 'green');
paper.view.draw();
}
</script>
</body>
</html>
eugene-rozov
All 6 comments
A lot of work has been done on mouse-event recently. Could you check again with https://www.dropbox.com/s/nvklyibrpemsmqv/paperjs.zip?dl=0 and let me know if this is still an issue?
lehni
on 13 Jan 2016
Problem still exists for me. I've used code sample from this issue, paper-full.min.js from your dropbox, checked in latest chrome for OS X.
A bit more details on the issue: when move mouse slowly into the shape, I cannot reproduce issue. When move mouse with normal or quick speed, then bug appears very often. If bug appears (shape is not green and cursor is inside the shape), then start slowly move mouse outside the shape and when cursor be located over the border, shape becomes green.
If I put cursor inside the shape and then refresh page (cursor is still inside the shape after refresh) — shape will not be selected even if I move cursor inside the shape. It will be selected only when I slowly move it to the shape border.
eugene-rozov
on 13 Jan 2016
Yes I am seeing this now too. Also happens on sketch
lehni
on 13 Jan 2016
Oh haha! That's s simple one:
Your path has initially no fill, so the enter / leave events only fire if you actually hit the stroke. Once you're inside, it won't trigger, because there is nothing there, except for when you already hit the stroke, then it's green and the call to hitTest() will hit it.
The only problem that does exist here is that when you reload and the mouse is already in the shape, there is no 'enter' event. This is easily fixed.
To fix your example, just give your shape an initial white fill.
lehni
on 13 Jan 2016
Indeed :)
eugene-rozov
on 13 Jan 2016
Actually, there is no fix for the initial mouseenter before moving, because there is no way in browsers to know where the mouse is until we get the first mouse event. But if you have the fill, as soon as you move a little, you'll get the mouseenter event. Closing this!
lehni
on 13 Jan 2016
Related issues
wes-r
·
3Comments
sansumbrella
·
3Comments
khurramraheel
·
7Comments
tjunnone
·
4Comments
nicholaswmin
·
3Comments
Most helpful comment
Oh haha! That's s simple one:
Your path has initially no fill, so the enter / leave events only fire if you actually hit the stroke. Once you're inside, it won't trigger, because there is nothing there, except for when you already hit the stroke, then it's green and the call to
hitTest()will hit it.The only problem that does exist here is that when you reload and the mouse is already in the shape, there is no 'enter' event. This is easily fixed.
To fix your example, just give your shape an initial white fill.