Calculate paragraph bounding box

Author: wcandillon

package/cpp/api/JsiSkParagraph.h

@@ -55,6 +55,14 @@ class JsiSkParagraph : public JsiSkHostObject {
     return static_cast<double>(_paragraph->getMaxWidth());
   }
 
+  JSI_HOST_FUNCTION(getMaxIntrinsicWidth) {
+    return static_cast<double>(_paragraph->getMaxIntrinsicWidth());
+  }
+
+  JSI_HOST_FUNCTION(getMinIntrinsicWidth) {
+    return static_cast<double>(_paragraph->getMinIntrinsicWidth());
+  }
+
   JSI_HOST_FUNCTION(getGlyphPositionAtCoordinate) {
     auto dx = getArgumentAsNumber(runtime, arguments, count, 0);
     auto dy = getArgumentAsNumber(runtime, arguments, count, 1);
@@ -113,6 +121,8 @@ class JsiSkParagraph : public JsiSkHostObject {
   JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiSkParagraph, layout),
                        JSI_EXPORT_FUNC(JsiSkParagraph, paint),
                        JSI_EXPORT_FUNC(JsiSkParagraph, getMaxWidth),
+                       JSI_EXPORT_FUNC(JsiSkParagraph, getMinIntrinsicWidth),
+                       JSI_EXPORT_FUNC(JsiSkParagraph, getMaxIntrinsicWidth),
                        JSI_EXPORT_FUNC(JsiSkParagraph, getHeight),
                        JSI_EXPORT_FUNC(JsiSkParagraph, getRectsForPlaceholders),
                        JSI_EXPORT_FUNC(JsiSkParagraph,

package/src/__tests__/snapshots/paragraph/paragraph-bounding-box-android.png

@@ -453,7 +453,7 @@ describe("Paragraphs", () => {
     );
   });
 
-  itRunsE2eOnly("should draw the bounding box", async () => {
+  itRunsE2eOnly("should draw the bounding box (1)", async () => {
     const img = await surface.drawOffscreen(
       (Skia, canvas, { bold, boldItalic, italic }) => {
         const para = Skia.ParagraphBuilder.Make()
@@ -474,10 +474,12 @@ describe("Paragraphs", () => {
           .pop()
           .build();
         para.layout(150);
-        const height = para.getHeight();
         const paint = Skia.Paint();
         paint.setColor(Skia.Color("cyan"));
-        canvas.drawRect(Skia.XYWHRect(0, 0, 150, height), paint);
+        canvas.drawRect(
+          Skia.XYWHRect(0, 0, para.getMaxWidth(), para.getHeight()),
+          paint
+        );
         para.paint(canvas, 0, 0);
       },
       {
@@ -492,6 +494,46 @@ describe("Paragraphs", () => {
     );
   });
 
+  it("should draw the bounding box (2)", async () => {
+    const img = await surface.drawOffscreen(
+      (Skia, canvas, ctx) => {
+        const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+        )!;
+        const provider = Skia.TypefaceFontProvider.Make();
+        provider.registerFont(robotoRegular, "Roboto");
+        const para = Skia.ParagraphBuilder.Make(
+          {
+            textStyle: {
+              color: Skia.Color("black"),
+              fontSize: 30,
+            },
+          },
+          provider
+        )
+          .addText("Say Hello to React Native Skia")
+          .build();
+        para.layout(150);
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color("cyan"));
+        const maxWidth = para.getMaxWidth();
+        const height = para.getHeight();
+        const maxIntrinsicWidth = para.getMaxIntrinsicWidth();
+        // The width of the bounding box is the smaller of the maximum width or the maximum intrinsic width
+        const width = Math.min(maxWidth, maxIntrinsicWidth);
+        canvas.drawRect(Skia.XYWHRect(0, 0, width, height), paint);
+        para.paint(canvas, 0, 0);
+      },
+      {
+        RobotoRegular,
+      }
+    );
+    checkImage(
+      img,
+      `snapshots/paragraph/paragraph-bounding-box-${surface.OS}.png`
+    );
+  });
+
   itRunsE2eOnly("should return the paragraph height", async () => {
     const { width, height } = await surface.eval((Skia) => {
       const para = Skia.ParagraphBuilder.Make()

package/src/__tests__/snapshots/paragraph/paragraph-bounding-box-ios.png

@@ -32,6 +32,25 @@ export interface SkParagraph extends SkJSIInstance<"Paragraph"> {
    * method to have been called first.
    */
   getMaxWidth(): number;
+  /**
+   * Returns the minimum intrinsic width of the paragraph.
+   * The minimum intrinsic width is the width beyond which increasing the width of the paragraph
+   * does not decrease the height. This is effectively the width at which the paragraph
+   * can no longer wrap lines and is forced to overflow.
+   * This method requires the layout method to have been called first.
+   * @returns {number} The minimum intrinsic width of the paragraph.
+   */
+  getMinIntrinsicWidth(): number;
+  /**
+   * Returns the maximum intrinsic width of the paragraph.
+   * The maximum intrinsic width is the width at which the paragraph can layout its content without line breaks,
+   * meaning it's the width of the widest line or the widest word if the widest line is shorter than that.
+   * This width represents the ideal width for the paragraph to display all content in a single line without overflow.
+   * This method requires the layout method to have been called first.
+   * @returns {number} The maximum intrinsic width of the paragraph.
+   */
+  getMaxIntrinsicWidth(): number;
+
   /**
    * Returns the index of the glyph at the given position. This method requires
    * the layout method to have been called first.

package/src/renderer/__tests__/e2e/Paragraphs.spec.tsx

@@ -12,6 +12,13 @@ export class JsiSkParagraph
   constructor(CanvasKit: CanvasKit, ref: Paragraph) {
     super(CanvasKit, ref, "Paragraph");
   }
+  getMinIntrinsicWidth(): number {
+    return this.ref.getMinIntrinsicWidth();
+  }
+
+  getMaxIntrinsicWidth(): number {
+    return this.ref.getMaxIntrinsicWidth();
+  }
 
   layout(width: number): void {
     this.ref.layout(width);