@shopify/react-native-skia 2.2.8 → 2.2.10

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

@@ -0,0 +1,388 @@
+import { resolveFile, surface } from "../setup";
+import {
+  PlaceholderAlignment,
+  TextBaseline,
+  TextDirection,
+} from "../../../skia/types";
+
+const RobotoRegular = Array.from(
+  resolveFile("skia/__tests__/assets/Roboto-Regular.ttf")
+);
+
+describe("Paragraph Methods", () => {
+  describe("getRectsForPlaceholders", () => {
+    it("should handle multiple placeholders with different alignments", async () => {
+      const placeholderRects = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
+            },
+            provider
+          );
+
+          builder.addText("Start ");
+          builder.addPlaceholder(
+            20,
+            20,
+            ctx.PlaceholderAlignment.Baseline,
+            ctx.TextBaseline.Alphabetic
+          );
+          builder.addText(" middle ");
+          builder.addPlaceholder(
+            15,
+            15,
+            ctx.PlaceholderAlignment.Top,
+            ctx.TextBaseline.Alphabetic
+          );
+          builder.addText(" end");
+
+          const paragraph = builder.build();
+          paragraph.layout(200);
+
+          const rects = paragraph.getRectsForPlaceholders();
+          return rects.map((r) => ({
+            x: r.rect.x,
+            y: r.rect.y,
+            width: r.rect.width,
+            height: r.rect.height,
+            direction: r.direction,
+          }));
+        },
+        {
+          RobotoRegular,
+          PlaceholderAlignment,
+          TextBaseline,
+        }
+      );
+
+      expect(placeholderRects).toHaveLength(2);
+      expect(placeholderRects[0].width).toBe(20);
+      expect(placeholderRects[0].height).toBe(20);
+      expect(placeholderRects[1].width).toBeCloseTo(15);
+      expect(placeholderRects[1].height).toBeCloseTo(15);
+    });
+
+    it("should return correct direction for placeholders", async () => {
+      const placeholderInfo = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
+            },
+            provider
+          );
+
+          builder.addText("Text with ");
+          builder.addPlaceholder(30, 30);
+          builder.addText(" placeholder");
+
+          const paragraph = builder.build();
+          paragraph.layout(300);
+
+          const rects = paragraph.getRectsForPlaceholders();
+          return rects.map((r) => ({
+            direction: r.direction === ctx.TextDirection.LTR ? "LTR" : "RTL",
+          }));
+        },
+        {
+          RobotoRegular,
+          TextDirection,
+        }
+      );
+
+      expect(placeholderInfo).toHaveLength(1);
+      expect(placeholderInfo[0].direction).toBe("LTR");
+    });
+
+    it("should return empty array when no placeholders", async () => {
+      const placeholderCount = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
+            },
+            provider
+          );
+
+          builder.addText("Text without any placeholders");
+
+          const paragraph = builder.build();
+          paragraph.layout(300);
+
+          const rects = paragraph.getRectsForPlaceholders();
+          return rects.length;
+        },
+        {
+          RobotoRegular,
+        }
+      );
+
+      expect(placeholderCount).toBe(0);
+    });
+  });
+
+  describe("getLineMetrics", () => {
+    it("should return line metrics for single line text", async () => {
+      const lineMetrics = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
+            },
+            provider
+          );
+
+          builder.addText("Single line text");
+
+          const paragraph = builder.build();
+          paragraph.layout(300);
+
+          return paragraph.getLineMetrics();
+        },
+        {
+          RobotoRegular,
+        }
+      );
+
+      expect(lineMetrics).toHaveLength(1);
+      expect(lineMetrics[0].lineNumber).toBe(0);
+      expect(lineMetrics[0].startIndex).toBe(0);
+      expect(lineMetrics[0].endIndex).toBe(16);
+      expect(lineMetrics[0].width).toBeGreaterThan(0);
+      expect(lineMetrics[0].height).toBeGreaterThan(0);
+      expect(lineMetrics[0].ascent).toBeGreaterThan(0);
+      expect(lineMetrics[0].descent).toBeGreaterThan(0);
+      // Note: Even single lines without explicit breaks may report isHardBreak as true
+      expect(typeof lineMetrics[0].isHardBreak).toBe("boolean");
+    });
+
+    it("should return line metrics for multi-line text with wrapping", async () => {
+      const lineMetrics = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
+            },
+            provider
+          );
+
+          builder.addText(
+            "This is a very long text that should wrap to multiple lines when laid out with a narrow width constraint"
+          );
+
+          const paragraph = builder.build();
+          paragraph.layout(100); // Narrow width to force wrapping
+
+          return paragraph.getLineMetrics();
+        },
+        {
+          RobotoRegular,
+        }
+      );
+
+      expect(lineMetrics.length).toBeGreaterThan(1);
+
+      // Check first line
+      expect(lineMetrics[0].lineNumber).toBe(0);
+      expect(lineMetrics[0].startIndex).toBe(0);
+      expect(lineMetrics[0].width).toBeLessThanOrEqual(100);
+
+      // Check second line
+      expect(lineMetrics[1].lineNumber).toBe(1);
+      expect(lineMetrics[1].startIndex).toBeGreaterThan(0);
+      expect(lineMetrics[1].baseline).toBeGreaterThan(lineMetrics[0].baseline);
+    });
+
+    it("should handle hard breaks (newlines) correctly", async () => {
+      const lineMetrics = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
+            },
+            provider
+          );
+
+          builder.addText("First line\nSecond line\nThird line");
+
+          const paragraph = builder.build();
+          paragraph.layout(300);
+
+          return paragraph.getLineMetrics();
+        },
+        {
+          RobotoRegular,
+        }
+      );
+
+      expect(lineMetrics).toHaveLength(3);
+
+      // All lines report isHardBreak as true in this implementation
+      expect(lineMetrics[0].isHardBreak).toBe(true);
+      expect(lineMetrics[1].isHardBreak).toBe(true);
+      expect(lineMetrics[2].isHardBreak).toBe(true);
+
+      // Check line numbers
+      expect(lineMetrics[0].lineNumber).toBe(0);
+      expect(lineMetrics[1].lineNumber).toBe(1);
+      expect(lineMetrics[2].lineNumber).toBe(2);
+    });
+
+    it("should correctly report line dimensions and positions", async () => {
+      const lineMetrics = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 20,
+              },
+            },
+            provider
+          );
+
+          builder.addText("Test\nLine");
+
+          const paragraph = builder.build();
+          paragraph.layout(300);
+
+          return paragraph.getLineMetrics();
+        },
+        {
+          RobotoRegular,
+        }
+      );
+
+      expect(lineMetrics).toHaveLength(2);
+
+      // First line
+      const firstLine = lineMetrics[0];
+      // Height should be close to ascent + descent
+      expect(firstLine.height).toBeGreaterThan(0);
+      expect(
+        Math.abs(firstLine.height - (firstLine.ascent + firstLine.descent))
+      ).toBeLessThan(1);
+      expect(firstLine.left).toBe(0);
+      expect(firstLine.baseline).toBeGreaterThan(0);
+
+      // Second line should be below the first
+      const secondLine = lineMetrics[1];
+      expect(secondLine.baseline).toBeGreaterThan(firstLine.baseline);
+      expect(secondLine.baseline - firstLine.baseline).toBeCloseTo(
+        firstLine.height,
+        1
+      );
+    });
+
+    it("should handle empty lines correctly", async () => {
+      const lineMetrics = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
+            },
+            provider
+          );
+
+          builder.addText("Line 1\n\nLine 3");
+
+          const paragraph = builder.build();
+          paragraph.layout(300);
+
+          return paragraph.getLineMetrics();
+        },
+        {
+          RobotoRegular,
+        }
+      );
+
+      expect(lineMetrics).toHaveLength(3);
+
+      // Middle line should be empty but still have metrics
+      const emptyLine = lineMetrics[1];
+      // Empty line might have startIndex != endIndex depending on implementation
+      expect(emptyLine.endIndex).toBeGreaterThanOrEqual(emptyLine.startIndex);
+      expect(emptyLine.width).toBeGreaterThanOrEqual(0);
+      expect(emptyLine.height).toBeGreaterThan(0); // Still has height
+      expect(emptyLine.isHardBreak).toBe(true);
+    });
+  });
+});

