refactor: update type imports and event handling in TresCanvas

- Replaced the Camera type with TresCamera in TresCanvasProps for better type specificity.
- Cleaned up imports in TresCanvas.vue by removing unused imports.
- Updated event handling in useEventManager to use pointerEventsMap for onClick, with a TODO for future type improvements.
- Modified handlers in LocalState to accept both PointerEventType and string for enhanced flexibility.
- Adjusted deregistration method in doRemoveDeregister to use context.events for consistency.

src/components/TresCanvas.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type {
-  Camera,
   ColorSpace,
   ShadowMapType,
   ToneMapping,
@@ -9,7 +8,7 @@ import type {
 } from 'three'
 import type { App, Ref } from 'vue'
 import type { RendererPresetsType } from '../composables/useRenderer/const'
-import type { TresObject, TresPointerEvent, TresScene } from '../types/'
+import type { TresCamera, TresObject, TresPointerEvent, TresScene } from '../types/'
 import { PerspectiveCamera, Scene } from 'three'
 import * as THREE from 'three'
 
@@ -36,7 +35,7 @@ import {
 import { extend } from '../core/catalogue'
 import { nodeOps } from '../core/nodeOps'
 
-import { disposeObject3D, kebabToCamel } from '../utils/'
+import { disposeObject3D } from '../utils/'
 import { registerTresDevtools } from '../devtools'
 import { whenever } from '@vueuse/core'
 
@@ -54,7 +53,7 @@ export interface TresCanvasProps
   dpr?: number | [number, number]
 
   // required by useTresContextProvider
-  camera?: Camera
+  camera?: TresCamera
   preset?: RendererPresetsType
   windowSize?: boolean
 
@@ -243,13 +242,6 @@ onMounted(() => {
     emit('render', renderer)
   })
 
-  context.value.eventManager?.onEvent(({ type, event, intersection }) => {
-    emit(
-      kebabToCamel(type) as any, // typescript doesn't know that kebabToCamel(type) is a valid key of PointerEmits
-      { type, event, intersection },
-    )
-  })
-
   // HMR support
   if (import.meta.hot && context.value) { import.meta.hot.on('vite:afterUpdate', () => handleHMR(context.value as TresContext)) }
 })

src/composables/useEventManager/index.ts

@@ -55,7 +55,8 @@ export function useEventManager({
     Object.entries(object.__tres?.handlers ?? {}).forEach(([event, handler]) => {
       object.addEventListener(pointerEventsMap[event as keyof typeof pointerEventsMap], handler)
       if (event === 'onPointerMissed') {
-        voidObject.addEventListener('click', handler)
+        // @ts-expect-error - TODO: fix this eventually when I understand the types better
+        voidObject.addEventListener(pointerEventsMap.onClick, handler)
       }
     })
   }

src/types/index.ts

@@ -53,7 +53,7 @@ export interface LocalState {
   type: string
   eventCount: number
   root: TresContext
-  handlers: Record<PointerEventType, EventListener>
+  handlers: Record<PointerEventType | string, EventListener>
   memoizedProps: { [key: string]: any }
   // NOTE:
   // LocalState holds information about the parent/child relationship

src/utils/index.ts

@@ -570,7 +570,7 @@ export function doRemoveDeregister(node: TresObject, context: TresContext) {
       context.camera.deregisterCamera(child)
     }
     // deregisterAtPointerEventHandlerIfRequired?.(child as TresObject)
-    context.eventManager?.deregisterPointerMissedObject(child)
+    context.events?.deregisterObject(child)
   })
 
   // NOTE: Deregister `node`