fix: scrolling on mobile is cancelled

pmndrs · Jun 25, 2024 · 8ecf36f · 8ecf36f
1 parent c6f2e3f
commit 8ecf36f
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 40 deletions.
diff --git a/packages/uikit/src/components/container.ts b/packages/uikit/src/components/container.ts
@@ -130,11 +130,19 @@ export function createContainer(
     parentContext.root.panelGroupManager,
     initializers,
   )
+  const interactionPanel = createInteractionPanel(
+    orderInfo,
+    parentContext.root,
+    parentContext.clippingRect,
+    flexState.size,
+    initializers,
+  )
   const scrollHandlers = computedScrollHandlers(
     scrollPosition,
     parentContext.anyAncestorScrollable,
     flexState,
     object,
+    interactionPanel,
     properties,
     parentContext.root,
     initializers,
@@ -158,13 +166,7 @@ export function createContainer(
     orderInfo,
     root: parentContext.root,
     scrollPosition,
-    interactionPanel: createInteractionPanel(
-      orderInfo,
-      parentContext.root,
-      parentContext.clippingRect,
-      flexState.size,
-      initializers,
-    ),
+    interactionPanel,
     handlers: computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal, scrollHandlers),
     initializers,
   })

diff --git a/packages/uikit/src/components/image.ts b/packages/uikit/src/components/image.ts
@@ -167,11 +167,22 @@ export function createImage(
     parentContext.root.panelGroupManager,
     initializers,
   )
+  const interactionPanel = createImageMesh(
+    mergedProperties,
+    texture,
+    parentContext,
+    flexState,
+    orderInfo,
+    parentContext.root,
+    isVisible,
+    initializers,
+  )
   const scrollHandlers = computedScrollHandlers(
     scrollPosition,
     parentContext.anyAncestorScrollable,
     flexState,
     object,
+    interactionPanel,
     properties,
     parentContext.root,
     initializers,
@@ -187,16 +198,7 @@ export function createImage(
     anyAncestorScrollable: computedAnyAncestorScrollable(flexState.scrollable, parentContext.anyAncestorScrollable),
     initializers,
     handlers: computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal, scrollHandlers),
-    interactionPanel: createImageMesh(
-      mergedProperties,
-      texture,
-      parentContext,
-      flexState,
-      orderInfo,
-      parentContext.root,
-      isVisible,
-      initializers,
-    ),
+    interactionPanel,
     clippingRect: computedClippingRect(
       globalMatrix,
       flexState,

diff --git a/packages/uikit/src/components/root.ts b/packages/uikit/src/components/root.ts
@@ -185,16 +185,6 @@ export function createRoot(
     initializers,
   )
 
-  const scrollHandlers = computedScrollHandlers(
-    scrollPosition,
-    undefined,
-    flexState,
-    object,
-    properties,
-    ctx,
-    initializers,
-  )
-
   setupLayoutListeners(style, properties, flexState.size, initializers)
 
   const gylphGroupManager = new GlyphGroupManager(renderOrder, depthTest, pixelSize, ctx, object, initializers)
@@ -214,6 +204,18 @@ export function createRoot(
     size: flexState.size,
   })
 
+  const interactionPanel = createInteractionPanel(orderInfo, rootCtx, undefined, flexState.size, initializers)
+  const scrollHandlers = computedScrollHandlers(
+    scrollPosition,
+    undefined,
+    flexState,
+    object,
+    interactionPanel,
+    properties,
+    ctx,
+    initializers,
+  )
+
   return Object.assign(flexState, {
     scrollPosition,
     mergedProperties,
@@ -223,7 +225,7 @@ export function createRoot(
     node,
     orderInfo,
     initializers,
-    interactionPanel: createInteractionPanel(orderInfo, rootCtx, undefined, flexState.size, initializers),
+    interactionPanel,
     handlers: computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal, scrollHandlers),
     root: rootCtx,
   })

diff --git a/packages/uikit/src/components/svg.ts b/packages/uikit/src/components/svg.ts
@@ -168,11 +168,21 @@ export function createSvg(
     parentContext.root.panelGroupManager,
     initializers,
   )
+
+  const interactionPanel = createInteractionPanel(
+    orderInfo,
+    parentContext.root,
+    parentContext.clippingRect,
+    flexState.size,
+    initializers,
+  )
+
   const scrollHandlers = computedScrollHandlers(
     scrollPosition,
     parentContext.anyAncestorScrollable,
     flexState,
     object,
+    interactionPanel,
     properties,
     parentContext.root,
     initializers,
@@ -199,13 +209,7 @@ export function createSvg(
     initializers,
     centerGroup,
     handlers: computedHandlers(style, properties, defaultProperties, hoveredSignal, activeSignal, scrollHandlers),
-    interactionPanel: createInteractionPanel(
-      orderInfo,
-      parentContext.root,
-      parentContext.clippingRect,
-      flexState.size,
-      initializers,
-    ),
+    interactionPanel,
   })
 }
 

diff --git a/packages/uikit/src/events.ts b/packages/uikit/src/events.ts
@@ -1,4 +1,4 @@
-import { Intersection } from 'three'
+import { Intersection, Object3D } from 'three'
 
 export type ThreeEvent<TSourceEvent> = Intersection & {
   nativeEvent: TSourceEvent

diff --git a/packages/uikit/src/scroll.ts b/packages/uikit/src/scroll.ts
@@ -1,7 +1,7 @@
 import { ReadonlySignal, Signal, computed, effect, signal } from '@preact/signals-core'
-import { Matrix4, Object3D, Vector2, Vector2Tuple, Vector3, Vector4Tuple } from 'three'
-import { FlexNode, FlexNodeState, Inset } from './flex/node.js'
-import { ColorRepresentation, Initializers, Subscriptions, computedBorderInset } from './utils.js'
+import { Matrix4, Mesh, Vector2, Vector2Tuple, Vector3, Vector4Tuple } from 'three'
+import { FlexNodeState, Inset } from './flex/node.js'
+import { ColorRepresentation, Initializers, computedBorderInset } from './utils.js'
 import { ClippingRect } from './clipping.js'
 import { clamp } from 'three/src/math/MathUtils.js'
 import { PanelProperties, createInstancedPanel } from './panel/instanced-panel.js'
@@ -74,6 +74,7 @@ export function computedScrollHandlers(
   anyAncestorScrollable: Signal<readonly [boolean, boolean]> | undefined,
   { scrollable, maxScrollPosition }: FlexNodeState,
   object: Object3DRef,
+  interactionPanel: Mesh,
   listeners: Signal<ScrollListeners | undefined>,
   root: Pick<RootContext, 'onFrameSet' | 'requestRender' | 'pixelSize' | 'requestFrame'>,
   initializers: Initializers,
@@ -199,7 +200,12 @@ export function computedScrollHandlers(
         object.current!.worldToLocal(interaction.point.copy(point))
       },
       onPointerUp: onPointerFinish,
-      onPointerLeave: onPointerFinish,
+      onPointerOut: (e: ThreeEvent<PointerEvent>) => {
+        if (e.object != interactionPanel) {
+          return
+        }
+        onPointerFinish(e)
+      },
       onPointerCancel: onPointerFinish,
       onPointerMove: (event) => {
         const prevInteraction = downPointerMap.get(event.nativeEvent.pointerId)