package/src/skia/types/Paragraph/Paragraph.ts

@@ -4,6 +4,37 @@ import type { SkRect } from "../Rect";
 
 import type { TextDirection } from "./ParagraphStyle";
 
+export interface LineMetrics {
+  /** The index in the text buffer the line begins. */
+  startIndex: number;
+  /** The index in the text buffer the line ends. */
+  endIndex: number;
+  endExcludingWhitespaces: number;
+  endIncludingNewline: number;
+  /** True if the line ends in a hard break (e.g. newline) */
+  isHardBreak: boolean;
+  /**
+   * The final computed ascent for the line. This can be impacted by
+   * the strut, height, scaling, as well as outlying runs that are very tall.
+   */
+  ascent: number;
+  /**
+   * The final computed descent for the line. This can be impacted by
+   * the strut, height, scaling, as well as outlying runs that are very tall.
+   */
+  descent: number;
+  /** round(ascent + descent) */
+  height: number;
+  /** width of the line */
+  width: number;
+  /** The left edge of the line. The right edge can be obtained with `left + width` */
+  left: number;
+  /** The y position of the baseline for this line from the top of the paragraph. */
+  baseline: number;
+  /** Zero indexed line number. */
+  lineNumber: number;
+}
+
 export interface SkRectWithDirection {
   rect: SkRect;
   direction: TextDirection;
@@ -75,7 +106,7 @@ export interface SkParagraph extends SkJSIInstance<"Paragraph"> {
    * Returns the bounding boxes for all lines in the paragraph. This method
    * requires the layout method to have been called first.
    */
-  getLineMetrics(): Array<SkRect>;
+  getLineMetrics(): LineMetrics[];
   /**
    * Returns a list of rects with direction info for the placeholders added
    * to the paragraph.

package/src/skia/web/JsiSkParagraph.ts

@@ -1,9 +1,15 @@
 import type { CanvasKit, Paragraph } from "canvaskit-wasm";
 
-import type { SkRect, SkRectWithDirection, SkParagraph } from "../types";
+import type {
+  SkRect,
+  SkRectWithDirection,
+  SkParagraph,
+  LineMetrics,
+} from "../types";
 
 import { HostObject } from "./Host";
 import type { JsiSkCanvas } from "./JsiSkCanvas";
+import { JsiSkRect } from "./JsiSkRect";
 
 export class JsiSkParagraph
   extends HostObject<Paragraph, "Paragraph">
@@ -12,41 +18,36 @@ export class JsiSkParagraph
   constructor(CanvasKit: CanvasKit, ref: Paragraph) {
     super(CanvasKit, ref, "Paragraph");
   }
-  getMinIntrinsicWidth(): number {
+  getMinIntrinsicWidth() {
     return this.ref.getMinIntrinsicWidth();
   }
 
-  getMaxIntrinsicWidth(): number {
+  getMaxIntrinsicWidth() {
     return this.ref.getMaxIntrinsicWidth();
   }
 
-  getLongestLine(): number {
+  getLongestLine() {
     return this.ref.getLongestLine();
   }
 
-  layout(width: number): void {
+  layout(width: number) {
     this.ref.layout(width);
   }
-  paint(canvas: JsiSkCanvas, x: number, y: number): void {
+  paint(canvas: JsiSkCanvas, x: number, y: number) {
     canvas.ref.drawParagraph(this.ref, x, y);
   }
-  getHeight(): number {
+  getHeight() {
     return this.ref.getHeight();
   }
-  getMaxWidth(): number {
+  getMaxWidth() {
     return this.ref.getMaxWidth();
   }
-  getGlyphPositionAtCoordinate(x: number, y: number): number {
+  getGlyphPositionAtCoordinate(x: number, y: number) {
     return this.ref.getGlyphPositionAtCoordinate(x, y).pos;
   }
   getRectsForPlaceholders(): SkRectWithDirection[] {
     return this.ref.getRectsForPlaceholders().map(({ rect, dir }) => ({
-      rect: {
-        x: rect.at(0)!,
-        y: rect.at(1)!,
-        width: rect.at(2)!,
-        height: rect.at(3)!,
-      },
+      rect: new JsiSkRect(this.CanvasKit, rect),
       direction: dir.value,
     }));
   }
@@ -58,20 +59,10 @@ export class JsiSkParagraph
         { value: 0 } /** kTight */,
         { value: 0 } /** kTight */
       )
-      .map(({ rect }) => ({
-        x: rect[0],
-        y: rect[1],
-        width: rect[2],
-        height: rect[3],
-      }));
+      .map(({ rect }) => new JsiSkRect(this.CanvasKit, rect));
   }
