feat: track canvas drageEnter & dragLeave (WIP)

pmndrs · Jul 20, 2022 · 6bc986c · 6bc986c
1 parent ab76b39
commit 6bc986c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
diff --git a/example/src/demos/FileDragDrop.tsx b/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)

diff --git a/packages/fiber/src/core/events.ts b/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

diff --git a/packages/fiber/src/web/events.ts b/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],