@solidrt/2d 0.0.66 → 0.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/2d",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -15,10 +15,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/group.tsx

@@ -21,6 +21,7 @@ export type GroupProps = {
   onPointerDown?: (event: SpritePointerEvent) => void
   onPointerMove?: (event: SpritePointerEvent) => void
   onPointerUp?: (event: SpritePointerEvent) => void
+  onPointerCancel?: (event: SpritePointerEvent) => void
   onWheel?: (event: SpriteWheelEvent) => void
   onTap?: (event: SpriteTapEvent) => void
   /** How pose-prop changes animate (see setGroupTransition). The mount
@@ -52,11 +53,12 @@ export let Group: ParentComponent<GroupProps> = props => {
     transition => setGroupTransition(group, transition ?? null),
   )
   createEffect(
-    () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onWheel, props.onTap, props.onTransitionEnd] as const,
-    ([down, move, up, wheel, tap, end]) => {
+    () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onPointerCancel, props.onWheel, props.onTap, props.onTransitionEnd] as const,
+    ([down, move, up, cancel, wheel, tap, end]) => {
       group.onPointerDown = down
       group.onPointerMove = move
       group.onPointerUp = up
+      group.onPointerCancel = cancel
       group.onWheel = wheel
       group.onTap = tap
       group.onTransitionEnd = end

package/src/components/sprite-layer.tsx

@@ -19,6 +19,7 @@ export type LayerPointerProps = {
   onPointerDown?: (event: LayerPointerEvent) => void
   onPointerMove?: (event: LayerPointerEvent) => void
   onPointerUp?: (event: LayerPointerEvent) => void
+  onPointerCancel?: (event: LayerPointerEvent) => void
   onWheel?: (event: LayerWheelEvent) => void
   onTap?: (event: LayerTapEvent) => void
 }
@@ -143,6 +144,7 @@ const VIEW_PROPS = [
   "onPointerDown",
   "onPointerMove",
   "onPointerUp",
+  "onPointerCancel",
   "onWheel",
   "onTap",
 ] as const
@@ -249,6 +251,7 @@ export let SpriteLayer: ParentComponent<SpriteLayerProps> = 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),
     }),
@@ -321,6 +324,7 @@ export let SpriteLayer: ParentComponent<SpriteLayerProps> = props => {
               onPointerDown={events ? viewHandlers.onPointerDown : undefined}
               onPointerMove={events ? viewHandlers.onPointerMove : undefined}
               onPointerUp={events ? viewHandlers.onPointerUp : undefined}
+              onPointerCancel={events ? viewHandlers.onPointerCancel : undefined}
               onPointerLeave={events ? viewHandlers.onPointerLeave : undefined}
               onWheel={events ? viewHandlers.onWheel : undefined}
             />

package/src/components/sprite.tsx

@@ -18,6 +18,7 @@ export type SpritePointerProps = {
   onPointerDown?: (event: SpritePointerEvent) => void
   onPointerMove?: (event: SpritePointerEvent) => void
   onPointerUp?: (event: SpritePointerEvent) => void
+  onPointerCancel?: (event: SpritePointerEvent) => void
   /** Sprites only: a Group never receives enter/leave. */
   onPointerEnter?: (event: SpritePointerEvent) => void
   onPointerLeave?: (event: SpritePointerEvent) => void
@@ -54,11 +55,12 @@ export let Sprite: VoidComponent<SpriteProps> = props => {
     transition => setSpriteTransition(sprite, transition ?? null),
   )
   createEffect(
-    () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onPointerEnter, props.onPointerLeave, props.onWheel, props.onTap, props.onTransitionEnd] as const,
-    ([down, move, up, enter, leave, wheel, tap, end]) => {
+    () => [props.onPointerDown, props.onPointerMove, props.onPointerUp, props.onPointerCancel, props.onPointerEnter, props.onPointerLeave, props.onWheel, props.onTap, props.onTransitionEnd] as const,
+    ([down, move, up, cancel, enter, leave, wheel, tap, end]) => {
       sprite.onPointerDown = down
       sprite.onPointerMove = move
       sprite.onPointerUp = up
+      sprite.onPointerCancel = cancel
       sprite.onPointerEnter = enter
       sprite.onPointerLeave = leave
       sprite.onWheel = wheel

package/src/components/view2d.tsx

@@ -107,6 +107,7 @@ export let View2d: ParentComponent<View2dProps> = 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),
     }),
