fix: use event.pointerId not event.nativeEvent.pointerId

pmndrs · Jun 25, 2024 · bcdaf7c · bcdaf7c
1 parent a2db255
commit bcdaf7c
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 18 deletions.
diff --git a/docs/getting-started/vanilla.md b/docs/getting-started/vanilla.md
@@ -11,7 +11,7 @@ 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, nativeEvent: { pointerId: 1 } })
+uiElement.dispatchEvent({ type: 'pointerover', target: uiElement, { pointerId: 1 })
 ```
 
 Aside from interactivity and contexts, every feature is available.

diff --git a/examples/vanilla/index.ts b/examples/vanilla/index.ts
@@ -46,7 +46,7 @@ const x = new Container({
   justifyContent: 'center',
   onSizeChange: console.log,
 })
-setTimeout(() => x.dispatchEvent({ type: 'pointerover', target: x, nativeEvent: { pointerId: 1 } } as any), 0)
+setTimeout(() => x.dispatchEvent({ type: 'pointerover', target: x, pointerId: 1 } as any), 0)
 const img = new Image({
   src: 'https://picsum.photos/300/300',
   borderRadius: 1000,

diff --git a/packages/uikit/src/active.ts b/packages/uikit/src/active.ts
@@ -31,16 +31,16 @@ export function addActiveHandlers(
     activeSignal.value.length = 0
     return
   }
-  const onLeave = ({ nativeEvent }: ThreeEvent<PointerEvent>) => {
-    activeSignal.value = activeSignal.value.filter((id) => id != nativeEvent.pointerId)
+  const onLeave = ({ pointerId }: ThreeEvent<PointerEvent>) => {
+    activeSignal.value = activeSignal.value.filter((id) => id != pointerId)
     if (activeSignal.value.length > 0) {
       return
     }
     properties?.onActiveChange?.(false)
     style?.onActiveChange?.(false)
   }
-  addHandler('onPointerDown', target, ({ nativeEvent }) => {
-    activeSignal.value = [nativeEvent.pointerId, ...activeSignal.value]
+  addHandler('onPointerDown', target, ({ pointerId }) => {
+    activeSignal.value = [pointerId, ...activeSignal.value]
     if (activeSignal.value.length != 1) {
       return
     }

diff --git a/packages/uikit/src/events.ts b/packages/uikit/src/events.ts
@@ -1,11 +1,11 @@
-import { Intersection, Object3D } from 'three'
+import { Intersection } from 'three'
 
 export type ThreeEvent<TSourceEvent> = Intersection & {
   nativeEvent: TSourceEvent
   defaultPrevented?: boolean
   stopped?: boolean
   stopPropagation?: () => void
-}
+} & (TSourceEvent extends { pointerId: number } ? { pointerId: number } : {})
 
 export type KeyToEvent<K extends keyof EventHandlers> = Parameters<Required<EventHandlers>[K]>[0]
 

diff --git a/packages/uikit/src/hover.ts b/packages/uikit/src/hover.ts
@@ -38,8 +38,8 @@ export function addHoverHandlers(
     hoveredSignal.value.length = 0
     return
   }
-  addHandler('onPointerOver', target, ({ nativeEvent }) => {
-    hoveredSignal.value = [nativeEvent.pointerId, ...hoveredSignal.value]
+  addHandler('onPointerOver', target, ({ pointerId }) => {
+    hoveredSignal.value = [pointerId, ...hoveredSignal.value]
     if (hoveredSignal.value.length === 1) {
       properties?.onHoverChange?.(true)
       style?.onHoverChange?.(true)
@@ -48,8 +48,8 @@ export function addHoverHandlers(
       setCursorType(hoveredSignal, cursor)
     }
   })
-  addHandler('onPointerOut', target, ({ nativeEvent }) => {
-    hoveredSignal.value = hoveredSignal.value.filter((id) => id != nativeEvent.pointerId)
+  addHandler('onPointerOut', target, ({ pointerId }) => {
+    hoveredSignal.value = hoveredSignal.value.filter((id) => id != pointerId)
     if (hoveredSignal.value.length === 0) {
       properties?.onHoverChange?.(false)
       style?.onHoverChange?.(false)

diff --git a/packages/uikit/src/scroll.ts b/packages/uikit/src/scroll.ts
@@ -183,18 +183,18 @@ export function computedScrollHandlers(
     if (!isScrollable.value) {
       return undefined
     }
-    const onPointerFinish = ({ nativeEvent }: ThreeEvent<PointerEvent>) => {
-      if (!downPointerMap.delete(nativeEvent.pointerId) || downPointerMap.size > 0 || scrollPosition.value == null) {
+    const onPointerFinish = ({ pointerId }: ThreeEvent<PointerEvent>) => {
+      if (!downPointerMap.delete(pointerId) || downPointerMap.size > 0 || scrollPosition.value == null) {
         return
       }
       //only request a render if the last pointer that was dragging stopped dragging and this panel is actually scrollable
       root.requestRender()
     }
     return {
-      onPointerDown: ({ nativeEvent, point }) => {
-        let interaction = downPointerMap.get(nativeEvent.pointerId)
+      onPointerDown: ({ pointerId, point }) => {
+        let interaction = downPointerMap.get(pointerId)
         if (interaction == null) {
-          downPointerMap.set(nativeEvent.pointerId, (interaction = { timestamp: 0, point: new Vector3() }))
+          downPointerMap.set(pointerId, (interaction = { timestamp: 0, point: new Vector3() }))
         }
         interaction.timestamp = performance.now() / 1000
         object.current!.worldToLocal(interaction.point.copy(point))
@@ -203,7 +203,7 @@ export function computedScrollHandlers(
       onPointerLeave: onPointerFinish,
       onPointerCancel: onPointerFinish,
       onPointerMove: (event) => {
-        const prevInteraction = downPointerMap.get(event.nativeEvent.pointerId)
+        const prevInteraction = downPointerMap.get(event.pointerId)
 
         if (prevInteraction == null) {
           return