@imgly/editor-react-native 1.81.0-rc.0 → 1.81.0-rc.1

package/android/src/main/kotlin/ly/img/editor/configuration/memories/widget/ImageToolbar.kt

@@ -1,401 +0,0 @@
-@file:OptIn(androidx.compose.material3.ExperimentalMaterial3Api::class)
-
-package ly.img.editor.configuration.memories.widget
-
-import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.scaleIn
-import androidx.compose.animation.scaleOut
-import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.AlertDialog
-import androidx.compose.material3.Badge
-import androidx.compose.material3.BadgedBox
-import androidx.compose.material3.Card
-import androidx.compose.material3.CardDefaults
-import androidx.compose.material3.Icon
-import androidx.compose.material3.IconButton
-import androidx.compose.material3.LocalContentColor
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
-import androidx.compose.material3.minimumInteractiveComponentSize
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.CompositionLocalProvider
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.semantics.Role
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.unit.dp
-import ly.img.editor.configuration.memories.iconPack.AddPhotoAlternate
-import ly.img.editor.configuration.memories.iconPack.ArrowForward
-import ly.img.editor.configuration.memories.iconPack.Check
-import ly.img.editor.configuration.memories.iconPack.Delete
-import ly.img.editor.configuration.memories.iconPack.DeleteOutline
-import ly.img.editor.configuration.memories.iconPack.Sort
-import ly.img.editor.configuration.memories.iconPack.TouchTriple
-import ly.img.editor.core.iconpack.IconPack
-
-@Composable
-fun ImageToolbar(
-    modifier: Modifier = Modifier,
-    onAddImage: () -> Unit = {},
-    onToggleSort: () -> Unit = {},
-    onDeleteAll: (() -> Unit)? = null,
-    onDeleteSelected: () -> Unit = {},
-    onProceed: () -> Unit = {},
-    isSortEnabled: Boolean = false,
-    isSortAscending: Boolean = true,
-    hasImages: Boolean = false,
-    showDeleteButton: Boolean = true,
-    selectedForDeletionCount: Int = 0,
-    totalCount: Int = 0,
-    confirmMode: Boolean = false,
-    multiSelectMode: Boolean = false,
-    onToggleMultiSelect: () -> Unit = {},
-) {
-    var showDeleteDialog by remember { mutableStateOf(false) }
-
-    Row(
-        modifier = modifier
-            .fillMaxWidth(),
-        horizontalArrangement = Arrangement.spacedBy(
-            12.dp,
-            alignment = Alignment.CenterHorizontally,
-        ),
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        // Left pill with multiple actions
-        Card(
-            modifier = Modifier
-                .weight(1f, false)
-                .height(64.dp),
-            shape = CircleShape,
-            elevation = CardDefaults.elevatedCardElevation(
-                defaultElevation = 3.dp,
-            ),
-            colors = CardDefaults.cardColors(
-                containerColor = MaterialTheme.colorScheme.surfaceVariant,
-            ),
-        ) {
-            Row(
-                modifier = Modifier
-                    .fillMaxHeight()
-                    .padding(horizontal = 8.dp),
-                horizontalArrangement = Arrangement.Center,
-                verticalAlignment = Alignment.CenterVertically,
-            ) {
-                // Add photos button — hidden while selecting images to delete. Its trailing
-                // gap lives inside the AnimatedVisibility so it collapses with the button.
-                AnimatedVisibility(visible = !multiSelectMode) {
-                    IconButton(
-                        onClick = onAddImage,
-                        modifier = Modifier.padding(end = 4.dp),
-                    ) {
-                        Icon(
-                            imageVector = IconPack.AddPhotoAlternate,
-                            contentDescription = "Add photos",
-                        )
-                    }
-                }
-
-                // Multi-select toggle
-                IconButton(
-                    onClick = onToggleMultiSelect,
-                    modifier = Modifier
-                        .background(
-                            color = if (multiSelectMode) {
-                                MaterialTheme.colorScheme.primaryContainer
-                            } else {
-                                Color.Transparent
-                            },
-                            shape = CircleShape,
-                        ),
-                ) {
-                    Icon(
-                        imageVector = IconPack.TouchTriple,
-                        contentDescription = if (multiSelectMode) {
-                            "Exit selection mode"
-                        } else {
-                            "Select media"
-                        },
-                        tint = if (multiSelectMode) {
-                            MaterialTheme.colorScheme.onPrimaryContainer
-                        } else {
-                            LocalContentColor.current
-                        },
-                    )
-                }
-
-                // Sort button
-                IconButton(
-                    onClick = onToggleSort,
-                    modifier = Modifier
-                        .padding(start = 4.dp)
-                        .background(
-                            color = if (isSortEnabled) {
-                                MaterialTheme.colorScheme.primaryContainer
-                            } else {
-                                Color.Transparent
-                            },
-                            shape = CircleShape,
-                        ),
-                ) {
-                    Icon(
-                        imageVector = IconPack.Sort,
-                        contentDescription = "Sort by date",
-                        modifier = Modifier
-                            .graphicsLayer(
-                                scaleY = if (isSortEnabled && !isSortAscending) -1f else 1f,
-                            ),
-                        tint = if (isSortEnabled) {
-                            MaterialTheme.colorScheme.onPrimaryContainer
-                        } else {
-                            LocalContentColor.current
-                        },
-                    )
-                }
-
-                // Delete button. Off: filled trash → delete all. On: outlined trash with a
-                // count badge (from 0) → delete the current selection.
-                if (showDeleteButton) {
-                    val deleteEnabled =
-                        if (multiSelectMode) selectedForDeletionCount > 0 else hasImages
-                    // A plain IconButton clips its content to a circular state layer, which cuts off
-                    // the BadgedBox count badge at the icon's corner. Use an unclipped, unbounded button.
-                    UnboundedIconButton(
-                        onClick = { showDeleteDialog = true },
-                        enabled = deleteEnabled,
-                        modifier = Modifier.padding(start = 4.dp),
-                    ) {
-                        BadgedBox(
-                            badge = {
-                                SelectionCountBadge(
-                                    visible = multiSelectMode,
-                                    count = selectedForDeletionCount,
-                                )
-                            },
-                        ) {
-                            Icon(
-                                imageVector = if (multiSelectMode) {
-                                    IconPack.DeleteOutline
-                                } else {
-                                    IconPack.Delete
-                                },
-                                contentDescription = if (multiSelectMode) {
-                                    "Delete selected media"
-                                } else {
-                                    "Delete all media"
-                                },
-                            )
-                        }
-                    }
-                }
-            }
-        }
-
-        // Right pill - Proceed button
-        Card(
-            modifier = Modifier
-                .size(56.dp),
-            shape = RoundedCornerShape(14.dp),
-            elevation = CardDefaults.elevatedCardElevation(
-                defaultElevation = 3.dp,
-            ),
-            colors = CardDefaults.cardColors(
-                containerColor = if (hasImages) {
-                    MaterialTheme.colorScheme.primary
-                } else {
-                    MaterialTheme.colorScheme.surfaceVariant
-                },
-            ),
-        ) {
-            IconButton(
-                onClick = onProceed,
-                enabled = hasImages,
-                modifier = Modifier.fillMaxSize(),
-            ) {
-                Icon(
-                    imageVector = if (confirmMode) {
-                        IconPack.Check
-                    } else {
-                        IconPack.ArrowForward
-                    },
-                    contentDescription = if (confirmMode) "Apply changes" else "Proceed",
-                    tint = if (hasImages) {
-                        MaterialTheme.colorScheme.onPrimary
-                    } else {
-                        MaterialTheme.colorScheme.onSurfaceVariant
-                    },
-                )
-            }
-        }
-    }
-
-    if (showDeleteDialog) {
-        val count = if (multiSelectMode) selectedForDeletionCount else totalCount
-        val noun = if (count == 1) "item" else "items"
-        DeleteConfirmationDialog(
-            title = if (multiSelectMode) "Delete selected media?" else "Delete all media?",
-            message = if (multiSelectMode) {
-                "Remove $count selected $noun? This can't be undone."
-            } else {
-                "Remove all $count $noun? This can't be undone."
-            },
-            onConfirm = {
-                showDeleteDialog = false
-                if (multiSelectMode) onDeleteSelected() else onDeleteAll?.invoke()
-            },
-            onDismiss = { showDeleteDialog = false },
-        )
-    }
-}
-
-/**
- * An icon button that does not clip its content to a circle (so a [BadgedBox] badge can overflow
- * past the icon's corner) and ripples without a bounded circular mask.
- */
-@Composable
-private fun UnboundedIconButton(
-    onClick: () -> Unit,
-    modifier: Modifier = Modifier,
-    enabled: Boolean = true,
-    content: @Composable () -> Unit,
-) {
-    Box(
-        modifier = modifier
-            .minimumInteractiveComponentSize()
-            .size(48.dp)
-            .clickable(
-                interactionSource = remember { MutableInteractionSource() },
-                indication = rememberRipple(bounded = false, radius = 22.dp),
-                enabled = enabled,
-                role = Role.Button,
-                onClick = onClick,
-            ),
-        contentAlignment = Alignment.Center,
-    ) {
-        val baseColor = LocalContentColor.current
-        CompositionLocalProvider(
-            LocalContentColor provides if (enabled) baseColor else baseColor.copy(alpha = 0.38f),
-            content = content,
-        )
-    }
-}
-
-@Composable
-private fun SelectionCountBadge(
-    visible: Boolean,
-    count: Int,
-) {
-    AnimatedVisibility(
-        visible,
-        enter = scaleIn(initialScale = 0f),
-        exit = scaleOut(targetScale = 0f),
-    ) {
-        Badge {
-            Text("$count")
-        }
-    }
-}
-
-@Composable
-private fun DeleteConfirmationDialog(
-    title: String,
-    message: String,
-    onConfirm: () -> Unit,
-    onDismiss: () -> Unit,
-) {
-    AlertDialog(
-        onDismissRequest = onDismiss,
-        icon = {
-            Icon(imageVector = IconPack.Delete, contentDescription = null)
-        },
-        title = { Text(title) },
-        text = { Text(message) },
-        confirmButton = {
-            TextButton(onClick = onConfirm) {
-                Text("Delete", color = MaterialTheme.colorScheme.error)
-            }
-        },
-        dismissButton = {
-            TextButton(onClick = onDismiss) {
-                Text("Cancel")
-            }
-        },
-    )
-}
-
-@Preview(name = "Empty State", showBackground = true)
-@Composable
-fun ImageToolbar_EmptyState_Preview() {
-    MaterialTheme {
-        ImageToolbar(
-            modifier = Modifier.padding(16.dp),
-            hasImages = false,
-            showDeleteButton = true,
-            onDeleteAll = {},
-        )
-    }
-}
-
-@Preview(name = "With Images - Clear all", showBackground = true)
-@Composable
-fun ImageToolbar_WithImages_Preview() {
-    MaterialTheme {
-        ImageToolbar(
-            modifier = Modifier.padding(16.dp),
-            hasImages = true,
-            totalCount = 8,
-            showDeleteButton = true,
-            onDeleteAll = {},
-        )
-    }
-}
-
-@Preview(name = "Multi-select mode (badge)", showBackground = true)
-@Composable
-fun ImageToolbar_SelectionMode_Preview() {
-    MaterialTheme {
-        ImageToolbar(
-            modifier = Modifier.padding(16.dp),
-            hasImages = true,
-            totalCount = 8,
-            selectedForDeletionCount = 3,
-            showDeleteButton = true,
-            onDeleteAll = {},
-            multiSelectMode = true,
-        )
-    }
-}
-
-@Preview(name = "Overlay Mode (No Delete)", showBackground = true)
-@Composable
-fun ImageToolbar_OverlayMode_Preview() {
-    MaterialTheme {
-        ImageToolbar(
-            modifier = Modifier.padding(16.dp),
-            hasImages = true,
-            isSortEnabled = true,
-            showDeleteButton = false,
-        )
-    }
-}

