feat(xr): adapt to the #69 event API + pointer capture for select/squeeze

Rebased onto next-cleanup (post-#69): the superseded event.element/extra dispatch primitive is dropped (it's in core now as currentObject + extra), and the XR event field follows the rename (element → currentObject).

Adds pointer capture to the controller source: start events (onXRSelectStart/onXRSqueezeStart) are capturable — a handler may call setPointerCapture() to grab the hit object — and the paired end event delivers to that captured object (the live ray reprojected onto the drag plane), then releases it, since XR has no OS lostpointercapture sink. Captures register in the global captureRegistry, so reactive hasPointerCapture() works for XR too.

Author: bigmistqke

src/xr/events.ts

@@ -1,5 +1,6 @@
 import { onCleanup, runWithOwner } from "solid-js"
 import type { Intersection, Object3D } from "three"
+import { captureRegistry } from "../pointer-capture.ts"
 import { Pointer } from "../pointers.ts"
 import { ControllerRaycaster } from "../raycasters.tsx"
 import type { Context, Plugin, ThreeEvent } from "../types.ts"
@@ -10,7 +11,6 @@ export type XRThreeEvent = ThreeEvent<XRInputSourceEvent> & {
   controller: Object3D
   inputSource: XRInputSource | undefined
   handedness: XRHandedness | undefined
-  element: Object3D | undefined
   intersection: Intersection
 }
 
@@ -29,10 +29,10 @@ type XRLike = {
 }
 
 const PAIRS = [
-  ["selectstart", "onXRSelectStart"],
-  ["selectend", "onXRSelectEnd"],
-  ["squeezestart", "onXRSqueezeStart"],
-  ["squeezeend", "onXRSqueezeEnd"],
+  ["selectstart", "onXRSelectStart", "start"],
+  ["selectend", "onXRSelectEnd", "end"],
+  ["squeezestart", "onXRSqueezeStart", "start"],
+  ["squeezeend", "onXRSqueezeEnd", "end"],
 ] as const
 
 /**
@@ -41,8 +41,11 @@ const PAIRS = [
  * the ray AND which dispatches select/squeeze events) gets a `Pointer` + a
  * `ControllerRaycaster`; the four start/end events dispatch the matching handler,
  * enriched with `{ controller, inputSource, handedness }`. Bubbling + canvas-level
- * come from `Pointer.dispatch`. `sessionend` (or `connect`'s disconnect) tears the
- * controllers down. Replaces the controller wiring previously baked into core.
+ * come from `Pointer.dispatch`. Start events are capturable — a handler may call
+ * `setPointerCapture()` to grab the hit object for the gesture; the paired end event
+ * then delivers to that captured object (reprojected) and releases it. `sessionend`
+ * (or `connect`'s disconnect) tears the controllers down. Replaces the controller
+ * wiring previously baked into core.
  */
 export class XRControllerSource {
   constructor(
@@ -57,15 +60,25 @@ export class XRControllerSource {
     const wire = () => {
       for (let index = 0; index < this.count; index++) {
         const controller = this.xr.getController(index)
-        const pointer = new Pointer(this.context, new ControllerRaycaster(controller))
-        const listeners = PAIRS.map(([native, handler]) => {
+        const pointer = new Pointer(
+          this.context,
+          new ControllerRaycaster(controller),
+          undefined,
+          captureRegistry,
+        )
+        const listeners = PAIRS.map(([native, handler, phase]) => {
           const listener = (event: ControllerEvent) => {
             const inputSource = event.data
-            pointer.dispatch(handler, new Event(native), {
-              controller,
-              inputSource,
-              handedness: inputSource?.handedness,
-            })
+            // Start events are capturable (a handler may call `setPointerCapture()`),
+            // mirroring `onPointerDown`. XR has no OS `lostpointercapture`, so the
+            // source releases the capture on the paired end event.
+            pointer.dispatch(
+              handler,
+              new Event(native),
+              { controller, inputSource, handedness: inputSource?.handedness },
+              phase === "start",
+            )
+            if (phase === "end") pointer.release()
           }
           return [native, listener] as const
         })

tests/core/xr-events.test.tsx

@@ -1,6 +1,7 @@
 import * as THREE from "three"
 import { assertType, describe, expect, it, vi } from "vitest"
 import { createT } from "../../src/create-t.tsx"
+import { hasPointerCapture } from "../../src/pointer-capture.ts"
 import { test as renderThree } from "../../src/testing/index.tsx"
 import { XRControllerSource, type XRThreeEvent, xrEvents } from "../../src/xr/events.ts"
 import { meta } from "../../src/utils.ts"
@@ -47,7 +48,7 @@ describe("XRControllerSource", () => {
     expect(start).toHaveBeenCalledTimes(1)
     expect(payload!.controller).toBe(controller)
     expect(payload!.handedness).toBe("left")
-    expect(payload!.element).toBe(mesh)
+    expect(payload!.currentObject).toBe(mesh)
     expect(payload!.intersection.object).toBe(mesh)
 
     controller.dispatchEvent({ type: "squeezeend", data: { handedness: "left" } } as any)
@@ -60,6 +61,45 @@ describe("XRControllerSource", () => {
     disconnect()
   })
 
+  it("a captured select delivers selectend to the grabbed mesh off-ray, then releases", () => {
+    const end = vi.fn()
+    const mesh = meta(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), new THREE.MeshBasicMaterial()), {
+      props: {
+        onXRSelectStart: (event: any) => event.setPointerCapture(), // grab the hit
+        onXRSelectEnd: end,
+      },
+    }) as unknown as THREE.Object3D
+    mesh.updateMatrixWorld()
+
+    const controller = new THREE.Object3D()
+    controller.position.set(0.5, 0.3, 5) // aimed at the plane (−z)
+    controller.updateMatrixWorld()
+    const xr = makeFakeXR(index => (index === 0 ? controller : new THREE.Object3D()))
+    const context = {
+      gl: { xr },
+      eventRegistry: [mesh],
+      props: {},
+      scene: new THREE.Scene(),
+      camera: new THREE.PerspectiveCamera(),
+    } as any
+
+    const disconnect = new XRControllerSource(context, xr as any, 1).connect()
+    xr.dispatch("sessionstart")
+
+    controller.dispatchEvent({ type: "selectstart", data: { handedness: "right" } } as any) // captures
+    expect(hasPointerCapture(mesh)).toBe(true)
+
+    // Aim the controller away from the mesh — the live ray no longer hits it.
+    controller.position.set(100, 100, 5)
+    controller.updateMatrixWorld()
+
+    controller.dispatchEvent({ type: "selectend", data: { handedness: "right" } } as any)
+    expect(end).toHaveBeenCalledTimes(1) // still delivered to the captured mesh
+    expect(hasPointerCapture(mesh)).toBe(false) // released on end (no OS sink in XR)
+
+    disconnect()
+  })
+
   it("xrEvents() registers a handler-bearing mesh and wires the source once per ctx", () => {
     const start = vi.fn()
     const controller = new THREE.Object3D()