fix: (touch) interaction that doesnt emit a move event

Author: bbohlender

packages/pointer-events/src/forward.ts

@@ -113,28 +113,32 @@ function forwardEvents(
   const forwardPointerCapture = options?.forwardPointerCapture ?? true
   const pointerMap = new Map<number, Pointer>()
   const pointerTypePrefix = options.pointerTypePrefix ?? 'forward-'
-  const getInnerPointer = ({ pointerId = -1, pointerType = 'mouse', pointerState }: ForwardablePointerEvent) => {
-    let innerPointer = pointerMap.get(pointerId)
+  const getInnerPointer = (event: ForwardablePointerEvent, eventType: InternalEventType) => {
+    let innerPointer = pointerMap.get(event.pointerId)
     if (innerPointer != null) {
       return innerPointer
     }
-    pointerMap.set(
-      pointerId,
-      (innerPointer = new Pointer(
-        generateUniquePointerId(),
-        `${pointerTypePrefix}${pointerType}`,
-        pointerState,
-        new CameraRayIntersector((nativeEvent, coords) => {
-          toCoords(nativeEvent, coords)
-          return getCamera()
-        }, options),
-        getCamera,
-        undefined,
-        forwardPointerCapture ? setPointerCapture.bind(null, pointerId) : undefined,
-        forwardPointerCapture ? releasePointerCapture.bind(null, pointerId) : undefined,
-        options,
-      )),
+    innerPointer = new Pointer(
+      generateUniquePointerId(),
+      `${pointerTypePrefix}${event.pointerType}`,
+      event.pointerState,
+      new CameraRayIntersector((nativeEvent, coords) => {
+        toCoords(nativeEvent, coords)
+        return getCamera()
+      }, options),
+      getCamera,
+      undefined,
+      forwardPointerCapture ? setPointerCapture.bind(null, event.pointerId) : undefined,
+      forwardPointerCapture ? releasePointerCapture.bind(null, event.pointerId) : undefined,
+      options,
     )
+    if (eventType != 'move' && eventType != 'wheel') {
+      //if we start with a non-move event no, we intersect and commit
+      //this allows enter, down, ... events to be forwarded to the scene even when they dont come with a move event
+      innerPointer.setIntersection(innerPointer.computeIntersection(scene, event))
+      innerPointer.commit(event, false)
+    }
+    pointerMap.set(event.pointerId, innerPointer)
     return innerPointer
   }
 
@@ -175,7 +179,7 @@ function forwardEvents(
   }
 
   const onEvent = (type: InternalEventType, event: ForwardablePointerEvent) => {
-    const pointer = getInnerPointer(event)
+    const pointer = getInnerPointer(event, type)
     if (type === 'move') {
       latestMoveEventMap.set(pointer, event)
     }
@@ -218,7 +222,7 @@ function forwardEvents(
       const length = eventList.length
       for (let i = 0; i < length; i++) {
         const { type, event } = eventList[i]
-        const pointer = getInnerPointer(event)
+        const pointer = getInnerPointer(event, type)
         if (type === 'move') {
           movedPointerList.push(pointer)
           if (latestMoveEventMap.get(pointer) != event) {

packages/pointer-events/src/pointer.ts

@@ -179,7 +179,7 @@ export class Pointer {
     }
   }
 
-  private computeIntersection(scene: Object3D, nativeEvent: NativeEvent) {
+  computeIntersection(scene: Object3D, nativeEvent: NativeEvent) {
     if (this.pointerCapture != null) {
       return this.intersector.intersectPointerCapture(this.pointerCapture, nativeEvent)
     }
@@ -192,16 +192,7 @@ export class Pointer {
     this.intersection = intersection
   }
 
-  /**
-   * allows to separately compute and afterwards commit a move
-   * => do not forget to call commit after computeMove
-   * can be used to compute the current intersection and disable or enable the pointer before commiting the move
-   */
-  computeMove(scene: Object3D, nativeEvent: NativeEvent) {
-    this.intersection = this.computeIntersection(scene, nativeEvent)
-  }
-
-  commit(nativeEvent: NativeEvent) {
+  commit(nativeEvent: NativeEvent, emitMove: boolean = true) {
     const camera = this.getCamera()
     const prevIntersection = this.prevEnabled ? this.prevIntersection : undefined
     const intersection = this.enabled ? this.intersection : undefined
@@ -235,7 +226,7 @@ export class Pointer {
     }
 
     //pointer move
-    if (intersection != null) {
+    if (emitMove && intersection != null) {
       emitPointerEvent(new PointerEvent('pointermove', true, nativeEvent, this, intersection, camera))
     }
 
@@ -258,7 +249,7 @@ export class Pointer {
    * computes and commits a move
    */
   move(scene: Object3D, nativeEvent: NativeEvent): void {
-    this.computeMove(scene, nativeEvent)
+    this.intersection = this.computeIntersection(scene, nativeEvent)
     this.commit(nativeEvent)
   }