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

Commit 7340e3f7 authored by Nikki Moteva's avatar Nikki Moteva
Browse files

System UI: Update rendering of RegionBox to place knobs on top of border 

We have to make sure that the borders of the rectangle is rendered
before the knobs. to do this, an invisible rectangle is drawn with
contains the area for the border and the knobs, then the border and
knobs are rendered within the same block to ensure of this consistency.

Screenshot: http://screenshot/4dPbKbv8HYSnjBk
The red background is for visibility only and is not included in this
CL.

Bug: 417533606
Test: Manual
Flag: com.android.systemui.desktop_screen_capture
Change-Id: I3e2462b89c1ee51d4d68a2c5c2baf38c1dfcad5d
parent 2f4956c4

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

+22 −13
Original line number Diff line number Diff line
@@ -39,50 +39,59 @@ import androidx.compose.ui.unit.dp 
@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

    val KNOB_DIAMETER = 8.dp

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

    val BORDER_STROKE_WIDTH = 1.dp

    val BORDER_STROKE_WIDTH = 4.dp



    // The box that contains the whole screen.

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

        // The box container for the region box and its knobs.

        Box(modifier = Modifier.size(width, height)) {

            // The main box for the region selection.

            Box(

                modifier =

                modifier.size(width, height)

                    Modifier.fillMaxSize()

                        .border(BORDER_STROKE_WIDTH, MaterialTheme.colorScheme.onSurfaceVariant)

        ) {

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

            )



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

            val knobOffset = KNOB_DIAMETER / 2



            // Top left knob

            Knob(

                diameter = KNOB_DIAMETER,

                modifier =

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

                    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),

                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),

                    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),

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

            )

        }

    }

}



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

/**

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

 *

 * @param diameter The diameter of the knob.

 */

@Composable

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

    Box(