Use customized compose menu list

main/src/main/java/tw/firemaples/onscreenocr/floatings/compose/base/ComposeUtils.kt

@@ -1,13 +1,19 @@
 package tw.firemaples.onscreenocr.floatings.compose.base
 
+import android.content.res.Configuration
+import android.graphics.Rect
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onGloballyPositioned
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalLifecycleOwner
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.IntOffset
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.repeatOnLifecycle
 import kotlinx.coroutines.flow.Flow
@@ -44,3 +50,70 @@ fun Modifier.clickableWithoutRipple(
         onClick = { onClick() }
     )
 )
+
+fun Modifier.calculateOffset(
+    anchor: Rect,
+    offset: MutableState<IntOffset>,
+    viewPadding: Float = 0f,
+    verticalSpacing: Float = 0f,
+): Modifier = onGloballyPositioned { coordinates ->
+    val parent = coordinates.parentLayoutCoordinates?.size ?: return@onGloballyPositioned
+    val current = coordinates.size
+
+    val leftAnchor = maxOf(anchor.left, viewPadding.toInt())
+    val rightAnchor = minOf(anchor.right, parent.width - viewPadding.toInt())
+
+    val x = when {
+        leftAnchor + current.width + viewPadding < parent.width -> {
+            // Align left
+            anchor.left - viewPadding.toInt()
+        }
+
+        rightAnchor - current.width - viewPadding >= 0 -> {
+            // Align right
+            rightAnchor - current.width - viewPadding.toInt()
+        }
+
+        else -> {
+            // No horizontal alignment
+            0
+        }
+    }
+
+    val topAnchor = anchor.bottom + verticalSpacing
+    val bottomAnchor = anchor.top - verticalSpacing
+
+    val y = when {
+        topAnchor + current.height + viewPadding < parent.height -> {
+            // Display at bottom
+            (topAnchor - viewPadding).toInt()
+        }
+
+        bottomAnchor - current.height - viewPadding >= 0 -> {
+            // Display at top
+            (bottomAnchor - current.height - viewPadding).toInt()
+        }
+
+        else -> {
+            // Display middle vertically
+            val middleAnchor = (parent.height - current.height) / 2
+            (middleAnchor - viewPadding).toInt()
+        }
+    }
+
+    offset.value = IntOffset(x, y)
+}
+
+/**
+ * A MultiPreview annotation for desplaying a @[Composable] method using light and dark themes.
+ *
+ * Note that the app theme should support dark and light modes for these previews to be different.
+ */
+@Retention(AnnotationRetention.BINARY)
+@Target(
+    AnnotationTarget.ANNOTATION_CLASS,
+    AnnotationTarget.FUNCTION
+)
+@Preview(showBackground = true)
+@Preview(showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
+annotation class PreviewThemes

main/src/main/java/tw/firemaples/onscreenocr/floatings/compose/mainbar/MainBarContent.kt

@@ -97,10 +97,6 @@ fun MainBarContent(
                 onDragCancel = onDragCancel,
                 onDrag = onDrag,
             )
-            MainBarMenu(
-                expanded = state.displayMainBarMenu,
-                onMenuOptionSelected = viewModel::onMenuOptionSelected,
-            )
         }
     }
 }
@@ -221,23 +217,24 @@ private fun MainBarContentPreview(
         override fun getFadeOutAfterMoved(): Boolean = false
         override fun getFadeOutDelay(): Long = 0L
         override fun getFadeOutDestinationAlpha(): Float = 0f
-        override fun onMenuItemClicked(key: String) = Unit
+        override fun onMenuItemClicked(key: String?) = Unit
         override fun onSelectClicked() = Unit
         override fun onTranslateClicked() = Unit
         override fun onCloseClicked() = Unit
         override fun onMenuButtonClicked() = Unit
         override fun onAttachedToScreen() = Unit
         override fun onDragEnd(x: Int, y: Int) = Unit
         override fun onLanguageBlockClicked() = Unit
-        override fun onMenuOptionSelected(mainBarMenuOption: MainBarMenuOption?) = Unit
     }
 
     AppTheme {
-        MainBarContent(viewModel = viewModel,
+        MainBarContent(
+            viewModel = viewModel,
             onDragStart = { offset -> },
             onDragEnd = {},
             onDragCancel = {},
-            onDrag = { change, dragAmount -> })
+            onDrag = { change, dragAmount -> },
+        )
     }
 
 }

