chore: restore native events export

Author: CodyJasonBennett

packages/fiber/src/core/events.ts

@@ -531,63 +531,3 @@ export function createEvents(store: UseBoundStore<RootState>) {
 
   return { handlePointer }
 }
-
-const DOM_EVENTS = {
-  onClick: ['click', false],
-  onContextMenu: ['contextmenu', false],
-  onDoubleClick: ['dblclick', false],
-  onWheel: ['wheel', true],
-  onPointerDown: ['pointerdown', true],
-  onPointerUp: ['pointerup', true],
-  onPointerLeave: ['pointerleave', true],
-  onPointerMove: ['pointermove', true],
-  onPointerCancel: ['pointercancel', true],
-  onLostPointerCapture: ['lostpointercapture', true],
-} as const
-
-/** Default R3F event manager for web */
-export function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement> {
-  const { handlePointer } = createEvents(store)
-
-  return {
-    priority: 1,
-    enabled: true,
-    compute(event: DomEvent, state: RootState, previous?: RootState) {
-      // https://github.com/pmndrs/react-three-fiber/pull/782
-      // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
-      state.pointer.set((event.offsetX / state.size.width) * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1)
-      state.raycaster.setFromCamera(state.pointer, state.camera)
-    },
-
-    connected: undefined,
-    handlers: Object.keys(DOM_EVENTS).reduce(
-      (acc, key) => ({ ...acc, [key]: handlePointer(key) }),
-      {},
-    ) as unknown as Events,
-    update: () => {
-      const { events, internal } = store.getState()
-      if (internal.lastEvent?.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current)
-    },
-    connect: (target: HTMLElement) => {
-      const { set, events } = store.getState()
-      events.disconnect?.()
-      set((state) => ({ events: { ...state.events, connected: target } }))
-      Object.entries(events.handlers ?? []).forEach(([name, event]) => {
-        const [eventName, passive] = DOM_EVENTS[name as keyof typeof DOM_EVENTS]
-        target.addEventListener(eventName, event, { passive })
-      })
-    },
-    disconnect: () => {
-      const { set, events } = store.getState()
-      if (events.connected) {
-        Object.entries(events.handlers ?? []).forEach(([name, event]) => {
-          if (events && events.connected instanceof HTMLElement) {
-            const [eventName] = DOM_EVENTS[name as keyof typeof DOM_EVENTS]
-            events.connected.removeEventListener(eventName, event)
-          }
-        })
-        set((state) => ({ events: { ...state.events, connected: undefined } }))
-      }
-    },
-  }
-}

packages/fiber/src/index.tsx

@@ -13,8 +13,9 @@ export type {
   RootState,
 } from './core/store'
 export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events'
-export { createEvents, createPointerEvents as events } from './core/events'
+export { createEvents } from './core/events'
 export type { ObjectMap, Camera } from './core/utils'
 export * from './web/Canvas'
+export { createPointerEvents as events, createPointerEvents } from './web/events'
 export type { GlobalRenderCallback, GlobalEffectType } from './core/loop'
 export * from './core'

packages/fiber/src/native.tsx

@@ -13,9 +13,11 @@ export type {
   RootState,
 } from './core/store'
 export type { ThreeEvent, Events, EventManager, ComputeFunction } from './core/events'
-export { createEvents, createPointerEvents as events } from './core/events'
+export { createEvents } from './core/events'
 export type { ObjectMap, Camera } from './core/utils'
 export * from './native/Canvas'
+export { createTouchEvents as events } from './native/events'
+export { createPointerEvents } from './web/events'
 export type { GlobalRenderCallback, GlobalEffectType } from './core/loop'
 export * from './core'
 

packages/fiber/src/native/Canvas.tsx

@@ -15,7 +15,7 @@ import { ExpoWebGLRenderingContext, GLView } from 'expo-gl'
 import { useContextBridge, FiberProvider } from 'its-fine'
 import { SetBlock, Block, ErrorBoundary, useMutableCallback } from '../core/utils'
 import { extend, createRoot, unmountComponentAtNode, RenderProps, ReconcilerRoot } from '../core'
