@solidrt/3d 0.0.66 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/3d",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -20,10 +20,10 @@
     "AGENTS.md"
   ],
   "devDependencies": {
-    "@solidrt/test": "0.0.66"
+    "@solidrt/test": "0.0.67"
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.13",
-    "@solidrt/core": "0.0.66"
+    "@solidrt/core": "0.0.67"
   }
 }

package/src/components/node-props.ts

@@ -50,6 +50,9 @@ export type BubblingPointerEventProps = {
   onPointerDown?: (event: NodePointerEvent) => void
   onPointerMove?: (event: NodePointerEvent) => void
   onPointerUp?: (event: NodePointerEvent) => void
+  /** The pointer's other end: the system took it away (see core's
+   * onPointerCancel); bubbles like up, and the press it ends never taps. */
+  onPointerCancel?: (event: NodePointerEvent) => void
   /** The wheel over the node: `deltaX`/`deltaY`. */
   onWheel?: (event: NodeWheelEvent) => void
   /** A press released on the node within the slop, alone for its whole
@@ -73,18 +76,20 @@ export function syncNode(node: SceneNode, props: TransformProps & PointerEventPr
         props.onPointerDown,
         props.onPointerMove,
         props.onPointerUp,
+        props.onPointerCancel,
         props.onPointerEnter,
         props.onPointerLeave,
         props.onWheel,
         props.onTap,
         props.onTransitionEnd,
       ] as const,
-    ([position, rotation, quaternion, scale, visible, down, move, up, enter, leave, wheel, tap, end]) => {
+    ([position, rotation, quaternion, scale, visible, down, move, up, cancel, enter, leave, wheel, tap, end]) => {
       setTransform(node, { position, rotation, quaternion, scale })
       setVisible(node, visible !== false)
       node.onPointerDown = down
       node.onPointerMove = move
       node.onPointerUp = up
+      node.onPointerCancel = cancel
       node.onPointerEnter = enter
       node.onPointerLeave = leave
       node.onWheel = wheel

package/src/components/scene.tsx

@@ -18,6 +18,7 @@ export type ScenePointerProps = {
   onPointerDown?: (event: ScenePointerEvent) => void
   onPointerMove?: (event: ScenePointerEvent) => void
   onPointerUp?: (event: ScenePointerEvent) => void
+  onPointerCancel?: (event: ScenePointerEvent) => void
   onWheel?: (event: SceneWheelEvent) => void
   onTap?: (event: SceneTapEvent) => void
 }
@@ -268,6 +269,7 @@ export let Scene: ParentComponent<SceneProps> = props => {
       onPointerDown: e => props.onPointerDown?.(e),
       onPointerMove: e => props.onPointerMove?.(e),
       onPointerUp: e => props.onPointerUp?.(e),
+      onPointerCancel: e => props.onPointerCancel?.(e),
       onWheel: e => props.onWheel?.(e),
       onTap: e => props.onTap?.(e),
     }),
@@ -331,6 +333,7 @@ export let Scene: ParentComponent<SceneProps> = props => {
           onPointerDown={events ? sceneHandlers.onPointerDown : undefined}
           onPointerMove={events ? sceneHandlers.onPointerMove : undefined}
           onPointerUp={events ? sceneHandlers.onPointerUp : undefined}
+          onPointerCancel={events ? sceneHandlers.onPointerCancel : undefined}
           onPointerLeave={events ? sceneHandlers.onPointerLeave : undefined}
           onWheel={events ? sceneHandlers.onWheel : undefined}
         />

package/src/components/view3d.tsx

@@ -129,6 +129,7 @@ export let View3d: ParentComponent<View3dProps> = props => {
       onPointerDown: e => props.onPointerDown?.(e),
       onPointerMove: e => props.onPointerMove?.(e),
       onPointerUp: e => props.onPointerUp?.(e),
+      onPointerCancel: e => props.onPointerCancel?.(e),
       onWheel: e => props.onWheel?.(e),
       onTap: e => props.onTap?.(e),
     }),
@@ -159,6 +160,7 @@ export let View3d: ParentComponent<View3dProps> = props => {
           onPointerDown={events ? view.handlers.onPointerDown : undefined}
           onPointerMove={events ? view.handlers.onPointerMove : undefined}
           onPointerUp={events ? view.handlers.onPointerUp : undefined}
+          onPointerCancel={events ? view.handlers.onPointerCancel : undefined}
           onPointerLeave={events ? view.handlers.onPointerLeave : undefined}
           onWheel={events ? view.handlers.onWheel : undefined}
         />

package/src/node.ts

@@ -203,6 +203,7 @@ export type SceneNode = {
   onPointerDown?: (event: NodePointerEvent) => void
   onPointerMove?: (event: NodePointerEvent) => void
   onPointerUp?: (event: NodePointerEvent) => void
+  onPointerCancel?: (event: NodePointerEvent) => void
   onPointerEnter?: (event: NodePointerEvent) => void
   onPointerLeave?: (event: NodePointerEvent) => void
   /** The wheel over the node (NodeWheelEvent: `deltaX`/`deltaY`), bubbling
@@ -352,6 +353,7 @@ export type ScenePointerListener = {
   onPointerDown?: (event: ScenePointerEvent) => void
   onPointerMove?: (event: ScenePointerEvent) => void
   onPointerUp?: (event: ScenePointerEvent) => void
+  onPointerCancel?: (event: ScenePointerEvent) => void
   onWheel?: (event: SceneWheelEvent) => void
   onTap?: (event: SceneTapEvent) => void
 }

package/src/scene-pointer.ts

@@ -41,7 +41,7 @@ const TAP_INTERVAL_MS = 300
 // neighbouring meshes.
 const TAP_REPEAT_SLOP = 20
 
-type HandlerName = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onWheel" | "onTap"
+type HandlerName = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onWheel" | "onTap"
 
 // What a press captures, a hover tracks and a tap compares: the struck
 // mesh, and the instance when the mesh is instanced.
@@ -254,6 +254,18 @@ export function makePointerInput(deps: PointerInputDeps): PointerInput {
         tap.tapCount = count
         walk("onTap", tap, !press.claimed)
       },
+      onPointerCancel(e) {
+        let [x, y] = toScene(e)
+        let press = presses.get(e.pointerId)
+        if (!press) {
+          let hit = nearest(x, y)
+          walk("onPointerCancel", makeEvent(e, hit === null ? null : targetOf(hit), x, y, hit), true)
+          return
+        }
+        // The press ends where it was: the walk it captured, never a tap.
+        presses.delete(e.pointerId)
+        walk("onPointerCancel", makeEvent(e, press.target, x, y, hitOn(press.target, x, y)), !press.claimed)
+      },
       onWheel(e) {
         let [x, y] = toScene(e)
         let hit = nearest(x, y)
@@ -290,6 +302,7 @@ export function feedPointer(root: { listen(listener: ScenePointerListener): () =
     onPointerDown: e => feed.handlers.onPointerDown(e.native),
     onPointerMove: e => feed.handlers.onPointerMove(e.native),
     onPointerUp: e => feed.handlers.onPointerUp(e.native),
+    onPointerCancel: e => feed.handlers.onPointerCancel(e.native),
     onWheel: e => feed.handlers.onWheel(e.native),
   })
 }

package/src/scene.ts

@@ -227,6 +227,7 @@ export type SceneHandlers = {
   onPointerDown(event: ElementPointerEvent): void
   onPointerMove(event: ElementPointerEvent): void
   onPointerUp(event: ElementPointerEvent): void
+  onPointerCancel(event: ElementPointerEvent): void
   onPointerLeave(event: ElementPointerEvent): void
   onWheel(event: ElementWheelEvent): void
 }