Underpinnings for Caching Text Layouts (#51065)

Summary:
Pull Request resolved: #51065

This adds infrastructure to let us start storing cached Android text layouts as part of a `ParagraphShadowNode`. After this, we will clear them out, and propagate them to state. Right now, the flag doesn't do much, apart from extra work.

This is done by adding `TextLayoutManagerExtended::supportsPreparedLayout()`, and `TextLayoutManager::PreparedLayout` types, to shim between platforms, then on Android, we add a `PreparedLayout`, which is for now just an Android layout, with extra field (`maxNumberOfLines`, for some reason not exposed on recent versions).

Android `TextLayoutManager` java side is split a little bit, so that we reuse all the existing logic for prepared layouts. I tried to set up the boundary, so that we don't reserialize a MapBuffer after preparation, and for simplicity, this means source of truth for attachment count, and attachment sizes, now lives on the layout. This means we need to change boundary a bit, where we are no longer able to pass in a buffer to fill from C++ side of attachment positions.

Changelog: [Internal]

Reviewed By: mdvacca

Differential Revision: D73970149

fbshipit-source-id: ff71c227e062c16fe52a4eb3ba2acbebf3d96e56

Author: NickGerleman

packages/react-native/ReactAndroid/api/ReactAndroid.api

@@ -2392,12 +2392,14 @@ public class com/facebook/react/fabric/FabricUIManager : com/facebook/react/brid
 	public fun initialize ()V
 	public fun invalidate ()V
 	public fun markActiveTouchForTag (II)V
+	public fun measurePreparedLayout (Lcom/facebook/react/views/text/PreparedLayout;FFFF)[F
 	public fun onAllAnimationsComplete ()V
 	public fun onAnimationStarted ()V
 	public fun onHostDestroy ()V
 	public fun onHostPause ()V
 	public fun onHostResume ()V
 	public fun onRequestEventBeat ()V
+	public fun prepareLayout (ILcom/facebook/react/common/mapbuffer/ReadableMapBuffer;Lcom/facebook/react/common/mapbuffer/ReadableMapBuffer;FF)Lcom/facebook/react/views/text/PreparedLayout;
 	public fun prependUIBlock (Lcom/facebook/react/fabric/interop/UIBlock;)V
 	public fun profileNextBatch ()V
 	public fun receiveEvent (IILjava/lang/String;Lcom/facebook/react/bridge/WritableMap;)V

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/fabric/FabricUIManager.java

@@ -22,11 +22,13 @@
 import android.content.Context;
 import android.graphics.Point;
 import android.os.SystemClock;
+import android.text.Layout;
 import android.view.View;
 import android.view.accessibility.AccessibilityEvent;
 import androidx.annotation.AnyThread;
 import androidx.annotation.Nullable;
 import androidx.annotation.UiThread;
+import androidx.core.util.Preconditions;
 import androidx.core.view.ViewCompat.FocusRealDirection;
 import com.facebook.common.logging.FLog;
 import com.facebook.infer.annotation.Assertions;
@@ -49,6 +51,7 @@
 import com.facebook.react.bridge.UIManagerListener;
 import com.facebook.react.bridge.UiThreadUtil;
 import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.common.ReactConstants;
 import com.facebook.react.common.annotations.UnstableReactNativeAPI;
 import com.facebook.react.common.build.ReactBuildConfig;
 import com.facebook.react.common.mapbuffer.ReadableMapBuffer;
@@ -86,6 +89,7 @@
 import com.facebook.react.uimanager.events.FabricEventDispatcher;
 import com.facebook.react.uimanager.events.RCTEventEmitter;
 import com.facebook.react.uimanager.events.SynchronousEventReceiver;
+import com.facebook.react.views.text.PreparedLayout;
 import com.facebook.react.views.text.TextLayoutManager;
 import java.util.ArrayList;
 import java.util.HashMap;
@@ -648,6 +652,49 @@ private long measureMapBuffer(
         attachmentsPositions);
   }
 
+  @AnyThread
+  @ThreadConfined(ANY)
+  public PreparedLayout prepareLayout(
+      int surfaceId,
+      ReadableMapBuffer attributedString,
+      ReadableMapBuffer paragraphAttributes,
+      float maxWidth,
+      float maxHeight) {
+    SurfaceMountingManager surfaceMountingManager =
+        mMountingManager.getSurfaceManagerEnforced(surfaceId, "prepareLayout");
+    Layout layout =
+        TextLayoutManager.createLayout(
+            Preconditions.checkNotNull(surfaceMountingManager.getContext()),
+            attributedString,
+            paragraphAttributes,
+            PixelUtil.toPixelFromDIP(maxWidth),
+            PixelUtil.toPixelFromDIP(maxHeight),
+            null /* T219881133: Migrate away from ReactTextViewManagerCallback */);
+
+    int maximumNumberOfLines =
+        paragraphAttributes.contains(TextLayoutManager.PA_KEY_MAX_NUMBER_OF_LINES)
+            ? paragraphAttributes.getInt(TextLayoutManager.PA_KEY_MAX_NUMBER_OF_LINES)
+            : ReactConstants.UNSET;
+
+    return new PreparedLayout(layout, maximumNumberOfLines);
+  }
+
+  @AnyThread
+  @ThreadConfined(ANY)
+  public float[] measurePreparedLayout(
+      PreparedLayout preparedLayout,
+      float minWidth,
+      float maxWidth,
+      float minHeight,
+      float maxHeight) {
+    return TextLayoutManager.measurePreparedLayout(
+        preparedLayout,
+        getYogaSize(minWidth, maxWidth),
+        getYogaMeasureMode(minWidth, maxWidth),
+        getYogaSize(minHeight, maxHeight),
+        getYogaMeasureMode(minHeight, maxHeight));
+  }
+
   /**
    * @param surfaceId {@link int} surface ID
    * @param defaultTextInputPadding {@link float[]} output parameter will contain the default theme

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<31638ef8ac6992a354785b74af8fbe0d>>
+ * @generated SignedSource<<453f8c0a593b173c197fcf54ed834a1b>>
  */
 
 /**
@@ -180,6 +180,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun enableNewBackgroundAndBorderDrawables(): Boolean = accessor.enableNewBackgroundAndBorderDrawables()
 
+  /**
+   * Enables caching text layout artifacts for later reuse
+   */
+  @JvmStatic
+  public fun enablePreparedTextLayout(): Boolean = accessor.enablePreparedTextLayout()
+
   /**
    * When enabled, Android will receive prop updates based on the differences between the last rendered shadow node and the last committed shadow node.
    */

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<6b382661025db56592b44255f5a8694c>>
+ * @generated SignedSource<<a51441451ec25033040ba044ee3371fc>>
  */
 
 /**
@@ -45,6 +45,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var enableNativeCSSParsingCache: Boolean? = null
   private var enableNetworkEventReportingCache: Boolean? = null
   private var enableNewBackgroundAndBorderDrawablesCache: Boolean? = null
+  private var enablePreparedTextLayoutCache: Boolean? = null
   private var enablePropsUpdateReconciliationAndroidCache: Boolean? = null
   private var enableResourceTimingAPICache: Boolean? = null
   private var enableSynchronousStateUpdatesCache: Boolean? = null
@@ -292,6 +293,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun enablePreparedTextLayout(): Boolean {
+    var cached = enablePreparedTextLayoutCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.enablePreparedTextLayout()
+      enablePreparedTextLayoutCache = cached
+    }
+    return cached
+  }
+
   override fun enablePropsUpdateReconciliationAndroid(): Boolean {
     var cached = enablePropsUpdateReconciliationAndroidCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<8276fd1166cdd235f11a0b490bb7d924>>
+ * @generated SignedSource<<9d0b02395a08331bca956ea600602a31>>
  */
 
 /**
@@ -78,6 +78,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableNewBackgroundAndBorderDrawables(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun enablePreparedTextLayout(): Boolean
+
   @DoNotStrip @JvmStatic public external fun enablePropsUpdateReconciliationAndroid(): Boolean
 
   @DoNotStrip @JvmStatic public external fun enableResourceTimingAPI(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<ffadd7912aed2d95b0c6199aa8902690>>
+ * @generated SignedSource<<cf12cdfdfb343e79247379b5549ae92a>>
  */
 
 /**
@@ -73,6 +73,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableNewBackgroundAndBorderDrawables(): Boolean = true
 
+  override fun enablePreparedTextLayout(): Boolean = false
+
   override fun enablePropsUpdateReconciliationAndroid(): Boolean = false
 
   override fun enableResourceTimingAPI(): Boolean = false

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<5dc41059d71d3a345be45a6a233b05a0>>
+ * @generated SignedSource<<4c81ed8a06c192eb4007219d163650e5>>
  */
 
 /**
@@ -49,6 +49,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var enableNativeCSSParsingCache: Boolean? = null
   private var enableNetworkEventReportingCache: Boolean? = null
   private var enableNewBackgroundAndBorderDrawablesCache: Boolean? = null
+  private var enablePreparedTextLayoutCache: Boolean? = null
   private var enablePropsUpdateReconciliationAndroidCache: Boolean? = null
   private var enableResourceTimingAPICache: Boolean? = null
   private var enableSynchronousStateUpdatesCache: Boolean? = null
@@ -321,6 +322,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun enablePreparedTextLayout(): Boolean {
+    var cached = enablePreparedTextLayoutCache
+    if (cached == null) {
+      cached = currentProvider.enablePreparedTextLayout()
+      accessedFeatureFlags.add("enablePreparedTextLayout")
+      enablePreparedTextLayoutCache = cached
+    }
+    return cached
+  }
+
   override fun enablePropsUpdateReconciliationAndroid(): Boolean {
     var cached = enablePropsUpdateReconciliationAndroidCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<35f6d9ae3c445c81fc4bab7509fd3179>>
+ * @generated SignedSource<<2482f57e0652cfaa4806b5333c50ad9f>>
  */
 
 /**
@@ -73,6 +73,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableNewBackgroundAndBorderDrawables(): Boolean
 
+  @DoNotStrip public fun enablePreparedTextLayout(): Boolean
+
   @DoNotStrip public fun enablePropsUpdateReconciliationAndroid(): Boolean
 
   @DoNotStrip public fun enableResourceTimingAPI(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/PreparedLayout.kt

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+package com.facebook.react.views.text
+
+import android.text.Layout
+import com.facebook.proguard.annotations.DoNotStrip
+
+/**
+ * Encapsulates an {android.text.Layout} along with any additional state needed to render or measure
+ * it.
+ */
+@DoNotStrip
+internal class PreparedLayout(public val layout: Layout, public val maximumNumberOfLines: Int)

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TextLayoutManager.java

@@ -31,6 +31,7 @@
 import com.facebook.react.bridge.ReactSoftExceptionLogger;
 import com.facebook.react.bridge.WritableArray;
 import com.facebook.react.common.ReactConstants;
+import com.facebook.react.common.annotations.UnstableReactNativeAPI;
 import com.facebook.react.common.mapbuffer.MapBuffer;
 import com.facebook.react.internal.featureflags.ReactNativeFeatureFlags;
 import com.facebook.react.uimanager.PixelUtil;
@@ -503,7 +504,8 @@ private static void updateTextPaint(
     }
   }
 
