Refactor Lottie animation scaling using drawWithContent modifier (#2801)

- Pull up aspect-ratio scaling and centering from canvas operations to
  top-level LottieAnimation via RemoteModifier.drawWithContent
- Remove the now-duplicated scaling from RenderShapes, so the scale is
  applied exactly once

Rendering is unchanged: all 33 Roborazzi goldens verify unmodified,
including the 16 LottieScalingDiffScreenshotTest aspect-ratio cases.

Author: yschimke

remotecompose/lottie/src/main/java/com/google/android/horologist/remotecompose/lottie/LottieAnimation.kt

@@ -23,8 +23,10 @@ import androidx.compose.remote.creation.compose.layout.RemoteAlignment
 import androidx.compose.remote.creation.compose.layout.RemoteBox
 import androidx.compose.remote.creation.compose.layout.RemoteComposable
 import androidx.compose.remote.creation.compose.modifier.RemoteModifier
+import androidx.compose.remote.creation.compose.modifier.drawWithContent
 import androidx.compose.remote.creation.compose.state.RemoteFloat
 import androidx.compose.remote.creation.compose.state.floor
+import androidx.compose.remote.creation.compose.state.min
 import androidx.compose.remote.creation.compose.state.rf
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -139,8 +141,27 @@ internal fun LottieAnimation(
         .filter { l -> l.index != null && l.transform != null }
         .associate { l -> Pair(l.index!!, l.transform!!) }
 
+    val lottieWidth = animation.width.rf
+    val lottieHeight = animation.height.rf
+
+    val scaleModifier = RemoteModifier.drawWithContent {
+      val canvasWidth = size.width
+      val canvasHeight = size.height
+
+      val scaleX = canvasWidth / lottieWidth
+      val scaleY = canvasHeight / lottieHeight
+      val scale = min(scaleX, scaleY)
+
+      val scaledWidth = lottieWidth * scale
+      val scaledHeight = lottieHeight * scale
+      val dx = (canvasWidth - scaledWidth) / 2.rf
+      val dy = (canvasHeight - scaledHeight) / 2.rf
+
+      translate(dx, dy) { scale(scale, scale) { drawContent() } }
+    }
+
     RemoteBox(
-      modifier = modifier,
+      modifier = modifier.then(scaleModifier),
       // TODO: 496943072 - ANDROID_NATIVE player doesn't support clipping yet, so we need to avoid
       // clipping for now until it does. coming in cl/893506559
       // .clip(RemoteRectangleShape)

remotecompose/lottie/src/main/java/com/google/android/horologist/remotecompose/lottie/renderer/Shape.kt

@@ -22,8 +22,6 @@ import androidx.compose.remote.creation.compose.layout.RemoteCanvas
 import androidx.compose.remote.creation.compose.layout.RemoteComposable
 import androidx.compose.remote.creation.compose.modifier.RemoteModifier
 import androidx.compose.remote.creation.compose.modifier.fillMaxSize
-import androidx.compose.remote.creation.compose.state.min
-import androidx.compose.remote.creation.compose.state.rf
 import androidx.compose.runtime.Composable
 import com.google.android.horologist.remotecompose.lottie.LocalAnimationSettings
 import com.google.android.horologist.remotecompose.lottie.LottieSettings
@@ -54,42 +52,26 @@ internal fun RenderShapes(shapes: List<GraphicElement>, transformStack: List<Tra
   val animationSettings = LocalAnimationSettings.current
   val shapeGroups = gatherShapes(shapes, animationSettings)
 
+  // Aspect-ratio scaling and centering is applied once, at the top level, by the
+  // drawWithContent modifier in LottieAnimation - shapes draw in raw Lottie coordinates here.
   RemoteCanvas(modifier = RemoteModifier.fillMaxSize()) {
-    val canvasWidth = remote.component.width
-    val canvasHeight = remote.component.height
-    val lottieWidth = animationSettings.width.rf
-    val lottieHeight = animationSettings.height.rf
-
-    val scaleX = canvasWidth / lottieWidth
-    val scaleY = canvasHeight / lottieHeight
-    val scale = min(scaleX, scaleY)
-
-    val scaledWidth = lottieWidth * scale
-    val scaledHeight = lottieHeight * scale
-    val dx = (canvasWidth - scaledWidth) / 2.rf
-    val dy = (canvasHeight - scaledHeight) / 2.rf
-
-    translate(dx, dy) {
-      scale(scale) {
-        for (shapeGroup in shapeGroups) {
-          val paint = shapeGroup.style.getPaint()
-
-          for (transform in transformStack) {
-            remoteCanvas.save()
-            transform(transform, paint, animationSettings, remoteCanvas)
-          }
-
-          usePaint(paint) {
-            for (shape in shapeGroup.shapes) {
-              shape.draw(this, remoteCanvas)
-            }
-          }
-
-          for (transform in transformStack) {
-            remoteCanvas.restore()
-          }
+    for (shapeGroup in shapeGroups) {
+      val paint = shapeGroup.style.getPaint()
+
+      for (transform in transformStack) {
+        remoteCanvas.save()
+        transform(transform, paint, animationSettings, remoteCanvas)
+      }
+
+      usePaint(paint) {
+        for (shape in shapeGroup.shapes) {
+          shape.draw(this, remoteCanvas)
         }
       }
+
+      for (transform in transformStack) {
+        remoteCanvas.restore()
+      }
     }
   }
 }