Re-measure line height when justifying dynamic text (#2597)

Fixes #2592
airbnb · Dec 15, 2024 · c21037f · c21037f
1 parent 0dd3818
commit c21037f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 4 deletions.
diff --git a/lottie/src/main/java/com/airbnb/lottie/model/layer/TextLayer.java b/lottie/src/main/java/com/airbnb/lottie/model/layer/TextLayer.java
@@ -350,7 +350,13 @@ private void drawTextWithFont(DocumentData documentData, Font font, Canvas canva
 
         canvas.save();
 
-        if (offsetCanvas(canvas, documentData, lineIndex, line.width)) {
+        float lineWidth =
+            (textAnimation == null &&
+                textSizeCallbackAnimation == null &&
+                trackingCallbackAnimation == null) ?
+                line.width :
+                fillPaint.measureText(line.text);
+        if (offsetCanvas(canvas, documentData, lineIndex, lineWidth)) {
           drawFontTextLine(line.text, documentData, canvas, tracking, characterIndexAtStartOfLine, parentAlpha);
         }
 

diff --git a/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/tests/TextTestCase.kt b/snapshot-tests/src/androidTest/java/com/airbnb/lottie/snapshots/tests/TextTestCase.kt
@@ -75,13 +75,19 @@ class TextTestCase : SnapshotTestCase {
         withAnimationView("Tests/DynamicText.json", "Dynamic Text", "Family and Brown Police Man") { animationView ->
             val textDelegate = TextDelegate(animationView)
             animationView.setTextDelegate(textDelegate)
-            textDelegate.setText("NAME", "\uD83D\uDC68\u200D\uD83D\uDC68\u200D\uD83D\uDC67\u200D\uD83D\uDC67\uD83D\uDC6E\uD83C\uDFFF\u200D♀️")
+            textDelegate.setText(
+                "NAME",
+                "\uD83D\uDC68\u200D\uD83D\uDC68\u200D\uD83D\uDC67\u200D\uD83D\uDC67\uD83D\uDC6E\uD83C\uDFFF\u200D♀️",
+            )
         }
 
         withAnimationView("Tests/DynamicText.json", "Dynamic Text", "Family, Brown Police Man, emoji and chars") { animationView ->
             val textDelegate = TextDelegate(animationView)
             animationView.setTextDelegate(textDelegate)
-            textDelegate.setText("NAME", "🔥\uD83D\uDC68\u200D\uD83D\uDC68\u200D\uD83D\uDC67\u200D\uD83D\uDC67\uD83D\uDC6E\uD83C\uDFFF\u200D♀的Aabc️")
+            textDelegate.setText(
+                "NAME",
+                "🔥\uD83D\uDC68\u200D\uD83D\uDC68\u200D\uD83D\uDC67\u200D\uD83D\uDC67\uD83D\uDC6E\uD83C\uDFFF\u200D♀的Aabc️",
+            )
         }
 
         withAnimationView("Tests/DynamicText.json", "Dynamic Text", "Fire English Fire Brown Police Man Fire") { animationView ->
@@ -212,5 +218,27 @@ class TextTestCase : SnapshotTestCase {
             )
             LottieAnimation(composition, { 0f }, dynamicProperties = dynamicProperties)
         }
+
+        snapshotComposable("Compose Dynamic Text", "Centered") {
+            val composition by rememberLottieComposition(LottieCompositionSpec.Asset("Tests/CenteredText.json"))
+            val snapshotReady = LocalSnapshotReady.current
+            LaunchedEffect(snapshotReady, composition != null) {
+                snapshotReady.value = composition != null
+            }
+            val dynamicProperties = rememberLottieDynamicProperties(
+                rememberLottieDynamicProperty(
+                    LottieProperty.TEXT,
+                    // Family emoji
+                    "\uD83D\uDC68\u200D\uD83D\uDC69\u200D\uD83D\uDC66",
+                    "Text",
+                ),
+            )
+            LottieAnimation(
+                composition,
+                { 0f },
+                dynamicProperties = dynamicProperties,
+                fontMap = mapOf("Helvetica" to Typeface.DEFAULT),
+            )
+        }
     }
-}
+}
diff --git a/snapshot-tests/src/main/assets/Tests/CenteredText.json b/snapshot-tests/src/main/assets/Tests/CenteredText.json
@@ -0,0 +1 @@
+{"v":"5.12.2","fr":29.9700012207031,"ip":0,"op":181.000007372281,"w":375,"h":375,"nm":"Text","ddd":0,"assets":[],"fonts":{"list":[{"origin":0,"fPath":"","fClass":"","fFamily":"Helvetica","fWeight":"","fStyle":"Regular","fName":"Helvetica","ascent":71.8994140625}]},"layers":[{"ddd":0,"ind":1,"ty":5,"nm":"Text","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,187.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"t":{"d":{"k":[{"s":{"s":36,"f":"Helvetica","t":"Hello World","ca":0,"j":2,"tr":0,"lh":43.2000007629395,"ls":0,"fc":[1,0,0]},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0],"ix":2}},"a":[]},"ip":0,"op":181.000007372281,"st":0,"ct":1,"bm":0}],"markers":[],"props":{}}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"v":"5.12.2","fr":29.9700012207031,"ip":0,"op":181.000007372281,"w":375,"h":375,"nm":"Text","ddd":0,"assets":[],"fonts":{"list":[{"origin":0,"fPath":"","fClass":"","fFamily":"Helvetica","fWeight":"","fStyle":"Regular","fName":"Helvetica","ascent":71.8994140625}]},"layers":[{"ddd":0,"ind":1,"ty":5,"nm":"Text","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[187.5,187.5,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"t":{"d":{"k":[{"s":{"s":36,"f":"Helvetica","t":"Hello World","ca":0,"j":2,"tr":0,"lh":43.2000007629395,"ls":0,"fc":[1,0,0]},"t":0}]},"p":{},"m":{"g":1,"a":{"a":0,"k":[0,0],"ix":2}},"a":[]},"ip":0,"op":181.000007372281,"st":0,"ct":1,"bm":0}],"markers":[],"props":{}}