Fix TextElement clipping

badoualy · May 9, 2023 · 7ce553d · 7ce553d
1 parent a0bd2e8
commit 7ce553d
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/build.gradle b/build.gradle
@@ -1,7 +1,7 @@
 plugins {
     id 'com.android.application' version '7.4.0' apply false
     id 'com.android.library' version '7.4.0' apply false
-    id 'org.jetbrains.kotlin.android' version '1.8.0' apply false
+    id 'org.jetbrains.kotlin.android' version '1.8.10' apply false
 }
 
 task clean(type: Delete) {

diff --git a/sample/build.gradle b/sample/build.gradle
@@ -34,12 +34,12 @@ android {
         jvmTarget = '1.8'
     }
     composeOptions {
-        kotlinCompilerExtensionVersion "1.4.0"
+        kotlinCompilerExtensionVersion "1.4.4"
     }
 }
 
 dependencies {
-    implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.0"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.10"
     implementation "org.jetbrains.kotlinx:kotlinx-collections-immutable:0.3.5"
     implementation 'androidx.core:core-ktx:1.9.0'
     implementation 'androidx.appcompat:appcompat:1.6.0'

diff --git a/story-editor/build.gradle b/story-editor/build.gradle
@@ -35,7 +35,7 @@ android {
         jvmTarget = '1.8'
     }
     composeOptions {
-        kotlinCompilerExtensionVersion "1.4.0"
+        kotlinCompilerExtensionVersion "1.4.4"
     }
 }
 
@@ -54,7 +54,7 @@ afterEvaluate {
 }
 
 dependencies {
-    implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.0"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:1.8.10"
     implementation "org.jetbrains.kotlinx:kotlinx-collections-immutable:0.3.5"
 
     implementation "androidx.compose.ui:ui:1.3.3"

diff --git a/story-editor/src/main/java/com/github/badoualy/storyeditor/element/text/TextElement.kt b/story-editor/src/main/java/com/github/badoualy/storyeditor/element/text/TextElement.kt
@@ -30,14 +30,15 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.draw.drawWithContent
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.geometry.CornerRadius
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Rect
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.drawscope.clipRect
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalFocusManager
@@ -358,22 +359,31 @@ private fun TextElementTextField(
                 .width(IntrinsicSize.Min)
                 // Cursor thickness is 2.dp
                 .widthIn(min = 2.dp)
-                .drawBehind {
+                .drawWithContent {
+                    if (linesBounds.isEmpty()) return@drawWithContent
+
                     // Draw background on each line
-                    if (linesBounds.isEmpty()) return@drawBehind
                     val paddingSize = elementPadding
                         .toDpSize()
                         .toSize()
                     val cornerRadius = CornerRadius(backgroundRadius.toPx())
+                    val lastVisibleLine = linesBounds.lastOrNull { it.bottom <= size.height }
 
                     linesBounds.forEach { lineBounds ->
+                        if (lineBounds.width == 0f || lineBounds.bottom > size.height) return@forEach
                         drawRoundRect(
                             color = backgroundColor,
                             topLeft = lineBounds.topLeft,
                             size = lineBounds.size + paddingSize,
                             cornerRadius = cornerRadius
                         )
                     }
+
+                    // Clip to the last visible line to make sure we don't display vertically cropped text
+                    // because of TextField internal scroll modifier
+                    clipRect(bottom = lastVisibleLine?.bottom ?: size.height) {
+                        this@drawWithContent.drawContent()
+                    }
                 }
                 .then(if (isEmpty) Modifier else Modifier.padding(elementPadding))
                 .then(modifier),
@@ -400,14 +410,15 @@ private fun TextElementTextField(
                         layout.getLineStart(line),
                         layout.getLineEnd(line)
                     )
-                    if (lineContent.isBlank()) return@List Rect.Zero
 
                     val top = layout.getLineTop(line)
+                    val bottom = top + lineHeightPx
+                    if (lineContent.isBlank()) return@List Rect(0f, top, 0f, bottom)
                     Rect(
                         left = layout.getLineLeft(line),
                         top = top,
                         right = layout.getLineRight(line),
-                        bottom = top + lineHeightPx,
+                        bottom = bottom,
                     )
                 }
             }