@@ -148,6 +149,7 @@ export let View2d: ParentComponent<View2dProps> = 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/dispatch.ts

@@ -1,6 +1,6 @@
 // Pointer dispatch behind view.handlers, shared by both layer kinds: the
 // element event model one tree deeper, with the VIEW as the root of the
-// walk. Down, move, up and wheel dispatch on the topmost hit sprite,
+// walk. Down, move, up, cancel and wheel dispatch on the topmost hit sprite,
 // bubble through its enclosing groups and end at the layer's listeners;
 // over empty space the walk is the layer alone (`sprite` null). Claiming
 // is stopPropagation: a handler that stops an event keeps every later
@@ -49,7 +49,7 @@ export type DispatchDeps = {
   listeners: Set<LayerPointerListener>
 }
 
-type HandlerName = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onWheel" | "onTap"
+type HandlerName = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel" | "onWheel" | "onTap"
 
 // One runtime event object serves every view (SpritePointerEvent for the
 // sprite chain, LayerPointerEvent at the root, plus the wheel and tap
@@ -212,6 +212,17 @@ export function spriteDispatch(deps: DispatchDeps): (layout: (() => { width: num
         tap.tapCount = count
         walk("onTap", tap, !press.claimed)
       },
+      onPointerCancel(e) {
+        let [x, y] = toLayer(e)
+        let press = presses.get(e.pointerId)
+        if (!press) {
+          walk("onPointerCancel", makeEvent(topmost(x, y), x, y, e), true)
+          return
+        }
+        // The press ends where it was: the walk it captured, never a tap.
+        presses.delete(e.pointerId)
+        walk("onPointerCancel", makeEvent(press.target, x, y, e), !press.claimed)
+      },
       onWheel(e) {
         let [x, y] = toLayer(e)
         let event = makeEvent(topmost(x, y), x, y, e)

package/src/layer.ts

@@ -183,6 +183,9 @@ export type Sprite = {
   onPointerDown?: (event: SpritePointerEvent) => void
   onPointerMove?: (event: SpritePointerEvent) => void
   onPointerUp?: (event: SpritePointerEvent) => 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: SpritePointerEvent) => void
   onPointerEnter?: (event: SpritePointerEvent) => void
   onPointerLeave?: (event: SpritePointerEvent) => void
   /** A wheel notch over the sprite; bubbles like down/move/up. */
@@ -343,6 +346,7 @@ export type LayerPointerListener = {
   onPointerDown?: (event: LayerPointerEvent) => void
   onPointerMove?: (event: LayerPointerEvent) => void
   onPointerUp?: (event: LayerPointerEvent) => void
+  onPointerCancel?: (event: LayerPointerEvent) => void
   onWheel?: (event: LayerWheelEvent) => void
   onTap?: (event: LayerTapEvent) => void
 }
@@ -353,6 +357,7 @@ export type LayerHandlers = {
   onPointerDown: (event: ElementPointerEvent) => void
   onPointerMove: (event: ElementPointerEvent) => void
   onPointerUp: (event: ElementPointerEvent) => void
+  onPointerCancel: (event: ElementPointerEvent) => void
   onPointerLeave: (event: ElementPointerEvent) => void
   onWheel: (event: ElementWheelEvent) => void
 }
@@ -447,6 +452,7 @@ export type SpriteGroup = {
   onPointerDown?: (event: SpritePointerEvent) => void
   onPointerMove?: (event: SpritePointerEvent) => void
   onPointerUp?: (event: SpritePointerEvent) => void
+  onPointerCancel?: (event: SpritePointerEvent) => void
   onWheel?: (event: SpriteWheelEvent) => void
   onTap?: (event: SpriteTapEvent) => void
   /** See Sprite.onTransitionEnd. */

package/src/views.ts

@@ -289,6 +289,7 @@ export function feedPointer(view: ViewHandle, feed: PointerFeed): () => void {
     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),
   })
 }