Make text fields overlap innerPadding area on overflow

zhelenskiy · Apr 7, 2024 · e2fc890 · e2fc890
1 parent b5f61e9
commit e2fc890
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/editor/src/commonMain/kotlin/editor/basic/BasicSourceCodeTextField.kt b/editor/src/commonMain/kotlin/editor/basic/BasicSourceCodeTextField.kt
@@ -4,6 +4,7 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.AnimationSpec
 import androidx.compose.animation.core.Spring
 import androidx.compose.animation.core.SpringSpec
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.ScrollState
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.*
@@ -332,14 +333,19 @@ public fun <T : Token> BasicSourceCodeTextField(
                 additionalOuterComposable(textLayout, innerComposable)
             }
         ) {
-            Row(modifier = Modifier.padding(innerPadding).verticalScroll(verticalScrollState).widthIn(minWidth)) {
+            Row(
+                modifier = Modifier
+                    .verticalScroll(verticalScrollState)
+                    .padding(top = innerTopPadding, bottom = innerBottomPadding)
+                    .widthIn(minWidth)
+            ) {
                 AnimatedVisibility(showLineNumbers) {
                     Column(horizontalAlignment = Alignment.End) {
                         repeat(state.offsets.size) {
                             BasicText(
                                 text = "${it + 1}",
                                 style = textStyle.copy(color = lineNumbersColor),
-                                modifier = lineNumberModifier.height(textHeightDp),
+                                modifier = lineNumberModifier.padding(start = innerStartPadding).height(textHeightDp),
                             )
                         }
                     }
@@ -433,8 +439,12 @@ public fun <T : Token> BasicSourceCodeTextField(
                         }
                     }
 
+                    val textFieldStartPadding by animateDpAsState(if (showLineNumbers) 0.dp else innerStartPadding)
+
                     BoxWithConstraints(
-                        modifier = Modifier.horizontalScroll(horizontalScrollState)
+                        modifier = Modifier
+                            .horizontalScroll(horizontalScrollState)
+                            .padding(start = textFieldStartPadding, end = innerEndPadding)
                     ) {
                         val innerSizes = this
                         var textFieldSize: IntSize? by remember { mutableStateOf(null) }

diff --git a/editor/src/commonMain/kotlin/editor/basic/Decorators.kt b/editor/src/commonMain/kotlin/editor/basic/Decorators.kt
@@ -1,6 +1,7 @@
 package editor.basic
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.*
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
@@ -12,6 +13,7 @@ import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.buildAnnotatedString
@@ -206,12 +208,16 @@ public inline fun <reified Bracket : ScopeChangingToken, T : Token> BoxWithConst
             modifier = Modifier
                 .heightIn(max = maximumStickyHeaderHeight)
                 .background(backgroundColor)
-                .padding(innerPadding)
         ) {
+            val topPadding = innerPadding.calculateTopPadding()
+            val bottomPadding = innerPadding.calculateBottomPadding()
+            val startPadding = innerPadding.calculateStartPadding(LocalLayoutDirection.current)
+            val endPadding = innerPadding.calculateEndPadding(LocalLayoutDirection.current)
             Row(
                 modifier = Modifier
                     .width(this@StickyHeader.maxWidth)
                     .verticalScroll(rememberScrollState())
+                    .padding(top = topPadding, bottom = bottomPadding)
             ) {
                 val lineCount: Int = state.offsets.size
                 val linesToWrite = requestedLinesSet.associateWith { lineNumber ->
@@ -241,7 +247,7 @@ public inline fun <reified Bracket : ScopeChangingToken, T : Token> BoxWithConst
                                     text = "${lineNumber.inc()}",
                                     style = textStyle.copy(color = lineNumbersColor, textAlign = TextAlign.End),
                                     modifier = lineNumberModifier
-                                        .width(lineNumbersWidth)
+                                        .width(lineNumbersWidth + startPadding)
                                         .height(textHeightDp)
                                 )
                             }
@@ -250,7 +256,13 @@ public inline fun <reified Bracket : ScopeChangingToken, T : Token> BoxWithConst
                 }
                 BoxWithConstraints {
                     val outerScope = this
-                    BoxWithConstraints(Modifier.fillMaxWidth().horizontalScroll(rememberScrollState())) {
+                    val textFieldStartPadding by animateDpAsState(if (showLineNumbers) 0.dp else startPadding)
+                    BoxWithConstraints(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .horizontalScroll(rememberScrollState())
+                            .padding(start = textFieldStartPadding, end = endPadding),
+                    ) {
                         val innerScope = this
                         var maxWidth by remember { mutableStateOf(outerScope.maxWidth) }
                         Wrapper(