@shopify/react-native-skia 2.2.8 → 2.2.9

package/android/build.gradle

@@ -286,17 +286,6 @@ dependencies {
     }
 }
 
-afterEvaluate { project ->
-    android.libraryVariants.all { variant ->
-        def name = variant.name.capitalize()
-        def javaCompileTask = variant.javaCompileProvider.get()
-
-        task "jar${name}"(type: Jar, dependsOn: javaCompileTask) {
-            from javaCompileTask.destinationDir
-        }
-    }
-}
-
 def localBuildDir = buildDir
 def headersConfiguration = configurations.extractHeaders
 def jniConfiguration = configurations.extractJNI

package/cpp/api/JsiSkParagraph.h

@@ -95,15 +95,47 @@ public:
     std::vector<para::LineMetrics> metrics;
     getObject()->getLineMetrics(metrics);
     auto returnValue = jsi::Array(runtime, metrics.size());
-    auto height = 0;
+    
     for (size_t i = 0; i < metrics.size(); ++i) {
-      returnValue.setValueAtIndex(
-          runtime, i,
-          JsiSkRect::toValue(runtime, getContext(),
-                             SkRect::MakeXYWH(metrics[i].fLeft, height,
-                                              metrics[i].fWidth,
-                                              metrics[i].fHeight)));
-      height += metrics[i].fHeight;
+      auto lineMetrics = jsi::Object(runtime);
+      
+      // Text indices
+      lineMetrics.setProperty(runtime, "startIndex", 
+                              static_cast<double>(metrics[i].fStartIndex));
+      lineMetrics.setProperty(runtime, "endIndex", 
+                              static_cast<double>(metrics[i].fEndIndex));
+      lineMetrics.setProperty(runtime, "endExcludingWhitespaces", 
+                              static_cast<double>(metrics[i].fEndExcludingWhitespaces));
+      lineMetrics.setProperty(runtime, "endIncludingNewline", 
+                              static_cast<double>(metrics[i].fEndIncludingNewline));
+      
+      // Line break info
+      lineMetrics.setProperty(runtime, "isHardBreak", 
+                              metrics[i].fHardBreak);
+      
+      // Vertical metrics
+      lineMetrics.setProperty(runtime, "ascent", 
+                              static_cast<double>(metrics[i].fAscent));
+      lineMetrics.setProperty(runtime, "descent", 
+                              static_cast<double>(metrics[i].fDescent));
+      lineMetrics.setProperty(runtime, "height", 
+                              static_cast<double>(metrics[i].fHeight));
+      
+      // Horizontal metrics
+      lineMetrics.setProperty(runtime, "width", 
+                              static_cast<double>(metrics[i].fWidth));
+      lineMetrics.setProperty(runtime, "left", 
+                              static_cast<double>(metrics[i].fLeft));
+      
+      // Position
+      lineMetrics.setProperty(runtime, "baseline", 
+                              static_cast<double>(metrics[i].fBaseline));
+      
+      // Line number
+      lineMetrics.setProperty(runtime, "lineNumber", 
+                              static_cast<double>(metrics[i].fLineNumber));
+      
+      returnValue.setValueAtIndex(runtime, i, lineMetrics);
     }
     return returnValue;
   }

package/lib/commonjs/renderer/__tests__/e2e/ParagraphMethods.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/commonjs/renderer/__tests__/e2e/setup/Paragraph.d.ts

@@ -12,7 +12,7 @@ export declare class ParagraphAsset<Ctx extends EvalContext> extends SkiaObject<
     getLongestLine(): number;
     getGlyphPositionAtCoordinate(x: number, y: number): number;
     getRectsForRange(start: number, end: number): import("../../../../skia/types").SkRect[];
-    getLineMetrics(): import("../../../../skia/types").SkRect[];
+    getLineMetrics(): import("../../../../skia/types").LineMetrics[];
     getRectsForPlaceholders(): import("../../../../skia/types").SkRectWithDirection[];
     __typename__: "Paragraph";
     dispose(): void;

package/lib/commonjs/skia/types/Paragraph/Paragraph.d.ts

@@ -2,6 +2,36 @@ import type { SkCanvas } from "../Canvas";
 import type { SkJSIInstance } from "../JsiInstance";
 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;