main/src/main/java/tw/firemaples/onscreenocr/floatings/compose/mainbar/MainBarFloatingView.kt

@@ -2,11 +2,16 @@ package tw.firemaples.onscreenocr.floatings.compose.mainbar
 
 import android.content.Context
 import android.graphics.Point
+import android.graphics.Rect
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
 import dagger.hilt.android.qualifiers.ApplicationContext
+import tw.firemaples.onscreenocr.R
 import tw.firemaples.onscreenocr.floatings.ViewHolderService
 import tw.firemaples.onscreenocr.floatings.compose.base.ComposeMovableFloatingView
 import tw.firemaples.onscreenocr.floatings.compose.base.collectOnLifecycleResumed
+import tw.firemaples.onscreenocr.floatings.compose.menu.MenuFloatingView
+import tw.firemaples.onscreenocr.floatings.compose.menu.MenuItem
 import tw.firemaples.onscreenocr.floatings.history.VersionHistoryView
 import tw.firemaples.onscreenocr.floatings.readme.ReadmeView
 import tw.firemaples.onscreenocr.floatings.translationSelectPanel.TranslationSelectPanel
@@ -17,6 +22,7 @@ import javax.inject.Inject
 class MainBarFloatingView @Inject constructor(
     @ApplicationContext context: Context,
     private val viewModel: MainBarViewModel,
+    private val menuFloatingView: MenuFloatingView,
 ) : ComposeMovableFloatingView(context) {
 
     override val initialPosition: Point
@@ -61,6 +67,53 @@ class MainBarFloatingView @Inject constructor(
                 MainBarAction.ExitApp ->
                     // TODO wait to be refactored
                     ViewHolderService.exit(context)
+
+                MainBarAction.ShowMenu ->{
+                    val anchor =
+                        Rect(params.x, params.y, params.x + rootView.width, params.y + rootView.height)
+                    menuFloatingView.getMenuViewDelegate().setAnchor(anchor)
+                    menuFloatingView.attachToScreen()
+                }
+
+                MainBarAction.HideMenu ->
+                    menuFloatingView.detachFromScreen()
+            }
+        }
+
+        val menuItems: List<MenuItem> = listOf(
+            MenuItem(
+                key = MainBarMenuConst.MENU_SETTING,
+                text = stringResource(id = R.string.menu_setting),
+            ),
+            MenuItem(
+                key = MainBarMenuConst.MENU_PRIVACY_POLICY,
+                text = stringResource(id = R.string.menu_privacy_policy),
+            ),
+            MenuItem(
+                key = MainBarMenuConst.MENU_ABOUT,
+                text = stringResource(id = R.string.menu_about),
+            ),
+            MenuItem(
+                key = MainBarMenuConst.MENU_VERSION_HISTORY,
+                text = stringResource(id = R.string.menu_version_history),
+            ),
+            MenuItem(
+                key = MainBarMenuConst.MENU_README,
+                text = stringResource(id = R.string.menu_readme),
+            ),
+            MenuItem(
+                key = MainBarMenuConst.MENU_HIDE,
+                text = stringResource(id = R.string.menu_hide),
+            ),
+            MenuItem(
+                key = MainBarMenuConst.MENU_EXIT,
+                text = stringResource(id = R.string.menu_exit),
+            ),
+        )
+        with(menuFloatingView.getMenuViewDelegate()) {
+            setMenuData(menuItems)
+            setOnMenuItemClickedListener { key ->
+                viewModel.onMenuItemClicked(key)
             }
         }
 

main/src/main/java/tw/firemaples/onscreenocr/floatings/compose/mainbar/MainBarMenuConst.kt

@@ -0,0 +1,11 @@
+package tw.firemaples.onscreenocr.floatings.compose.mainbar
+
+object MainBarMenuConst {
+    const val MENU_SETTING = "SETTING"
+    const val MENU_PRIVACY_POLICY = "PRIVACY_POLICY"
+    const val MENU_ABOUT = "ABOUT"
+    const val MENU_VERSION_HISTORY = "VERSION_HISTORY"
+    const val MENU_README = "README"
+    const val MENU_HIDE = "HIDE"
+    const val MENU_EXIT = "EXIT"
+}