-import { createPointerEvents } from '../core/events'
+import { createPointerEvents } from '../web/events'
 import { RootState, Size } from '../core/store'
 
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, ViewProps {

packages/fiber/src/native/events.ts

@@ -0,0 +1,71 @@
+import { UseBoundStore } from 'zustand'
+import { RootState } from '../core/store'
+import { createEvents, DomEvent, EventManager, Events } from '../core/events'
+import { type GestureResponderEvent, PanResponder } from 'react-native'
+
+/** Default R3F event manager for react-native */
+export function createTouchEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement> {
+  const { handlePointer } = createEvents(store)
+
+  const handleTouch = (event: GestureResponderEvent, name: string): true => {
+    event.persist()
+
+    // Apply offset
+    ;(event as any).nativeEvent.offsetX = event.nativeEvent.locationX
+    ;(event as any).nativeEvent.offsetY = event.nativeEvent.locationY
+
+    // Emulate DOM event
+    const callback = handlePointer(name)
+    callback(event.nativeEvent as any)
+
+    return true
+  }
+
+  const responder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponderCapture: () => true,
+    onPanResponderTerminationRequest: () => true,
+    onStartShouldSetPanResponderCapture: (e) => handleTouch(e, 'onPointerCapture'),
+    onPanResponderStart: (e) => handleTouch(e, 'onPointerDown'),
+    onPanResponderMove: (e) => handleTouch(e, 'onPointerMove'),
+    onPanResponderEnd: (e, state) => {
+      handleTouch(e, 'onPointerUp')
+      if (Math.hypot(state.dx, state.dy) < 20) handleTouch(e, 'onClick')
+    },
+    onPanResponderRelease: (e) => handleTouch(e, 'onPointerLeave'),
+    onPanResponderTerminate: (e) => handleTouch(e, 'onLostPointerCapture'),
+    onPanResponderReject: (e) => handleTouch(e, 'onLostPointerCapture'),
+  })
+
+  return {
+    priority: 1,
+    enabled: true,
+    compute(event: DomEvent, state: RootState, previous?: RootState) {
+      // https://github.com/pmndrs/react-three-fiber/pull/782
+      // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+      state.pointer.set((event.offsetX / state.size.width) * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1)
+      state.raycaster.setFromCamera(state.pointer, state.camera)
+    },
+
+    connected: undefined,
+    handlers: responder.panHandlers as unknown as Events,
+    update: () => {
+      const { events, internal } = store.getState()
+      if (internal.lastEvent?.current && events.handlers) {
+        handlePointer('onPointerMove')(internal.lastEvent.current)
+      }
+    },
+    connect: () => {
+      const { set, events } = store.getState()
+      events.disconnect?.()
+
+      set((state) => ({ events: { ...state.events, connected: true } }))
+    },
+    disconnect: () => {
+      const { set } = store.getState()
+
+      set((state) => ({ events: { ...state.events, connected: false } }))
+    },
+  }
+}

packages/fiber/src/web/events.ts

@@ -0,0 +1,63 @@
+import { UseBoundStore } from 'zustand'
+import { RootState } from '../core/store'
+import { EventManager, Events, createEvents, DomEvent } from '../core/events'
+
+const DOM_EVENTS = {
+  onClick: ['click', false],
+  onContextMenu: ['contextmenu', false],
+  onDoubleClick: ['dblclick', false],
+  onWheel: ['wheel', true],
+  onPointerDown: ['pointerdown', true],
+  onPointerUp: ['pointerup', true],
+  onPointerLeave: ['pointerleave', true],
+  onPointerMove: ['pointermove', true],
+  onPointerCancel: ['pointercancel', true],
+  onLostPointerCapture: ['lostpointercapture', true],
+} as const
+
+/** Default R3F event manager for web */
+export function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement> {
+  const { handlePointer } = createEvents(store)
+
+  return {
+    priority: 1,
+    enabled: true,
+    compute(event: DomEvent, state: RootState, previous?: RootState) {
+      // https://github.com/pmndrs/react-three-fiber/pull/782
+      // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
+      state.pointer.set((event.offsetX / state.size.width) * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1)
+      state.raycaster.setFromCamera(state.pointer, state.camera)
+    },
+
+    connected: undefined,
+    handlers: Object.keys(DOM_EVENTS).reduce(
+      (acc, key) => ({ ...acc, [key]: handlePointer(key) }),
+      {},
+    ) as unknown as Events,
+    update: () => {
+      const { events, internal } = store.getState()
+      if (internal.lastEvent?.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current)
+    },
+    connect: (target: HTMLElement) => {
+      const { set, events } = store.getState()
+      events.disconnect?.()
+      set((state) => ({ events: { ...state.events, connected: target } }))
+      Object.entries(events.handlers ?? []).forEach(([name, event]) => {
+        const [eventName, passive] = DOM_EVENTS[name as keyof typeof DOM_EVENTS]
+        target.addEventListener(eventName, event, { passive })
+      })
+    },
+    disconnect: () => {
+      const { set, events } = store.getState()
+      if (events.connected) {
+        Object.entries(events.handlers ?? []).forEach(([name, event]) => {
+          if (events && events.connected instanceof HTMLElement) {
+            const [eventName] = DOM_EVENTS[name as keyof typeof DOM_EVENTS]
+            events.connected.removeEventListener(eventName, event)
+          }
+        })
+        set((state) => ({ events: { ...state.events, connected: undefined } }))
+      }
+    },
+  }
+}