Fix clickable regions not being correctly placed

It seems that using the scale modifier or scale properties of a layout
modifier causes the clickable regions of some elements to be incorrect.
This manifests as buttons "not working" but just being somewhere else on
the screen. However, once the screen is resized, or you switch to the
overview and back, the clickable regions are correct again. Not sure if
this is a problem with how scaling was performed or if it's an actual
bug in Compose. I'm leaning towards the second. Will try and reproduce
on Android some other time.

Thankfully, this can be worked around by modifying the local density
instead and using a required size within.

Author: bnorm

storyboard-core/src/commonMain/kotlin/dev/bnorm/storyboard/ui/FixedSize.kt

@@ -1,37 +1,39 @@
 package dev.bnorm.storyboard.ui
 
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.layout.layout
-import androidx.compose.ui.unit.Constraints
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.DpSize
 
 @Composable
 fun FixedSize(
     size: DpSize,
     modifier: Modifier = Modifier,
+    contentAlignment: Alignment = Alignment.TopStart,
     content: @Composable () -> Unit,
 ) {
-    // TODO i think there is a bug in the scale code of Compose...
-    //   - until the desktop window is resized, clickable regions for buttons are incorrectly placed.
-    //   - this is reproducible with a BoxWithConstraints and scale modifier as well.
-    //   - going to the overview and back seems to fix it.
-    Box(modifier = modifier.layout { measurable, constraints ->
-        val scale = minOf(
-            constraints.maxWidth / size.width.toPx(),
-            constraints.maxHeight / size.height.toPx(),
-        )
+    BoxWithConstraints(
+        modifier = modifier,
+        contentAlignment = contentAlignment,
+    ) {
+        val currentDensity = LocalDensity.current
+        val scale = with(currentDensity) {
+            minOf(
+                constraints.maxWidth / size.width.toPx(),
+                constraints.maxHeight / size.height.toPx(),
+            )
+        }
 
-        val fixedConstraints = Constraints.fixed(size.width.roundToPx(), size.height.roundToPx())
-        val placeable = measurable.measure(fixedConstraints)
-        layout(placeable.width, placeable.height) {
-            placeable.placeWithLayer(0, 0) {
-                scaleX = scale
-                scaleY = scale
+        CompositionLocalProvider(LocalDensity provides Density(currentDensity.density * scale)) {
+            Box(modifier = Modifier.requiredSize(size)) {
+                content()
             }
         }
-    }) {
-        content()
     }
 }

storyboard-core/src/commonMain/kotlin/dev/bnorm/storyboard/ui/Scene.kt

@@ -76,13 +76,10 @@ internal fun SceneWrapper(
     modifier: Modifier = Modifier,
     content: @Composable SharedTransitionScope.() -> Unit,
 ) {
-    // TODO i don't like that this box is part of the "scene"
-    Box(contentAlignment = Alignment.Center, modifier = modifier.fillMaxSize()) {
-        FixedSize(size = size) {
-            decorator.decorate {
-                SharedTransitionLayout {
-                    content()
-                }
+    FixedSize(size = size, modifier = modifier, contentAlignment = Alignment.Center) {
+        decorator.decorate {
+            SharedTransitionLayout {
+                content()
             }
         }
     }