Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support for file drag & drop events #2346

Draft
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

haywirez
Copy link

@haywirez haywirez commented Jul 1, 2022

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

r3f-pull-2346

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
Copy link

codesandbox-ci bot commented Jul 1, 2022

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

@CodyJasonBennett CodyJasonBennett marked this pull request as draft July 1, 2022 17:56
@FarazzShaikh
Copy link
Member

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

@drcmda
Copy link
Member

drcmda commented Jul 4, 2022

@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
Copy link
Author

haywirez commented Jul 4, 2022

@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
Copy link
Member

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
Copy link
Author

haywirez commented Jul 5, 2022

(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 haywirez force-pushed the add-dragover-event branch 3 times, most recently from 1b7f27c to 8d7f5da Compare July 15, 2022 20:11
@haywirez
Copy link
Author

haywirez commented Jul 15, 2022

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

r3f-pull-2346-works

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

@haywirez haywirez changed the title Add dragover event Add support for the dragover event Jul 15, 2022
@haywirez haywirez changed the title Add support for the dragover event Add support for file drag & drop event Jul 16, 2022
@haywirez haywirez changed the title Add support for file drag & drop event Add support for file drag & drop events Jul 16, 2022
@FarazzShaikh
Copy link
Member

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.

@haywirez haywirez force-pushed the add-dragover-event branch 2 times, most recently from 6bc986c to f42b7c7 Compare July 20, 2022 10:18
Apart from the usual canvas dragenter & dragleave, this commits adds
special handlers: onDragOverEnter, onDragOverLeave & onDragOverMissed.
These are fired when dragover events intersect with objects in a scene
or miss all of them, similar to how onPointerMissed already works.
onDrop and onDropMissed are other additions. These can come  handy
when working on editor UIs etc. that need to attribute different drag &
drop actions to different objects.
@drcmda
Copy link
Member

drcmda commented Sep 23, 2022

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

@haywirez
Copy link
Author

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
Copy link
Member

drcmda commented Sep 23, 2022

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

@CodyJasonBennett CodyJasonBennett changed the title Add support for file drag & drop events feat: support for file drag & drop events Oct 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants