No TouchEvents Error

[botmaster]

This code throws error: ReferenceError: "TouchEvent is not defined" in PIXI 4.8.0

And then no pointer events are working. This happens in Edge, FireFox, Safari with no touchscreen

Apparently supportsTouchEvents passes even though no TouchEvent definition is present.

	InteractionManager.prototype.normalizeToPointerData = function normalizeToPointerData(event) {
        var normalizedEvents = [];
	        if (this.supportsTouchEvents && event instanceof TouchEvent) {
            for (var i = 0, li = event.changedTouches.length; i < li; i++) {
                var touch = event.changedTouches[i];
	                if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0;
                if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0;
                if (typeof touch.isPrimary === 'undefined') {
                    touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart';
                }
                if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1;
                if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1;
                if (typeof touch.tiltX === 'undefined') touch.tiltX = 0;
                if (typeof touch.tiltY === 'undefined') touch.tiltY = 0;
                if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch';
                if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0;
                if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5;
                touch.twist = 0;
                touch.tangentialPressure = 0;
                // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven
                // support, and the fill ins are not quite the same
                // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top
                // left is not 0,0 on the page
                if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX;
                if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY;
	                // mark the touch as normalized, just so that we know we did it
                touch.isNormalized = true;
	                normalizedEvents.push(touch);
            }
        }
	

 

Any workarounds? Or is it fixed in newest version?

[botmaster]

There's a few "ugly" override I have to make with pixi and this just adds another one. Yep I use a try/catch so my code can recover and move on then I just use the boolean. Without this this pixi code will fail and no interaction will occur at all on:

- desktop

- no touchscreen

- with safari, firefox, edge, IE

- only chrome manages to provide a touchevent.

 

PIXI.interaction.InteractionManager.prototype['normalizeToPointerData'] = function normalizeToPointerData(event:any) {

var normalizedEvents = [];

var hastouchevent = true;

try

{

new TouchEvent("", null)

}

catch(e)

{

hastouchevent = false;

}

if (hastouchevent) {

for (var i = 0, li = event.changedTouches.length; i < li; i++) {

var touch:any = event.changedTouches[i];

 

if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0;

if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0;

if (typeof touch.isPrimary === 'undefined') {

touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart';

}

if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1;

if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1;

if (typeof touch.tiltX === 'undefined') touch.tiltX = 0;

if (typeof touch.tiltY === 'undefined') touch.tiltY = 0;

if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch';

if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0;

if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5;

touch.twist = 0;

touch.tangentialPressure = 0;

// TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven

// support, and the fill ins are not quite the same

// offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top

// left is not 0,0 on the page

if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX;

if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY;

 

// mark the touch as normalized, just so that we know we did it

touch.isNormalized = true;

 

normalizedEvents.push(touch);

}

}

// apparently PointerEvent subclasses MouseEvent, so yay

else if (event instanceof MouseEvent && (!this.supportsPointerEvents || !(event instanceof window['PointerEvent']))) {

 

var mouseevent:any = event

if (typeof mouseevent.isPrimary === 'undefined') mouseevent.isPrimary = true;

if (typeof mouseevent.width === 'undefined') mouseevent.width = 1;

if (typeof mouseevent.height === 'undefined') mouseevent.height = 1;

if (typeof mouseevent.tiltX === 'undefined') mouseevent.tiltX = 0;

if (typeof mouseevent.tiltY === 'undefined') mouseevent.tiltY = 0;

if (typeof mouseevent.pointerType === 'undefined') mouseevent.pointerType = 'mouse';

if (typeof mouseevent.pointerId === 'undefined') mouseevent.pointerId = 1;

if (typeof mouseevent.pressure === 'undefined') mouseevent.pressure = 0.5;

mouseevent.twist = 0;

mouseevent.tangentialPressure = 0;

 

// mark the mouse event as normalized, just so that we know we did it

mouseevent.isNormalized = true;

 

normalizedEvents.push(event);

} else {

normalizedEvents.push(event);

}

 

return normalizedEvents;

};

[botmaster]

Bumping this since that does seem quite a huge bug in PIXI and yet nobody is responding. 

Again: On a computer with NO TOUCHSCREEN, on some browsers, PIXI generates a nasty TouchEvent error and NO user interaction can happen after that. 

The fix I posted is working for most browsers except Safari where no hover event are working. 

Would be nice if someone would break the silence on this.

 

[ivan.popelyshev]

Make a PR?

I mean, I don't care about InteractionManager, and people who patch interaction aren't sitting here. Ask me something about containers =^_^=\

Your post is already good for a temporary or even permanent fix in pixi 4.8.3

[themoonrat]

@botmaster Could you create a little jsfiddle please demonstrating the error you are describing, and I'll take a look. Games I make using PIXI are tested against pretty much everything, and we've never seen anything like this before.

It'd also be useful to know what kind of desktop device you are playing on.... or does it go wrong on a range of devices?

Thanks!

[botmaster]

I don't think jsfiddle would help as this is not related directly to code but instead to browser support.

Here is the situation on all the computer in my company (around 50 MACs/100 PCs):

WIN10 17134.228

MAC High Sierra 10.13.6 

NO touchscreen.

(of course this problem DOES NOT apply to mobile or touchscreen device)

 

IE 11.228.17134.0 : 'TouchEvent' is undefined (PIXI 4.8.0 causes an error) , PointerEvent: ok, MouseEvent: ok

EDGE 42.17134.0: TouchEvent: ok, PointerEvent: ok, MouseEvent: ok

Chrome 69.0.34497.100: TouchEvent: ok, PointerEvent: ok, MouseEvent: ok

FireFox 62.0.2 : 'TouchEvent' is undefined (PIXI 8.2.0 causes an error) , PointerEvent: ok, MouseEvent: ok

Safari 12.0 (13606.2.11) :  'TouchEvent' is undefined (PIXI 4.8.0 causes an error) , PointerEvent is undefined (This is handled by PIXI but when there's no TouchEvent there's no HOVER insteraction) , MouseEvent: ok

 

1. The original PIXI code (4.8.0) does assume the existence of TouchEvent definition but that definition is not present in many cases which causes error, which in turn causes interaction to completely stop working.

2. My temporary fix does handle the error and this restores interaction for IE and FireFox but NOT for Safari where both TocuhEvent and PointerEvent don't exist.

 

So my next fix (since the one I posted does not work in safari) will handle TouchEvent check the SAME WAY PIXI does handle PionterEvent check but will have to add the case where BOTH don't exist.

 

 

[themoonrat]

There is something bizarre in your setup that isn't quite right. Because, for you, PIXI is just entirely broken. But it's not broken for anyone else

I've just got the testers here to test on IE and Firefox on Windows 7, IE and Firefox on Windows 10, Safari on a mac... and it all works. And they all work because they do not have 'window.ontouchstart', and thus 'this.supportsTouchEvents' becomes false, thus there is no issue on the if statement in question.

So the first port of all... load up a fresh instance of IE, go to about:blank, and then in the console, type in 'window.ontouchstart'. I'd expect it to return 'undefined'

If that is the same for you, the question becomes... why does your setup have 'ontouchstart' defined for ALL browsers, no matter what, when browser themselves do not have that property? Which makes me think somewhere in your code base is adding it. Perhaps a polyfill?

[ivan.popelyshev]

Actually, considering that you are working on flash API, it could be that you override TouchEvent somewhere. Last week someone in our team changed ArrayBuffer and was shocked that renderer suddenly stopped working

[botmaster]

Good catch, that was the problem (ontouchstart). Just had to make sure it stayed undefined, this wasn't a problem before I updated to PIXI 4.8.0 and that completely slipped through the testing.