feat: eventsource and eventprefix on the canvas component

pmndrs · Aug 22, 2022 · fbce5f9 · fbce5f9
1 parent 09ea22a
commit fbce5f9
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/docs/API/canvas.mdx b/docs/API/canvas.mdx
@@ -37,6 +37,8 @@ const App = () => (
 | legacy          | Enables THREE.ColorManagement.legacyMode in three r139 or later                                                                                   | `false`                                                  |
 | linear          | Switch off automatic sRGB encoding and gamma correction                                                                                           | `false`                                                  |
 | events          | Configuration for the event manager, as a function of state                                                                                       | `import { events } from "@react-three/fiber"`            |
+| eventSource     | The source where events are being subscribed to                                                                                                   | `gl.domElement.parentNode`                               |
+| eventPrefix     | The event prefix that is cast into canvas pointer x/y events                                                                                      | `offset`                                                 |
 | flat            | Use `THREE.NoToneMapping` instead of `THREE.ACESFilmicToneMapping`                                                                                | `false`                                                  |
 | onCreated       | Callback after the canvas has rendered (but not yet committed)                                                                                    | `(state) => {}`                                          |
 | onPointerMissed | Response for pointer clicks that have missed any target                                                                                           | `(event) => {}`                                          |

diff --git a/packages/fiber/src/web/Canvas.tsx b/packages/fiber/src/web/Canvas.tsx
@@ -5,6 +5,7 @@ import type { Options as ResizeOptions } from 'react-use-measure'
 import { SetBlock, Block, ErrorBoundary, useMutableCallback, useIsomorphicLayoutEffect } from '../core/utils'
 import { ReconcilerRoot, extend, createRoot, unmountComponentAtNode, RenderProps } from '../core'
 import { createPointerEvents } from './events'
+import { DomEvent } from '../core/events'
 
 export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode
@@ -15,6 +16,10 @@ export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, Rea
    * @see https://github.com/pmndrs/react-use-measure#api
    */
   resize?: ResizeOptions
+  /** The target where events are being subscribed to, default: the div that wraps canvas */
+  eventSource?: HTMLElement
+  /** The event prefix that is cast into canvas pointer x/y events, default: "offset" */
+  eventPrefix?: 'offset' | 'client' | 'page' | 'layer' | 'screen'
 }
 
 /**
@@ -29,6 +34,8 @@ export const Canvas = /*#__PURE__*/ React.forwardRef<HTMLCanvasElement, Props>(f
     style,
     gl,
     events = createPointerEvents,
+    eventSource,
+    eventPrefix,
     shadows,
     linear,
     flat,
@@ -86,7 +93,20 @@ export const Canvas = /*#__PURE__*/ React.forwardRef<HTMLCanvasElement, Props>(f
       // Pass mutable reference to onPointerMissed so it's free to update
       onPointerMissed: (...args) => handlePointerMissed.current?.(...args),
       onCreated: (state) => {
-        state.events.connect?.(divRef.current)
+        // Connect to event source
+        state.events.connect?.(eventSource ? eventSource : divRef.current)
+        // Set up compute function
+        if (eventPrefix) {
+          state.setEvents({
+            compute: (event, state) => {
+              const x = event[(eventPrefix + 'X') as keyof DomEvent] as number
+              const y = event[(eventPrefix + 'Y') as keyof DomEvent] as number
+              state.pointer.set((x / state.size.width) * 2 - 1, -(y / state.size.height) * 2 + 1)
+              state.raycaster.setFromCamera(state.pointer, state.camera)
+            },
+          })
+        }
+        // Call onCreated callback
         onCreated?.(state)
       },
     })