feat: add drag-and-drop to channel editor

app/src/main/java/com/geeksville/mesh/ui/ChannelFragment.kt

@@ -8,13 +8,15 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material.ButtonDefaults
@@ -51,6 +53,7 @@ import androidx.compose.ui.platform.ComposeView
 import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.platform.ViewCompositionStrategy
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -89,6 +92,9 @@ import com.geeksville.mesh.ui.components.DropDownPreference
 import com.geeksville.mesh.ui.components.PreferenceFooter
 import com.geeksville.mesh.ui.components.config.ChannelCard
 import com.geeksville.mesh.ui.components.config.EditChannelDialog
+import com.geeksville.mesh.ui.components.dragContainer
+import com.geeksville.mesh.ui.components.dragDropItemsIndexed
+import com.geeksville.mesh.ui.components.rememberDragDropState
 import com.google.accompanist.themeadapter.appcompat.AppCompatTheme
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.journeyapps.barcodescanner.ScanContract
@@ -159,6 +165,19 @@ fun ChannelScreen(
  }
  }
 
+ fun updateSettingsList(update: MutableList<ChannelProtos.ChannelSettings>.() -> Unit) {
+ try {
+ val list = channelSet.settingsList.toMutableList()
+ list.update()
+ channelSet = channelSet.copy {
+ settings.clear()
+ settings.addAll(list)
+ }
+ } catch (ex: Exception) {
+ errormsg("Error updating ChannelSettings list:", ex)
+ }
+ }
+
  fun zxingScan() {
  debug("Starting zxing QR code scanner")
  val zxingScan = ScanOptions()
@@ -273,10 +292,18 @@ fun ChannelScreen(
  )
  }
 
+ val listState = rememberLazyListState()
+ val dragDropState = rememberDragDropState(listState) { from, to ->
+ updateSettingsList { add(to.index, removeAt(from.index)) }
+ }
+
  LazyColumn(
- modifier = Modifier
- .fillMaxSize()
- .padding(horizontal = 24.dp, vertical = 16.dp),
+ modifier = Modifier.dragContainer(
+ dragDropState = dragDropState,
+ haptics = LocalHapticFeedback.current,
+ ),
+ state = listState,
+ contentPadding = PaddingValues(horizontal = 24.dp, vertical = 16.dp),
  ) {
  if (!showChannelEditor) item {
  ClickableTextField(
@@ -288,18 +315,18 @@ fun ChannelScreen(
  modifier = Modifier.fillMaxWidth(),
  )
  } else {
- itemsIndexed(channelSet.settingsList) { index, channel ->
+ dragDropItemsIndexed(
+ items = channelSet.settingsList,
+ dragDropState = dragDropState,
+ ) { index, channel, isDragging ->
+ val elevation by animateDpAsState(if (isDragging) 8.dp else 4.dp, label = "drag")
  ChannelCard(
+ elevation = elevation,
  index = index,
  title = channel.name.ifEmpty { modemPresetName },
  enabled = enabled,
  onEditClick = { showEditChannelDialog = index },
- onDeleteClick = {
- channelSet = channelSet.copy {
- settings.clear()
- settings.addAll(channelSet.settingsList.filterIndexed { i, _ -> i != index })
- }
- }
+ onDeleteClick = { updateSettingsList { removeAt(index) } }
  )
  }
  item {

app/src/main/java/com/geeksville/mesh/ui/components/config/ChannelSettingsItemList.kt

@@ -2,18 +2,20 @@ package com.geeksville.mesh.ui.components.config
 
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.animation.core.tween
 import androidx.compose.animation.slideInHorizontally
 import androidx.compose.animation.slideOutHorizontally
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.Card
 import androidx.compose.material.Chip
 import androidx.compose.material.ContentAlpha
@@ -36,15 +38,20 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.geeksville.mesh.ChannelProtos.ChannelSettings
 import com.geeksville.mesh.R
 import com.geeksville.mesh.channelSettings
 import com.geeksville.mesh.model.Channel
 import com.geeksville.mesh.ui.components.PreferenceCategory
 import com.geeksville.mesh.ui.components.PreferenceFooter
+import com.geeksville.mesh.ui.components.dragContainer
+import com.geeksville.mesh.ui.components.dragDropItemsIndexed
+import com.geeksville.mesh.ui.components.rememberDragDropState
 
 @OptIn(ExperimentalMaterialApi::class)
 @Composable
@@ -54,13 +61,14 @@ fun ChannelCard(
  enabled: Boolean,
  onEditClick: () -> Unit,
  onDeleteClick: () -> Unit,
+ elevation: Dp = 4.dp,
 ) {
  Card(
  modifier = Modifier
  .fillMaxWidth()
  .padding(vertical = 2.dp)
  .clickable(enabled = enabled) { onEditClick() },
- elevation = 4.dp
+ elevation = elevation,
  ) {
  Row(
  verticalAlignment = Alignment.CenterVertically,
@@ -96,6 +104,15 @@ fun ChannelSettingsItemList(
  val focusManager = LocalFocusManager.current
  val settingsListInput = remember(settingsList) { settingsList.toMutableStateList() }
 
+ val listState = rememberLazyListState()
+ val dragDropState = rememberDragDropState(listState) { from, to ->
+ settingsListInput.apply {
+ val fromIndex = indexOfFirst { it.hashCode() == from.key }
+ val toIndex = indexOfFirst { it.hashCode() == to.key }
+ add(toIndex, removeAt(fromIndex))
+ }
+ }
+
  val isEditing: Boolean = settingsList.size != settingsListInput.size
  || settingsList.zip(settingsListInput).any { (item1, item2) -> item1 != item2 }
 
@@ -123,12 +140,22 @@ fun ChannelSettingsItemList(
  .clickable(onClick = { }, enabled = false)
  ) {
  LazyColumn(
- modifier = Modifier.padding(horizontal = 16.dp)
+ modifier = Modifier.dragContainer(
+ dragDropState = dragDropState,
+ haptics = LocalHapticFeedback.current,
+ ),
+ state = listState,
+ contentPadding = PaddingValues(horizontal = 16.dp),
  ) {
  item { PreferenceCategory(text = "Channels") }
 
- itemsIndexed(settingsListInput) { index, channel ->
+ dragDropItemsIndexed(
+ items = settingsListInput,
+ dragDropState = dragDropState,
+ ) { index, channel, isDragging ->
+ val elevation by animateDpAsState(if (isDragging) 8.dp else 4.dp, label = "drag")
  ChannelCard(
+ elevation = elevation,
  index = index,
  title = channel.name.ifEmpty { modemPresetName },
  enabled = enabled,