fix: inherit pointerEventsOrder, #318 forwardObjectEvents inverted, origin scale + minDistance is incorrect

Author: bbohlender

packages/pointer-events/src/forward.ts

@@ -64,7 +64,6 @@ function portalEventToCoords(e: unknown, target: Vector2): Vector2 {
     return target.set(0, 0)
   }
   target.copy(e.uv).multiplyScalar(2).addScalar(-1)
-  target.y *= -1
   return target
 }
 

packages/pointer-events/src/intersections/index.ts

@@ -38,7 +38,12 @@ export type IntersectionOptions = {
    * for sorting by distance use i1.distance - i2.distance
    * => if i1 has a smaller distance the value is negative and i1 is returned as intersection
    */
-  customSort?: (i1: ThreeIntersection, i2: ThreeIntersection) => number
+  customSort?: (
+    i1: ThreeIntersection,
+    pointerEventsOrder1: number | undefined,
+    i2: ThreeIntersection,
+    pointerEventsOrder2: number | undefined,
+  ) => number
 }
 
 export * from './lines.js'

packages/pointer-events/src/intersections/lines.ts

@@ -10,7 +10,7 @@ import {
   Object3D,
 } from 'three'
 import { Intersection, IntersectionOptions } from './index.js'
-import { computeIntersectionWorldPlane, getDominantIntersection, traversePointerEventTargets } from './utils.js'
+import { computeIntersectionWorldPlane, getDominantIntersectionIndex, traversePointerEventTargets } from './utils.js'
 import type { PointerCapture } from '../pointer.js'
 
 const raycaster = new Raycaster()
@@ -31,8 +31,9 @@ export function intersectLines(
     return intersectLinesPointerCapture(fromMatrixWorld, linePoints, pointerCapture)
   }
   let intersection: (ThreeIntersection & { details: { distanceOnLine: number; lineIndex: number } }) | undefined
+  let pointerEventsOrder: number | undefined
 
