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 and pixi7 doesn't stop resizing after pointer up #87

Closed rougsig closed 1 year ago

rougsig commented 1 year ago

Steps: 1 Add objects and transformer 2 Start to transform object (not from corners), release the mouse NOT over handler knob. 3 Transformer will stay in the transform mode.

https://github.com/ShukantPal/pixi-essentials/assets/18681794/f5fd0e53-ab7c-44e0-86e5-f20e53afcdc9

rougsig commented 1 year ago

I'm a bit a noob with pixijs, i'd like to contribute. I would be glad to have a hint because of what this behavior may occur. It is clear that the listener does not work, but why?

khanzzirfan commented 1 year ago

Not sure if this helps, but sharing with you the older version of the transformer (v2.x) with React. Tht works fine to me. The latest v3.0 has not tested with latest React/ React-PIXI is my understanding.

Please checkout this sandbox. https://codesandbox.io/s/react-pixi-text-image-sprite-transformer-test-vv1-forked-yxzfx0

SampsaKaskela commented 1 year ago

This bug appears with v3.0 transformer and when using Pixi 7.2. The event system in Pixi 7 got changed and 3.0.1 transformer fixed issues when mouse went outside the transformer. Using older version of pixi-react unfortunately is not an option due to not being compatible with React 18. After testing it seems that the listener works fine as long as you release the mouse over the handler but if you release outside it doesn't work correctly. You can afterwards go over the handler and press and release and then it stops transforming. It also seemed to appear in 3.0.0 transformer but due to other issue just was not as easy to spot.

If you use following sandbox and update Pixi to 7.2.0 and transformer to 3.0.1 you should see the issue. The issue appears without updating too but as mentioned above, might be harder to spot. https://codepen.io/sukantpal/pen/ZEWWoWX

SampsaKaskela commented 1 year ago

I'm by no means expert but is this part missing onpointerupoutside event? Since the moving of transformer seems to work since it has different implementation but handlers don't if cursor is outside of the handler.

https://github.com/ShukantPal/pixi-essentials/blob/448102dcabcc63a74bd46cf70be4df1ada5a079d/packages/transformer/src/TransformerHandle.ts#L104-L106

ShukantPal commented 1 year ago

This is fixed in @pixi-essentials/transformer@3.0.2. Please take a look at the updated CodePen example https://codepen.io/sukantpal/pen/dyMMmZm

rougsig commented 1 year ago

It works as expected, TY.