-  private static Layout createLayout(
+  @UnstableReactNativeAPI
+  public static Layout createLayout(
       @NonNull Context context,
       MapBuffer attributedString,
       MapBuffer paragraphAttributes,
@@ -732,6 +734,47 @@ public static long measureText(
     return YogaMeasureOutput.make(widthInSP, heightInSP);
   }
 
+  @UnstableReactNativeAPI
+  public static float[] measurePreparedLayout(
+      PreparedLayout preparedLayout,
+      float width,
+      YogaMeasureMode widthYogaMeasureMode,
+      float height,
+      YogaMeasureMode heightYogaMeasureMode) {
+    Layout layout = preparedLayout.getLayout();
+    Spanned text = (Spanned) layout.getText();
+    int maximumNumberOfLines = preparedLayout.getMaximumNumberOfLines();
+
+    int calculatedLineCount = calculateLineCount(layout, maximumNumberOfLines);
+    float calculatedWidth =
+        calculateWidth(layout, text, width, widthYogaMeasureMode, calculatedLineCount);
+    float calculatedHeight =
+        calculateHeight(layout, text, height, heightYogaMeasureMode, calculatedLineCount);
+
+    ArrayList<Float> retList = new ArrayList<>();
+    retList.add(PixelUtil.toDIPFromPixel(calculatedWidth));
+    retList.add(PixelUtil.toDIPFromPixel(calculatedHeight));
+
+    AttachmentMetrics metrics = new AttachmentMetrics();
+    int lastAttachmentFoundInSpan;
+    for (int i = 0; i < text.length(); i = lastAttachmentFoundInSpan) {
+      lastAttachmentFoundInSpan =
+          nextAttachmentMetrics(layout, text, calculatedWidth, calculatedLineCount, i, metrics);
+      if (metrics.wasFound) {
+        retList.add(PixelUtil.toDIPFromPixel(metrics.top));
+        retList.add(PixelUtil.toDIPFromPixel(metrics.left));
+        retList.add(PixelUtil.toDIPFromPixel(metrics.width));
+        retList.add(PixelUtil.toDIPFromPixel(metrics.height));
+      }
+    }
+
+    float[] ret = new float[retList.size()];
+    for (int i = 0; i < retList.size(); i++) {
+      ret[i] = retList.get(i);
+    }
+    return ret;
+  }
+
   private static int calculateLineCount(Layout layout, int maximumNumberOfLines) {
     return maximumNumberOfLines == ReactConstants.UNSET || maximumNumberOfLines == 0
         ? layout.getLineCount()