@@ -70,7 +100,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/lib/commonjs/skia/types/Paragraph/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Paragraph.ts"],"sourcesContent":["import type { SkCanvas } from \"../Canvas\";\nimport type { SkJSIInstance } from \"../JsiInstance\";\nimport type { SkRect } from \"../Rect\";\n\nimport type { TextDirection } from \"./ParagraphStyle\";\n\nexport interface SkRectWithDirection {\n  rect: SkRect;\n  direction: TextDirection;\n}\n\nexport interface SkParagraph extends SkJSIInstance<\"Paragraph\"> {\n  /**\n   * Calculates the position of the the glyphs in the paragraph\n   * @param width Max width of the paragraph\n   */\n  layout(width: number): void;\n  /**\n   * Paints the paragraph to the provded canvas\n   * @param canvas Canvas to paint into\n   * @param x X coordinate to paint at\n   * @param y Y coordinate to paint at\n   */\n  paint(canvas: SkCanvas, x: number, y: number): void;\n  /**\n   * Returns the height of the paragraph. This method requires the layout\n   * method to have been called first.\n   */\n  getHeight(): number;\n  /**\n   * Returns the max width of the paragraph. This method requires the layout\n   * method to have been called first.\n   */\n  getMaxWidth(): number;\n  /**\n   * Returns the minimum intrinsic width of the paragraph.\n   * The minimum intrinsic width is the width beyond which increasing the width of the paragraph\n   * does not decrease the height. This is effectively the width at which the paragraph\n   * can no longer wrap lines and is forced to overflow.\n   * This method requires the layout method to have been called first.\n   * @returns {number} The minimum intrinsic width of the paragraph.\n   */\n  getMinIntrinsicWidth(): number;\n  /**\n   * Returns the maximum intrinsic width of the paragraph.\n   * The maximum intrinsic width is the width at which the paragraph can layout its content without line breaks,\n   * meaning it's the width of the widest line or the widest word if the widest line is shorter than that.\n   * This width represents the ideal width for the paragraph to display all content in a single line without overflow.\n   * This method requires the layout method to have been called first.\n   * @returns {number} The maximum intrinsic width of the paragraph.\n   */\n  getMaxIntrinsicWidth(): number;\n\n  /**\n   * Returns the width of the longest line in the paragraph.\n   * This method requires the layout method to have been called first.\n   */\n  getLongestLine(): number;\n\n  /**\n   * Returns the index of the glyph at the given position. This method requires\n   * the layout method to have been called first.\n   * @param x X coordinate of the position\n   * @param y Y coordinate of the position\n   */\n  getGlyphPositionAtCoordinate(x: number, y: number): number;\n  /**\n   * Returns the bounding boxes of the glyphs in the given range. This method\n   * requires the layout method to have been called first.\n   * @param start Start index of the range\n   * @param end End index of the range\n   */\n  getRectsForRange(start: number, end: number): SkRect[];\n  /**\n   * Returns the bounding boxes for all lines in the paragraph. This method\n   * requires the layout method to have been called first.\n   */\n  getLineMetrics(): Array<SkRect>;\n  /**\n   * Returns a list of rects with direction info for the placeholders added\n   * to the paragraph.\n   */\n  getRectsForPlaceholders(): SkRectWithDirection[];\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["Paragraph.ts"],"sourcesContent":["import type { SkCanvas } from \"../Canvas\";\nimport type { SkJSIInstance } from \"../JsiInstance\";\nimport type { SkRect } from \"../Rect\";\n\nimport type { TextDirection } from \"./ParagraphStyle\";\n\nexport interface LineMetrics {\n  /** The index in the text buffer the line begins. */\n  startIndex: number;\n  /** The index in the text buffer the line ends. */\n  endIndex: number;\n  endExcludingWhitespaces: number;\n  endIncludingNewline: number;\n  /** True if the line ends in a hard break (e.g. newline) */\n  isHardBreak: boolean;\n  /**\n   * The final computed ascent for the line. This can be impacted by\n   * the strut, height, scaling, as well as outlying runs that are very tall.\n   */\n  ascent: number;\n  /**\n   * The final computed descent for the line. This can be impacted by\n   * the strut, height, scaling, as well as outlying runs that are very tall.\n   */\n  descent: number;\n  /** round(ascent + descent) */\n  height: number;\n  /** width of the line */\n  width: number;\n  /** The left edge of the line. The right edge can be obtained with `left + width` */\n  left: number;\n  /** The y position of the baseline for this line from the top of the paragraph. */\n  baseline: number;\n  /** Zero indexed line number. */\n  lineNumber: number;\n}\n\nexport interface SkRectWithDirection {\n  rect: SkRect;\n  direction: TextDirection;\n}\n\nexport interface SkParagraph extends SkJSIInstance<\"Paragraph\"> {\n  /**\n   * Calculates the position of the the glyphs in the paragraph\n   * @param width Max width of the paragraph\n   */\n  layout(width: number): void;\n  /**\n   * Paints the paragraph to the provded canvas\n   * @param canvas Canvas to paint into\n   * @param x X coordinate to paint at\n   * @param y Y coordinate to paint at\n   */\n  paint(canvas: SkCanvas, x: number, y: number): void;\n  /**\n   * Returns the height of the paragraph. This method requires the layout\n   * method to have been called first.\n   */\n  getHeight(): number;\n  /**\n   * Returns the max width of the paragraph. This method requires the layout\n   * method to have been called first.\n   */\n  getMaxWidth(): number;\n  /**\n   * Returns the minimum intrinsic width of the paragraph.\n   * The minimum intrinsic width is the width beyond which increasing the width of the paragraph\n   * does not decrease the height. This is effectively the width at which the paragraph\n   * can no longer wrap lines and is forced to overflow.\n   * This method requires the layout method to have been called first.\n   * @returns {number} The minimum intrinsic width of the paragraph.\n   */\n  getMinIntrinsicWidth(): number;\n  /**\n   * Returns the maximum intrinsic width of the paragraph.\n   * The maximum intrinsic width is the width at which the paragraph can layout its content without line breaks,\n   * meaning it's the width of the widest line or the widest word if the widest line is shorter than that.\n   * This width represents the ideal width for the paragraph to display all content in a single line without overflow.\n   * This method requires the layout method to have been called first.\n   * @returns {number} The maximum intrinsic width of the paragraph.\n   */\n  getMaxIntrinsicWidth(): number;\n\n  /**\n   * Returns the width of the longest line in the paragraph.\n   * This method requires the layout method to have been called first.\n   */\n  getLongestLine(): number;\n\n  /**\n   * Returns the index of the glyph at the given position. This method requires\n   * the layout method to have been called first.\n   * @param x X coordinate of the position\n   * @param y Y coordinate of the position\n   */\n  getGlyphPositionAtCoordinate(x: number, y: number): number;\n  /**\n   * Returns the bounding boxes of the glyphs in the given range. This method\n   * requires the layout method to have been called first.\n   * @param start Start index of the range\n   * @param end End index of the range\n   */\n  getRectsForRange(start: number, end: number): SkRect[];\n  /**\n   * Returns the bounding boxes for all lines in the paragraph. This method\n   * requires the layout method to have been called first.\n   */\n  getLineMetrics(): LineMetrics[];\n  /**\n   * Returns a list of rects with direction info for the placeholders added\n   * to the paragraph.\n   */\n  getRectsForPlaceholders(): SkRectWithDirection[];\n}\n"],"mappings":"","ignoreList":[]}

