feat: track canvas drageEnter & dragLeave (WIP)

Author: haywirez

example/src/demos/FileDragDrop.tsx

@@ -24,14 +24,21 @@ export default function Box() {
   return (
     <Canvas
       {...preventDragDropDefaults}
-      onDropMissed={(e) => console.log('drop missed!')}
-      onDragOverMissed={(e) => setActiveBg(1)}>
+      onDropMissed={(e) => {
+        console.log('drop missed!')
+        setActiveBg(0)
+      }}
+      onDragOverMissed={(e) => setActiveBg(1)}
+      onDragLeave={() => setActiveBg(0)}>
       <color attach="background" args={[bgColor]} />
       <a.mesh
         rotation-y={rotation}
         scale-x={scale}
         scale-z={scale}
-        onDrop={(e) => console.log('dropped!', e)}
+        onDrop={(e) => {
+          console.log('dropped!')
+          setActive(0)
+        }}
         onDragOverEnter={() => {
           setActive(1)
           setActiveBg(0)

packages/fiber/src/core/events.ts

@@ -41,9 +41,12 @@ export type Events = {
   onClick: EventListener
   onContextMenu: EventListener
   onDoubleClick: EventListener
+  onDragEnter: EventListener
+  onDragLeave: EventListener
   onDragOverEnter: EventListener
   onDragOverLeave: EventListener
   onDrop: EventListener
+  onDropMissed: EventListener
   onWheel: EventListener
   onPointerDown: EventListener
   onPointerUp: EventListener
@@ -57,6 +60,8 @@ export type EventHandlers = {
   onClick?: (event: ThreeEvent<MouseEvent>) => void
   onContextMenu?: (event: ThreeEvent<MouseEvent>) => void
   onDoubleClick?: (event: ThreeEvent<MouseEvent>) => void
+  onDragEnter?: (event: ThreeEvent<DragEvent>) => void
+  onDragLeave?: (event: ThreeEvent<DragEvent>) => void
   onDragOverEnter?: (event: ThreeEvent<DragEvent>) => void
   onDragOverLeave?: (event: ThreeEvent<DragEvent>) => void
   onDragOverMissed?: (event: DragEvent) => void
@@ -113,6 +118,8 @@ export function getEventPriority() {
     case 'click':
     case 'contextmenu':
     case 'dblclick':
+    case 'dragenter':
+    case 'dragleave':
     case 'drop':
     case 'pointercancel':
     case 'pointerdown':
@@ -186,7 +193,9 @@ export function createEvents(store: UseBoundStore<RootState>) {
         ['Move', 'Over', 'Enter', 'Out', 'Leave'].some(
           (name) => (obj as unknown as Instance).__r3f?.handlers[('onPointer' + name) as keyof EventHandlers],
         ) ||
-        ['Over'].some((name) => (obj as unknown as Instance).__r3f?.handlers[('onDrag' + name) as keyof EventHandlers]),
+        ['Over', 'Enter', 'Leave'].some(
+          (name) => (obj as unknown as Instance).__r3f?.handlers[('onDrag' + name) as keyof EventHandlers],
+        ),
     )
   }
 
@@ -401,6 +410,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
     switch (name) {
       case 'onPointerLeave':
       case 'onPointerCancel':
+      case 'onDragLeave':
         return () => cancelPointer([])
       case 'onLostPointerCapture':
         return (event: DomEvent) => {
@@ -423,7 +433,7 @@ export function createEvents(store: UseBoundStore<RootState>) {
 
       // Get fresh intersects
       const isPointerMove = name === 'onPointerMove'
-      const isDragOver = name === 'onDragOverEnter' || name === 'onDragOverLeave'
+      const isDragOver = name === 'onDragOver'
       const isDrop = name === 'onDrop'
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick'
       const filter = isPointerMove ? filterPointerEvents : undefined

packages/fiber/src/web/events.ts

@@ -6,8 +6,9 @@ const DOM_EVENTS = {
   onClick: ['click', false],
   onContextMenu: ['contextmenu', false],
   onDoubleClick: ['dblclick', false],
-  onDragOverEnter: ['dragover', false],
-  onDragOverLeave: ['dragover', false],
+  onDragEnter: ['dragenter', false],
+  onDragLeave: ['dragleave', false],
+  onDragOver: ['dragover', false],
   onDrop: ['drop', false],
   onWheel: ['wheel', true],
   onPointerDown: ['pointerdown', true],