From e6367b434916a67e842984bebb8b223bca524b4a Mon Sep 17 00:00:00 2001
From: Bela Bohlender <bela@bohlender.email>
Date: Fri, 5 Jul 2024 23:11:36 +0200
Subject: [PATCH] fix uikit vanilla event types

---
 docs/getting-started/vanilla.md     |  9 ++++++++-
 examples/vanilla/index.ts           | 24 ++++++++++++++++++++++--
 packages/uikit/src/vanilla/utils.ts |  4 +++-
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/docs/getting-started/vanilla.md b/docs/getting-started/vanilla.md
index 751af77f..a3986f48 100644
--- a/docs/getting-started/vanilla.md
+++ b/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.
diff --git a/examples/vanilla/index.ts b/examples/vanilla/index.ts
index de12bd74..4e63b1e9 100644
--- a/examples/vanilla/index.ts
+++ b/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,
diff --git a/packages/uikit/src/vanilla/utils.ts b/packages/uikit/src/vanilla/utils.ts
index 6d40775d..10ae2f23 100644
--- a/packages/uikit/src/vanilla/utils.ts
+++ b/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]
 }