Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 2f4956c4 authored by Nikki Moteva's avatar Nikki Moteva
Browse files

System UI: Add knob to corners of screen capture region select component 

This changes the Region Box composable to display 4 knobs in each of its
corner.

screenshot: http://screenshot/64AhTMPfihpymAo
the screenshot includes a red background color to make the box and knobs more visible.

Bug: 417533606
Test: Manual
Flag: com.android.systemui.desktop_screen_capture
Change-Id: Id26d44098aa36974fb0cdf9e5264960c5876bcc3
parent 5a7bf5a5

packages/SystemUI/src/com/android/systemui/screencapture/ui/compose/RegionBox.kt

+45 −5
Original line number Diff line number Diff line
@@ -20,6 +20,7 @@ import androidx.compose.foundation.background 
import androidx.compose.foundation.border

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.offset

import androidx.compose.foundation.layout.size

import androidx.compose.foundation.shape.CircleShape

import androidx.compose.material3.MaterialTheme
@@ -29,16 +30,55 @@ import androidx.compose.ui.Modifier 
import androidx.compose.ui.unit.Dp

import androidx.compose.ui.unit.dp



/** Box component for the region selection UI, built with Compose. */

/**

 * A static, non-interactive box with border lines and centered corner knobs.

 *

 * @param width The width of the box.

 * @param height The height of the box.

 */

@Composable

fun RegionBox(width: Dp, height: Dp, modifier: Modifier = Modifier) {

    // The diameter of the resizable knob on each corner of the region box.

    val KNOB_DIAMETER = 10.dp

    // The width of the border stroke around the region box.

    val BORDER_STROKE_WIDTH = 1.dp



    Box(modifier = modifier.fillMaxSize(), contentAlignment = Alignment.Center) {

        Box(

            modifier =

                modifier

                    .size(width, height)

                    .border(1.dp, MaterialTheme.colorScheme.onSurfaceVariant)

                modifier.size(width, height)

                    .border(BORDER_STROKE_WIDTH, MaterialTheme.colorScheme.onSurfaceVariant)

        ) {

            // The offset is half of the knob diameter so that knob is centered.

            val knobOffset = KNOB_DIAMETER / 2



            // Top left knob

            Knob(

                diameter = KNOB_DIAMETER,

                modifier =

                    modifier.align(Alignment.TopStart).offset(x = -knobOffset, y = -knobOffset),

            )



            // Top right knob

            Knob(

                diameter = KNOB_DIAMETER,

                modifier = modifier.align(Alignment.TopEnd).offset(x = knobOffset, y = -knobOffset),

            )



            // Bottom left knob

            Knob(

                diameter = KNOB_DIAMETER,

                modifier =

                    modifier.align(Alignment.BottomStart).offset(x = -knobOffset, y = knobOffset),

            )



            // Bottom right knob

            Knob(

                diameter = KNOB_DIAMETER,

                modifier =

                    modifier.align(Alignment.BottomEnd).offset(x = knobOffset, y = knobOffset),

            )

        }

    }

}