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

Commit e97db554 authored by Nikki Moteva's avatar Nikki Moteva Committed by Android (Google) Code Review
Browse files

Merge changes Id26d4409,I7b7ce5b6 into main 

* changes:
  System UI: Add knob to corners of screen capture region select component
  System UI: Add knob to screen capture region select component
parents 08f982a7 2f4956c4

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

+58 −5
Original line number Diff line number Diff line
@@ -16,10 +16,13 @@ 


package com.android.systemui.screencapture.ui.compose



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

import androidx.compose.runtime.Composable

import androidx.compose.ui.Alignment
@@ -27,15 +30,65 @@ 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),

            )

        }

    }

}



/** The circular knob on each corner of the box used for dragging each corner. */

@Composable

private fun Knob(diameter: Dp, modifier: Modifier = Modifier) {

    Box(

        modifier =

            modifier

                .size(diameter)

                .background(color = MaterialTheme.colorScheme.onSurface, shape = CircleShape)

    )

}