Skip to content

Pointer events do not bubble up to parent composable in case links are present in annotated string #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DoronTorangy wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Pointer events do not bubble up to parent composable in case links are present in annotated string #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion example/src/main/java/de/charlex/compose/htmltext/example/MainActivity.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,17 @@ import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
Expand Down Expand Up @@ -45,7 +51,24 @@ fun Greeting() {

@Composable
fun StringGreeting() {
HtmlText(text = "Hello <b>World</b>. This <i><strike>text</strike>sentence</i> is form<b>att<u>ed</u></b> in simple html. <a href=\"https://github.com/ch4rl3x/HtmlText\">HtmlText</a>")
HtmlText(text = "Hello <b>World</b>. This <i><strike>text</strike>sentence</i> is form<b>att<u>ed</u></b> in simple html, . <a href=\"https://github.com/ch4rl3x/HtmlText\">HtmlText</a>")
}

@Composable
fun ClickableContentWithLink() {
var isExpanded by remember { mutableStateOf(false) }

Column {
HtmlText(
modifier = Modifier.clickable {
isExpanded = !isExpanded
},
text = "Hello <b>World</b>. In case parent has a clickable modifier, it will be invoked (unless the annotated string has a clickable link). <a href=\"https://github.com/ch4rl3x/HtmlText\">HtmlText</a>"
)
AnimatedVisibility(isExpanded) {
HtmlText(text = "I am <b>expanded</b> now")
}
}
}

@Composable
Expand Down Expand Up @@ -95,6 +118,7 @@ fun DefaultPreview() {
Column {
Greeting()
StringGreeting()
ClickableContentWithLink()
}
}
}
Expand Down
61 changes: 57 additions & 4 deletions material-html-text/src/main/java/de/charlex/compose/material/HtmlText.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import android.text.style.StyleSpan
import android.text.style.URLSpan
import android.text.style.UnderlineSpan
import androidx.annotation.StringRes
import androidx.compose.foundation.gestures.awaitEachGesture
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.text.InlineTextContent
import androidx.compose.material.LocalTextStyle
Expand All @@ -19,7 +21,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.PointerEventPass
import androidx.compose.ui.input.pointer.PointerInputScope
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalUriHandler
Expand All @@ -41,7 +46,10 @@ import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.util.fastAny
import androidx.compose.ui.util.fastForEach
import androidx.core.text.getSpans
import kotlinx.coroutines.coroutineScope