main/src/main/java/tw/firemaples/onscreenocr/floatings/compose/mainbar/MainBarViewModel.kt

@@ -37,15 +37,14 @@ interface MainBarViewModel {
     fun getFadeOutAfterMoved(): Boolean
     fun getFadeOutDelay(): Long
     fun getFadeOutDestinationAlpha(): Float
-    fun onMenuItemClicked(key: String)
     fun onSelectClicked()
     fun onTranslateClicked()
     fun onCloseClicked()
     fun onMenuButtonClicked()
     fun onAttachedToScreen()
     fun onDragEnd(x: Int, y: Int)
     fun onLanguageBlockClicked()
-    fun onMenuOptionSelected(mainBarMenuOption: MainBarMenuOption?)
+    fun onMenuItemClicked(key: String?)
 }
 
 data class MainBarState(
@@ -68,6 +67,8 @@ sealed interface MainBarAction {
     data object OpenReadme : MainBarAction
     data object HideMainBar : MainBarAction
     data object ExitApp : MainBarAction
+    data object ShowMenu : MainBarAction
+    data object HideMenu : MainBarAction
 }
 
 @Suppress("LongParameterList", "TooManyFunctions")
@@ -185,12 +186,6 @@ class MainBarViewModelImpl @Inject constructor(
     override fun getFadeOutDestinationAlpha(): Float =
         SettingManager.opaquePercentageToFadeOut //TODO move logic
 
-    override fun onMenuItemClicked(key: String) {
-        scope.launch {
-            action.emit(MainBarAction.RescheduleFadeOut)
-        }
-    }
-
     override fun onSelectClicked() {
         scope.launch {
             action.emit(MainBarAction.RescheduleFadeOut)
@@ -221,6 +216,7 @@ class MainBarViewModelImpl @Inject constructor(
     override fun onMenuButtonClicked() {
         scope.launch {
             action.emit(MainBarAction.RescheduleFadeOut)
+            action.emit(MainBarAction.ShowMenu)
             state.update {
                 it.copy(
                     displayMainBarMenu = true,
@@ -248,39 +244,38 @@ class MainBarViewModelImpl @Inject constructor(
         }
     }
 
-    override fun onMenuOptionSelected(mainBarMenuOption: MainBarMenuOption?) {
+    override fun onMenuItemClicked(key: String?) {
         scope.launch {
             state.update {
                 it.copy(
                     displayMainBarMenu = false,
                 )
             }
 
+            action.emit(MainBarAction.HideMenu)
             action.emit(MainBarAction.RescheduleFadeOut)
 
-            when (mainBarMenuOption) {
-                MainBarMenuOption.SETTING ->
+            when (key) {
+                MainBarMenuConst.MENU_SETTING ->
                     action.emit(MainBarAction.OpenSettings)
 
-                MainBarMenuOption.PRIVACY_POLICY ->
+                MainBarMenuConst.MENU_PRIVACY_POLICY ->
                     action.emit(MainBarAction.OpenBrowser(RemoteConfigManager.privacyPolicyUrl))
 
-                MainBarMenuOption.ABOUT ->
+                MainBarMenuConst.MENU_ABOUT ->
                     action.emit(MainBarAction.OpenBrowser(RemoteConfigManager.aboutUrl))
 
-                MainBarMenuOption.VERSION_HISTORY ->
+                MainBarMenuConst.MENU_VERSION_HISTORY ->
                     action.emit(MainBarAction.OpenVersionHistory)
 
-                MainBarMenuOption.README ->
+                MainBarMenuConst.MENU_README ->
                     action.emit(MainBarAction.OpenReadme)
 
-                MainBarMenuOption.HIDE ->
+                MainBarMenuConst.MENU_HIDE ->
                     action.emit(MainBarAction.HideMainBar)
 
-                MainBarMenuOption.EXIT ->
+                MainBarMenuConst.MENU_EXIT ->
                     action.emit(MainBarAction.ExitApp)
-
-                null -> {}
             }
         }
     }