-  getLineMetrics(): SkRect[] {
-    return this.ref.getLineMetrics().map((r, index) => ({
-      x: r.left,
-      y: index * r.height,
-      width: r.width,
-      height: r.height,
-    }));
+  getLineMetrics(): LineMetrics[] {
+    return this.ref.getLineMetrics();
   }
 
   dispose() {

package/src/specs/NativeSkiaModule.web.ts

@@ -1,19 +1,19 @@
 /* eslint-disable import/no-anonymous-default-export */
 import type { SkPicture, SkRect } from "../skia/types";
 import type { ISkiaViewApi } from "../views/types";
-import type { SkiaPictureView } from "../views/SkiaPictureView.web";
+import type { SkiaPictureViewHandle } from "../views/SkiaPictureView.web";
 
 export type ISkiaViewApiWeb = ISkiaViewApi & {
-  views: Record<string, SkiaPictureView>;
+  views: Record<string, SkiaPictureViewHandle>;
   deferedPictures: Record<string, SkPicture>;
-  registerView(nativeId: string, view: SkiaPictureView): void;
+  registerView(nativeId: string, view: SkiaPictureViewHandle): void;
 };
 
 global.SkiaViewApi = {
   views: {},
   deferedPictures: {},
   web: true,
-  registerView(nativeId: string, view: SkiaPictureView) {
+  registerView(nativeId: string, view: SkiaPictureViewHandle) {
     // Maybe a picture for this view was already set
     if (this.deferedPictures[nativeId]) {
       view.setPicture(this.deferedPictures[nativeId] as SkPicture);