Extract drag detection logic to interface (#71)

toasterofbread · Calvin-LL · web-flow · commit b7e256a92217 · 2025-06-06T20:04:46.000-07:00
* Extract drag detection logic to DragGestureDetector interface

* Rename DragGestureDetector.Normal to DragGestureDetector.Press

* Update dragGestureDetector param position in docs

* format file

---------

Co-authored-by: Calvin Liang &lt;me@calvin.sh&gt;
diff --git a/reorderable/src/commonMain/kotlin/sh/calvin/reorderable/DragGestureDetector.kt b/reorderable/src/commonMain/kotlin/sh/calvin/reorderable/DragGestureDetector.kt
@@ -0,0 +1,38 @@
+package sh.calvin.reorderable
+
+import androidx.compose.foundation.gestures.detectDragGestures
+import androidx.compose.foundation.gestures.detectDragGesturesAfterLongPress
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.input.pointer.PointerInputChange
+import androidx.compose.ui.input.pointer.PointerInputScope
+
+fun interface DragGestureDetector {
+    suspend fun PointerInputScope.detect(
+        onDragStart: (Offset) -> Unit,
+        onDragEnd: () -> Unit,
+        onDragCancel: () -> Unit,
+        onDrag: (change: PointerInputChange, dragAmount: Offset) -> Unit
+    )
+
+    object Press : DragGestureDetector {
+        override suspend fun PointerInputScope.detect(
+            onDragStart: (Offset) -> Unit,
+            onDragEnd: () -> Unit,
+            onDragCancel: () -> Unit,
+            onDrag: (change: PointerInputChange, dragAmount: Offset) -> Unit
+        ) {
+            detectDragGestures(onDragStart, onDragEnd, onDragCancel, onDrag)
+        }
+    }
+
+    object LongPress : DragGestureDetector {
+        override suspend fun PointerInputScope.detect(
+            onDragStart: (Offset) -> Unit,
+            onDragEnd: () -> Unit,
+            onDragCancel: () -> Unit,
+            onDrag: (change: PointerInputChange, dragAmount: Offset) -> Unit
+        ) {
+            detectDragGesturesAfterLongPress(onDragStart, onDragEnd, onDragCancel, onDrag)
+        }
+    }
+}
diff --git a/reorderable/src/commonMain/kotlin/sh/calvin/reorderable/ReorderableLazyCollection.kt b/reorderable/src/commonMain/kotlin/sh/calvin/reorderable/ReorderableLazyCollection.kt
@@ -657,12 +657,14 @@ interface ReorderableCollectionItemScope {
      * @param interactionSource [MutableInteractionSource] that will be used to emit [DragInteraction.Start] when this draggable is being dragged.
      * @param onDragStarted The function that is called when the item starts being dragged
      * @param onDragStopped The function that is called when the item stops being dragged
+     * @param dragGestureDetector [DragGestureDetector] that will be used to detect drag gestures
      */
     fun Modifier.draggableHandle(
         enabled: Boolean = true,
         interactionSource: MutableInteractionSource? = null,
         onDragStarted: (startedPosition: Offset) -> Unit = {},
         onDragStopped: () -> Unit = {},
+        dragGestureDetector: DragGestureDetector = DragGestureDetector.Press
     ): Modifier
 
     /**
@@ -701,7 +703,8 @@ internal class ReorderableCollectionItemScopeImpl(
         interactionSource: MutableInteractionSource?,
         onDragStarted: (startedPosition: Offset) -> Unit,
         onDragStopped: () -> Unit,
-    ) = composed {
+        dragGestureDetector: DragGestureDetector
+    ): Modifier = composed {
         var handleOffset by remember { mutableStateOf(Offset.Zero) }
         var handleSize by remember { mutableStateOf(IntSize.Zero) }
 
@@ -714,6 +717,7 @@ internal class ReorderableCollectionItemScopeImpl(
             key1 = reorderableLazyCollectionState,
             enabled = enabled && (reorderableLazyCollectionState.isItemDragging(key).value || !reorderableLazyCollectionState.isAnyItemDragging),
             interactionSource = interactionSource,
+            dragGestureDetector = dragGestureDetector,
             onDragStarted = {
                 coroutineScope.launch {
                     val handleOffsetRelativeToItem = handleOffset - itemPositionProvider()
@@ -733,7 +737,7 @@ internal class ReorderableCollectionItemScopeImpl(
             onDrag = { change, dragAmount ->
                 change.consume()
                 reorderableLazyCollectionState.onDrag(dragAmount)
-            },
+            }
         )
     }
 
@@ -750,41 +754,14 @@ internal class ReorderableCollectionItemScopeImpl(
         interactionSource: MutableInteractionSource?,
         onDragStarted: (startedPosition: Offset) -> Unit,
         onDragStopped: () -> Unit,
-    ) = composed {
-        var handleOffset by remember { mutableStateOf(Offset.Zero) }
-        var handleSize by remember { mutableStateOf(IntSize.Zero) }
-
-        val coroutineScope = rememberCoroutineScope()
-
-        onGloballyPositioned {
-            handleOffset = it.positionInRoot()
-            handleSize = it.size
-        }.longPressDraggable(
-            key1 = reorderableLazyCollectionState,
-            enabled = enabled && (reorderableLazyCollectionState.isItemDragging(key).value || !reorderableLazyCollectionState.isAnyItemDragging),
+    ) =
+        draggableHandle(
+            enabled = enabled,
             interactionSource = interactionSource,
-            onDragStarted = {
-                coroutineScope.launch {
-                    val handleOffsetRelativeToItem = handleOffset - itemPositionProvider()
-                    val handleCenter = Offset(
-                        handleOffsetRelativeToItem.x + handleSize.width / 2f,
-                        handleOffsetRelativeToItem.y + handleSize.height / 2f
-                    )
-
-                    reorderableLazyCollectionState.onDragStart(key, handleCenter)
-                }
-                onDragStarted(it)
-            },
-            onDragStopped = {
-                reorderableLazyCollectionState.onDragStop()
-                onDragStopped()
-            },
-            onDrag = { change, dragAmount ->
-                change.consume()
-                reorderableLazyCollectionState.onDrag(dragAmount)
-            },
+            onDragStarted = onDragStarted,
+            onDragStopped = onDragStopped,
+            dragGestureDetector = DragGestureDetector.LongPress
         )
-    }
 }
 
 /**
diff --git a/reorderable/src/commonMain/kotlin/sh/calvin/reorderable/ReorderableList.kt b/reorderable/src/commonMain/kotlin/sh/calvin/reorderable/ReorderableList.kt
@@ -21,7 +21,6 @@ import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.spring
 import androidx.compose.foundation.gestures.DraggableState
 import androidx.compose.foundation.gestures.Orientation
-import androidx.compose.foundation.gestures.draggable
 import androidx.compose.foundation.interaction.DragInteraction
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
@@ -209,12 +208,14 @@ interface ReorderableScope {
      * @param interactionSource [MutableInteractionSource] that will be used to emit [DragInteraction.Start] when this draggable is being dragged
      * @param onDragStarted The function that is called when the item starts being dragged
      * @param onDragStopped The function that is called when the item stops being dragged
+     * @param dragGestureDetector [DragGestureDetector] that will be used to detect drag gestures
      */
     fun Modifier.draggableHandle(
         enabled: Boolean = true,
-        onDragStarted: suspend CoroutineScope.(startedPosition: Offset) -> Unit = {},
-        onDragStopped: suspend CoroutineScope.(velocity: Float) -> Unit = {},
+        onDragStarted: (startedPosition: Offset) -> Unit = {},
+        onDragStopped: (velocity: Float) -> Unit = {},
         interactionSource: MutableInteractionSource? = null,
+        dragGestureDetector: DragGestureDetector = DragGestureDetector.Press
     ): Modifier
 
     /**
@@ -240,38 +241,20 @@ internal class ReorderableScopeImpl(
 ) : ReorderableScope {
 
     override fun Modifier.draggableHandle(
-        enabled: Boolean,
-        onDragStarted: suspend CoroutineScope.(startedPosition: Offset) -> Unit,
-        onDragStopped: suspend CoroutineScope.(velocity: Float) -> Unit,
-        interactionSource: MutableInteractionSource?,
-    ) = draggable(
-        state = state.draggableStates[index],
-        orientation = orientation,
-        enabled = enabled && (state.isItemDragging(index).value || !state.isAnyItemDragging),
-        interactionSource = interactionSource,
-        onDragStarted = {
-            state.startDrag(index)
-            onDragStarted(it)
-        },
-        onDragStopped = { velocity ->
-            launch { state.settle(index, velocity) }
-            onDragStopped(velocity)
-        },
-    )
-
-    override fun Modifier.longPressDraggableHandle(
         enabled: Boolean,
         onDragStarted: (startedPosition: Offset) -> Unit,
         onDragStopped: (velocity: Float) -> Unit,
         interactionSource: MutableInteractionSource?,
+        dragGestureDetector: DragGestureDetector,
     ) = composed {
         val velocityTracker = remember { VelocityTracker() }
         val coroutineScope = rememberCoroutineScope()
 
-        longPressDraggable(
+        draggable(
             key1 = state,
             enabled = enabled && (state.isItemDragging(index).value || !state.isAnyItemDragging),
             interactionSource = interactionSource,
+            dragGestureDetector = dragGestureDetector,
             onDragStarted = {
                 state.startDrag(index)
                 onDragStarted(it)
@@ -299,6 +282,20 @@ internal class ReorderableScopeImpl(
             },
         )
     }
+
+    override fun Modifier.longPressDraggableHandle(
+        enabled: Boolean,
+        onDragStarted: (startedPosition: Offset) -> Unit,
+        onDragStopped: (velocity: Float) -> Unit,
+        interactionSource: MutableInteractionSource?,
+    ) =
+        draggableHandle(
+            enabled = enabled,
+            onDragStarted = onDragStarted,
+            onDragStopped = onDragStopped,
+            interactionSource = interactionSource,
+            dragGestureDetector = DragGestureDetector.LongPress
+        )
 }
 
 /**
diff --git a/reorderable/src/commonMain/kotlin/sh/calvin/reorderable/draggable.kt b/reorderable/src/commonMain/kotlin/sh/calvin/reorderable/draggable.kt
@@ -1,7 +1,5 @@
 package sh.calvin.reorderable
 
-import androidx.compose.foundation.gestures.detectDragGestures
-import androidx.compose.foundation.gestures.detectDragGesturesAfterLongPress
 import androidx.compose.foundation.interaction.DragInteraction
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.runtime.DisposableEffect
@@ -21,6 +19,7 @@ internal fun Modifier.draggable(
     key1: Any?,
     enabled: Boolean = true,
     interactionSource: MutableInteractionSource? = null,
+    dragGestureDetector: DragGestureDetector = DragGestureDetector.Press,
     onDragStarted: (Offset) -> Unit = { },
     onDragStopped: () -> Unit = { },
     onDrag: (change: PointerInputChange, dragAmount: Offset) -> Unit,
@@ -48,83 +47,12 @@ internal fun Modifier.draggable(
     }
 
     pointerInput(key1, enabled) {
-        if (enabled) {
-            detectDragGestures(
-                onDragStart = {
-                    dragStarted = true
-                    dragInteractionStart = DragInteraction.Start().also {
-                        coroutineScope.launch {
-                            interactionSource?.emit(it)
-                        }
-                    }
-
-                    onDragStarted(it)
-                },
-                onDragEnd = {
-                    dragInteractionStart?.also {
-                        coroutineScope.launch {
-                            interactionSource?.emit(DragInteraction.Stop(it))
-                        }
-                    }
-
-                    if (dragStarted) {
-                        onDragStopped()
-                    }
-
-                    dragStarted = false
-                },
-                onDragCancel = {
-                    dragInteractionStart?.also {
-                        coroutineScope.launch {
-                            interactionSource?.emit(DragInteraction.Cancel(it))
-                        }
-                    }
-
-                    if (dragStarted) {
-                        onDragStopped()
-                    }
-
-                    dragStarted = false
-                },
-                onDrag = onDrag,
-            )
-        }
-    }
-}
-
-internal fun Modifier.longPressDraggable(
-    key1: Any?,
-    enabled: Boolean = true,
-    interactionSource: MutableInteractionSource? = null,
-    onDragStarted: (Offset) -> Unit = { },
-    onDragStopped: () -> Unit = { },
-    onDrag: (change: PointerInputChange, dragAmount: Offset) -> Unit,
-) = composed {
-    val coroutineScope = rememberCoroutineScope()
-    var dragInteractionStart by remember { mutableStateOf<DragInteraction.Start?>(null) }
-    var dragStarted by remember { mutableStateOf(false) }
-
-    DisposableEffect(key1) {
-        onDispose {
-            if (dragStarted) {
-                dragInteractionStart?.also {
-                    coroutineScope.launch {
-                        interactionSource?.emit(DragInteraction.Cancel(it))
-                    }
-                }
-
-                if (dragStarted) {
-                    onDragStopped()
-                }
-
-                dragStarted = false
-            }
+        if (!enabled) {
+            return@pointerInput
         }
-    }
 
-    pointerInput(key1, enabled) {
-        if (enabled) {
-            detectDragGesturesAfterLongPress(
+        with(dragGestureDetector) {
+            detect(
                 onDragStart = {
                     dragStarted = true
                     dragInteractionStart = DragInteraction.Start().also {
@@ -147,7 +75,6 @@ internal fun Modifier.longPressDraggable(
                     }
 
                     dragStarted = false
-
                 },
                 onDragCancel = {
                     dragInteractionStart?.also {
@@ -161,7 +88,6 @@ internal fun Modifier.longPressDraggable(
                     }
 
                     dragStarted = false
-
                 },
                 onDrag = onDrag,
             )
