Problems getting new location using positionGizmo and onDragEndObservable

[don-sitebionics]

We have a (building) layout editor and we are using positionGizmo set as a child on a node that we want to drag around. After the node has been repositioned we need to take the new position and write it back out to the layout and persist it to represent the new position of the entity in our data layer.

We do this by responding to onDragEndObservable. The event args don't seem to be meaningful (I would expect an event args with old position and new position for example). For getting the new position what we do is set a reference on the root transform (which is the parent of the positionGizmo), and we pull the position from there. This works fine most of the time. What we have noticed is that sometimes even though the visual mesh has been moved correctly with the gizmo, the position is not set on gettable properties on the transform at the time onDragEndObservable is called... so we just end up setting it back to the position that is moved. I've noticed this in React before where properties in the nodes bound to underlying DOM element get updated async. I'm guessing this may be a race condition where transform.position isn't updated up in the virtual DOM element by the time the onDragEndObservable is called. We do have one machine (that is much slower) where this condition happens almost all the time which makes us thing its a async timing issue.

Any ideas on what might be going on here and how we can reliably get a new drag location?

Thanks
Don

<>

{layoutViewModel.selectedEntity === trigger &&
<positionGizmo
onDragEndObservable={ (e:any) => {
trigger.pose.setPosition(transformNodeRef.current!.position); <<< most of the time this is correct but sometimes its the old position even though it has been moved
}}/>
}
<cylinder ref={meshRef} name="cylinder" scaling={new Vector3(trigger.radius, 1, trigger.radius)} diameter={2} height={1} updatable={true} />

</>

[brianzinn]

hi @don-sitebionics - good question! tricky. yeah, looks like some async update that becomes more obvious on a slower machine - did you try something hacky like this to see if that's the case?

<positionGizmo
  onDragEndObservable={ (e:any) => {
    // bumping to event loop
    const node = transformNodeRef.current!;
    setTimeout(() => {
      trigger.pose.setPosition(node.position);
    }, 0);
  }}
/>

If that's the case then it may be that the observable is firing before the actual position is updated - not necessarily a bug, but certainly a race condition for your use case. That can be brought up in Babylon forum directly if that callback has any guarantees on the mesh it is a gizmo for.

If "setPosition" is from useState then you could try trigger.pose.setPosition(() => node.position), but I don't think that will make a difference - I think it is called inline. https://react.dev/reference/react/useState#setstate

I'm assuming here your mesh isn't going back to an old position based on some rendering with the position.

If you want to create a codesandbox - here is a good starting point:
https://brianzinn.github.io/react-babylonjs/examples/basic/gizmo/