Joystick does not "end" and lock

[psykokwak-com]

Sometime the "end" event is not triggered and the nipple does not disapear. I have to reload the page.
However, the "remove" event is always triggered.
Is there a way to force the nipple destruction in the "remove" event ? I tried "nipple.destroy()" without succes.

Here my source :
` var joystick = new nipplejs.create({
zone : document.getElementById('mjpegplayercontainer'),
color : 'blue',
size : 200,
//mode : 'semi',
//catchDistance : 100
});

joystick.on('added', function (evt, nipple) {
	console.log("Virtual Joy : ADDED");
	nipple.on('end', function (evt, data) {
		console.log("Virtual Joy : END");
		speed = {
			linear : 0,
			angular : 0
		};
	});
	nipple.on('move', function (evt, data) {
		//console.log("Virtual Joy : MOVE");
		speed = {
			angular : Math.round((data.distance * Math.cos(data.angle.radian)) / 100 * maxSpeed),
			linear : Math.round((data.distance * Math.sin(data.angle.radian)) / 100 * maxSpeed)
		};
	});
}).on('removed', function (evt, nipple) {
	//nipple.off(); //'move end');
	nipple.destroy();
	console.log("Virtual Joy : REMOVE");
		speed = {
			linear : 0,
			angular : 0
		};
});	`

[yoannmoinet]

I'm closing this as #74 should have fixed this.
If you still encounter this issue using 0.7.0+ feel free to reopen.

[lazerwalker]

@yoannmoinet Arg, I'm afraid I'm still seeing this happen on 0.7.1. (on Mobile Safari, iOS 11.4.1)

I'm going to try to slim down my code into smaller reproducible example, but in the meanwhile, I'm curious if anyone else has still been seeing this happen?

[lazerwalker]

Okay, I've been able to reduce this fairly regularly in the demo linked from the README, although not as frequently as in my own app (where it happens consistently after ~5 seconds of normal use). On the demo screen, I'm able to most easily trigger it when using multitouch (basically swiping the demo area frantically with both thumbs to spawn and despawn lots of joysticks in a short time).

[lazerwalker]

Let me know if me continuing to rant here isn't helpful (I'm hoping to nail down a consistent repro + fix myself), but if anyone else is jamming on this, I've managed to reproduce it in the online demo on desktop with a mouse, so it appears to not be exclusively related to touch handling and touch events.

[yoannmoinet]

@lazerwalker don't worry about your rant, it's helpful.
Having as much history as possible on this issue will end up helping us fixing it.

I don't have much time lately to really investigate on the issue, but I'm very glad someone is trying.
Do not hesitate to add comments, re-open issues, as well as adding as much info as you can get.

Cheers, and again, thank you!

[lazerwalker]

I spent a bunch of time diving into this, but came up blank.

@robertlong's suggested fix in #31 (comment) appears to work for me (just passing in fadeTime: 0), which means I'm probably not going to dig more into this right now. I'm hoping I'll be able to debug more later when/if I have time.

In my case, it appeared that the high-level NippleJS DOM element wasn't even getting touchcancel/touchend events fired on it in the stuck case, which makes me wonder if the fading-away joystick is somehow eating them.

[yoannmoinet]

I'm still not able to reproduce the issue.

Feel free to re-open once you have more details and some clear repro steps.