How to properly use `Modifier.scale` (or `.graphic...

# compose

[Denis]

How to properly use Modifier.scale (or .graphicsLayer with `scaleX`/`scaleY` parameters)? Here's a sample code:

@Preview
@Composable
fun TestScale() {
    Row(Modifier.fillMaxSize()) {
        val origin0 = TransformOrigin(0f, 0f)
        Box(Modifier.graphicsLayer(scaleX = .5f, scaleY = .5f, transformOrigin = origin0)) {
            SomeComposable(Color.Cyan)
        }
        Box(Modifier.graphicsLayer(scaleX = 2f, scaleY = 2f, transformOrigin = origin0)) {
            SomeComposable(Color.Green)
        }
        Box(Modifier.graphicsLayer(scaleX = 3f, scaleY = 3f, transformOrigin = origin0)) {
            SomeComposable(Color.Yellow)
        }
    }
}

@Composable
fun SomeComposable(color: Color) {
    Box(modifier = Modifier.background(color).padding(16.dp)) {
        Text("OK")
    }
}

I want it to draw 3 boxes side-by-side but it looks like it doesn't respect scale at all. And there are those original size wireframes drawn when you hover over the the boxes. Do I need to write a custom layout or is there anything wrong with my code?

[romainguy]

graphicsLayer() gives you a hint here: you are only scaling the rendering, not the layout of your boxes

[Denis]

I see. So custom layout it is?

[Denis]

fun Modifier.scaleLayout(scale: Float) = Modifier.layout { measurable, constraints ->
    val placeable = measurable.measure(constraints)
    layout((placeable.width * scale).toInt(), (placeable.height * scale).toInt()) {
        placeable.placeRelative(0, 0)
    }
}

This works somehow.

Box(Modifier
    .scaleLayout(.5f)
    .graphicsLayer(scaleX = .5f, scaleY = .5f, transformOrigin = origin0)
) {
    SomeComposable(Color.Cyan)
}

[Denis]

But wireframes are off