search

extraymond / aframe-mouse-dragndrop

Drag-n-drop entites using mouse cursor.
MIT License
14 stars 3 forks source link

Esc to cancel (bug - Sticky, cannot let go) #7

Closed LukeTOBrien closed 3 years ago

LukeTOBrien commented 3 years ago

Hi there,

I like your library very much and I have read your blog.

The app that I am creating is a scene editor, the user can edit a scene by moving entities arround with their mouse.
I have an issue whereby once I click on a shape then it 'stick' to the mouse cursor and I cannot let it go, so I guess an event is not firing.

I also thourght that pressing the esc key would be a good way to cancel the drag and revert the entity bac to it's origional position.

extraymond commented 3 years ago

I have encounter the same issue if you start drag and get out of the scene object, then you get your cursor back in. Try to maximize the a-scene object so no underlying object can hijack the needed events.

LukeTOBrien commented 3 years ago

One thing that I didn't mention is that my scene is embedded.
So even though my scene is near-full-screen it is still embedded.
The docs also say:

Use interaction with HTML elements (e.g., buttons, forms) to affect the scene

So perhaps embedded is somehow causing the event not to fire?
Your component is exactly the kind of thing that I need though, perhaps I should do some tinkering?

extraymond commented 3 years ago

@LukeTOBrien Sorry for the long waiting, just came back from holiday. Yes embedded is the culprit.

https://github.com/extraymond/aframe-mouse-dragndrop/blob/cc7eefe515fd5720e8a4f6574dfccca6c04a939d/src/index.js#L21 Currently, the drop action is detected when the a-scene node detected the click event, which will not happen if you click outside of the a-scene node. One solution is to force fire up the click on the a-scene node manually when clicking on the outside div.