/**
* Simple Text composable to show the text with html styling from string resources.
Expand Down Expand Up @@ -233,19 +241,24 @@ fun HtmlText(
Text(
modifier = modifier.then(if (clickable) Modifier
.pointerInput(Unit) {
detectTapGestures(onTap = { pos ->
layoutResult.value?.let { layoutResult ->
interceptTap(onTap = { pos ->
val shouldConsumeEvent = layoutResult.value?.let { layoutResult ->
val position = layoutResult.getOffsetForPosition(pos)
annotatedString
return@let annotatedString
.getStringAnnotations(position, position)
.firstOrNull()
?.let { sa ->
if (sa.tag == "url") { // NON-NLS
val url = sa.item
onUriClick?.let { it(url) } ?: uriHandler.openUri(url)
true
} else {
false
}
}
}
} ?: false

return@interceptTap shouldConsumeEvent
})
}
.semantics {
Expand Down Expand Up @@ -358,3 +371,43 @@ fun Spanned.toAnnotatedString(
}
}
}

typealias ShouldConsumePointerEvent = Boolean

suspend fun PointerInputScope.interceptTap(
pass: PointerEventPass = PointerEventPass.Initial,
onTap: ((Offset) -> ShouldConsumePointerEvent)? = null,
) = coroutineScope {
if (onTap == null) return@coroutineScope

awaitEachGesture {
val down = awaitFirstDown(pass = pass)
val downTime = System.currentTimeMillis()
val tapTimeout = viewConfiguration.longPressTimeoutMillis
val tapPosition = down.position

do {
val event = awaitPointerEvent(pass)
val currentTime = System.currentTimeMillis()

if (event.changes.size != 1) break // More than one event: not a tap
if (currentTime - downTime >= tapTimeout) break // Too slow: not a tap

val change = event.changes[0]

// Too much movement: not a tap
if ((change.position - tapPosition).getDistance() > viewConfiguration.touchSlop) break

if (change.id == down.id && !change.pressed) {
if (onTap(change.position)) {
change.consume()
down.consume()
do {
val pointerEvent = awaitPointerEvent()
pointerEvent.changes.fastForEach { it.consume() }
} while (pointerEvent.changes.fastAny { it.pressed })
}
}
} while (event.changes.any { it.id == down.id && it.pressed })
}
}
62 changes: 57 additions & 5 deletions material3-html-text/src/main/java/de/charlex/compose/material3/HtmlText.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import android.text.style.StyleSpan
import android.text.style.URLSpan
import android.text.style.UnderlineSpan
import androidx.annotation.StringRes
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.gestures.awaitEachGesture
import androidx.compose.foundation.gestures.awaitFirstDown
import androidx.compose.foundation.text.InlineTextContent
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.MaterialTheme
Expand All @@ -19,7 +20,10 @@ import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.PointerEventPass
import androidx.compose.ui.input.pointer.PointerInputScope
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalUriHandler
Expand All @@ -41,7 +45,10 @@ import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextDecoration
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.util.fastAny
import androidx.compose.ui.util.fastForEach
import androidx.core.text.getSpans
import kotlinx.coroutines.coroutineScope

/**
* Simple Text composable to show the text with html styling from string resources.
Expand Down Expand Up @@ -233,19 +240,24 @@ fun HtmlText(
Text(
modifier = modifier.then(if (clickable) Modifier
.pointerInput(Unit) {
detectTapGestures(onTap = { pos ->
layoutResult.value?.let { layoutResult ->
interceptTap(onTap = { pos ->
val shouldConsumeEvent = layoutResult.value?.let { layoutResult ->
val position = layoutResult.getOffsetForPosition(pos)
annotatedString
return@let annotatedString
.getStringAnnotations(position, position)
.firstOrNull()
?.let { sa ->
if (sa.tag == "url") { // NON-NLS
val url = sa.item
onUriClick?.let { it(url) } ?: uriHandler.openUri(url)
true
} else {
false
}
}
}
} ?: false

return@interceptTap shouldConsumeEvent
})
}
.semantics {
Expand Down Expand Up @@ -358,3 +370,43 @@ fun Spanned.toAnnotatedString(
}
}
}

typealias ShouldConsumePointerEvent = Boolean

suspend fun PointerInputScope.interceptTap(
pass: PointerEventPass = PointerEventPass.Initial,
onTap: ((Offset) -> ShouldConsumePointerEvent)? = null,
) = coroutineScope {
if (onTap == null) return@coroutineScope

awaitEachGesture {
val down = awaitFirstDown(pass = pass)
val downTime = System.currentTimeMillis()
val tapTimeout = viewConfiguration.longPressTimeoutMillis
val tapPosition = down.position

do {
val event = awaitPointerEvent(pass)
val currentTime = System.currentTimeMillis()

if (event.changes.size != 1) break // More than one event: not a tap
if (currentTime - downTime >= tapTimeout) break // Too slow: not a tap

val change = event.changes[0]

// Too much movement: not a tap
if ((change.position - tapPosition).getDistance() > viewConfiguration.touchSlop) break

if (change.id == down.id && !change.pressed) {
if (onTap(change.position)) {
change.consume()
down.consume()
do {
val pointerEvent = awaitPointerEvent()
pointerEvent.changes.fastForEach { it.consume() }
} while (pointerEvent.changes.fastAny { it.pressed })
}
}
} while (event.changes.any { it.id == down.id && it.pressed })
}
}