chore: remove old pointer event handler composable (#771)

* chore: update deps

* chore: remove old usePointerEventHandler

* chore(types): fix type issue with intersects

docs/package.json

@@ -12,9 +12,9 @@
     "@tresjs/core": "workspace:^"
   },
   "devDependencies": {
-    "@iconify-json/logos": "^1.1.42",
-    "@iconify-json/mdi": "^1.1.66",
-    "unocss": "^0.60.3",
+    "@iconify-json/logos": "^1.1.43",
+    "@iconify-json/mdi": "^1.1.67",
+    "unocss": "^0.61.3",
     "vite-svg-loader": "^5.1.0"
   }
 }

package.json

@@ -81,8 +81,8 @@
     "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vitest/coverage-c8": "^0.33.0",
-    "@vitest/coverage-v8": "^2.0.1",
-    "@vitest/ui": "^2.0.1",
+    "@vitest/coverage-v8": "^2.0.2",
+    "@vitest/ui": "^2.0.2",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.6.0",
     "eslint-plugin-vue": "^9.27.0",
@@ -109,7 +109,7 @@
     "vite-plugin-require-transform": "^1.0.21",
     "vite-svg-loader": "^5.1.0",
     "vitepress": "1.3.0",
-    "vitest": "^2.0.1",
+    "vitest": "^2.0.2",
     "vue": "^3.4.31",
     "vue-demi": "^0.14.8"
   }

playground/package.json

@@ -11,15 +11,15 @@
   "dependencies": {
     "@tresjs/cientos": "3.9.0",
     "@tresjs/core": "workspace:^",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.4.0"
   },
   "devDependencies": {
     "@tresjs/leches": "0.15.0-next.3",
     "@tweakpane/plugin-essentials": "^0.2.0",
-    "unplugin-auto-import": "^0.17.2",
+    "unplugin-auto-import": "^0.18.0",
     "vite-plugin-glsl": "^1.2.1",
     "vite-plugin-qrcode": "^0.2.3",
-    "vite-plugin-vue-devtools": "7.2.1",
-    "vue-tsc": "^2.0.19"
+    "vite-plugin-vue-devtools": "7.3.5",
+    "vue-tsc": "^2.0.26"
   }
 }

src/composables/index.ts

@@ -6,7 +6,6 @@ export * from './useTexture'
 export * from './useRaycaster'
 export * from './useLogger'
 export * from './useSeek'
-export * from './usePointerEventHandler'
 export * from './useTresContextProvider'
 export * from './useLoop'
 export * from './useTresEventManager'

src/composables/usePointerEventHandler/index.ts

@@ -1,101 +0,0 @@
-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'
-
-import type { TresContext } from '../useTresContextProvider'
-
-type CallbackFn = (intersection: Intersection<Object3D<Object3DEventMap>>, event: PointerEvent) => void
-type CallbackFnPointerLeave = (object: Object3D, event: PointerEvent) => void
-
-export interface EventProps {
-  onClick?: CallbackFn
-  onPointerEnter?: CallbackFn
-  onPointerMove?: CallbackFn
-  onPointerLeave?: CallbackFnPointerLeave
-}
-
-export const usePointerEventHandler = (
-  ctx: TresContext,
-) => {
-  const objectsWithEventListeners = reactive({
-    click: new Map<Object3D<Object3DEventMap>, CallbackFn>(),
-    pointerMove: new Map<Object3D<Object3DEventMap>, CallbackFn>(),
-    pointerEnter: new Map<Object3D<Object3DEventMap>, CallbackFn>(),
-    pointerLeave: new Map<Object3D<Object3DEventMap>, CallbackFnPointerLeave>(),
-  })
-
-  const blockingObjects = ref(new Set<Object3D>())
-
-  const registerBlockingObject = (object: TresObject) => {
-    blockingObjects.value.add(object as Object3D)
-  }
-
-  const deregisterBlockingObject = (object: TresObject) => {
-    blockingObjects.value.delete(object as Object3D)
-  }
-
-  const deregisterObject = (object: TresObject) => {
-    Object.values(objectsWithEventListeners).forEach(map => map.delete(object as Object3D))
-    deregisterBlockingObject(object)
-  }
-
-  const registerObject = (object: TresObject & EventProps) => {
-    const { onClick, onPointerMove, onPointerEnter, onPointerLeave } = object
-
-    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(() =>
-    uniqueBy(
-      [
-        ...Array.from(blockingObjects.value),
-        ...Object.values(objectsWithEventListeners)
-          .map(map => Array.from(map.keys()))
-          .flat(),
-      ],
-      ({ uuid }) => uuid,
-    ),
-  )
-
-  // 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
-  ctx.registerObjectAtPointerEventHandler = registerObject
-  ctx.deregisterObjectAtPointerEventHandler = deregisterObject
-  ctx.registerBlockingObjectAtPointerEventHandler = registerBlockingObject
-  ctx.deregisterBlockingObjectAtPointerEventHandler = deregisterBlockingObject
-
-  const { onClick, onPointerMove } = useRaycaster(objectsToWatch, ctx)
-
-  onClick(({ intersects, event }) => {
-    if (intersects.length) { objectsWithEventListeners.click.get(intersects[0].object)?.(intersects[0], event as PointerEvent) }
-  })
-
-  let previouslyIntersectedObject: Object3D | null
-
-  onPointerMove(({ intersects, event }) => {
-    const firstObject = intersects?.[0]?.object
-
-    const { pointerLeave, pointerEnter, pointerMove } = objectsWithEventListeners
-
-    if (previouslyIntersectedObject && previouslyIntersectedObject !== firstObject) { pointerLeave.get(previouslyIntersectedObject)?.(previouslyIntersectedObject, event as PointerEvent) }
-
-    if (firstObject) {
-      if (previouslyIntersectedObject !== firstObject) { pointerEnter.get(firstObject)?.(intersects[0], event as PointerEvent) }
-
-      pointerMove.get(firstObject)?.(intersects[0], event as PointerEvent)
-    }
-
-    previouslyIntersectedObject = firstObject || null
-  })
-
-  return {
-    registerObject,
-    deregisterObject,
-    registerBlockingObject,
-    deregisterBlockingObject,
-  }
-}

src/composables/useRaycaster/index.ts

@@ -1,15 +1,15 @@
 import { Vector2, Vector3 } from 'three'
-import type { Intersection, Object3D } from 'three'
-import type { Ref, ShallowRef } from 'vue'
+import type { Intersection, Object3D, Object3DEventMap } from 'three'
+import type { 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 { DomEvent, TresCamera, TresEvent, TresInstance } from 'src/types'
 import type { TresContext } from '../useTresContextProvider'
 
 export const useRaycaster = (
-  objectsWithEvents: Ref<Object3D[]>,
+  objectsWithEvents: ShallowRef<TresInstance[]>,
   ctx: TresContext,
 ) => {
   // having a separate computed makes useElementBounding work
@@ -34,7 +34,7 @@ export const useRaycaster = (
 
     ctx.raycaster.value.setFromCamera(new Vector2(x, y), ctx.camera.value)
 
-    intersects.value = ctx.raycaster.value.intersectObjects(objectsWithEvents.value, true)
+    intersects.value = ctx.raycaster.value.intersectObjects(objectsWithEvents.value as Object3D<Object3DEventMap>[], true)
     return intersects.value
   }
 

src/composables/useTresContextProvider/index.ts

@@ -10,7 +10,7 @@ import { useRenderer } from '../useRenderer'
 import { extend } from '../../core/catalogue'
 import { useLogger } from '../useLogger'
 import type { EmitEventFn, TresObject, TresScene } from '../../types'
-import type { EventProps } from '../usePointerEventHandler'
+
 import { type TresEventManager, useTresEventManager } from '../useTresEventManager'
 import useSizes, { type SizesType } from '../useSizes'
 import type { RendererLoop } from '../../core/loop'
@@ -78,7 +78,7 @@ export interface TresContext {
   // 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: TresObject & EventProps) => void
+  registerObjectAtPointerEventHandler?: (object: TresObject) => void
   deregisterObjectAtPointerEventHandler?: (object: TresObject) => void
   registerBlockingObjectAtPointerEventHandler?: (object: TresObject) => void
   deregisterBlockingObjectAtPointerEventHandler?: (object: TresObject) => void

src/composables/useTresEventManager/index.ts

@@ -184,13 +184,13 @@ export function useTresEventManager(
 
   function registerObject(maybeTresObject: unknown) {
     if (is.tresObject(maybeTresObject) && is.object3D(maybeTresObject)) {
-      objectsWithEvents.value.push(maybeTresObject)
+      objectsWithEvents.value.push(maybeTresObject as TresInstance)
     }
   }
 
   function deregisterObject(maybeTresObject: unknown) {
     if (is.tresObject(maybeTresObject) && is.object3D(maybeTresObject)) {
-      const index = objectsWithEvents.value.indexOf(maybeTresObject)
+      const index = objectsWithEvents.value.indexOf(maybeTresObject as TresInstance)
       if (index > -1) {
         objectsWithEvents.value.splice(index, 1)
       }

src/core/nodeOps.ts

@@ -57,7 +57,7 @@ export const nodeOps: (context: TresContext) => RendererOptions<TresObject, Tres
           __tres: () => __tres,
         },
         {
-          object: (object: TresObject, _, primitive: TresPrimitive, setTarget: (nextObject: TresObject) => void) => {
+          object: (object: TresObject, _: unknown, primitive: TresPrimitive, setTarget: (nextObject: TresObject) => void) => {
             setPrimitiveObject(object, primitive, setTarget, { patchProp, remove, insert }, context)
           },
           __tres: (t: LocalState) => { Object.assign(__tres, t) },

src/utils/index.ts

@@ -571,7 +571,7 @@ export function doRemoveDetach(node: TresObject, context: TresContext) {
 export function doRemoveDeregister(node: TresObject, context: TresContext) {
   // TODO: Refactor as `context.deregister`?
   // That would eliminate `context.deregisterCamera`.
-  node.traverse?.((child) => {
+  node.traverse?.((child: TresObject) => {
     context.deregisterCamera(child)
     // deregisterAtPointerEventHandlerIfRequired?.(child as TresObject)
     context.eventManager?.deregisterPointerMissedObject(child)