chore: type issues (#663)

* fix: fix some internal types

* chore: fix linters

* fix: typescript issues on event manager

Author: alvarosabu

playground/components.d.ts

@@ -9,9 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     AkuAku: typeof import('./src/components/AkuAku.vue')['default']
     BlenderCube: typeof import('./src/components/BlenderCube.vue')['default']
-<<<<<<< HEAD
-    DynamicModel: typeof import('./src/components/DynamicModel.vue')['default']
-=======
     Box: typeof import('./src/components/Box.vue')['default']
     CameraOperator: typeof import('./src/components/CameraOperator.vue')['default']
     Cameras: typeof import('./src/components/Cameras.vue')['default']
@@ -23,7 +20,6 @@ declare module 'vue' {
     EventsPropogation: typeof import('./src/components/EventsPropogation.vue')['default']
     FBXModels: typeof import('./src/components/FBXModels.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
->>>>>>> v4
     GraphPane: typeof import('./src/components/GraphPane.vue')['default']
     LocalOrbitControls: typeof import('./src/components/LocalOrbitControls.vue')['default']
     RenderingLogger: typeof import('./src/components/RenderingLogger.vue')['default']

src/components/TresCanvas.vue

@@ -38,7 +38,7 @@ import { registerTresDevtools } from '../devtools'
 import { disposeObject3D } from '../utils/'
 
 import type { RendererPresetsType } from '../composables/useRenderer/const'
-import type { TresCamera, TresObject } from '../types/'
+import type { TresCamera, TresObject, TresScene } from '../types/'
 
 export interface TresCanvasProps
   extends Omit<WebGLRendererParameters, 'canvas'> {
@@ -105,7 +105,7 @@ const canvas = ref<HTMLCanvasElement>()
  renderer uses it to mount the app nodes. This happens before `useTresContextProvider` is called.
  The custom renderer requires `scene` to be editable (not readonly).
 */
-const scene = shallowRef(new Scene())
+const scene = shallowRef<TresScene | Scene>(new Scene())
 
 const { resume } = useRenderLoop()
 
@@ -136,34 +136,17 @@ const mountCustomRenderer = (context: TresContext) => {
 }
 
 const dispose = (context: TresContext, force = false) => {
-  disposeObject3D(context.scene.value)
+  disposeObject3D(context.scene.value as unknown as TresObject)
   if (force) {
     context.renderer.value.dispose()
     context.renderer.value.renderLists.dispose()
     context.renderer.value.forceContextLoss()
   }
-  scene.value.__tres = {
+  (scene.value as TresScene).__tres = {
     root: context,
   }
   mountCustomRenderer(context)
   resume()
-  /* disposeObject3D(scene.value) */
-  /*  scene.value.children.forEach((child) => {
-    child.removeFromParent()
-    disposeObject3D(child)
-  })
-  context.scene.value.children.forEach((child) => {
-    child.removeFromParent()
-    disposeObject3D(child)
-  }) */
-  /* console.log('disposing', scene.value.children)
-  if (force) {
-    context.renderer.value.dispose()
-    context.renderer.value.renderLists.dispose()
-    context.renderer.value.forceContextLoss()
-  }
-  mountCustomRenderer(context)
-  resume() */
 }
 
 const disableRender = computed(() => props.disableRender)
@@ -176,7 +159,7 @@ onMounted(() => {
   const existingCanvas = canvas as Ref<HTMLCanvasElement>
 
   context.value = useTresContextProvider({
-    scene: scene.value,
+    scene: scene.value as TresScene,
     canvas: existingCanvas,
     windowSize: props.windowSize ?? false,
     disableRender: disableRender.value ?? false,

src/composables/usePointerEventHandler/index.ts

@@ -1,5 +1,6 @@
 import type { Intersection, Object3D, Object3DEventMap } from 'three'
 import { computed, reactive, ref } from 'vue'
+import type { TresObject } from 'src/types'
 import { uniqueBy } from '../../utils'
 import { useRaycaster } from '../useRaycaster'
 
@@ -27,26 +28,26 @@ export const usePointerEventHandler = (
 
   const blockingObjects = ref(new Set<Object3D>())
 
-  const registerBlockingObject = (object: Object3D) => {
-    blockingObjects.value.add(object)
+  const registerBlockingObject = (object: TresObject) => {
+    blockingObjects.value.add(object as Object3D)
   }
 
-  const deregisterBlockingObject = (object: Object3D) => {
-    blockingObjects.value.delete(object)
+  const deregisterBlockingObject = (object: TresObject) => {
+    blockingObjects.value.delete(object as Object3D)
   }
 
-  const deregisterObject = (object: Object3D) => {
-    Object.values(objectsWithEventListeners).forEach(map => map.delete(object))
+  const deregisterObject = (object: TresObject) => {
+    Object.values(objectsWithEventListeners).forEach(map => map.delete(object as Object3D))
     deregisterBlockingObject(object)
   }
 
-  const registerObject = (object: Object3D & EventProps) => {
+  const registerObject = (object: TresObject & EventProps) => {
     const { onClick, onPointerMove, onPointerEnter, onPointerLeave } = object
 
-    if (onClick) { objectsWithEventListeners.click.set(object, onClick) }
-    if (onPointerMove) { objectsWithEventListeners.pointerMove.set(object, onPointerMove) }
-    if (onPointerEnter) { objectsWithEventListeners.pointerEnter.set(object, onPointerEnter) }
-    if (onPointerLeave) { objectsWithEventListeners.pointerLeave.set(object, onPointerLeave) }
+    if (onClick) { objectsWithEventListeners.click.set(object as Object3D, onClick) }
+    if (onPointerMove) { objectsWithEventListeners.pointerMove.set(object as Object3D, onPointerMove) }
+    if (onPointerEnter) { objectsWithEventListeners.pointerEnter.set(object as Object3D, onPointerEnter) }
+    if (onPointerLeave) { objectsWithEventListeners.pointerLeave.set(object as Object3D, onPointerLeave) }
   }
 
   const objectsToWatch = computed(() =>
@@ -70,7 +71,7 @@ export const usePointerEventHandler = (
   const { onClick, onPointerMove } = useRaycaster(objectsToWatch, ctx)
 
   onClick(({ intersects, event }) => {
-    if (intersects.length) { objectsWithEventListeners.click.get(intersects[0].object)?.(intersects[0], event) }
+    if (intersects.length) { objectsWithEventListeners.click.get(intersects[0].object)?.(intersects[0], event as PointerEvent) }
   })
 
   let previouslyIntersectedObject: Object3D | null
@@ -80,12 +81,12 @@ export const usePointerEventHandler = (
 
     const { pointerLeave, pointerEnter, pointerMove } = objectsWithEventListeners
 
-    if (previouslyIntersectedObject && previouslyIntersectedObject !== firstObject) { pointerLeave.get(previouslyIntersectedObject)?.(previouslyIntersectedObject, event) }
+    if (previouslyIntersectedObject && previouslyIntersectedObject !== firstObject) { pointerLeave.get(previouslyIntersectedObject)?.(previouslyIntersectedObject, event as PointerEvent) }
 
     if (firstObject) {
-      if (previouslyIntersectedObject !== firstObject) { pointerEnter.get(firstObject)?.(intersects[0], event) }
+      if (previouslyIntersectedObject !== firstObject) { pointerEnter.get(firstObject)?.(intersects[0], event as PointerEvent) }
 
-      pointerMove.get(firstObject)?.(intersects[0], event)
+      pointerMove.get(firstObject)?.(intersects[0], event as PointerEvent)
     }
 
     previouslyIntersectedObject = firstObject || null

src/composables/useRaycaster/index.ts

@@ -1,35 +1,20 @@
 import { Vector2, Vector3 } from 'three'
-import type { Intersection, Object3D, Object3DEventMap } from 'three'
+import type { Intersection, Object3D } from 'three'
 import type { Ref, ShallowRef } from 'vue'
 import { computed, onUnmounted, shallowRef } from 'vue'
 import type { EventHook } from '@vueuse/core'
 import { createEventHook, useElementBounding, usePointer } from '@vueuse/core'
 
+import type { DomEvent, TresCamera, TresEvent } from 'src/types'
 import type { TresContext } from '../useTresContextProvider'
 
-export type Intersects = Intersection<Object3D<Object3DEventMap>>[]
-interface PointerMoveEventPayload {
-  intersects?: Intersects
-  event: PointerEvent
-}
-
-interface PointerClickEventPayload {
-  intersects: Intersects
-  event: PointerEvent
-}
-
-interface WheelEventPayload {
-  intersects: Intersects
-  event: WheelEvent
-}
-
 export const useRaycaster = (
   objects: Ref<Object3D[]>,
   ctx: TresContext,
 ) => {
   // having a separate computed makes useElementBounding work
   const canvas = computed(() => ctx.renderer.value.domElement as HTMLCanvasElement)
-  const intersects: ShallowRef<Intersects[]> = shallowRef([])
+  const intersects: ShallowRef<Intersection[]> = shallowRef([])
   const { x, y } = usePointer({ target: canvas })
   let delta = 0
 
@@ -53,7 +38,7 @@ export const useRaycaster = (
     return intersects.value
   }
 
-  const getIntersects = (event?: PointerEvent | MouseEvent | WheelEvent) => {
+  const getIntersects = (event?: DomEvent) => {
     const pointerPosition = getRelativePointerPosition({
       x: event?.clientX ?? x.value,
       y: event?.clientY ?? y.value,
@@ -63,14 +48,14 @@ export const useRaycaster = (
     return getIntersectsByRelativePointerPosition(pointerPosition) || []
   }
 
-  const eventHookClick = createEventHook<PointerClickEventPayload>()
-  const eventHookDblClick = createEventHook<PointerClickEventPayload>()
-  const eventHookPointerMove = createEventHook<PointerMoveEventPayload>()
-  const eventHookPointerUp = createEventHook<PointerMoveEventPayload>()
-  const eventHookPointerDown = createEventHook<PointerMoveEventPayload>()
-  const eventHookPointerMissed = createEventHook<PointerClickEventPayload>()
-  const eventHookContextMenu = createEventHook<PointerClickEventPayload>()
-  const eventHookWheel = createEventHook<WheelEventPayload>()
+  const eventHookClick = createEventHook<TresEvent>()
+  const eventHookDblClick = createEventHook<TresEvent>()
+  const eventHookPointerMove = createEventHook<TresEvent>()
+  const eventHookPointerUp = createEventHook<TresEvent>()
+  const eventHookPointerDown = createEventHook<TresEvent>()
+  const eventHookPointerMissed = createEventHook<TresEvent>()
+  const eventHookContextMenu = createEventHook<TresEvent>()
+  const eventHookWheel = createEventHook<TresEvent>()
 
   /* ({
     ...DomEvent                   // All the original event data
@@ -92,19 +77,19 @@ export const useRaycaster = (
 
     for (const property in event) {
       // Copy all non-function properties
-      if (typeof property !== 'function') { mouseEventProperties[property] = event[property] }
+      if (typeof property !== 'function') { mouseEventProperties[property] = (event as Record<string, any>)[property] }
     }
     return mouseEventProperties
   }
 
   const triggerEventHook = (eventHook: EventHook, event: PointerEvent | MouseEvent | WheelEvent) => {
     const eventProperties = copyMouseEventProperties(event)
-
+    const unprojectedPoint = new Vector3(event?.clientX, event?.clientY, 0).unproject(ctx.camera?.value as TresCamera)
     eventHook.trigger({
       ...eventProperties,
       intersections: intersects.value,
       // The unprojectedPoint is wrong, math needs to be fixed
-      unprojectedPoint: new Vector3(event?.clientX, event?.clientY, 0).unproject(ctx.camera?.value),
+      unprojectedPoint,
       ray: ctx.raycaster?.value.ray,
       camera: ctx.camera?.value,
       sourceEvent: event,
@@ -127,8 +112,8 @@ export const useRaycaster = (
 
   // a click event is fired whenever a pointerdown happened after pointerup on the same object
   let mouseDownObject: Object3D | undefined
-  let mouseDownPosition
-  let mouseUpPosition
+  let mouseDownPosition: Vector2
+  let mouseUpPosition: Vector2
 
   const onPointerDown = (event: PointerEvent) => {
     mouseDownObject = intersects.value[0]?.object
@@ -160,7 +145,7 @@ export const useRaycaster = (
       )
 
       // Compute the distance between the mouse down and mouse up events
-      delta = mouseDownPosition.distanceTo(mouseUpPosition)
+      delta = mouseDownPosition?.distanceTo(mouseUpPosition)
 
       if (event.button === 0) {
         // Left click
@@ -214,14 +199,14 @@ export const useRaycaster = (
 
   return {
     intersects,
-    onClick: (fn: (value: PointerClickEventPayload) => void) => eventHookClick.on(fn).off,
-    onDblClick: (fn: (value: PointerClickEventPayload) => void) => eventHookDblClick.on(fn).off,
-    onContextMenu: (fn: (value: PointerClickEventPayload) => void) => eventHookContextMenu.on(fn).off,
-    onPointerMove: (fn: (value: PointerMoveEventPayload) => void) => eventHookPointerMove.on(fn).off,
-    onPointerUp: (fn: (value: PointerMoveEventPayload) => void) => eventHookPointerUp.on(fn).off,
-    onPointerDown: (fn: (value: PointerMoveEventPayload) => void) => eventHookPointerDown.on(fn).off,
-    onPointerMissed: (fn: (value: PointerClickEventPayload) => void) => eventHookPointerMissed.on(fn).off,
-    onWheel: (fn: (value: WheelEventPayload) => void) => eventHookWheel.on(fn).off,
+    onClick: (fn: (value: TresEvent) => void) => eventHookClick.on(fn).off,
+    onDblClick: (fn: (value: TresEvent) => void) => eventHookDblClick.on(fn).off,
+    onContextMenu: (fn: (value: TresEvent) => void) => eventHookContextMenu.on(fn).off,
+    onPointerMove: (fn: (value: TresEvent) => void) => eventHookPointerMove.on(fn).off,
+    onPointerUp: (fn: (value: TresEvent) => void) => eventHookPointerUp.on(fn).off,
+    onPointerDown: (fn: (value: TresEvent) => void) => eventHookPointerDown.on(fn).off,
+    onPointerMissed: (fn: (value: TresEvent) => void) => eventHookPointerMissed.on(fn).off,
+    onWheel: (fn: (value: TresEvent) => void) => eventHookWheel.on(fn).off,
     forceUpdate,
   }
 }

src/composables/useRenderer/index.ts

@@ -10,7 +10,7 @@ import {
 
 import type { ColorSpace, Scene, ShadowMapType, ToneMapping, WebGLRendererParameters } from 'three'
 import { useLogger } from '../useLogger'
-import type { TresColor } from '../../types'
+import type { EmitEventFn, TresColor } from '../../types'
 import { useRenderLoop } from '../useRenderLoop'
 import { normalizeColor } from '../../utils/normalize'
 
@@ -108,7 +108,7 @@ export function useRenderer(
     canvas: MaybeRef<HTMLCanvasElement>
     scene: Scene
     options: UseRendererOptions
-    emit: (event: string, ...args: any[]) => void
+    emit: EmitEventFn
     contextParts: Pick<TresContext, 'sizes' | 'camera' | 'render'> & { invalidate: () => void, advance: () => void }
     disableRender: MaybeRefOrGetter<boolean>
   },

src/composables/useTresContextProvider/index.ts

@@ -1,6 +1,6 @@
 import { useFps, useMemory, useRafFn } from '@vueuse/core'
 import { computed, inject, onUnmounted, provide, readonly, ref, shallowRef } from 'vue'
-import type { Camera, EventDispatcher, Object3D, WebGLRenderer } from 'three'
+import type { Camera, EventDispatcher, WebGLRenderer } from 'three'
 import { Raycaster } from 'three'
 import type { ComputedRef, DeepReadonly, MaybeRef, MaybeRefOrGetter, Ref, ShallowRef } from 'vue'
 import { calculateMemoryUsage } from '../../utils/perf'
@@ -9,7 +9,7 @@ import type { UseRendererOptions } from '../useRenderer'
 import { useRenderer } from '../useRenderer'
 import { extend } from '../../core/catalogue'
 import { useLogger } from '../useLogger'
-import type { TresScene } from '../../types'
+import type { EmitEventFn, TresObject, TresScene } from '../../types'
 import type { EventProps } from '../usePointerEventHandler'
 import type { TresEventManager } from '../useTresEventManager'
 import useSizes, { type SizesType } from '../useSizes'
@@ -69,14 +69,14 @@ export interface TresContext {
   registerCamera: (camera: Camera) => void
   setCameraActive: (cameraOrUuid: Camera | string) => void
   deregisterCamera: (camera: Camera) => void
-  eventManager: TresEventManager
+  eventManager?: TresEventManager
   // Events
   // Temporaly add the methods to the context, this should be handled later by the EventManager state on the context https://github.com/Tresjs/tres/issues/515
   // When thats done maybe we can short the names of the methods since the parent will give the context.
-  registerObjectAtPointerEventHandler: (object: Object3D & EventProps) => void
-  deregisterObjectAtPointerEventHandler: (object: Object3D) => void
-  registerBlockingObjectAtPointerEventHandler: (object: Object3D) => void
-  deregisterBlockingObjectAtPointerEventHandler: (object: Object3D) => void
+  registerObjectAtPointerEventHandler?: (object: TresObject & EventProps) => void
+  deregisterObjectAtPointerEventHandler?: (object: TresObject) => void
+  registerBlockingObjectAtPointerEventHandler?: (object: TresObject) => void
+  deregisterBlockingObjectAtPointerEventHandler?: (object: TresObject) => void
 }
 
 export function useTresContextProvider({
@@ -92,7 +92,8 @@ export function useTresContextProvider({
   windowSize: MaybeRefOrGetter<boolean>
   disableRender: MaybeRefOrGetter<boolean>
   rendererOptions: UseRendererOptions
-  emit: (event: string, ...args: any[]) => void
+  emit: EmitEventFn
+
 }): TresContext {
   const { logWarning } = useLogger()