Need my canvas to pinch-zoom & pan

[!untrue]

I have a Pixi.js game/app embedded in a html page, and everything is working fine. The only problem is that I can't use the canvas to zoom or pan the page... this is a problem when I'm testing it on a small iPhone screen, if I position the canvas such that it takes up the whole screen, then I can no longer pan back to the rest of the page because all I can touch is the canvas.

I'd also like zoom functionality for a little better usability.

At the moment I'm using .tap and .click at the same time, which apart from the zoom/pan problem, is working out fine.

 

A vanilla JS canvas seems to respond well to pan & zoom touches, as well as successfully registering "clicks", so I'm hoping this isn't something impossible.

 

I've tried googling this and reading all the docs, but I'm going nuts trying to figure this out. It's one of those "I don't know what I don't know" problems. I assume there's some event bubbling that isn't finding its way back to the containing page... but I don't really know what to do with that.

 

 

[!untrue]

Ok, I found this looking at the dev build...

PIXI.AUTO_PREVENT_DEFAULT

Setting it to false in my app has enabled pinch-zoom and pan touches, while still being able to click. Although it's now causing taps/clicks to leave a mouseOver on my buttons, as well as causing momentary selections of other page elements outside the canvas. Which I think a vanilla canvas does too.

 

Hmm.

[!untrue]

So, knowing I want to preventDefault for some things and not others, I've narrowed it down to.

 

Commented out...

if(PIXI.AUTO_PREVENT_DEFAULT)event.preventDefault();

...from PIXI.InteractionManager.prototype.onTouchStart

 

And added...

event.preventDefault();

to PIXI.InteractionManager.prototype.onTouchEnd

 

Though I'm not completely certain with my reasoning about the code, what I'm trying to do (and it appears to be working) is to preventDefault on touches that are taps, and not preventDefault on any other kind of touch.

 

It's doing what I want it to do now, without the weird hover & selection side effects, but my question now is, how do I roll this back into the mini-fied pixi.js. Do I just run this modified dev version through a mini-fier? (And can anyone recommend a specific mini-fier to use?) Or is there some better practice way of patching/overwriting these functions from outside pixi.js

Never mind, I RTFM and built it with node/grunt. /derp