search

ShukantPal / pixi-essentials

The best goodies for performant, enterprise-level applications built on PixiJS
https://api.pixijs.io
MIT License
282 stars 36 forks source link

Transformer doesn't work properly on mobile #62

Closed Thanzex closed 2 years ago

Thanzex commented 2 years ago

Hi! As the title says, the transformer scale/rotate/skew actions don't work properly on mobile. I've tested both the provided pen examples

Standard usage: https://codepen.io/sukantpal/pen/dyMMmZm Usage with @pixi-essentials/react-bindings: https://codepen.io/sukantpal/pen/ZEWWoWX

and made a little test of my use case here https://codepen.io/thanzex/pen/JjpJQMd

On mobile the translation works fine, but I cannot scale or rotate the box, dragging any of the handles just moves the whole box or in some cases scales only along one axis, despite having set lockAspectRatio to true.

This behaviour can be observed also using a normal browser with the responsive developer tools.

ShukantPal commented 2 years ago

Thanks for reporting @Thanzex. I think it's because TransformerHandle is using mouse events: https://github.com/ShukantPal/pixi-essentials/blob/d0ad0ce71c846f05fb8486661483b2040986db2e/packages/transformer/src/TransformerHandle.ts#L95

I assume using pointer events would fix this.

ShukantPal commented 2 years ago

@Thanzex Can you try with @pixi-essentials/transformer 2.5.6?

Thanzex commented 2 years ago

That was quick! Everything seems to be working fine now, thank you very much!