package/android/src/main/kotlin/ly/img/editor/configuration/memories/widget/ReorderableGridState.kt

@@ -1,183 +0,0 @@
-package ly.img.editor.configuration.memories.widget
-
-import androidx.compose.foundation.lazy.grid.LazyGridItemInfo
-import androidx.compose.foundation.lazy.grid.LazyGridState
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.State
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableFloatStateOf
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberUpdatedState
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.geometry.Offset
-import androidx.compose.ui.graphics.graphicsLayer
-import androidx.compose.ui.platform.LocalDensity
-import androidx.compose.ui.unit.IntOffset
-import androidx.compose.ui.unit.dp
-
-/**
- * Holds the live drag state. Kept outside the composable so the gesture callbacks can mutate it
- * without re-running composition until something observable actually changes.
- *
- * Consumed by [ImageGrid] via [rememberReorderableGridState]: it drives the drag-and-drop
- * reordering of the media grid built on Compose Foundation / AndroidX APIs (no third-party
- * reorder libraries).
- */
-class ReorderableGridState internal constructor(
-    private val gridState: LazyGridState,
-    private val scrollThresholdPx: Float,
-    private val maxScrollPerFramePx: Float,
-    private val scrollActivationSlopPx: Float,
-    private val onMove: (Int, Int) -> Unit,
-) {
-    // Current index of the dragged item. Changes as it swaps past neighbours.
-    var draggingItemIndex by mutableStateOf<Int?>(null)
-        private set
-
-    val isDragging: Boolean get() = draggingItemIndex != null
-
-    // Auto-scroll speed in px/frame, set during onDrag and consumed by the LaunchedEffect.
-    var autoScrollSpeed by mutableFloatStateOf(0f)
-        private set
-
-    // Layout offset of the item at pick-up (viewport coords) plus the finger's accumulated travel.
-    private var initialOffset by mutableStateOf(Offset.Zero)
-    private var draggedDelta by mutableStateOf(Offset.Zero)
-
-    private val draggingItemLayoutInfo: LazyGridItemInfo?
-        get() = gridState.layoutInfo.visibleItemsInfo.firstOrNull { it.index == draggingItemIndex }
-
-    /**
-     * The translation to apply to the dragged cell's [graphicsLayer]. Drawing the cell at
-     * `currentLayoutOffset + draggingItemOffset` always lands it at `initialOffset + draggedDelta`
-     * — i.e. exactly under the finger — no matter where its layout slot currently sits. That is the
-     * re-anchor: when a swap changes the item's slot (or auto-scroll shifts the layout), this value
-     * compensates automatically instead of snapping back.
-     */
-    val draggingItemOffset: Offset
-        get() = draggingItemLayoutInfo?.let { item ->
-            initialOffset + draggedDelta - item.offset.toOffset()
-        } ?: Offset.Zero
-
-    fun onDragStart(offset: Offset) {
-        // detectDragGesturesAfterLongPress reports the touch relative to the grid node's top-left
-        // (the viewport, which includes the content-padding region). visibleItemsInfo offsets live in
-        // the item coordinate space whose origin sits at viewportStartOffset (= -beforeContentPadding
-        // on the main axis). Shift the pointer onto that space before hit-testing, or a large top
-        // content padding makes us pick a cell below the one actually touched. Vertical grid → only
-        // the main (y) axis is affected.
-        val pointer = offset.copy(y = offset.y + gridState.layoutInfo.viewportStartOffset)
-        gridState.layoutInfo.visibleItemsInfo
-            .firstOrNull { item -> pointer.inBounds(item) }
-            ?.also {
-                draggingItemIndex = it.index
-                initialOffset = it.offset.toOffset()
-                draggedDelta = Offset.Zero
-            }
-    }
-
-    fun onDrag(dragAmount: Offset) {
-        draggedDelta += dragAmount
-        val dragged = draggingItemLayoutInfo ?: return
-        val from = draggingItemIndex ?: return
-
-        // Visual top-left then centre of the dragged cell, in viewport coords.
-        val topLeft = dragged.offset.toOffset() + draggingItemOffset
-        val center = topLeft + Offset(dragged.size.width / 2f, dragged.size.height / 2f)
-
-        // Hit-test the centre against every other visible cell; swap into the first that contains it.
-        val target = gridState.layoutInfo.visibleItemsInfo.firstOrNull { item ->
-            item.index != from && center.inBounds(item)
-        }
-        if (target != null) {
-            onMove(from, target.index)
-            // Re-point to the new index; draggingItemOffset re-anchors so the cell stays put.
-            draggingItemIndex = target.index
-        }
-
-        autoScrollSpeed = computeAutoScroll(topLeft.y, dragged.size.height.toFloat())
-    }
-
-    fun onDragInterrupted() {
-        draggingItemIndex = null
-        initialOffset = Offset.Zero
-        draggedDelta = Offset.Zero
-        autoScrollSpeed = 0f
-    }
-
-    /**
-     * Positive = scroll down, negative = scroll up, 0 = no auto-scroll.
-     *
-     * Being inside an edge zone is not enough: a cell picked up while already sitting in the top (or
-     * bottom) zone must not yank the list the instant the gesture moves. So we also require the user
-     * to have dragged *toward* that edge past [scrollActivationSlopPx]. [draggedDelta] is cumulative
-     * finger travel since pick-up (auto-scroll does not change it), so a horizontal-only drag keeps
-     * `draggedDelta.y ≈ 0` and never triggers a scroll.
-     */
-    private fun computeAutoScroll(
-        top: Float,
-        height: Float,
-    ): Float {
-        val bottom = top + height
-        val viewStart = gridState.layoutInfo.viewportStartOffset.toFloat()
-        val viewEnd = gridState.layoutInfo.viewportEndOffset.toFloat()
-        return when {
-            bottom > viewEnd - scrollThresholdPx && draggedDelta.y > scrollActivationSlopPx ->
-                (bottom - (viewEnd - scrollThresholdPx)).coerceAtMost(maxScrollPerFramePx)
-            top < viewStart + scrollThresholdPx && draggedDelta.y < -scrollActivationSlopPx ->
-                (top - (viewStart + scrollThresholdPx)).coerceAtLeast(-maxScrollPerFramePx)
-            else -> 0f
-        }
-    }
-
-    private fun Offset.inBounds(item: LazyGridItemInfo): Boolean = x >= item.offset.x &&
-        x <= item.offset.x + item.size.width &&
-        y >= item.offset.y &&
-        y <= item.offset.y + item.size.height
-
-    private fun IntOffset.toOffset() = Offset(x.toFloat(), y.toFloat())
-}
-
-@Composable
-fun rememberReorderableGridState(
-    gridState: LazyGridState,
-    onMove: (from: Int, to: Int) -> Unit,
-): ReorderableGridState {
-    val density = LocalDensity.current
-    val scrollThresholdPx = with(density) { 72.dp.toPx() }
-    val maxScrollPerFramePx = with(density) { 16.dp.toPx() }
-    // How far the user must drag toward an edge before auto-scroll kicks in (prevents an instant
-    // jump when a cell is picked up already sitting in an edge zone).
-    val scrollActivationSlopPx = with(density) { 24.dp.toPx() }
-    // Always route to the latest onMove even though the state object itself is remembered.
-    val onMoveState: State<(Int, Int) -> Unit> = rememberUpdatedState(onMove)
-    return remember(gridState, scrollThresholdPx, maxScrollPerFramePx, scrollActivationSlopPx) {
-        ReorderableGridState(
-            gridState = gridState,
-            scrollThresholdPx = scrollThresholdPx,
-            maxScrollPerFramePx = maxScrollPerFramePx,
-            scrollActivationSlopPx = scrollActivationSlopPx,
-            onMove = { from, to -> onMoveState.value(from, to) },
-        )
-    }
-}
-
-/*
- * Edge cases this minimal version intentionally does not cover:
- *
- *  - Auto-scroll alone does not re-run hit-testing. Swaps happen in onDrag, which only fires on
- *    finger movement. If you hold the finger still in an edge zone the grid scrolls but no new
- *    swaps occur until you nudge the finger. To fix, also call the swap logic from the scroll loop.
- *
- *  - GridCells.Adaptive / variable-span items are untested. Hit-testing assumes uniform cells laid
- *    out left-to-right, top-to-bottom; spanned items can produce surprising targets.
- *
- *  - No drop animation. When released, the cell jumps from its dragged position to its final slot.
- *    Animate draggingItemOffset toward zero on release for a settle effect.
- *
- *  - No haptics on pick-up — add a LocalHapticFeedback.performHapticFeedback in onDragStart.
- *
- *  - A null key falls back to position-based identity, which breaks animateItem() move animations
- *    and can mis-track the dragged item across data changes. Provide a stable key in real use.
- */