fix(events): type spread event props (#2608)

packages/fiber/src/core/events.ts

@@ -4,6 +4,7 @@ import { getRootState } from './utils'
 import type { UseBoundStore } from 'zustand'
 import type { Instance } from './renderer'
 import type { RootState } from './store'
+import type { Properties } from '../three-types'
 
 export interface Intersection extends THREE.Intersection {
   /** The event source (the object which registered the handler) */
@@ -34,7 +35,7 @@ export interface IntersectionEvent<TSourceEvent> extends Intersection {
 }
 
 export type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera
-export type ThreeEvent<TEvent> = IntersectionEvent<TEvent>
+export type ThreeEvent<TEvent> = IntersectionEvent<TEvent> & Properties<TEvent>
 export type DomEvent = PointerEvent | MouseEvent | WheelEvent
 
 export type Events = {

packages/fiber/src/core/index.tsx

@@ -32,14 +32,13 @@ import {
 } from './utils'
 import { useStore } from './hooks'
 import { OffscreenCanvas } from 'three'
+import type { Properties } from '../three-types'
 
 const roots = new Map<Element, Root>()
 const { invalidate, advance } = createLoop(roots)
 const { reconciler, applyProps } = createRenderer(roots, getEventPriority)
 const shallowLoose = { objects: 'shallow', strict: false } as EquConfig
 
-type Properties<T> = Pick<T, { [K in keyof T]: T[K] extends (_: any) => any ? never : K }[keyof T]>
-
 type GLProps =
   | Renderer
   | ((canvas: HTMLCanvasElement) => Renderer)

packages/fiber/src/three-types.ts

@@ -2,6 +2,7 @@ import * as THREE from 'three'
 import { EventHandlers } from './core/events'
 import { AttachType } from './core/renderer'
 
+export type Properties<T> = Pick<T, { [K in keyof T]: T[K] extends (_: any) => any ? never : K }[keyof T]>
 export type NonFunctionKeys<T> = { [K in keyof T]-?: T[K] extends Function ? never : K }[keyof T]
 export type Overwrite<T, O> = Omit<T, NonFunctionKeys<O>> & O