-  traversePointerEventTargets(scene, pointerId, pointerType, pointerState, (object) => {
+  traversePointerEventTargets(scene, pointerId, pointerType, pointerState, (object, objectPointerEventsOrder) => {
     let prevAccLineLength = 0
     const length = (intersection?.details.lineIndex ?? linePoints.length - 2) + 2
     for (let i = 1; i < length; i++) {
@@ -64,7 +65,17 @@ export function intersectLines(
           },
         })
       }
-      intersection = getDominantIntersection(intersection, intersectsHelper, options)
+      const index = getDominantIntersectionIndex(
+        intersection,
+        pointerEventsOrder,
+        intersectsHelper,
+        objectPointerEventsOrder,
+        options,
+      )
+      if (index != null) {
+        intersection = intersectsHelper[index]
+        pointerEventsOrder = objectPointerEventsOrder
+      }
       intersectsHelper.length = 0
       prevAccLineLength += lineLength
     }

packages/pointer-events/src/intersections/ray.ts

@@ -12,7 +12,7 @@ import {
 } from 'three'
 import { Intersection, IntersectionOptions } from './index.js'
 import type { PointerCapture } from '../pointer.js'
-import { computeIntersectionWorldPlane, getDominantIntersection, traversePointerEventTargets } from './utils.js'
+import { computeIntersectionWorldPlane, getDominantIntersectionIndex, traversePointerEventTargets } from './utils.js'
 
 const raycaster = new Raycaster()
 const directionHelper = new Vector3()
@@ -34,12 +34,23 @@ export function intersectRay(
   if (pointerCapture != null) {
     return intersectRayPointerCapture(fromPosition, fromQuaternion, direction, pointerCapture)
   }
-  let intersection: ThreeIntersection | undefined
+  let intersection: (ThreeIntersection & { pointerEventsOrder?: number }) | undefined
+  let pointerEventsOrder: number | undefined
   raycaster.ray.origin.copy(fromPosition)
   raycaster.ray.direction.copy(direction).applyQuaternion(fromQuaternion)
-  traversePointerEventTargets(scene, pointerId, pointerType, pointerState, (object) => {
+  traversePointerEventTargets(scene, pointerId, pointerType, pointerState, (object, objectPointerEventsOrder) => {
     object.raycast(raycaster, intersectsHelper)
-    intersection = getDominantIntersection(intersection, intersectsHelper, options)
+    const index = getDominantIntersectionIndex(
+      intersection,
+      pointerEventsOrder,
+      intersectsHelper,
+      objectPointerEventsOrder,
+      options,
+    )
+    if (index != null) {
+      intersection = intersectsHelper[index]
+      pointerEventsOrder = objectPointerEventsOrder
+    }
     intersectsHelper.length = 0
   })
   if (intersection == null) {
@@ -99,14 +110,25 @@ export function intersectRayFromCamera(
     return intersectRayFromCameraPointerCapture(from, coords, fromPosition, fromQuaternion, pointerCapture)
   }
   let intersection: ThreeIntersection | undefined
+  let pointerEventsOrder: number | undefined
 
   raycaster.setFromCamera(coords, from)
 
   planeHelper.setFromNormalAndCoplanarPoint(from.getWorldDirection(directionHelper), raycaster.ray.origin)
 
-  traversePointerEventTargets(scene, pointerId, pointerType, pointerState, (object) => {
+  traversePointerEventTargets(scene, pointerId, pointerType, pointerState, (object, objectPointerEventsOrder) => {
     object.raycast(raycaster, intersectsHelper)
-    intersection = getDominantIntersection(intersection, intersectsHelper, options)
+    const index = getDominantIntersectionIndex(
+      intersection,
+      pointerEventsOrder,
+      intersectsHelper,
+      objectPointerEventsOrder,
+      options,
+    )
+    if (index != null) {
+      intersection = intersectsHelper[index]
+      pointerEventsOrder = objectPointerEventsOrder
+    }
     intersectsHelper.length = 0
   })
 

packages/pointer-events/src/intersections/sphere.ts

@@ -10,7 +10,7 @@ import {
   Plane,
 } from 'three'
 import { Intersection, IntersectionOptions } from './index.js'
-import { computeIntersectionWorldPlane, getDominantIntersection, traversePointerEventTargets } from './utils.js'
+import { computeIntersectionWorldPlane, getDominantIntersectionIndex, traversePointerEventTargets } from './utils.js'
 import type { PointerCapture } from '../pointer.js'
 
 const collisionSphere = new Sphere()
@@ -31,12 +31,23 @@ export function intersectSphere(
     return intersectSpherePointerCapture(fromPosition, fromQuaternion, pointerCapture)
   }
   let intersection: ThreeIntersection | undefined
+  let pointerEventsOrder: number | undefined
   collisionSphere.center.copy(fromPosition)
   collisionSphere.radius = radius
 
-  traversePointerEventTargets(scene, pointerId, pointerType, pointerState, (object) => {
+  traversePointerEventTargets(scene, pointerId, pointerType, pointerState, (object, objectPointerEventsOrder) => {
     intersectSphereWithObject(collisionSphere, object, intersectsHelper)
-    intersection = getDominantIntersection(intersection, intersectsHelper, options)
+    const index = getDominantIntersectionIndex(
+      intersection,
+      pointerEventsOrder,
+      intersectsHelper,
+      objectPointerEventsOrder,
+      options,
+    )
+    if (index != null) {
+      intersection = intersectsHelper[index]
+      pointerEventsOrder = objectPointerEventsOrder
+    }
     intersectsHelper.length = 0
   })
 

packages/pointer-events/src/intersections/utils.ts

@@ -56,26 +56,28 @@ export function traversePointerEventTargets(
   pointerId: number,
   pointerType: string,
   pointerState: unknown,
-  callback: (object: Object3D) => void,
+  callback: (object: Object3D, pointerEventsOrder: number | undefined) => void,
   parentHasListener: boolean = false,
   parentPointerEvents?: AllowedPointerEvents,
   parentPointerEventsType?: AllowedPointerEventsType,
+  parentPointerEventsOrder?: number,
 ): void {
   const hasListener = parentHasListener || hasObjectListeners(object)
-  const allowedPointerEvents = object.pointerEvents ?? parentPointerEvents ?? 'listener'
-  const allowedPointerEventsType = object.pointerEventsType ?? parentPointerEventsType ?? 'all'
+  const pointerEvents = object.pointerEvents ?? parentPointerEvents
+  const pointerEventsType = object.pointerEventsType ?? parentPointerEventsType
+  const pointerEventsOrder = object.pointerEventsOrder ?? parentPointerEventsOrder
 
   const isAllowed = isPointerEventsAllowed(
     hasListener,
-    allowedPointerEvents,
-    allowedPointerEventsType,
+    pointerEvents ?? 'listener',
+    pointerEventsType ?? 'all',
     pointerId,
     pointerType,
     pointerState,
   )
 
   if (isAllowed) {
-    callback(object)
+    callback(object, pointerEventsOrder)
   }
 
   const length = object.children.length
@@ -87,39 +89,50 @@ export function traversePointerEventTargets(
       pointerState,
       callback,
       hasListener,
-      allowedPointerEvents,
-      allowedPointerEventsType,
+      pointerEvents,
+      pointerEventsType,
+      pointerEventsOrder,
     )
   }
 }
 
-export function getDominantIntersection<T extends ThreeIntersection>(
-  target: T | undefined,
-  current: Array<T>,
+/**
+ * @returns undefined if `i1` is the dominant intersection
+ */
+export function getDominantIntersectionIndex<T extends ThreeIntersection>(
+  i1: T | undefined,
+  pointerEventsOrder1: number | undefined,
+  i2: Array<T>,
+  pointerEventsOrder2: number | undefined,
   { customFilter, customSort: compare = defaultSort }: IntersectionOptions = {},
-): T | undefined {
-  const length = current.length
+): number | undefined {
+  let index = undefined
+  const length = i2.length
   for (let i = 0; i < length; i++) {
-    const intersection = current[i]
+    const intersection = i2[i]
     if (!(customFilter?.(intersection) ?? true)) {
       continue
     }
-    if (target == null || compare(target, intersection) > 0) {
-      target = intersection
+    if (i1 == null || compare(i1, pointerEventsOrder1, intersection, pointerEventsOrder2) > 0) {
+      i1 = intersection
+      index = i
     }
   }
-  return target
+  return index
 }
 
 /**
  * @returns a negative number if i1 should be sorted before i2
  */
-function defaultSort(i1: ThreeIntersection, i2: ThreeIntersection): number {
-  const { pointerEventsOrder: o1 = 0 } = i1.object
-  const { pointerEventsOrder: o2 = 0 } = i2.object
-  if (o1 != o2) {
+function defaultSort(
+  i1: ThreeIntersection,
+  pointerEventsOrder1: number = 0,
+  i2: ThreeIntersection,
+  pointerEventsOrder2: number = 0,
+): number {
+  if (pointerEventsOrder1 != pointerEventsOrder2) {
     //inverted order because order is sorted highest first
-    return o2 - o1
+    return pointerEventsOrder2 - pointerEventsOrder1
   }
   //i1 - i2 because negative values mean the sorting i1 before i2 is correct
   return i1.distance - i2.distance

packages/pointer-events/src/pointer.ts

@@ -14,6 +14,7 @@ export type AllowedPointerEventsType =
   | ((poinerId: number, pointerType: string, pointerState: unknown) => boolean)
   | { allow: string | Array<string> }
   | { deny: string | Array<string> }
+
 declare module 'three' {
   interface Object3D {
     _listeners?: Record<string, Array<(event: unknown) => void> | undefined>

packages/pointer-events/src/pointer/ray.ts

@@ -6,6 +6,7 @@ import { generateUniquePointerId } from './index.js'
 export type RayPointerOptions = {
   /**
    * @default 0
+   * distance to intersection in local space
    */
   minDistance?: number
   /**
@@ -20,6 +21,7 @@ export type RayPointerOptions = {
   IntersectionOptions
 
 const NegZAxis = new Vector3(0, 0, -1)
+const vectorHelper = new Vector3()
 
 export const defaultRayPointerOptions = {
   direction: NegZAxis,
@@ -77,7 +79,8 @@ export function createRayPointer(
       if (intersection == null) {
         return undefined
       }
-      if (intersection.distance < (options.minDistance ?? defaultRayPointerOptions.minDistance)) {
+      const localDistance = intersection.distance * spaceObject.getWorldScale(vectorHelper).x
+      if (localDistance < (options.minDistance ?? defaultRayPointerOptions.minDistance)) {
         return undefined
       }
       return intersection