package/lib/commonjs/skia/web/JsiSkParagraph.d.ts

@@ -1,5 +1,5 @@
 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";
 export declare class JsiSkParagraph extends HostObject<Paragraph, "Paragraph"> implements SkParagraph {
@@ -14,6 +14,6 @@ export declare class JsiSkParagraph extends HostObject<Paragraph, "Paragraph"> i
     getGlyphPositionAtCoordinate(x: number, y: number): number;
     getRectsForPlaceholders(): SkRectWithDirection[];
     getRectsForRange(start: number, end: number): SkRect[];
-    getLineMetrics(): SkRect[];
+    getLineMetrics(): LineMetrics[];
     dispose(): void;
 }

package/lib/commonjs/skia/web/JsiSkParagraph.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.JsiSkParagraph = void 0;
 var _Host = require("./Host");
+var _JsiSkRect = require("./JsiSkRect");
 class JsiSkParagraph extends _Host.HostObject {
   constructor(CanvasKit, ref) {
     super(CanvasKit, ref, "Paragraph");
@@ -38,12 +39,7 @@ class JsiSkParagraph extends _Host.HostObject {
       rect,
       dir
     }) => ({
-      rect: {
-        x: rect.at(0),
-        y: rect.at(1),
-        width: rect.at(2),
-        height: rect.at(3)
-      },
+      rect: new _JsiSkRect.JsiSkRect(this.CanvasKit, rect),
       direction: dir.value
     }));
   }
