@shopify/react-native-skia 2.2.7 → 2.2.9

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/renderer/__tests__/e2e/Shader.spec.tsx

@@ -257,4 +257,97 @@ vec4 main(vec2 pos) {
     );
     checkImage(img, docPath("shaders/color.png"));
   });
+  it("should display a mix of red and lightblue color", async () => {
+    const { Skia } = importSkia();
+    const colorSelection = Skia.RuntimeEffect.Make(`uniform shader child1;
+uniform shader child2;
+
+vec4 main(vec2 pos) {
+  vec4 c1 = child1.eval(pos);
+  vec4 c2 = child2.eval(pos);
+  return mix(c1, c2, 0.5);
+}`)!;
+    const img = await surface.draw(
+      <Fill>
+        <Shader source={colorSelection}>
+          <ColorShader color="lightblue" />
+          <ColorShader color="red" />
+        </Shader>
+      </Fill>
+    );
+    checkImage(img, docPath("shaders/mixed-colors.png"));
+  });
+  it("should display a mix of red and lightblue from custom shaders", async () => {
+    const { Skia } = importSkia();
+    const colorSelection = Skia.RuntimeEffect.Make(`uniform shader child1;
+uniform shader child2;
+
+vec4 main(vec2 pos) {
+  vec4 c1 = child1.eval(pos);
+  vec4 c2 = child2.eval(pos);
+  return mix(c1, c2, 0.5);
+}`)!;
+    expect(colorSelection).toBeDefined();
+    const colorShader = Skia.RuntimeEffect.Make(`
+uniform vec4 color;
+
+vec4 main(vec2 pos) {
+  return color;
+}
+`)!;
+    expect(colorShader).toBeDefined();
+    const img = await surface.draw(
+      <Fill>
+        <Shader source={colorSelection}>
+          <Shader
+            source={colorShader}
+            uniforms={{ color: Skia.Color("lightblue") }}
+          />
+          <Shader
+            source={colorShader}
+            uniforms={{ color: Skia.Color("red") }}
+          />
+        </Shader>
+      </Fill>
+    );
+    checkImage(img, docPath("shaders/mixed-colors.png"));
+  });
+
+  it("should display different results based on children order", async () => {
+    const { Skia } = importSkia();
+    const orderSensitiveShader = Skia.RuntimeEffect.Make(`uniform shader child1;
+uniform shader child2;
+
+vec4 main(vec2 pos) {
+  vec4 c1 = child1.eval(pos);
+  vec4 c2 = child2.eval(pos);
+  // Order-dependent: blend child2 over child1 with position-based alpha
+  float alpha = pos.x / 256.0;
+  return mix(c1, c2, alpha);
+}`)!;
+    expect(orderSensitiveShader).toBeDefined();
+    const colorShader = Skia.RuntimeEffect.Make(`
+uniform vec4 color;
+
+vec4 main(vec2 pos) {
+  return color;
+}
+`)!;
+    expect(colorShader).toBeDefined();
+    const img = await surface.draw(
+      <Fill>
+        <Shader source={orderSensitiveShader}>
+          <Shader
+            source={colorShader}
+            uniforms={{ color: Skia.Color("blue") }}
+          />
+          <Shader
+            source={colorShader}
+            uniforms={{ color: Skia.Color("yellow") }}
+          />
+        </Shader>
+      </Fill>
+    );
+    checkImage(img, docPath("shaders/order-dependent.png"));
+  });
 });

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/types/Recorder.ts

@@ -48,7 +48,11 @@ export interface BaseRecorder {
     colorFilterType: NodeType,
     props: AnimatedProps<unknown>
   ): void;
-  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+  pushShader(
+    shaderType: NodeType,
+    props: AnimatedProps<unknown>,
+    children: number
+  ): void;
   pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
   composePathEffect(): void;
   composeColorFilter(): void;

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() {