Extended Click Event Handlers

src/canvas.tsx

@@ -115,6 +115,8 @@ export interface UseCanvasProps extends CanvasProps {
 
 export type DomEventHandlers = {
   onClick(e: any): void
+  onContextMenu(e: any): void
+  onDoubleClick(e: any): void
   onWheel(e: any): void
   onPointerDown(e: any): void
   onPointerUp(e: any): void
@@ -486,17 +488,23 @@ export const useCanvas = (props: UseCanvasProps): DomEventHandlers => {
         const eventObject = data.eventObject
         const handlers = (eventObject as any).__handlers
         if (handlers && handlers[name]) {
-          // Forward all events back to their respective handlers with the exception of click,
-          // which must must the initial target
-          if (name !== 'click' || state.current.initialHits.includes(eventObject)) handlers[name](data)
+          // Forward all events back to their respective handlers with the exception of click events,
+          // which must use the initial target
+          if (
+            (name !== 'click' && name !== 'contextMenu' && name !== 'doubleClick') ||
+            state.current.initialHits.includes(eventObject)
+          ) {
+            handlers[name](data)
+          }
         }
       })
       // If a click yields no results, pass it back to the user as a miss
       if (name === 'pointerDown') {
         state.current.initialClick = [event.clientX, event.clientY]
         state.current.initialHits = hits.map((hit) => hit.eventObject)
       }
-      if (name === 'click' && !hits.length && onPointerMissed) {
+
+      if ((name === 'click' || name === 'contextMenu' || name === 'doubleClick') && !hits.length && onPointerMissed) {
         if (calculateDistance(event) <= 2) onPointerMissed()
       }
     },
@@ -506,6 +514,8 @@ export const useCanvas = (props: UseCanvasProps): DomEventHandlers => {
   useMemo(() => {
     state.current.events = {
       onClick: handlePointer('click'),
+      onContextMenu: handlePointer('contextMenu'),
+      onDoubleClick: handlePointer('doubleClick'),
       onWheel: handlePointer('wheel'),
       onPointerDown: handlePointer('pointerDown'),
       onPointerUp: handlePointer('pointerUp'),

src/reconciler.tsx

@@ -113,9 +113,9 @@ export function applyProps(instance: any, newProps: any, oldProps: any = {}, acc
     // Event-handlers ...
     //   are functions, that
     //   start with "on", and
-    //   contain the name "pointer", or "wheel", or "click"
+    //   contain the name "Pointer", "Click", "ContextMenu", or "Wheel"
     if (is.fun(newProps[key]) && key.startsWith('on')) {
-      return key.includes('Pointer') || key.includes('Click') || key.includes('Wheel')
+      return key.includes('Pointer') || key.includes('Click') || key.includes('ContextMenu') || key.includes('Wheel')
     }
   })
   const leftOvers = accumulative ? Object.keys(oldProps).filter((key) => newProps[key] === void 0) : []

src/three-types.ts

@@ -22,6 +22,8 @@ export declare namespace ReactThreeFiber {
 
   export type EventHandlers = {
     onClick?: (event: MouseEvent) => void
+    onContextMenu?: (event: MouseEvent) => void
+    onDoubleClick?: (event: MouseEvent) => void
     onPointerUp?: (event: PointerEvent) => void
     onPointerDown?: (event: PointerEvent) => void
     onPointerOver?: (event: PointerEvent) => void