fix(Canvas): backport onPointerMissed fix (#2147)

See #2146

packages/fiber/src/core/hooks.ts

@@ -18,6 +18,8 @@ type Extensions = (loader: THREE.Loader) => void
 type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>
 type ConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy
 type BranchingReturn<T, Parent, Coerced> = ConditionalType<T, Parent, Coerced, T>
+type noop = (...args: any[]) => any
+type PickFunction<T extends noop> = (...args: Parameters<T>) => ReturnType<T>
 
 export type ObjectMap = {
   nodes: { [name: string]: THREE.Object3D }
@@ -31,7 +33,7 @@ export function useStore() {
 }
 
 export function useThree<T = RootState>(
-  selector: StateSelector<RootState, T> = (state) => (state as unknown) as T,
+  selector: StateSelector<RootState, T> = (state) => state as unknown as T,
   equalityFn?: EqualityChecker<T>,
 ) {
   return useStore()(selector, equalityFn)
@@ -91,6 +93,12 @@ function loadingFn<T>(extensions?: Extensions, onProgress?: (event: ProgressEven
   }
 }
 
+export function useMemoizedFn<T extends noop>(fn?: T): PickFunction<T> {
+  const fnRef = React.useRef<T | undefined>(fn)
+  React.useLayoutEffect(() => void (fnRef.current = fn), [fn])
+  return (...args: Parameters<T>) => fnRef.current?.(...args)
+}
+
 export function useLoader<T, U extends string | string[]>(
   Proto: new () => LoaderResult<T>,
   input: U,

packages/fiber/src/web/Canvas.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import mergeRefs from 'react-merge-refs'
 import useMeasure, { Options as ResizeOptions } from 'react-use-measure'
-import { render, unmountComponentAtNode, RenderProps } from './index'
+import { render, unmountComponentAtNode, RenderProps, useMemoizedFn } from './index'
 import { createPointerEvents } from './events'
 import { UseStore } from 'zustand'
 import { RootState } from '../core/store'
@@ -47,6 +47,7 @@ export const Canvas = React.forwardRef<HTMLCanvasElement, Props>(function Canvas
   { children, fallback, tabIndex, resize, id, style, className, events, ...props },
   forwardedRef,
 ) {
+  const onPointerMissed = useMemoizedFn(props.onPointerMissed)
   const [containerRef, { width, height }] = useMeasure({ scroll: true, debounce: { scroll: 50, resize: 0 }, ...resize })
   const canvasRef = React.useRef<HTMLCanvasElement>(null!)
   const [block, setBlock] = React.useState<SetBlock>(false)
@@ -64,10 +65,10 @@ export const Canvas = React.forwardRef<HTMLCanvasElement, Props>(function Canvas
           <React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>
         </ErrorBoundary>,
         canvasRef.current,
-        { ...props, size: { width, height }, events: events || createPointerEvents },
+        { ...props, size: { width, height }, onPointerMissed, events: events || createPointerEvents },
       )
     }
-  }, [width, height, children])
+  }, [width, height, children, onPointerMissed])
 
   useIsomorphicLayoutEffect(() => {
     const container = canvasRef.current