@@ -54,20 +50,10 @@ class JsiSkParagraph extends _Host.HostObject {
       value: 0
     } /** kTight */).map(({
       rect
-    }) => ({
-      x: rect[0],
-      y: rect[1],
-      width: rect[2],
-      height: rect[3]
-    }));
+    }) => new _JsiSkRect.JsiSkRect(this.CanvasKit, rect));
   }
   getLineMetrics() {
-    return this.ref.getLineMetrics().map((r, index) => ({
-      x: r.left,
-      y: index * r.height,
-      width: r.width,
-      height: r.height
-    }));
+    return this.ref.getLineMetrics();
   }
   dispose() {
     this.ref.delete();

package/lib/commonjs/skia/web/JsiSkParagraph.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Host","require","JsiSkParagraph","HostObject","constructor","CanvasKit","ref","getMinIntrinsicWidth","getMaxIntrinsicWidth","getLongestLine","layout","width","paint","canvas","x","y","drawParagraph","getHeight","getMaxWidth","getGlyphPositionAtCoordinate","pos","getRectsForPlaceholders","map","rect","dir","at","height","direction","value","getRectsForRange","start","end","getLineMetrics","r","index","left","dispose","delete","exports"],"sources":["JsiSkParagraph.ts"],"sourcesContent":["import type { CanvasKit, Paragraph } from \"canvaskit-wasm\";\n\nimport type { SkRect, SkRectWithDirection, SkParagraph } from \"../types\";\n\nimport { HostObject } from \"./Host\";\nimport type { JsiSkCanvas } from \"./JsiSkCanvas\";\n\nexport class JsiSkParagraph\n  extends HostObject<Paragraph, \"Paragraph\">\n  implements SkParagraph\n{\n  constructor(CanvasKit: CanvasKit, ref: Paragraph) {\n    super(CanvasKit, ref, \"Paragraph\");\n  }\n  getMinIntrinsicWidth(): number {\n    return this.ref.getMinIntrinsicWidth();\n  }\n\n  getMaxIntrinsicWidth(): number {\n    return this.ref.getMaxIntrinsicWidth();\n  }\n\n  getLongestLine(): number {\n    return this.ref.getLongestLine();\n  }\n\n  layout(width: number): void {\n    this.ref.layout(width);\n  }\n  paint(canvas: JsiSkCanvas, x: number, y: number): void {\n    canvas.ref.drawParagraph(this.ref, x, y);\n  }\n  getHeight(): number {\n    return this.ref.getHeight();\n  }\n  getMaxWidth(): number {\n    return this.ref.getMaxWidth();\n  }\n  getGlyphPositionAtCoordinate(x: number, y: number): number {\n    return this.ref.getGlyphPositionAtCoordinate(x, y).pos;\n  }\n  getRectsForPlaceholders(): SkRectWithDirection[] {\n    return this.ref.getRectsForPlaceholders().map(({ rect, dir }) => ({\n      rect: {\n        x: rect.at(0)!,\n        y: rect.at(1)!,\n        width: rect.at(2)!,\n        height: rect.at(3)!,\n      },\n      direction: dir.value,\n    }));\n  }\n  getRectsForRange(start: number, end: number): SkRect[] {\n    return this.ref\n      .getRectsForRange(\n        start,\n        end,\n        { value: 0 } /** kTight */,\n        { value: 0 } /** kTight */\n      )\n      .map(({ rect }) => ({\n        x: rect[0],\n        y: rect[1],\n        width: rect[2],\n        height: rect[3],\n      }));\n  }\n  getLineMetrics(): SkRect[] {\n    return this.ref.getLineMetrics().map((r, index) => ({\n      x: r.left,\n      y: index * r.height,\n      width: r.width,\n      height: r.height,\n    }));\n  }\n\n  dispose() {\n    this.ref.delete();\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_Host","require","_JsiSkRect","JsiSkParagraph","HostObject","constructor","CanvasKit","ref","getMinIntrinsicWidth","getMaxIntrinsicWidth","getLongestLine","layout","width","paint","canvas","x","y","drawParagraph","getHeight","getMaxWidth","getGlyphPositionAtCoordinate","pos","getRectsForPlaceholders","map","rect","dir","JsiSkRect","direction","value","getRectsForRange","start","end","getLineMetrics","dispose","delete","exports"],"sources":["JsiSkParagraph.ts"],"sourcesContent":["import type { CanvasKit, Paragraph } from \"canvaskit-wasm\";\n\nimport type {\n  SkRect,\n  SkRectWithDirection,\n  SkParagraph,\n  LineMetrics,\n} from \"../types\";\n\nimport { HostObject } from \"./Host\";\nimport type { JsiSkCanvas } from \"./JsiSkCanvas\";\nimport { JsiSkRect } from \"./JsiSkRect\";\n\nexport class JsiSkParagraph\n  extends HostObject<Paragraph, \"Paragraph\">\n  implements SkParagraph\n{\n  constructor(CanvasKit: CanvasKit, ref: Paragraph) {\n    super(CanvasKit, ref, \"Paragraph\");\n  }\n  getMinIntrinsicWidth() {\n    return this.ref.getMinIntrinsicWidth();\n  }\n\n  getMaxIntrinsicWidth() {\n    return this.ref.getMaxIntrinsicWidth();\n  }\n\n  getLongestLine() {\n    return this.ref.getLongestLine();\n  }\n\n  layout(width: number) {\n    this.ref.layout(width);\n  }\n  paint(canvas: JsiSkCanvas, x: number, y: number) {\n    canvas.ref.drawParagraph(this.ref, x, y);\n  }\n  getHeight() {\n    return this.ref.getHeight();\n  }\n  getMaxWidth() {\n    return this.ref.getMaxWidth();\n  }\n  getGlyphPositionAtCoordinate(x: number, y: number) {\n    return this.ref.getGlyphPositionAtCoordinate(x, y).pos;\n  }\n  getRectsForPlaceholders(): SkRectWithDirection[] {\n    return this.ref.getRectsForPlaceholders().map(({ rect, dir }) => ({\n      rect: new JsiSkRect(this.CanvasKit, rect),\n      direction: dir.value,\n    }));\n  }\n  getRectsForRange(start: number, end: number): SkRect[] {\n    return this.ref\n      .getRectsForRange(\n        start,\n        end,\n        { value: 0 } /** kTight */,\n        { value: 0 } /** kTight */\n      )\n      .map(({ rect }) => new JsiSkRect(this.CanvasKit, rect));\n  }\n  getLineMetrics(): LineMetrics[] {\n    return this.ref.getLineMetrics();\n  }\n\n  dispose() {\n    this.ref.delete();\n  }\n}\n"],"mappings":";;;;;;AASA,IAAAA,KAAA,GAAAC,OAAA;AAEA,IAAAC,UAAA,GAAAD,OAAA;AAEO,MAAME,cAAc,SACjBC,gBAAU,CAEpB;EACEC,WAAWA,CAACC,SAAoB,EAAEC,GAAc,EAAE;IAChD,KAAK,CAACD,SAAS,EAAEC,GAAG,EAAE,WAAW,CAAC;EACpC;EACAC,oBAAoBA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACD,GAAG,CAACC,oBAAoB,CAAC,CAAC;EACxC;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACF,GAAG,CAACE,oBAAoB,CAAC,CAAC;EACxC;EAEAC,cAAcA,CAAA,EAAG;IACf,OAAO,IAAI,CAACH,GAAG,CAACG,cAAc,CAAC,CAAC;EAClC;EAEAC,MAAMA,CAACC,KAAa,EAAE;IACpB,IAAI,CAACL,GAAG,CAACI,MAAM,CAACC,KAAK,CAAC;EACxB;EACAC,KAAKA,CAACC,MAAmB,EAAEC,CAAS,EAAEC,CAAS,EAAE;IAC/CF,MAAM,CAACP,GAAG,CAACU,aAAa,CAAC,IAAI,CAACV,GAAG,EAAEQ,CAAC,EAAEC,CAAC,CAAC;EAC1C;EACAE,SAASA,CAAA,EAAG;IACV,OAAO,IAAI,CAACX,GAAG,CAACW,SAAS,CAAC,CAAC;EAC7B;EACAC,WAAWA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACZ,GAAG,CAACY,WAAW,CAAC,CAAC;EAC/B;EACAC,4BAA4BA,CAACL,CAAS,EAAEC,CAAS,EAAE;IACjD,OAAO,IAAI,CAACT,GAAG,CAACa,4BAA4B,CAACL,CAAC,EAAEC,CAAC,CAAC,CAACK,GAAG;EACxD;EACAC,uBAAuBA,CAAA,EAA0B;IAC/C,OAAO,IAAI,CAACf,GAAG,CAACe,uBAAuB,CAAC,CAAC,CAACC,GAAG,CAAC,CAAC;MAAEC,IAAI;MAAEC;IAAI,CAAC,MAAM;MAChED,IAAI,EAAE,IAAIE,oBAAS,CAAC,IAAI,CAACpB,SAAS,EAAEkB,IAAI,CAAC;MACzCG,SAAS,EAAEF,GAAG,CAACG;IACjB,CAAC,CAAC,CAAC;EACL;EACAC,gBAAgBA,CAACC,KAAa,EAAEC,GAAW,EAAY;IACrD,OAAO,IAAI,CAACxB,GAAG,CACZsB,gBAAgB,CACfC,KAAK,EACLC,GAAG,EACH;MAAEH,KAAK,EAAE;IAAE,CAAC,CAAC,eACb;MAAEA,KAAK,EAAE;IAAE,CAAC,CAAC,aACf,CAAC,CACAL,GAAG,CAAC,CAAC;MAAEC;IAAK,CAAC,KAAK,IAAIE,oBAAS,CAAC,IAAI,CAACpB,SAAS,EAAEkB,IAAI,CAAC,CAAC;EAC3D;EACAQ,cAAcA,CAAA,EAAkB;IAC9B,OAAO,IAAI,CAACzB,GAAG,CAACyB,cAAc,CAAC,CAAC;EAClC;EAEAC,OAAOA,CAAA,EAAG;IACR,IAAI,CAAC1B,GAAG,CAAC2B,MAAM,CAAC,CAAC;EACnB;AACF;AAACC,OAAA,CAAAhC,cAAA,GAAAA,cAAA","ignoreList":[]}

package/lib/module/renderer/__tests__/e2e/ParagraphMethods.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/module/renderer/__tests__/e2e/setup/Paragraph.d.ts

@@ -12,7 +12,7 @@ export declare class ParagraphAsset<Ctx extends EvalContext> extends SkiaObject<
     getLongestLine(): number;
     getGlyphPositionAtCoordinate(x: number, y: number): number;
     getRectsForRange(start: number, end: number): import("../../../../skia/types").SkRect[];
-    getLineMetrics(): import("../../../../skia/types").SkRect[];
+    getLineMetrics(): import("../../../../skia/types").LineMetrics[];
     getRectsForPlaceholders(): import("../../../../skia/types").SkRectWithDirection[];
     __typename__: "Paragraph";
     dispose(): void;

package/lib/module/skia/types/Paragraph/Paragraph.d.ts

@@ -2,6 +2,36 @@ import type { SkCanvas } from "../Canvas";
 import type { SkJSIInstance } from "../JsiInstance";
 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;
@@ -70,7 +100,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/lib/module/skia/types/Paragraph/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Paragraph.ts"],"sourcesContent":["import type { SkCanvas } from \"../Canvas\";\nimport type { SkJSIInstance } from \"../JsiInstance\";\nimport type { SkRect } from \"../Rect\";\n\nimport type { TextDirection } from \"./ParagraphStyle\";\n\nexport interface SkRectWithDirection {\n  rect: SkRect;\n  direction: TextDirection;\n}\n\nexport interface SkParagraph extends SkJSIInstance<\"Paragraph\"> {\n  /**\n   * Calculates the position of the the glyphs in the paragraph\n   * @param width Max width of the paragraph\n   */\n  layout(width: number): void;\n  /**\n   * Paints the paragraph to the provded canvas\n   * @param canvas Canvas to paint into\n   * @param x X coordinate to paint at\n   * @param y Y coordinate to paint at\n   */\n  paint(canvas: SkCanvas, x: number, y: number): void;\n  /**\n   * Returns the height of the paragraph. This method requires the layout\n   * method to have been called first.\n   */\n  getHeight(): number;\n  /**\n   * Returns the max width of the paragraph. This method requires the layout\n   * method to have been called first.\n   */\n  getMaxWidth(): number;\n  /**\n   * Returns the minimum intrinsic width of the paragraph.\n   * The minimum intrinsic width is the width beyond which increasing the width of the paragraph\n   * does not decrease the height. This is effectively the width at which the paragraph\n   * can no longer wrap lines and is forced to overflow.\n   * This method requires the layout method to have been called first.\n   * @returns {number} The minimum intrinsic width of the paragraph.\n   */\n  getMinIntrinsicWidth(): number;\n  /**\n   * Returns the maximum intrinsic width of the paragraph.\n   * The maximum intrinsic width is the width at which the paragraph can layout its content without line breaks,\n   * meaning it's the width of the widest line or the widest word if the widest line is shorter than that.\n   * This width represents the ideal width for the paragraph to display all content in a single line without overflow.\n   * This method requires the layout method to have been called first.\n   * @returns {number} The maximum intrinsic width of the paragraph.\n   */\n  getMaxIntrinsicWidth(): number;\n\n  /**\n   * Returns the width of the longest line in the paragraph.\n   * This method requires the layout method to have been called first.\n   */\n  getLongestLine(): number;\n\n  /**\n   * Returns the index of the glyph at the given position. This method requires\n   * the layout method to have been called first.\n   * @param x X coordinate of the position\n   * @param y Y coordinate of the position\n   */\n  getGlyphPositionAtCoordinate(x: number, y: number): number;\n  /**\n   * Returns the bounding boxes of the glyphs in the given range. This method\n   * requires the layout method to have been called first.\n   * @param start Start index of the range\n   * @param end End index of the range\n   */\n  getRectsForRange(start: number, end: number): SkRect[];\n  /**\n   * Returns the bounding boxes for all lines in the paragraph. This method\n   * requires the layout method to have been called first.\n   */\n  getLineMetrics(): Array<SkRect>;\n  /**\n   * Returns a list of rects with direction info for the placeholders added\n   * to the paragraph.\n   */\n  getRectsForPlaceholders(): SkRectWithDirection[];\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["Paragraph.ts"],"sourcesContent":["import type { SkCanvas } from \"../Canvas\";\nimport type { SkJSIInstance } from \"../JsiInstance\";\nimport type { SkRect } from \"../Rect\";\n\nimport type { TextDirection } from \"./ParagraphStyle\";\n\nexport interface LineMetrics {\n  /** The index in the text buffer the line begins. */\n  startIndex: number;\n  /** The index in the text buffer the line ends. */\n  endIndex: number;\n  endExcludingWhitespaces: number;\n  endIncludingNewline: number;\n  /** True if the line ends in a hard break (e.g. newline) */\n  isHardBreak: boolean;\n  /**\n   * The final computed ascent for the line. This can be impacted by\n   * the strut, height, scaling, as well as outlying runs that are very tall.\n   */\n  ascent: number;\n  /**\n   * The final computed descent for the line. This can be impacted by\n   * the strut, height, scaling, as well as outlying runs that are very tall.\n   */\n  descent: number;\n  /** round(ascent + descent) */\n  height: number;\n  /** width of the line */\n  width: number;\n  /** The left edge of the line. The right edge can be obtained with `left + width` */\n  left: number;\n  /** The y position of the baseline for this line from the top of the paragraph. */\n  baseline: number;\n  /** Zero indexed line number. */\n  lineNumber: number;\n}\n\nexport interface SkRectWithDirection {\n  rect: SkRect;\n  direction: TextDirection;\n}\n\nexport interface SkParagraph extends SkJSIInstance<\"Paragraph\"> {\n  /**\n   * Calculates the position of the the glyphs in the paragraph\n   * @param width Max width of the paragraph\n   */\n  layout(width: number): void;\n  /**\n   * Paints the paragraph to the provded canvas\n   * @param canvas Canvas to paint into\n   * @param x X coordinate to paint at\n   * @param y Y coordinate to paint at\n   */\n  paint(canvas: SkCanvas, x: number, y: number): void;\n  /**\n   * Returns the height of the paragraph. This method requires the layout\n   * method to have been called first.\n   */\n  getHeight(): number;\n  /**\n   * Returns the max width of the paragraph. This method requires the layout\n   * method to have been called first.\n   */\n  getMaxWidth(): number;\n  /**\n   * Returns the minimum intrinsic width of the paragraph.\n   * The minimum intrinsic width is the width beyond which increasing the width of the paragraph\n   * does not decrease the height. This is effectively the width at which the paragraph\n   * can no longer wrap lines and is forced to overflow.\n   * This method requires the layout method to have been called first.\n   * @returns {number} The minimum intrinsic width of the paragraph.\n   */\n  getMinIntrinsicWidth(): number;\n  /**\n   * Returns the maximum intrinsic width of the paragraph.\n   * The maximum intrinsic width is the width at which the paragraph can layout its content without line breaks,\n   * meaning it's the width of the widest line or the widest word if the widest line is shorter than that.\n   * This width represents the ideal width for the paragraph to display all content in a single line without overflow.\n   * This method requires the layout method to have been called first.\n   * @returns {number} The maximum intrinsic width of the paragraph.\n   */\n  getMaxIntrinsicWidth(): number;\n\n  /**\n   * Returns the width of the longest line in the paragraph.\n   * This method requires the layout method to have been called first.\n   */\n  getLongestLine(): number;\n\n  /**\n   * Returns the index of the glyph at the given position. This method requires\n   * the layout method to have been called first.\n   * @param x X coordinate of the position\n   * @param y Y coordinate of the position\n   */\n  getGlyphPositionAtCoordinate(x: number, y: number): number;\n  /**\n   * Returns the bounding boxes of the glyphs in the given range. This method\n   * requires the layout method to have been called first.\n   * @param start Start index of the range\n   * @param end End index of the range\n   */\n  getRectsForRange(start: number, end: number): SkRect[];\n  /**\n   * Returns the bounding boxes for all lines in the paragraph. This method\n   * requires the layout method to have been called first.\n   */\n  getLineMetrics(): LineMetrics[];\n  /**\n   * Returns a list of rects with direction info for the placeholders added\n   * to the paragraph.\n   */\n  getRectsForPlaceholders(): SkRectWithDirection[];\n}\n"],"mappings":"","ignoreList":[]}

