feat: support for file drag & drop events

[haywirez]

Note: this is a WIP, the test is failing for some reason.

This PR is about dragging files onto the canvas from a file explorer / outside the browser. I'm trying to enable tracking intersections for the drop target meshes e.g. highlighting them or accepting or rejecting dragged files whether they are dropped onto a particular mesh. In case of dragging from outside the browser, pointer events do not fire as the window is not in focus. The only event which does is dragover, which nevertheless should have the necessary x/y coordinates.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8f13a9a:

Sandbox	Source
example	Configuration

[FarazzShaikh]

Would it also be possible to implement other drop events like onDragEnter or onDrop?

[drcmda]

@haywirez is there a test or a sandbox somewhere? and if it's really as easy as adding the events, what speaks against adding them all like @FarazzShaikh said? also, how are meshes marked as draggable? on the dom isn't is something like <div draggable="true">?

[haywirez]

@drcmda definitely not ready for merging yet, this needs more work & investigation...

This PR is not about draggable meshes - it's for when you drag files onto the canvas from a file explorer / outside the browser. I'm trying to enable tracking intersections for the drop target meshes e.g. highlighting them or accepting or rejecting dragged files whether they are dropped onto a particular mesh. In case of dragging from outside the browser, pointer events do not fire as the window is not in focus. The only event which does is dragover, which nevertheless should have the necessary x/y coordinates.

From MDN:

This event is fired continuously when an element or text selection is being dragged and the mouse pointer is over a valid drop target (every 50 ms WHEN mouse is not moving ELSE much faster between 5 ms (slow movement) and 1ms (fast movement) approximately. This firing pattern is different than mouseover ).

[joshuaellis]

IMO this PR should not be trying to replicate the abilities of something like @use-gesture/react which it sounds like from @haywirez that this is not the intention?

[haywirez]

(note to self...) We will definitely need an onDragOverMissed pseudo-event, similar to onPointerMissed and update the docs as well:
https://docs.pmnd.rs/react-three-fiber/api/events

There's a lot of work to be done in packages/fiber/src/core/events.ts#L404

[haywirez]

OK this seems to work now but please double check for any obvious misses. Added a test + an example:

I opted to name the handler props onDragOverEnter and onDragOverLeave even though technically they both represent a continuous dragover event. Also: the user can cancel dragging files by pressing ESC for example and this is not handled. For some reason I wasn't able to figure out how that works or where exactly the dragend event gets fired in the DOM.

still WIP: handling onDrop

[FarazzShaikh]

Amaze! If the "ESC to cancle" is implimented on the regular HTML drop events then i think we should impliment it here too. Else best to leave it in userland.

[drcmda]

hey @haywirez what's the state, is it out of draft stage? can we merge?

[haywirez]

It's missing a fancier example (right now it only logs to console on drag & drop events). but as i recall it's rather done. could rebase + merge if you think that's ok enough. can prepare a fancy demo later 😝

[drcmda]

yes please, the demo isn't so important, it could be something very lame. dressing up a cube with a texture -> done.