More overview cleanup

Author: bnorm

storyboard-core/src/commonMain/kotlin/dev/bnorm/storyboard/core/StoryState.kt

@@ -4,11 +4,8 @@ import androidx.compose.animation.core.SeekableTransitionState
 import androidx.compose.animation.core.Transition
 import androidx.compose.animation.core.createChildTransition
 import androidx.compose.animation.core.rememberTransition
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.*
 import androidx.compose.runtime.saveable.rememberSaveable
-import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshots.Snapshot
 import kotlin.math.abs
 
@@ -34,6 +31,7 @@ fun rememberStoryState(
     return rememberSaveable { StoryState(initialIndex) }
 }
 
+@Stable
 class StoryState @ExperimentalStoryStateApi constructor(
     initialIndex: Storyboard.Index,
 ) {

storyboard-easel/src/commonMain/kotlin/dev/bnorm/storyboard/easel/Story.kt

@@ -24,7 +24,6 @@ import kotlinx.coroutines.launch
 @Composable
 fun Story(
     storyState: StoryState,
-    storyOverviewState: StoryOverviewState = remember(storyState.storyboard) { StoryOverviewState.of(storyState) },
     overlay: @Composable StoryOverlayScope.() -> Unit = {},
     modifier: Modifier = Modifier,
 ) {
@@ -33,9 +32,14 @@ fun Story(
 
     val holder = rememberSaveableStateHolder()
 
+    val storyboard = storyState.storyboard
+    val storyOverviewState = remember(storyboard) { StoryOverviewState.of(storyboard) }
+    var overviewVisible by remember { mutableStateOf(false) } // TODO support initial visibility?
+
     fun handleKeyEvent(event: KeyEvent): Boolean {
         if (event.type == KeyEventType.KeyUp && event.key == Key.Escape) {
-            storyOverviewState.isVisible = true
+            storyOverviewState.jumpToIndex(storyState.currentIndex)
+            overviewVisible = true
             return true
         }
         return false
@@ -44,25 +48,26 @@ fun Story(
     Box(contentAlignment = Alignment.Center, modifier = modifier) {
         SharedTransitionLayout {
             AnimatedContent(
-                targetState = storyOverviewState.isVisible,
+                targetState = overviewVisible,
                 transitionSpec = { fadeIn(tween(300)) togetherWith fadeOut(tween(300)) }
             ) { isOverview ->
                 if (isOverview) {
                     StoryOverview(
-                        overview = storyOverviewState,
+                        storyState = storyState,
+                        storyOverviewState = storyOverviewState,
                         onExitOverview = {
                             job?.cancel()
                             job = coroutineScope.launch {
                                 storyState.jumpTo(it)
                                 job = null
-                                storyOverviewState.isVisible = false
+                                overviewVisible = false
                             }
                         },
                         modifier = Modifier.fillMaxSize(),
                     )
                 } else {
-                    holder.SaveableStateProvider(storyState.storyboard) {
-                        Box(contentAlignment = Alignment.Center, modifier = modifier.fillMaxSize()) {
+                    holder.SaveableStateProvider(storyboard) {
+                        Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
                             StoryOverlay(overlay = overlay) {
                                 StoryScene(
                                     storyState = storyState,

storyboard-easel/src/commonMain/kotlin/dev/bnorm/storyboard/easel/internal/pixels.kt

@@ -13,7 +13,6 @@ import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.unit.dp
 import dev.bnorm.storyboard.core.Storyboard
 import dev.bnorm.storyboard.core.StoryState
-import dev.bnorm.storyboard.easel.internal.aspectRatio
 import dev.bnorm.storyboard.easel.internal.requestFocus
 import dev.bnorm.storyboard.easel.onStoryboardNavigation
 import dev.bnorm.storyboard.ui.ScenePreview
@@ -89,7 +88,7 @@ private fun ClickableScenePreview(
     var job by remember { mutableStateOf<Job?>(null) }
 
     // TODO share with StoryboardOverview?
-    Box(modifier.aspectRatio(storyboard.storyboard.size.aspectRatio)) {
+    Box(modifier) {
         ScenePreview(
             storyboard = storyboard.storyboard,
             index = index,

storyboard-easel/src/commonMain/kotlin/dev/bnorm/storyboard/easel/notes/ShowAssist.kt

@@ -24,56 +24,63 @@ import androidx.compose.ui.input.pointer.pointerHoverIcon
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.*
 import dev.bnorm.storyboard.core.Frame
+import dev.bnorm.storyboard.core.StoryState
 import dev.bnorm.storyboard.core.Storyboard
-import dev.bnorm.storyboard.easel.internal.aspectRatio
 import dev.bnorm.storyboard.easel.internal.requestFocus
 import dev.bnorm.storyboard.easel.rememberSharedContentState
 import dev.bnorm.storyboard.easel.sharedElement
 import dev.bnorm.storyboard.ui.ScenePreview
 
+// TODO keep assistant up-to-date?
+// TODO disable assistant navigation while in overview?
 @Composable
 context(_: AnimatedVisibilityScope, _: SharedTransitionScope)
 fun StoryOverview(
-    overview: StoryOverviewState,
+    storyState: StoryState,
+    storyOverviewState: StoryOverviewState,
     onExitOverview: (Storyboard.Index) -> Unit = {},
     modifier: Modifier = Modifier,
 ) {
-    BoxWithConstraints(modifier = modifier.onOverviewNavigation(overview, onExitOverview)) {
+    fun onClick(columnIndex: Int, itemIndex: Int, item: StoryOverviewState.StateItem<*>) {
+        if (item == storyOverviewState.currentItem) {
+            onExitOverview(item.index)
+        }
+        storyOverviewState.jumpTo(columnIndex, itemIndex)
+    }
+
+    BoxWithConstraints(modifier = modifier.onOverviewNavigation(storyOverviewState, onExitOverview)) {
         val viewSize = DpSize(maxWidth, maxHeight)
         val itemSize = calculateItemSize(
             viewSize = viewSize,
-            itemSize = overview.storyState.storyboard.size
+            itemSize = storyState.storyboard.size
         )
 
-        val hState = rememberOverviewSceneScroll(viewSize, itemSize, overview)
+        val hState = rememberOverviewSceneScroll(viewSize, itemSize, storyOverviewState)
 
         LazyRow(
             state = hState,
             modifier = Modifier.fillMaxSize(),
         ) {
-            itemsIndexed(overview.columns) { columnIndex, column ->
-                val isCurrentColumn = columnIndex == overview.currentColumnIndex
+            itemsIndexed(storyOverviewState.columns) { columnIndex, column ->
+                val isCurrentColumn = columnIndex == storyOverviewState.currentColumnIndex
                 val verticalPaddingDp = (maxHeight - itemSize.height).coerceAtLeast(0.dp) / 2
                 val vState = rememberOverviewStateScroll(itemSize, column)
 
                 // TODO how to keep the user from scrolling to a start or end frame?
                 //  - invisible padding item with different content padding?
                 OverviewLazyColumn(
                     state = vState,
-                    storyboard = overview.storyState.storyboard,
+                    storyboard = storyState.storyboard,
                     column = column,
                     verticalPaddingDp = verticalPaddingDp,
                     itemSize = itemSize,
                     isCurrentColumn = isCurrentColumn,
-                    onClick = { index, item ->
-                        val isCurrentIndex = isCurrentColumn && column.currentItemIndex == index
-                        if (isCurrentIndex) {
-                            onExitOverview(item.index)
-                        } else {
-                            if (column.items.isNotEmpty()) {
-                                overview.jumpTo(columnIndex, index)
-                            }
-                        }
+                    onClick = { itemIndex, item ->
+                        onClick(
+                            columnIndex = columnIndex,
+                            itemIndex = itemIndex,
+                            item = item
+                        )
                     },
                 )
             }
@@ -234,7 +241,7 @@ private fun calculateItemSize(
     min: Dp = 256.dp,
     max: Dp = 512.dp,
 ): DpSize {
-    val aspectRatio = itemSize.aspectRatio
+    val aspectRatio = itemSize.width / itemSize.height
 
     fun fromWidth(itemWidth: Dp): DpSize = DpSize(
         height = itemPadding + itemWidth / aspectRatio,

storyboard-easel/src/commonMain/kotlin/dev/bnorm/storyboard/easel/overview/StoryOverview.kt

@@ -1,32 +1,31 @@
 package dev.bnorm.storyboard.easel.overview
 
-import androidx.compose.runtime.Immutable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.setValue
+import androidx.compose.runtime.*
 import dev.bnorm.storyboard.core.Scene
-import dev.bnorm.storyboard.core.StoryState
 import dev.bnorm.storyboard.core.Storyboard
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toImmutableList
 
-class StoryOverviewState private constructor(
-    val storyState: StoryState,
-    internal val columns: ImmutableList<SceneColumn<*>>,
+@Stable
+class StoryOverviewState internal constructor(
+    internal val columns: List<SceneColumn<*>>,
 ) {
-    private var _isVisible = mutableStateOf(false)
-    var isVisible: Boolean
-        get() = _isVisible.value
-        set(value) {
-            // If the overview becomes visible, make sure it is on the correct frame.
-            if (value == true) jumpToFrame()
-            _isVisible.value = value
-        }
-
     internal var currentColumnIndex by mutableStateOf(0)
     internal val currentItem: StateItem<*>
         get() = columns[currentColumnIndex].let { it.items[it.currentItemIndex] }
 
+    fun jumpToIndex(index: Storyboard.Index) {
+        // TODO this can probably be optimized since we don't hide scenes anymore...
+        currentColumnIndex =
+            columns.binarySearch { compareValues(it.index, index.sceneIndex) }
+                .coerceAtLeast(0)
+
+        val column = columns[currentColumnIndex]
+        column.currentItemIndex =
+            column.items.binarySearch { compareValues(it.index.stateIndex, index.stateIndex) }
+                .coerceAtLeast(0)
+    }
+
     internal fun jumpTo(columnIndex: Int, itemIndex: Int) {
         val coercedColumnIndex = columnIndex.coerceIn(columns.indices)
         currentColumnIndex = coercedColumnIndex
@@ -39,19 +38,6 @@ class StoryOverviewState private constructor(
         currentColumnIndex = coercedColumnIndex
     }
 
-    private fun jumpToFrame() {
-        val currentFrame = storyState.currentIndex
-
-        currentColumnIndex =
-            columns.binarySearch { compareValues(it.index, currentFrame.sceneIndex) }
-                .coerceAtLeast(0)
-
-        val column = columns[currentColumnIndex]
-        column.currentItemIndex =
-            column.items.binarySearch { compareValues(it.index.stateIndex, currentFrame.stateIndex) }
-                .coerceAtLeast(0)
-    }
-
     @Immutable
     internal class SceneColumn<T>(
         val scene: Scene<*>,
@@ -71,8 +57,8 @@ class StoryOverviewState private constructor(
     )
 
     companion object {
-        fun of(storyState: StoryState): StoryOverviewState {
-            val lastSceneIndex = storyState.storyboard.scenes.lastIndex
+        internal fun of(storyboard: Storyboard): StoryOverviewState {
+            val lastSceneIndex = storyboard.scenes.lastIndex
 
             fun <T> SceneColumn(scene: Scene<T>, sceneIndex: Int): SceneColumn<T> {
                 return SceneColumn(
@@ -89,14 +75,13 @@ class StoryOverviewState private constructor(
                 )
             }
 
-            val columns = storyState.storyboard.scenes
+            val columns = storyboard.scenes
                 .mapIndexed { sceneIndex, scene -> SceneColumn(scene, sceneIndex) }
                 .toImmutableList()
 
             return StoryOverviewState(
-                storyState = storyState,
                 columns = columns,
             )
         }
     }
-}
+}

storyboard-easel/src/commonMain/kotlin/dev/bnorm/storyboard/easel/overview/StoryOverviewState.kt

@@ -12,7 +12,6 @@ import dev.bnorm.storyboard.core.StoryState
 import dev.bnorm.storyboard.core.Storyboard
 import dev.bnorm.storyboard.easel.overlay.OverlayNavigation
 import dev.bnorm.storyboard.easel.overlay.StoryOverlayScope
-import dev.bnorm.storyboard.easel.overview.StoryOverviewState
 import kotlinx.browser.window
 import org.w3c.dom.url.URL
 import org.w3c.dom.url.URLSearchParams
@@ -48,22 +47,10 @@ fun WebStory(
         OverlayNavigation(storyState)
     },
 ) {
-    val overview = remember(storyState.storyboard) { StoryOverviewState.of(storyState) }
-
-    // TODO should we be exposing overview as a param?
-    //  - we don't support this on desktop...
-    remember {
-        val params = URLSearchParams(window.location.search.toJsString())
-        if (params.get("overview").toBoolean()) {
-            overview.isVisible = true
-        }
-    }
-
-    LaunchedWindowHistoryUpdate(storyState, overview)
+    LaunchedWindowHistoryUpdate(storyState)
 
     Story(
         storyState = storyState,
-        storyOverviewState = overview,
         overlay = {
             // TODO if this is a mobile device, prefer touch navigation
             overlay()
@@ -74,25 +61,18 @@ fun WebStory(
 }
 
 @Composable
-private fun LaunchedWindowHistoryUpdate(storyState: StoryState, storyOverviewState: StoryOverviewState) {
+private fun LaunchedWindowHistoryUpdate(storyState: StoryState) {
     val frame = storyState.currentIndex
-    val overviewVisible = storyOverviewState.isVisible
     // TODO LaunchedEffect?
     //  - maybe remember would be better since this more of a side effect?
-    LaunchedEffect(frame, overviewVisible) {
+    LaunchedEffect(frame) {
         val url = URL(window.location.toString())
 
         val index = storyState.storyboard.indices.binarySearch(frame)
         if (index >= 0) {
             url.searchParams.set("frame", index.toString())
         }
 
-        if (overviewVisible) {
-            url.searchParams.set("overview", "true")
-        } else {
-            url.searchParams.delete("overview")
-        }
-
         window.history.replaceState(null, "", url.toString())
     }
 }