fix: Coerce page/line passed to Paginated/Scrollable menus, use onValueChange functions as callbacks

Author: 0ffz

guiy-example/src/main/kotlin/com/mineinabyss/guiy/example/gui/PaginatedMenu.kt

@@ -21,15 +21,16 @@ fun PaginatedMenu() {
     ) {
         var items by remember {
             val materials = Material.entries
-            mutableStateOf((1..100).map { ItemStack(materials[it]) })
+            mutableStateOf((1..103).map { ItemStack(materials[it]) })
         }
         var page by remember { mutableStateOf(0) }
         Paginated(
             items,
             page = page,
+            onPageChange = { page = it },
             navbarPosition = NavbarPosition.END,
-            previousButton = { Item(Material.RED_CONCRETE, "Previous", modifier = Modifier.clickable { page-- }) },
-            nextButton = { Item(Material.BLUE_CONCRETE, "Next", modifier = Modifier.clickable { page++ }) },
+            previousButton = { Item(Material.RED_CONCRETE, "Previous") },
+            nextButton = { Item(Material.BLUE_CONCRETE, "Next") },
         ) { pageItems ->
             HorizontalGrid(Modifier.size(4, 5)) {
                 pageItems.forEach { item ->

guiy-example/src/main/kotlin/com/mineinabyss/guiy/example/gui/ScrollingMenu.kt

@@ -27,10 +27,11 @@ fun ScrollingMenu() {
         Scrollable(
             items,
             line = line,
+            onLineChange = { line = it },
             scrollDirection = ScrollDirection.VERTICAL,
             navbarPosition = NavbarPosition.END,
-            previousButton = { Item(Material.RED_CONCRETE, "Previous", modifier = Modifier.clickable { line-- }) },
-            nextButton = { Item(Material.BLUE_CONCRETE, "Next", modifier = Modifier.clickable { line++ }) },
+            previousButton = { Item(Material.RED_CONCRETE, "Previous") },
+            nextButton = { Item(Material.BLUE_CONCRETE, "Next") },
         ) { pageItems ->
             VerticalGrid(Modifier.fillMaxSize()) {
                 pageItems.forEach { item ->

src/main/kotlin/com/mineinabyss/guiy/components/lists/Paginated.kt

@@ -10,6 +10,7 @@ import com.mineinabyss.guiy.layout.Column
 import com.mineinabyss.guiy.layout.Row
 import com.mineinabyss.guiy.layout.Size
 import com.mineinabyss.guiy.modifiers.*
+import com.mineinabyss.guiy.modifiers.click.clickable
 import com.mineinabyss.guiy.modifiers.placement.padding.padding
 import com.mineinabyss.idofront.items.editItemMeta
 import org.bukkit.Material
@@ -24,6 +25,7 @@ import org.bukkit.inventory.ItemStack
 fun <T> Paginated(
     items: List<T>,
     page: Int,
+    onPageChange: (page: Int) -> Unit,
     nextButton: @Composable () -> Unit,
     previousButton: @Composable () -> Unit,
     navbarPosition: NavbarPosition = NavbarPosition.BOTTOM,
@@ -36,20 +38,26 @@ fun <T> Paginated(
 ) {
     var size by remember { mutableStateOf(Size(0, 0)) }
     val itemsPerPage = size.width * size.height
+    val pageCount = if (itemsPerPage == 0) 1 else (-((-items.size).floorDiv(itemsPerPage))).coerceAtLeast(1)
+    val coercedPage = page.coerceIn(0, pageCount - 1)
     Box(Modifier.fillMaxSize()) {
-        val start = page * itemsPerPage
-        val end = (page + 1) * itemsPerPage
+        val start = coercedPage * itemsPerPage
+        val end = (coercedPage + 1) * itemsPerPage
         val pageItems = remember(items, start, end) {
-            if (start < 0) emptyList()
+            if (start < 0 || start >= items.size) emptyList()
             else items.subList(start, end.coerceAtMost(items.size))
         }
         NavbarLayout(
             position = navbarPosition,
             navbar = {
                 NavbarButtons(navbarPosition, navbarBackground) {
-                    if (page > 0) previousButton()
+                    if (coercedPage > 0) Box(Modifier.clickable { onPageChange(coercedPage - 1) }) {
+                        previousButton()
+                    }
                     else Spacer(1, 1)
-                    if (end < items.size) nextButton()
+                    if (end < items.size) Box(Modifier.clickable { onPageChange(coercedPage + 1) }) {
+                        nextButton()
+                    }
                     else Spacer(1, 1)
                 }
             },

src/main/kotlin/com/mineinabyss/guiy/components/lists/Scrollable.kt

@@ -5,6 +5,7 @@ import com.mineinabyss.guiy.components.Spacer
 import com.mineinabyss.guiy.layout.Box
 import com.mineinabyss.guiy.layout.Size
 import com.mineinabyss.guiy.modifiers.Modifier
+import com.mineinabyss.guiy.modifiers.click.clickable
 import com.mineinabyss.guiy.modifiers.fillMaxSize
 import com.mineinabyss.guiy.modifiers.onSizeChanged
 import com.mineinabyss.idofront.items.editItemMeta
@@ -24,6 +25,7 @@ enum class ScrollDirection {
 fun <T> Scrollable(
     items: List<T>,
     line: Int,
+    onLineChange: (line: Int) -> Unit,
     scrollDirection: ScrollDirection,
     nextButton: @Composable () -> Unit,
     previousButton: @Composable () -> Unit,
@@ -38,20 +40,26 @@ fun <T> Scrollable(
     var size by remember { mutableStateOf(Size(0, 0)) }
     val itemsPerLine = if (scrollDirection == ScrollDirection.VERTICAL) size.width else size.height
     val totalLines = if (scrollDirection == ScrollDirection.VERTICAL) size.height else size.width
+    val lineCount = if(itemsPerLine == 0) 1 else (-((-items.size).floorDiv(itemsPerLine))).coerceAtLeast(1)
+    val coercedLine = line.coerceIn(0, lineCount - 1)
     Box(Modifier.fillMaxSize()) {
-        val start = line * itemsPerLine
+        val start = coercedLine * itemsPerLine
         val end = start + (itemsPerLine * totalLines)
         val pageItems = remember(items, start, end) {
-            if (start < 0) emptyList()
+            if (start < 0 || start >= items.size) emptyList()
             else items.subList(start, end.coerceAtMost(items.size))
         }
         NavbarLayout(
             position = navbarPosition,
             navbar = {
                 NavbarButtons(navbarPosition, navbarBackground) {
-                    if (line > 0) previousButton()
+                    if (coercedLine > 0) Box(Modifier.clickable { onLineChange(coercedLine - 1) }) {
+                        previousButton()
+                    }
                     else Spacer(1, 1)
-                    if (end < items.size) nextButton()
+                    if (end < items.size) Box(Modifier.clickable { onLineChange(coercedLine + 1) }) {
+                        nextButton()
+                    }
                     else Spacer(1, 1)
                 }
             },