Problem with onPointerUpObservable in Babylon.GUI Drag and Drop

Questions
1

Hey guys, I try to implement drag and drop behavoir with some Babylon.GUI controls,
but the onPointerUpObservable will not fire correctly :expressionless:

here is my PG:
https://www.babylonjs-playground.com/#C3X5HH

Dragging the rectangle around is also very slow or does only work if the mouse is moved slowly…
The ultimate goal is to drag and drop the rectangle-control between two different stackpanels, but for now the drop won’t work at all :sweat_smile:

I found some interesting PGs that tried similar things, but they have the same issue like in this one:
https://playground.babylonjs.com/#3Z3ZUD#1

Research showed, that onPointerUpObservable had some Bugs in the past also for the BABYLON.Scene…maybe BABYLON.GUI too?:thinking:

1 Like
2
1 Like
3

thank you @adam ! I knew this thread in the old forum before but took a closer look again and was able to find the mistake I made for the slow moving. The key was to call the onPointerMoveObservable also in the container of the rectangle …I just used the advancedTexture before, so the event was only fired when the mouse was over the rectangle.

The problem is: It seems to work only with buttons! When I use rectangle, then the onPointerUpObservable does not fire.

Button Example (works like charm):
https://www.babylonjs-playground.com/#C3X5HH#1

Rectangle Example (moving is good but no drop)
https://www.babylonjs-playground.com/#C3X5HH#2

Any idea what I am doing wrong?
It would be no problem for me to extend from the Button-class and modify the look, but maybe here is some bug in the BABYLON.GUI)

4

Looking at the source code, it looks like button extends rectangle and has some stuff in it for animating pointer events (up, down, enter, out)

I would say the easiest solution is to just turn off the animation.
https://www.babylonjs-playground.com/#C3X5HH#3

I think it likely has to do with lines 89-118 in the button source code.

Though when I try to replicate those in a new extended class there are some errors.

Button Source
Rectangle Source

1 Like
5

@Devin_Wright this is a nice workaround to get a button behave like a rectangle!
Still can’t find the reason why Rectangle is not working :roll_eyes:

Looking in the source shows:
-Button extends Rectangle
-Rectangle extends Container

Looking at the lines you pointed out, the _processPicking method (which is inherited from the Container-class) is different in the Button-class, but I am not able to fully understand the code yet :nerd_face:

Question is: what makes the Button firing the onPointerUp (which is wanted), but why is it not working if I extend from a Rectangle?

(This is just for a better understanding/bugfixing! I like the workaround with the Button and it’s ok in my case…but want to know why it’s not working the other way)