From faa198f7b0789598398e4388985ef98f7cd9d0c1 Mon Sep 17 00:00:00 2001 From: Oleksandr Balan Date: Sun, 24 Jul 2022 16:50:44 +0200 Subject: [PATCH] Add tap gestures support in lib, rework settings popup --- .gitignore | 2 + .../kotlin/eu/wewox/pagecurl/MainActivity.kt | 97 +++++++++++++------ .../pagecurl/components/OverlayControls.kt | 37 ------- .../pagecurl/components/SettingsPopup.kt | 96 ++++++++++++++---- .../eu/wewox/pagecurl/config/CurlConfig.kt | 83 +++++++++++----- .../eu/wewox/pagecurl/page/CurlGesture.kt | 15 +-- .../kotlin/eu/wewox/pagecurl/page/PageCurl.kt | 15 ++- .../eu/wewox/pagecurl/page/TapGesture.kt | 50 ++++++++++ .../eu/wewox/pagecurl/utils/RectUtils.kt | 11 +++ 9 files changed, 280 insertions(+), 126 deletions(-) delete mode 100644 demo/src/main/kotlin/eu/wewox/pagecurl/components/OverlayControls.kt create mode 100644 pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/TapGesture.kt create mode 100644 pagecurl/src/main/kotlin/eu/wewox/pagecurl/utils/RectUtils.kt diff --git a/.gitignore b/.gitignore index 855cfb3..e7997d5 100644 --- a/.gitignore +++ b/.gitignore @@ -8,6 +8,8 @@ /.idea/workspace.xml /.idea/navEditor.xml /.idea/assetWizardSettings.xml +/.idea/misc.xml +/.idea/deploymentTargetDropDown.xml .DS_Store /build /captures diff --git a/demo/src/main/kotlin/eu/wewox/pagecurl/MainActivity.kt b/demo/src/main/kotlin/eu/wewox/pagecurl/MainActivity.kt index 1fd3197..34822d0 100644 --- a/demo/src/main/kotlin/eu/wewox/pagecurl/MainActivity.kt +++ b/demo/src/main/kotlin/eu/wewox/pagecurl/MainActivity.kt @@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Text +import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember @@ -22,12 +23,17 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.res.painterResource +import androidx.compose.ui.unit.center import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp +import androidx.compose.ui.unit.toOffset +import eu.wewox.pagecurl.components.SettingsAction import eu.wewox.pagecurl.components.SettingsPopup -import eu.wewox.pagecurl.components.overlayControls +import eu.wewox.pagecurl.config.InteractionConfig import eu.wewox.pagecurl.config.PageCurlConfig +import eu.wewox.pagecurl.config.copy import eu.wewox.pagecurl.page.PageCurl +import eu.wewox.pagecurl.page.PageCurlState import eu.wewox.pagecurl.page.rememberPageCurlState import eu.wewox.pagecurl.ui.theme.PageCurlTheme import kotlinx.coroutines.launch @@ -38,28 +44,28 @@ class MainActivity : ComponentActivity() { setContent { PageCurlTheme { Box { - val scope = rememberCoroutineScope() val state = rememberPageCurlState(max = 6) var showPopup by remember { mutableStateOf(false) } + var interaction by remember { + mutableStateOf( + InteractionConfig( + tap = InteractionConfig.Tap( + custom = InteractionConfig.Tap.CustomInteraction(true) { size, position -> + if ((position - size.center.toOffset()).getDistance() < 64.dp.toPx()) { + showPopup = true + true + } else { + false + } + } + ) + ) + ) + } PageCurl( state = state, - config = PageCurlConfig(), - modifier = Modifier.overlayControls( - next = { - scope.launch { - state.next() - } - }, - prev = { - scope.launch { - state.prev() - } - }, - center = { - showPopup = true - } - ) + config = PageCurlConfig(interaction = interaction) ) { index -> Box( modifier = Modifier @@ -96,17 +102,10 @@ class MainActivity : ComponentActivity() { if (showPopup) { SettingsPopup( - onSnapToFirst = { - scope.launch { - state.snapTo(0) - showPopup = false - } - }, - onSnapToLast = { - scope.launch { - state.snapTo(state.max - 1) - showPopup = false - } + state = state, + interaction = interaction, + onConfigChange = { + interaction = it }, onDismiss = { showPopup = false @@ -119,6 +118,46 @@ class MainActivity : ComponentActivity() { } } +@Composable +private fun SettingsPopup( + state: PageCurlState, + interaction: InteractionConfig, + onConfigChange: (InteractionConfig) -> Unit, + onDismiss: () -> Unit, +) { + val scope = rememberCoroutineScope() + SettingsPopup( + interactionConfig = interaction, + onAction = { action -> + when (action) { + SettingsAction.GoToFirst -> { + scope.launch { + state.snapTo(0) + } + } + SettingsAction.GoToLast -> { + scope.launch { + state.snapTo(state.max - 1) + } + } + is SettingsAction.ForwardDragEnabled -> { + onConfigChange(interaction.copy(dragForwardEnabled = action.value)) + } + is SettingsAction.BackwardDragEnabled -> { + onConfigChange(interaction.copy(dragBackwardEnabled = action.value)) + } + is SettingsAction.ForwardTapEnabled -> { + onConfigChange(interaction.copy(tapForwardEnabled = action.value)) + } + is SettingsAction.BackwardTapEnabled -> { + onConfigChange(interaction.copy(tapBackwardEnabled = action.value)) + } + } + }, + onDismiss = onDismiss + ) +} + private object Data { val Lorem1 = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Et harum quidem rerum facilis est et expedita distinctio. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Vestibulum fermentum tortor id mi. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Nunc tincidunt ante vitae massa. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Proin in tellus sit amet nibh dignissim sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam posuere lacus quis dolor. Class aptent taciti sociosqu ad litora." diff --git a/demo/src/main/kotlin/eu/wewox/pagecurl/components/OverlayControls.kt b/demo/src/main/kotlin/eu/wewox/pagecurl/components/OverlayControls.kt deleted file mode 100644 index 42c022e..0000000 --- a/demo/src/main/kotlin/eu/wewox/pagecurl/components/OverlayControls.kt +++ /dev/null @@ -1,37 +0,0 @@ -package eu.wewox.pagecurl.components - -import androidx.compose.foundation.gestures.awaitFirstDown -import androidx.compose.foundation.gestures.forEachGesture -import androidx.compose.foundation.gestures.waitForUpOrCancellation -import androidx.compose.ui.Modifier -import androidx.compose.ui.input.pointer.pointerInput -import androidx.compose.ui.unit.center -import androidx.compose.ui.unit.toOffset - -internal fun Modifier.overlayControls( - next: () -> Unit, - prev: () -> Unit, - center: () -> Unit, -): Modifier = pointerInput(Unit) { - forEachGesture { - awaitPointerEventScope { - val down = awaitFirstDown().also { it.consume() } - val up = waitForUpOrCancellation() ?: return@awaitPointerEventScope - up.consume() - if ((down.position - up.position).getDistance() > viewConfiguration.touchSlop) { - return@awaitPointerEventScope - } - - if ((up.position - size.center.toOffset()).getDistance() < 100f) { - center() - return@awaitPointerEventScope - } - - if (up.position.x < size.width / 2) { - prev() - } else { - next() - } - } - } -} diff --git a/demo/src/main/kotlin/eu/wewox/pagecurl/components/SettingsPopup.kt b/demo/src/main/kotlin/eu/wewox/pagecurl/components/SettingsPopup.kt index 0f8267f..0303b97 100644 --- a/demo/src/main/kotlin/eu/wewox/pagecurl/components/SettingsPopup.kt +++ b/demo/src/main/kotlin/eu/wewox/pagecurl/components/SettingsPopup.kt @@ -1,11 +1,17 @@ +@file:OptIn(ExperimentalPageCurlApi::class) + package eu.wewox.pagecurl.components import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.IntrinsicSize +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Card -import androidx.compose.material.MaterialTheme +import androidx.compose.material.Switch import androidx.compose.material.Text import androidx.compose.material.TextButton import androidx.compose.runtime.Composable @@ -13,43 +19,95 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import androidx.compose.ui.window.Popup +import androidx.compose.ui.window.PopupProperties +import eu.wewox.pagecurl.ExperimentalPageCurlApi +import eu.wewox.pagecurl.config.InteractionConfig + +internal sealed interface SettingsAction { + object GoToFirst : SettingsAction + object GoToLast : SettingsAction + class ForwardDragEnabled(val value: Boolean) : SettingsAction + class BackwardDragEnabled(val value: Boolean) : SettingsAction + class ForwardTapEnabled(val value: Boolean) : SettingsAction + class BackwardTapEnabled(val value: Boolean) : SettingsAction +} @Composable internal fun SettingsPopup( - onSnapToFirst: () -> Unit, - onSnapToLast: () -> Unit, + interactionConfig: InteractionConfig, + onAction: (SettingsAction) -> Unit, onDismiss: () -> Unit, ) { Popup( alignment = Alignment.Center, + properties = PopupProperties(focusable = true), onDismissRequest = onDismiss, ) { Card( shape = RoundedCornerShape(24.dp), - backgroundColor = MaterialTheme.colors.primary, elevation = 16.dp, ) { Column( verticalArrangement = Arrangement.spacedBy(8.dp), - modifier = Modifier.padding(8.dp) + modifier = Modifier + .width(IntrinsicSize.Max) + .padding(8.dp) ) { - TextButton( - onClick = onSnapToFirst - ) { - Text( - text = "Go to first", - color = MaterialTheme.colors.onPrimary - ) + TextButton(onClick = { onAction(SettingsAction.GoToFirst) }) { + Text("Go to first") } - TextButton( - onClick = onSnapToLast - ) { - Text( - text = "Go to last", - color = MaterialTheme.colors.onPrimary - ) + TextButton(onClick = { onAction(SettingsAction.GoToLast) }) { + Text("Go to last") } + + val switchRowModifier = Modifier + .fillMaxWidth() + .padding(horizontal = 10.dp) + SwitchRow( + text = "Forward drag enabled", + enabled = interactionConfig.drag.forward.enabled, + onChanged = { onAction(SettingsAction.ForwardDragEnabled(it)) }, + modifier = switchRowModifier + ) + SwitchRow( + text = "Backward drag enabled", + enabled = interactionConfig.drag.backward.enabled, + onChanged = { onAction(SettingsAction.BackwardDragEnabled(it)) }, + modifier = switchRowModifier + ) + SwitchRow( + text = "Forward tap enabled", + enabled = interactionConfig.tap.forward.enabled, + onChanged = { onAction(SettingsAction.ForwardTapEnabled(it)) }, + modifier = switchRowModifier + ) + SwitchRow( + text = "Backward tap enabled", + enabled = interactionConfig.tap.backward.enabled, + onChanged = { onAction(SettingsAction.BackwardTapEnabled(it)) }, + modifier = switchRowModifier + ) } } } } + +@Composable +private fun SwitchRow( + text: String, + enabled: Boolean, + onChanged: (Boolean) -> Unit, + modifier: Modifier = Modifier, +) { + Row( + horizontalArrangement = Arrangement.SpaceBetween, + verticalAlignment = Alignment.CenterVertically, + modifier = modifier, + ) { + Text(text = text) + Switch( + checked = enabled, + onCheckedChange = onChanged + ) + } +} diff --git a/pagecurl/src/main/kotlin/eu/wewox/pagecurl/config/CurlConfig.kt b/pagecurl/src/main/kotlin/eu/wewox/pagecurl/config/CurlConfig.kt index 901cde8..24db226 100644 --- a/pagecurl/src/main/kotlin/eu/wewox/pagecurl/config/CurlConfig.kt +++ b/pagecurl/src/main/kotlin/eu/wewox/pagecurl/config/CurlConfig.kt @@ -3,28 +3,17 @@ package eu.wewox.pagecurl.config import androidx.compose.ui.geometry.Offset import androidx.compose.ui.geometry.Rect import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.DpOffset +import androidx.compose.ui.unit.IntSize import androidx.compose.ui.unit.dp import eu.wewox.pagecurl.ExperimentalPageCurlApi @ExperimentalPageCurlApi public data class PageCurlConfig( val curl: CurlConfig = CurlConfig(), - val direction: PageCurlDirection = PageCurlDirection.StartToEnd, - val interaction: InteractionConfig = InteractionConfig(forward = direction.forward()), -) - -@ExperimentalPageCurlApi -public data class InteractionConfig( - val forward: DragDirection, - val backward: DragDirection = DragDirection(forward.end, forward.start), -) - -@ExperimentalPageCurlApi -public data class DragDirection( - val start: Rect, - val end: Rect, + val interaction: InteractionConfig = InteractionConfig(), ) @ExperimentalPageCurlApi @@ -48,18 +37,60 @@ public data class ShadowConfig( ) @ExperimentalPageCurlApi -public enum class PageCurlDirection { - StartToEnd, - // TODO (Alex) Add support for reversed end-to-start direction - // EndToStart, +public data class InteractionConfig( + val drag: Drag = Drag(), + val tap: Tap = Tap(), +) { + @ExperimentalPageCurlApi + public data class Drag( + val forward: Interaction = Interaction(true, rightHalf(), leftHalf()), + val backward: Interaction = Interaction(true, forward.end, forward.start), + ) { + @ExperimentalPageCurlApi + public data class Interaction( + val enabled: Boolean, + val start: Rect = Rect.Zero, + val end: Rect = Rect.Zero, + ) + } + + @ExperimentalPageCurlApi + public data class Tap( + val forward: Interaction = Interaction(true, rightHalf()), + val backward: Interaction = Interaction(true, leftHalf()), + val custom: CustomInteraction = CustomInteraction(false) + ) { + @ExperimentalPageCurlApi + public data class Interaction( + val enabled: Boolean, + val target: Rect = Rect.Zero, + ) + + @ExperimentalPageCurlApi + public data class CustomInteraction( + val enabled: Boolean, + val onTap: Density.(IntSize, Offset) -> Boolean = { _, _ -> false }, + ) + } } -private fun left(): Rect = Rect(Offset(0.0f, 0.0f), Offset(0.5f, 1.0f)) - -private fun right(): Rect = Rect(Offset(0.5f, 0.0f), Offset(1.0f, 1.0f)) - @ExperimentalPageCurlApi -private fun PageCurlDirection.forward(): DragDirection = - when (this) { - PageCurlDirection.StartToEnd -> DragDirection(right(), left()) - } +public fun InteractionConfig.copy( + dragForwardEnabled: Boolean = drag.forward.enabled, + dragBackwardEnabled: Boolean = drag.backward.enabled, + tapForwardEnabled: Boolean = tap.forward.enabled, + tapBackwardEnabled: Boolean = tap.backward.enabled, +): InteractionConfig = copy( + drag = drag.copy( + forward = drag.forward.copy(enabled = dragForwardEnabled), + backward = drag.backward.copy(enabled = dragBackwardEnabled) + ), + tap = tap.copy( + forward = tap.forward.copy(enabled = tapForwardEnabled), + backward = tap.backward.copy(enabled = tapBackwardEnabled) + ) +) + +private fun leftHalf(): Rect = Rect(0.0f, 0.0f, 0.5f, 1.0f) + +private fun rightHalf(): Rect = Rect(0.5f, 0.0f, 1.0f, 1.0f) diff --git a/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/CurlGesture.kt b/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/CurlGesture.kt index 86fe3a3..a6a25d5 100644 --- a/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/CurlGesture.kt +++ b/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/CurlGesture.kt @@ -10,12 +10,11 @@ import androidx.compose.foundation.gestures.drag import androidx.compose.foundation.gestures.forEachGesture import androidx.compose.ui.Modifier import androidx.compose.ui.geometry.Offset -import androidx.compose.ui.geometry.Rect import androidx.compose.ui.input.pointer.pointerInput import androidx.compose.ui.input.pointer.util.VelocityTracker -import androidx.compose.ui.unit.IntSize import eu.wewox.pagecurl.ExperimentalPageCurlApi -import eu.wewox.pagecurl.config.DragDirection +import eu.wewox.pagecurl.config.InteractionConfig +import eu.wewox.pagecurl.utils.multiply import eu.wewox.pagecurl.utils.rotate import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.launch @@ -26,7 +25,7 @@ internal fun Modifier.curlGesture( state: PageCurlState.InternalState, enabled: Boolean, scope: CoroutineScope, - direction: DragDirection, + direction: InteractionConfig.Drag.Interaction, start: Edge, end: Edge, edge: Animatable, @@ -68,7 +67,7 @@ internal fun Modifier.curlGesture( internal fun Modifier.curlGesture( key: Any?, enabled: Boolean, - direction: DragDirection, + direction: InteractionConfig.Drag.Interaction, onStart: () -> Unit, onCurl: (Offset, Offset) -> Unit, onEnd: () -> Unit, @@ -127,9 +126,3 @@ internal fun Modifier.curlGesture( } } } - -private fun Rect.multiply(size: IntSize): Rect = - Rect( - topLeft = Offset(size.width * left, size.height * top), - bottomRight = Offset(size.width * right, size.height * bottom), - ) diff --git a/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/PageCurl.kt b/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/PageCurl.kt index 851b76f..d9dee4e 100644 --- a/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/PageCurl.kt +++ b/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/PageCurl.kt @@ -30,9 +30,9 @@ public fun PageCurl( Modifier .curlGesture( state = internalState, - enabled = updatedCurrent < state.max - 1, + enabled = config.interaction.drag.forward.enabled && updatedCurrent < state.max - 1, scope = scope, - direction = config.interaction.forward, + direction = config.interaction.drag.forward, start = internalState.rightEdge, end = internalState.leftEdge, edge = internalState.forward, @@ -40,14 +40,21 @@ public fun PageCurl( ) .curlGesture( state = internalState, - enabled = updatedCurrent > 0, + enabled = config.interaction.drag.backward.enabled && updatedCurrent > 0, scope = scope, - direction = config.interaction.backward, + direction = config.interaction.drag.backward, start = internalState.leftEdge, end = internalState.rightEdge, edge = internalState.backward, onChange = { state.current = updatedCurrent - 1 } ) + .tapGesture( + state = internalState, + scope = scope, + interaction = config.interaction.tap, + onTapForward = state::next, + onTapBackward = state::prev, + ) ) { if (updatedCurrent + 1 < state.max) { content(updatedCurrent + 1) diff --git a/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/TapGesture.kt b/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/TapGesture.kt new file mode 100644 index 0000000..91871a6 --- /dev/null +++ b/pagecurl/src/main/kotlin/eu/wewox/pagecurl/page/TapGesture.kt @@ -0,0 +1,50 @@ +package eu.wewox.pagecurl.page + +import androidx.compose.foundation.gestures.awaitFirstDown +import androidx.compose.foundation.gestures.forEachGesture +import androidx.compose.foundation.gestures.waitForUpOrCancellation +import androidx.compose.ui.Modifier +import androidx.compose.ui.input.pointer.pointerInput +import eu.wewox.pagecurl.ExperimentalPageCurlApi +import eu.wewox.pagecurl.config.InteractionConfig +import eu.wewox.pagecurl.utils.multiply +import kotlinx.coroutines.CoroutineScope +import kotlinx.coroutines.launch + +@ExperimentalPageCurlApi +internal fun Modifier.tapGesture( + state: PageCurlState.InternalState, + scope: CoroutineScope, + interaction: InteractionConfig.Tap, + onTapForward: suspend () -> Unit, + onTapBackward: suspend () -> Unit, +): Modifier = pointerInput(interaction, state) { + forEachGesture { + awaitPointerEventScope { + val down = awaitFirstDown().also { it.consume() } + val up = waitForUpOrCancellation() ?: return@awaitPointerEventScope + + if ((down.position - up.position).getDistance() > viewConfiguration.touchSlop) { + return@awaitPointerEventScope + } + + if (interaction.custom.enabled && interaction.custom.onTap(this, size, up.position)) { + return@awaitPointerEventScope + } + + if (interaction.forward.enabled && interaction.forward.target.multiply(size).contains(up.position)) { + scope.launch { + onTapForward() + } + return@awaitPointerEventScope + } + + if (interaction.backward.enabled && interaction.backward.target.multiply(size).contains(up.position)) { + scope.launch { + onTapBackward() + } + return@awaitPointerEventScope + } + } + } +} diff --git a/pagecurl/src/main/kotlin/eu/wewox/pagecurl/utils/RectUtils.kt b/pagecurl/src/main/kotlin/eu/wewox/pagecurl/utils/RectUtils.kt new file mode 100644 index 0000000..a9620fa --- /dev/null +++ b/pagecurl/src/main/kotlin/eu/wewox/pagecurl/utils/RectUtils.kt @@ -0,0 +1,11 @@ +package eu.wewox.pagecurl.utils + +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Rect +import androidx.compose.ui.unit.IntSize + +internal fun Rect.multiply(size: IntSize): Rect = + Rect( + topLeft = Offset(size.width * left, size.height * top), + bottomRight = Offset(size.width * right, size.height * bottom), + )