fix uikit vanilla event types

docs/getting-started/vanilla.md

@@ -11,7 +11,14 @@ The vanilla version of uikit allows to build user interfaces with plain Three.js
 The vanilla version of uikit (`@pmndrs/uikit`) is decoupled from react. Therefore features such providing defaults via context is not available. Furthermore, no event system is available out of the box. For interactivity, such as hover effects, developers have to attach their own event system by emitting pointer events to the UI elements:
 
 ```js
-uiElement.dispatchEvent({ type: 'pointerover', target: uiElement, { pointerId: 1 })
+uiElement.dispatchEvent({
+    type: 'pointerover',
+    distance: 0,
+    nativeEvent: {} as any,
+    object: x,
+    point: new Vector3(),
+    pointerId: -1,
+})
 ```
 
 Aside from interactivity and contexts, every feature is available.

examples/vanilla/index.ts

@@ -1,5 +1,6 @@
 import {
   AmbientLight,
+  BaseEvent,
   Intersection,
   Mesh,
   PerspectiveCamera,
@@ -9,7 +10,17 @@ import {
   Vector3,
   WebGLRenderer,
 } from 'three'
-import { reversePainterSortStable, Container, Fullscreen, Image, Text, Svg, Content, Root } from '@pmndrs/uikit'
+import {
+  reversePainterSortStable,
+  Container,
+  Fullscreen,
+  Image,
+  Text,
+  Svg,
+  Content,
+  Root,
+  ThreeEvent,
+} from '@pmndrs/uikit'
 import { Delete } from '@pmndrs/uikit-lucide'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
@@ -72,7 +83,16 @@ const x = new Container({
   justifyContent: 'center',
   onSizeChange: console.log,
 })
-setTimeout(() => x.dispatchEvent({ type: 'pointerover', target: x, pointerId: 1 } as any), 0)
+setTimeout(() => {
+  x.dispatchEvent({
+    type: 'pointerover',
+    distance: 0,
+    nativeEvent: {} as any,
+    object: x,
+    point: new Vector3(),
+    pointerId: -1,
+  })
+}, 0)
 const img = new Image({
   src: 'https://picsum.photos/300/300',
   borderRadius: 1000,

packages/uikit/src/vanilla/utils.ts

@@ -116,5 +116,7 @@ function keyToEventName(key: keyof EventHandlers) {
 }
 
 export type EventMap = Object3DEventMap & {
-  [Key in keyof EventHandlers as Lowercase<Key extends `on${infer K}` ? K : never>]: EventHandlers[Key]
+  [Key in keyof EventHandlers as Lowercase<Key extends `on${infer K}` ? K : never>]-?: Parameters<
+    Exclude<EventHandlers[Key], undefined>
+  >[0]
 }