I am creating a graphics-editor-like application and I want to make an object moveable with the mouse. Further, I want to limit the movement along the dominant axis when the user presses shift, so the user can move the object only either along the X or Y.
I got this mostly working using a pointer drag behavior. I was positively surprised that I already get
event.pointerInfo.event.shiftKey from the event that is passed to
onDragObservable. However, this
shiftKey field is not updated when moving the mouse but it only carries the state of the shift key when the mouse was pressed. For me, this is not intuitive as there is a separate event handler for
onDragStartObservable and I consider every move as a separate new event.
So here is a playground: https://playground.babylonjs.com/#YEZPVT#2176
You can move the sphere freely around. When you press shift before mouse down, you can only move the sphere along the x-axis. I’d like to switch whether I want the restriction or not during the active move operation.
- In order to implement the behavior, I stored the original position. Is there a way to archive this without adding my own piece of state here? Maybe by somehow dynamically update what was passed to the constructor, i.e. the dragPlane or dragAxis?
- Even if babylon updated the shiftKey, it would not send an “event”, so the user would have to slightly move the mouse in order to get some visual feedback. Any thoughts on this? Currently, I fear I have to listen to shift from some other place and then merge both event streams. I am also missing a manual method to issue onDragObservable. There are methods for manually sending the start and stop events though.
Thank everyone for your thoughts.