Merge pull request #2066 from Shopify/para-width

Compute paragraph bounding box

Author: wcandillon

docs/docs/text/paragraph.md

@@ -78,32 +78,42 @@ const textStyle = {
 };
 ```
 
-## Paragraph Height
+## Paragraph Bounding Box
 
-To get the paragraph height, you can calculate the layout using `layout()` and once done, you can invoke `getHeight()`.
+Before getting the paragraph height and width, you need to compute its layout using `layout()` and and once done, you can invoke `getHeight()` for the height and `getLongestLine()` for the width.
 
 ```tsx twoslash
 import { useMemo } from "react";
-import { Paragraph, Skia, useFonts } from "@shopify/react-native-skia";
+import { Paragraph, Skia, useFonts, Canvas, Rect } from "@shopify/react-native-skia";
 
 const MyParagraph = () => {
   const paragraph = useMemo(() => {
     const para = Skia.ParagraphBuilder.Make()
-      .addText("Say Hello to ")
-      .addText("Skia 🎨")
-      .pop()
+      .addText("Say Hello to React Native Skia")
       .build();
     // Calculate the layout
-    para.layout(300);
+    para.layout(200);
     return para;
   }, []);
   // Now the paragraph height is available
   const height = paragraph.getHeight();
+  const width = paragraph.getLongestLine();
   // Render the paragraph
-  return <Paragraph paragraph={paragraph} x={0} y={0} width={300} />;
+  return (
+    <Canvas style={{ width: 256, height: 256 }}>
+      {/* Maximum paragraph width */}
+      <Rect x={0} y={0} width={200} height={256} color="magenta" />
+      {/* Paragraph bounding box */}
+      <Rect x={0} y={0} width={width} height={height} color="cyan" />
+      <Paragraph paragraph={paragraph} x={0} y={0} width={200} />
+    </Canvas>
+  );
 };
 ```
 
+<img src={require("/static/img/paragraph/boundingbox-node.png").default} width="256" height="256" />
+
+
 ## Fonts
 
 By default, the paragraph API will use the system fonts.

docs/static/img/paragraph/boundingbox-node.png

@@ -55,6 +55,18 @@ 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(getLongestLine) {
+    return static_cast<double>(_paragraph->getLongestLine());
+  }
+
   JSI_HOST_FUNCTION(getGlyphPositionAtCoordinate) {
     auto dx = getArgumentAsNumber(runtime, arguments, count, 0);
     auto dy = getArgumentAsNumber(runtime, arguments, count, 1);
@@ -113,6 +125,9 @@ 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, getLongestLine),
                        JSI_EXPORT_FUNC(JsiSkParagraph, getHeight),
                        JSI_EXPORT_FUNC(JsiSkParagraph, getRectsForPlaceholders),
                        JSI_EXPORT_FUNC(JsiSkParagraph,

package/cpp/api/JsiSkParagraph.h

@@ -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,77 @@ 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({}, provider)
+          .pushStyle({
+            fontFamilies: ["Roboto"],
+            color: Skia.Color("black"),
+            fontSize: 30,
+          })
+          .addText("Say Hello to React Native Skia")
+          .pop()
+          .build();
+        para.layout(150);
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color("cyan"));
+        const height = para.getHeight();
+        const width = para.getLongestLine();
+        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`
+    );
+  });
+  it("should draw the bounding box (3)", 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({}, provider)
+          .pushStyle({
+            fontFamilies: ["Roboto"],
+            color: Skia.Color("black"),
+            fontSize: 30,
+          })
+          .addText("Say Hello to React Native Skia")
+          .pop()
+          .build();
+        const maxWidth = ctx.canvasWidth * 0.78125;
+        para.layout(maxWidth);
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color("magenta"));
+        const height = para.getHeight();
+        const width = para.getLongestLine();
+        canvas.drawRect(Skia.XYWHRect(0, 0, maxWidth, ctx.canvasHeight), paint);
+        paint.setColor(Skia.Color("cyan"));
+        canvas.drawRect(Skia.XYWHRect(0, 0, width, height), paint);
+        para.paint(canvas, 0, 0);
+      },
+      {
+        RobotoRegular,
+        canvasWidth: surface.width,
+        canvasHeight: surface.height,
+      }
+    );
+    checkImage(img, docPath(`paragraph/boundingbox-${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,31 @@ 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 width of the longest line in the paragraph.
+   * This method requires the layout method to have been called first.
+   */
+  getLongestLine(): number;
+
   /**
    * Returns the index of the glyph at the given position. This method requires
    * the layout method to have been called first.

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

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

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

@@ -9,7 +9,7 @@ import type {
 import { Host } from "./Host";
 import { JsiSkParagraphBuilder } from "./JsiSkParagraphBuilder";
 import { JsiSkParagraphStyle } from "./JsiSkParagraphStyle";
-import { JsiSkTypeface } from "./JsiSkTypeface";
+import { JsiSkTypefaceFontProvider } from "./JsiSkTypefaceFontProvider";
 
 export class JsiSkParagraphBuilderFactory
   extends Host
@@ -31,11 +31,17 @@ export class JsiSkParagraphBuilderFactory
         "SkTypefaceFontProvider is required on React Native Web."
       );
     }
+    const fontCollection = this.CanvasKit.FontCollection.Make();
+    fontCollection.setDefaultFontManager(
+      JsiSkTypefaceFontProvider.fromValue(typefaceProvider)
+    );
+    fontCollection.enableFontFallback();
+
     return new JsiSkParagraphBuilder(
       this.CanvasKit,
-      this.CanvasKit.ParagraphBuilder.MakeFromFontProvider(
+      this.CanvasKit.ParagraphBuilder.MakeFromFontCollection(
         style,
-        JsiSkTypeface.fromValue(typefaceProvider)
+        fontCollection
       )
     );
   }