package/lib/module/skia/web/JsiSkParagraph.d.ts

@@ -1,5 +1,5 @@
 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";
 export declare class JsiSkParagraph extends HostObject<Paragraph, "Paragraph"> implements SkParagraph {
@@ -14,6 +14,6 @@ export declare class JsiSkParagraph extends HostObject<Paragraph, "Paragraph"> i
     getGlyphPositionAtCoordinate(x: number, y: number): number;
     getRectsForPlaceholders(): SkRectWithDirection[];
     getRectsForRange(start: number, end: number): SkRect[];
-    getLineMetrics(): SkRect[];
+    getLineMetrics(): LineMetrics[];
     dispose(): void;
 }

package/lib/module/skia/web/JsiSkParagraph.js

@@ -1,4 +1,5 @@
 import { HostObject } from "./Host";
+import { JsiSkRect } from "./JsiSkRect";
 export class JsiSkParagraph extends HostObject {
   constructor(CanvasKit, ref) {
     super(CanvasKit, ref, "Paragraph");
@@ -32,12 +33,7 @@ export class JsiSkParagraph extends HostObject {
       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
     }));
   }
@@ -48,20 +44,10 @@ export class JsiSkParagraph extends HostObject {
       value: 0
     } /** kTight */).map(({
       rect
-    }) => ({
-      x: rect[0],
-      y: rect[1],
-      width: rect[2],
-      height: rect[3]
-    }));
+    }) => new JsiSkRect(this.CanvasKit, rect));
   }
   getLineMetrics() {
-    return this.ref.getLineMetrics().map((r, index) => ({
-      x: r.left,
-      y: index * r.height,
-      width: r.width,
-      height: r.height
-    }));
+    return this.ref.getLineMetrics();
   }
   dispose() {
     this.ref.delete();

package/lib/module/skia/web/JsiSkParagraph.js.map

@@ -1 +1 @@
-{"version":3,"names":["HostObject","JsiSkParagraph","constructor","CanvasKit","ref","getMinIntrinsicWidth","getMaxIntrinsicWidth","getLongestLine","layout","width","paint","canvas","x","y","drawParagraph","getHeight","getMaxWidth","getGlyphPositionAtCoordinate","pos","getRectsForPlaceholders","map","rect","dir","at","height","direction","value","getRectsForRange","start","end","getLineMetrics","r","index","left","dispose","delete"],"sources":["JsiSkParagraph.ts"],"sourcesContent":["import type { CanvasKit, Paragraph } from \"canvaskit-wasm\";\n\nimport type { SkRect, SkRectWithDirection, SkParagraph } from \"../types\";\n\nimport { HostObject } from \"./Host\";\nimport type { JsiSkCanvas } from \"./JsiSkCanvas\";\n\nexport class JsiSkParagraph\n  extends HostObject<Paragraph, \"Paragraph\">\n  implements SkParagraph\n{\n  constructor(CanvasKit: CanvasKit, ref: Paragraph) {\n    super(CanvasKit, ref, \"Paragraph\");\n  }\n  getMinIntrinsicWidth(): number {\n    return this.ref.getMinIntrinsicWidth();\n  }\n\n  getMaxIntrinsicWidth(): number {\n    return this.ref.getMaxIntrinsicWidth();\n  }\n\n  getLongestLine(): number {\n    return this.ref.getLongestLine();\n  }\n\n  layout(width: number): void {\n    this.ref.layout(width);\n  }\n  paint(canvas: JsiSkCanvas, x: number, y: number): void {\n    canvas.ref.drawParagraph(this.ref, x, y);\n  }\n  getHeight(): number {\n    return this.ref.getHeight();\n  }\n  getMaxWidth(): number {\n    return this.ref.getMaxWidth();\n  }\n  getGlyphPositionAtCoordinate(x: number, y: number): number {\n    return this.ref.getGlyphPositionAtCoordinate(x, y).pos;\n  }\n  getRectsForPlaceholders(): SkRectWithDirection[] {\n    return this.ref.getRectsForPlaceholders().map(({ rect, dir }) => ({\n      rect: {\n        x: rect.at(0)!,\n        y: rect.at(1)!,\n        width: rect.at(2)!,\n        height: rect.at(3)!,\n      },\n      direction: dir.value,\n    }));\n  }\n  getRectsForRange(start: number, end: number): SkRect[] {\n    return this.ref\n      .getRectsForRange(\n        start,\n        end,\n        { value: 0 } /** kTight */,\n        { value: 0 } /** kTight */\n      )\n      .map(({ rect }) => ({\n        x: rect[0],\n        y: rect[1],\n        width: rect[2],\n        height: rect[3],\n      }));\n  }\n  getLineMetrics(): SkRect[] {\n    return this.ref.getLineMetrics().map((r, index) => ({\n      x: r.left,\n      y: index * r.height,\n      width: r.width,\n      height: r.height,\n    }));\n  }\n\n  dispose() {\n    this.ref.delete();\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["HostObject","JsiSkRect","JsiSkParagraph","constructor","CanvasKit","ref","getMinIntrinsicWidth","getMaxIntrinsicWidth","getLongestLine","layout","width","paint","canvas","x","y","drawParagraph","getHeight","getMaxWidth","getGlyphPositionAtCoordinate","pos","getRectsForPlaceholders","map","rect","dir","direction","value","getRectsForRange","start","end","getLineMetrics","dispose","delete"],"sources":["JsiSkParagraph.ts"],"sourcesContent":["import type { CanvasKit, Paragraph } from \"canvaskit-wasm\";\n\nimport type {\n  SkRect,\n  SkRectWithDirection,\n  SkParagraph,\n  LineMetrics,\n} from \"../types\";\n\nimport { HostObject } from \"./Host\";\nimport type { JsiSkCanvas } from \"./JsiSkCanvas\";\nimport { JsiSkRect } from \"./JsiSkRect\";\n\nexport class JsiSkParagraph\n  extends HostObject<Paragraph, \"Paragraph\">\n  implements SkParagraph\n{\n  constructor(CanvasKit: CanvasKit, ref: Paragraph) {\n    super(CanvasKit, ref, \"Paragraph\");\n  }\n  getMinIntrinsicWidth() {\n    return this.ref.getMinIntrinsicWidth();\n  }\n\n  getMaxIntrinsicWidth() {\n    return this.ref.getMaxIntrinsicWidth();\n  }\n\n  getLongestLine() {\n    return this.ref.getLongestLine();\n  }\n\n  layout(width: number) {\n    this.ref.layout(width);\n  }\n  paint(canvas: JsiSkCanvas, x: number, y: number) {\n    canvas.ref.drawParagraph(this.ref, x, y);\n  }\n  getHeight() {\n    return this.ref.getHeight();\n  }\n  getMaxWidth() {\n    return this.ref.getMaxWidth();\n  }\n  getGlyphPositionAtCoordinate(x: number, y: number) {\n    return this.ref.getGlyphPositionAtCoordinate(x, y).pos;\n  }\n  getRectsForPlaceholders(): SkRectWithDirection[] {\n    return this.ref.getRectsForPlaceholders().map(({ rect, dir }) => ({\n      rect: new JsiSkRect(this.CanvasKit, rect),\n      direction: dir.value,\n    }));\n  }\n  getRectsForRange(start: number, end: number): SkRect[] {\n    return this.ref\n      .getRectsForRange(\n        start,\n        end,\n        { value: 0 } /** kTight */,\n        { value: 0 } /** kTight */\n      )\n      .map(({ rect }) => new JsiSkRect(this.CanvasKit, rect));\n  }\n  getLineMetrics(): LineMetrics[] {\n    return this.ref.getLineMetrics();\n  }\n\n  dispose() {\n    this.ref.delete();\n  }\n}\n"],"mappings":"AASA,SAASA,UAAU,QAAQ,QAAQ;AAEnC,SAASC,SAAS,QAAQ,aAAa;AAEvC,OAAO,MAAMC,cAAc,SACjBF,UAAU,CAEpB;EACEG,WAAWA,CAACC,SAAoB,EAAEC,GAAc,EAAE;IAChD,KAAK,CAACD,SAAS,EAAEC,GAAG,EAAE,WAAW,CAAC;EACpC;EACAC,oBAAoBA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACD,GAAG,CAACC,oBAAoB,CAAC,CAAC;EACxC;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACF,GAAG,CAACE,oBAAoB,CAAC,CAAC;EACxC;EAEAC,cAAcA,CAAA,EAAG;IACf,OAAO,IAAI,CAACH,GAAG,CAACG,cAAc,CAAC,CAAC;EAClC;EAEAC,MAAMA,CAACC,KAAa,EAAE;IACpB,IAAI,CAACL,GAAG,CAACI,MAAM,CAACC,KAAK,CAAC;EACxB;EACAC,KAAKA,CAACC,MAAmB,EAAEC,CAAS,EAAEC,CAAS,EAAE;IAC/CF,MAAM,CAACP,GAAG,CAACU,aAAa,CAAC,IAAI,CAACV,GAAG,EAAEQ,CAAC,EAAEC,CAAC,CAAC;EAC1C;EACAE,SAASA,CAAA,EAAG;IACV,OAAO,IAAI,CAACX,GAAG,CAACW,SAAS,CAAC,CAAC;EAC7B;EACAC,WAAWA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACZ,GAAG,CAACY,WAAW,CAAC,CAAC;EAC/B;EACAC,4BAA4BA,CAACL,CAAS,EAAEC,CAAS,EAAE;IACjD,OAAO,IAAI,CAACT,GAAG,CAACa,4BAA4B,CAACL,CAAC,EAAEC,CAAC,CAAC,CAACK,GAAG;EACxD;EACAC,uBAAuBA,CAAA,EAA0B;IAC/C,OAAO,IAAI,CAACf,GAAG,CAACe,uBAAuB,CAAC,CAAC,CAACC,GAAG,CAAC,CAAC;MAAEC,IAAI;MAAEC;IAAI,CAAC,MAAM;MAChED,IAAI,EAAE,IAAIrB,SAAS,CAAC,IAAI,CAACG,SAAS,EAAEkB,IAAI,CAAC;MACzCE,SAAS,EAAED,GAAG,CAACE;IACjB,CAAC,CAAC,CAAC;EACL;EACAC,gBAAgBA,CAACC,KAAa,EAAEC,GAAW,EAAY;IACrD,OAAO,IAAI,CAACvB,GAAG,CACZqB,gBAAgB,CACfC,KAAK,EACLC,GAAG,EACH;MAAEH,KAAK,EAAE;IAAE,CAAC,CAAC,eACb;MAAEA,KAAK,EAAE;IAAE,CAAC,CAAC,aACf,CAAC,CACAJ,GAAG,CAAC,CAAC;MAAEC;IAAK,CAAC,KAAK,IAAIrB,SAAS,CAAC,IAAI,CAACG,SAAS,EAAEkB,IAAI,CAAC,CAAC;EAC3D;EACAO,cAAcA,CAAA,EAAkB;IAC9B,OAAO,IAAI,CAACxB,GAAG,CAACwB,cAAc,CAAC,CAAC;EAClC;EAEAC,OAAOA,CAAA,EAAG;IACR,IAAI,CAACzB,GAAG,CAAC0B,MAAM,CAAC,CAAC;EACnB;AACF","ignoreList":[]}

package/lib/typescript/src/renderer/__tests__/e2e/ParagraphMethods.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/src/renderer/__tests__/e2e/setup/Paragraph.d.ts

@@ -12,7 +12,7 @@ export declare class ParagraphAsset<Ctx extends EvalContext> extends SkiaObject<
     getLongestLine(): number;
     getGlyphPositionAtCoordinate(x: number, y: number): number;
     getRectsForRange(start: number, end: number): import("../../../../skia/types").SkRect[];
-    getLineMetrics(): import("../../../../skia/types").SkRect[];
+    getLineMetrics(): import("../../../../skia/types").LineMetrics[];
     getRectsForPlaceholders(): import("../../../../skia/types").SkRectWithDirection[];
     __typename__: "Paragraph";
     dispose(): void;

package/lib/typescript/src/skia/types/Paragraph/Paragraph.d.ts

@@ -2,6 +2,36 @@ import type { SkCanvas } from "../Canvas";
 import type { SkJSIInstance } from "../JsiInstance";
 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;
@@ -70,7 +100,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/lib/typescript/src/skia/web/JsiSkParagraph.d.ts

@@ -1,5 +1,5 @@
 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";
 export declare class JsiSkParagraph extends HostObject<Paragraph, "Paragraph"> implements SkParagraph {
@@ -14,6 +14,6 @@ export declare class JsiSkParagraph extends HostObject<Paragraph, "Paragraph"> i
     getGlyphPositionAtCoordinate(x: number, y: number): number;
     getRectsForPlaceholders(): SkRectWithDirection[];
     getRectsForRange(start: number, end: number): SkRect[];
-    getLineMetrics(): SkRect[];
+    getLineMetrics(): LineMetrics[];
     dispose(): void;
 }

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

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

@@ -0,0 +1,383 @@
+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() {