diff --git a/docs/getting-started/vanilla.md b/docs/getting-started/vanilla.md index 751af77..a3986f4 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 de12bd7..4e63b1e 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 6d40775..10ae2f2 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]: EventHandlers[Key] + [Key in keyof EventHandlers as Lowercase]-?: Parameters< + Exclude + >[0] }