@shopify/react-native-skia 1.3.12 → 1.4.0

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

@@ -0,0 +1,85 @@
+import React from "react";
+
+import { docPath, checkImage } from "../../../__tests__/setup";
+import { Group, Mask, Circle, Rect, Image, Paint } from "../../components";
+import { importSkia, surface, images } from "../setup";
+
+describe("Mask Documentation Examples", () => {
+  it("should draw an alpha mask", async () => {
+    const { width } = surface;
+    const r = width / 2;
+    const image = await surface.draw(
+      <>
+        <Mask
+          mask={
+            <Group>
+              <Circle cx={r} cy={r} r={r} opacity={0.5} />
+              <Circle cx={r} cy={r} r={r / 2} />
+            </Group>
+          }
+        >
+          <Rect x={0} y={0} width={r * 2} height={r * 2} color="lightblue" />
+        </Mask>
+      </>
+    );
+    checkImage(image, docPath("mask/alpha-mask.png"));
+  });
+  it("should draw an luminance mask", async () => {
+    const { width } = surface;
+    const r = width / 2;
+    const image = await surface.draw(
+      <>
+        <Mask
+          mode="luminance"
+          mask={
+            <Group>
+              <Circle cx={r} cy={r} r={r} color="white" />
+              <Circle cx={r} cy={r} r={r / 2} color="black" />
+            </Group>
+          }
+        >
+          <Rect x={0} y={0} width={r * 2} height={r * 2} color="lightblue" />
+        </Mask>
+      </>
+    );
+    checkImage(image, docPath("mask/luminance-mask.png"));
+  });
+  it("should blend a mask", async () => {
+    const { width, height } = surface;
+    const { rect } = importSkia();
+    const rct = rect(0, 0, width, height);
+    const { mask } = images;
+    const image = await surface.draw(
+      <>
+        <Rect rect={rct} color={"cyan"} />
+        <Group layer={<Paint blendMode="multiply" />}>
+          <Mask
+            mode="luminance"
+            mask={
+              <Group>
+                <Rect x={0} y={0} width={120} height={256} color={"white"} />
+                <Rect
+                  x={120}
+                  y={0}
+                  width={256 - 120}
+                  height={256}
+                  color={"black"}
+                />
+              </Group>
+            }
+          >
+            <Image
+              image={mask}
+              fit="cover"
+              x={0}
+              y={0}
+              width={256}
+              height={256}
+            />
+          </Mask>
+        </Group>
+      </>
+    );
+    checkImage(image, docPath("mask/blend-mode-mask.png"));
+  });
+});

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

@@ -0,0 +1,275 @@
+import React from "react";
+
+import { checkImage } from "../../../__tests__/setup";
+import { Group, Rect } from "../../components";
+import { surface } from "../setup";
+import {
+  multiply4,
+  perspective,
+  processTransform3d,
+  rotateX,
+  translate,
+  toMatrix3,
+  Matrix4,
+  mapPoint3d,
+} from "../../../skia/types";
+
+const ckPerspective = (d: number) => [
+  1,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  -1 / d,
+  1,
+];
+
+const concat = (a: number[], b: number[]) => CanvasKit.M44.multiply(a, b);
+
+describe("Matrix4", () => {
+  it("should be a row major matix", () => {
+    const m4 = CanvasKit.M44.identity();
+    expect(processTransform3d([])).toEqual(m4);
+  });
+  it("should match identity matrix", () => {
+    const m4 = CanvasKit.M44.identity();
+    expect(
+      processTransform3d([
+        { translateX: 256 / 2 },
+        { translateY: 256 / 2 },
+        { translateX: -256 / 2 },
+        { translateY: -256 / 2 },
+      ])
+    ).toEqual(m4);
+  });
+  it("Identity should match identity matrix", () => {
+    const m4 = CanvasKit.M44.identity();
+    expect(
+      processTransform3d([
+        { translateX: 256 / 2 },
+        { translateY: 256 / 2 },
+        { translateX: -256 / 2 },
+        { translateY: -256 / 2 },
+      ])
+    ).toEqual(m4);
+  });
+  it("should match perspective matrix", () => {
+    let m4 = CanvasKit.M44.identity();
+    m4 = concat(m4, CanvasKit.M44.translated([256 / 2, 256 / 2, 0]));
+    m4 = concat(m4, ckPerspective(300));
+    m4 = concat(m4, CanvasKit.M44.translated([-256 / 2, -256 / 2, 0]));
+    expect(
+      processTransform3d([
+        { translateX: 256 / 2 },
+        { translateY: 256 / 2 },
+        { perspective: 300 },
+        { translateX: -256 / 2 },
+        { translateY: -256 / 2 },
+      ])
+    ).toEqual(m4);
+  });
+  it("should match rotation matrix (1)", () => {
+    let m4 = CanvasKit.M44.identity();
+    m4 = concat(m4, CanvasKit.M44.rotated([1, 0, 0], 1));
+    expect(processTransform3d([{ rotateX: 1 }])).toEqual(m4);
+    m4 = CanvasKit.M44.identity();
+    m4 = concat(m4, CanvasKit.M44.rotated([0, 1, 0], Math.PI));
+    expect(processTransform3d([{ rotateY: Math.PI }])).toEqual(m4);
+  });
+  it("should match rotation matrix (2)", () => {
+    let m4 = CanvasKit.M44.identity();
+    m4 = concat(m4, CanvasKit.M44.translated([256 / 2, 256 / 2, 0]));
+    m4 = concat(m4, CanvasKit.M44.rotated([1, 0, 0], 1));
+    m4 = concat(m4, CanvasKit.M44.translated([-256 / 2, -256 / 2, 0]));
+    expect(
+      processTransform3d([
+        { translateX: 256 / 2 },
+        { translateY: 256 / 2 },
+        { rotateX: 1 },
+        { translateX: -256 / 2 },
+        { translateY: -256 / 2 },
+      ])
+    ).toEqual(m4);
+  });
+  it("Should do a perspective transformation (1)", async () => {
+    const { width, height } = surface;
+    const pad = 32;
+    const rct = {
+      x: pad,
+      y: pad,
+      width: width - pad * 2,
+      height: height - pad * 2,
+    };
+    const m3 = processTransform3d([
+      { translate: [width / 2, height / 2] },
+      { perspective: 300 },
+      { rotateX: 1 },
+      { translate: [-width / 2, -height / 2] },
+    ]);
+    const image = await surface.draw(
+      <Group>
+        <Rect rect={rct} color="magenta" />
+        <Rect rect={rct} color="cyan" opacity={0.5} matrix={m3} />
+      </Group>
+    );
+    checkImage(image, "snapshots/matrix4/perspective.png");
+  });
+  it("Should do a perspective transformation (2)", async () => {
+    const { width, height } = surface;
+    const pad = 32;
+    const rct = {
+      x: pad,
+      y: pad,
+      width: width - pad * 2,
+      height: height - pad * 2,
+    };
+    const image = await surface.draw(
+      <Group>
+        <Rect rect={rct} color="magenta" />
+        <Rect
+          rect={rct}
+          color="cyan"
+          opacity={0.5}
+          transform={[
+            { translate: [width / 2, height / 2] },
+            { perspective: 300 },
+            { rotateX: 1 },
+            { translate: [-width / 2, -height / 2] },
+          ]}
+        />
+      </Group>
+    );
+    checkImage(image, "snapshots/matrix4/perspective.png");
+  });
+  it("Should do a perspective transformation (4)", async () => {
+    const { width, height } = surface;
+    const pad = 32;
+    const rct = {
+      x: pad,
+      y: pad,
+      width: width - pad * 2,
+      height: height - pad * 2,
+    };
+    let matrix = translate(width / 2, height / 2);
+    matrix = multiply4(matrix, perspective(300));
+    matrix = multiply4(matrix, rotateX(1));
+    matrix = multiply4(matrix, translate(-width / 2, -height / 2));
+    const image = await surface.draw(
+      <Group>
+        <Rect rect={rct} color="magenta" />
+        <Rect rect={rct} color="cyan" opacity={0.5} matrix={matrix} />
+      </Group>
+    );
+    checkImage(image, "snapshots/matrix4/perspective.png");
+  });
+  it("Should do a perspective transformation (5)", async () => {
+    const { width, height } = surface;
+    const pad = 32;
+    const rct = {
+      x: pad,
+      y: pad,
+      width: width - pad * 2,
+      height: height - pad * 2,
+    };
+    let matrix = translate(width / 2, height / 2);
+    matrix = multiply4(matrix, perspective(300));
+    matrix = multiply4(matrix, rotateX(1));
+    matrix = multiply4(matrix, translate(-width / 2, -height / 2));
+    const image = await surface.draw(
+      <Group>
+        <Rect rect={rct} color="magenta" />
+        <Rect rect={rct} color="cyan" opacity={0.5} matrix={matrix} />
+      </Group>
+    );
+    checkImage(image, "snapshots/matrix4/perspective.png");
+  });
+  it("concat() should accept 4x4 matrices (1)", async () => {
+    const result = await surface.eval((Skia) => {
+      const m3 = Skia.Matrix();
+      return m3.get();
+    });
+    expect(result).toEqual([1, 0, 0, 0, 1, 0, 0, 0, 1]);
+  });
+  it("concat() should accept 4x4 matrices (2)", async () => {
+    const { width, height } = surface;
+    let matrix = translate(width / 2, height / 2);
+    matrix = multiply4(matrix, perspective(300));
+    matrix = multiply4(matrix, rotateX(1));
+    matrix = multiply4(matrix, translate(-width / 2, -height / 2));
+
+    const result = await surface.eval(
+      (Skia, ctx) => {
+        const m3 = Skia.Matrix();
+        m3.concat(ctx.matrix);
+        return m3.get();
+      },
+      { matrix }
+    );
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, jest/valid-expect
+    (expect(result) as any).toBeApproximatelyEqual(
+      toMatrix3(
+        processTransform3d([
+          { translate: [width / 2, height / 2] },
+          { perspective: 300 },
+          { rotateX: 1 },
+          { translate: [-width / 2, -height / 2] },
+        ])
+      ),
+      0.1
+    );
+  });
+
+  it("Path.transform() should accept 4x4 (1)", async () => {
+    let result = await surface.eval((Skia) => {
+      const path = Skia.Path.MakeFromSVGString("M150 0L75 200L225 200L150 0Z")!;
+      path.transform([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]);
+      return path.toSVGString();
+    });
+    expect(result).toEqual("M150 0L75 200L225 200L150 0Z");
+
+    result = await surface.eval((Skia) => {
+      const path = Skia.Path.MakeFromSVGString("M150 0L75 200L225 200L150 0Z")!;
+      path.transform([1, 0, 0, 0, 0, 1, 0, 0, 0]);
+      return path.toSVGString();
+    });
+    expect(result).not.toEqual("M150 0L75 200L225 200L150 0Z");
+  });
+  it("Path.transform() should accept 4x4 (2)", async () => {
+    let result = await surface.eval((Skia) => {
+      const path = Skia.Path.MakeFromSVGString("M150 0L75 200L225 200L150 0Z")!;
+      const m = [1, 0, 0, 100, 0, 1, 0, 100, 0, 0, 1, 0, 0, 0, 0, 1];
+      path.transform([m[0], m[1], m[3], m[4], m[5], m[7], m[12], m[13], m[15]]);
+      return path.toSVGString();
+    });
+    expect(result).toEqual("M250 100L175 300L325 300L250 100Z");
+
+    result = await surface.eval((Skia) => {
+      const path = Skia.Path.MakeFromSVGString("M150 0L75 200L225 200L150 0Z")!;
+      path.transform([1, 0, 0, 100, 0, 1, 0, 100, 0, 0, 1, 0, 0, 0, 0, 1]);
+      return path.toSVGString();
+    });
+    expect(result).toEqual("M250 100L175 300L325 300L250 100Z");
+  });
+  it("should correctly transform a point with an identity matrix", () => {
+    const identityMatrix = Matrix4();
+    const point = [100, -100, 200] as const; // Define some test point
+    const result = mapPoint3d(identityMatrix, point);
+    expect(result).toEqual(point);
+  });
+  it("should correctly transform a point with a translation matrix", () => {
+    const translationMatrix = translate(100, 100, 100);
+    const point = [100, -100, 200] as const; // Define some test point
+    const expectedResult = [200, 0, 300] as const;
+    const result = mapPoint3d(translationMatrix, point);
+    expect(result).toEqual(expectedResult);
+  });
+});

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

@@ -0,0 +1,156 @@
+import { checkImage } from "../../../__tests__/setup";
+import type { NativeBufferAddr } from "../../../skia/types";
+import { AlphaType, ColorType } from "../../../skia/types";
+import { setupSkia } from "../../../skia/__tests__/setup";
+import { surface } from "../setup";
+
+const shouldNativeBufferTestRun = () => {
+  // Skip outside iOS and Android
+  if (surface.OS !== "ios" && surface.OS !== "android") {
+    return false;
+  }
+  // Skip test on Fabric (it runs on API Level 21 which doesn't support native buffers)
+  if (surface.arch === "fabric" && surface.OS === "android") {
+    return false;
+  }
+  return true;
+};
+
+const rgbaPixels = new Array(256 * 256 * 4).fill(0);
+rgbaPixels.fill(255);
+let i = 0;
+for (let x = 0; x < 256 * 4; x++) {
+  for (let y = 0; y < 256 * 4; y++) {
+    rgbaPixels[i++] = (x * y) % 255;
+  }
+}
+
+const bgraPixels = new Array(256 * 256 * 4).fill(0);
+bgraPixels.fill(255);
+// Conversion from RGBA to BGRA
+for (let j = 0; j < rgbaPixels.length; j += 4) {
+  const r = rgbaPixels[j];
+  const g = rgbaPixels[j + 1];
+  const b = rgbaPixels[j + 2];
+  const a = rgbaPixels[j + 3];
+
+  // In BGRA, the blue and red channels are swapped
+  bgraPixels[j] = b; // Blue
+  bgraPixels[j + 1] = g; // Green remains the same
+  bgraPixels[j + 2] = r; // Red
+  bgraPixels[j + 3] = a; // Alpha remains the same
+}
+
+describe("Native Buffers", () => {
+  it("On non supported platforms MakeImageFromNativeBuffer() should throw", async () => {
+    const { Skia: Sk } = setupSkia();
+    if (!shouldNativeBufferTestRun()) {
+      return;
+    }
+    const result = await surface.eval((Skia) => {
+      const sur = Skia.Surface.Make(256, 256)!;
+      const canvas = sur.getCanvas();
+      canvas.drawColor(Skia.Color("cyan"));
+      const nativeBuffer = Skia.NativeBuffer.MakeFromImage(
+        sur.makeImageSnapshot()
+      );
+      return (nativeBuffer as NativeBufferAddr).toString();
+    });
+    const pointer = BigInt(result);
+    expect(pointer).not.toBe(BigInt(0));
+    const t = () => {
+      Sk.Image.MakeImageFromNativeBuffer(pointer);
+    };
+    expect(t).toThrow(Error);
+    // Now we need to release the native buffer
+    const success = await surface.eval(
+      (Skia, ctx) => {
+        Skia.NativeBuffer.Release(BigInt(ctx.pointer));
+        return true;
+      },
+      { pointer: pointer.toString() }
+    );
+    expect(success).toBe(true);
+  });
+  it("creates a native buffer from an image", async () => {
+    if (!shouldNativeBufferTestRun()) {
+      return;
+    }
+    const result = await surface.eval((Skia) => {
+      const sur = Skia.Surface.Make(256, 256)!;
+      const canvas = sur.getCanvas();
+      const paint = Skia.Paint();
+      paint.setColor(Skia.Color("cyan"));
+      canvas.drawCircle(128, 128, 128, paint);
+      const nativeBuffer = Skia.NativeBuffer.MakeFromImage(
+        sur.makeImageSnapshot()
+      );
+      const r = (nativeBuffer as NativeBufferAddr).toString();
+      Skia.NativeBuffer.Release(nativeBuffer);
+      return r;
+    });
+    expect(BigInt(result)).not.toBe(BigInt(0));
+  });
+  it("creates an image from a native buffer", async () => {
+    const { Skia: Sk } = setupSkia();
+    // Skip outside iOS and Android
+    if (!shouldNativeBufferTestRun()) {
+      return;
+    }
+    const result = await surface.eval((Skia) => {
+      const sur = Skia.Surface.Make(256, 256)!;
+      const canvas = sur.getCanvas();
+      canvas.drawColor(Skia.Color("cyan"));
+      const nativeBuffer = Skia.NativeBuffer.MakeFromImage(
+        sur.makeImageSnapshot()
+      );
+      const image = Skia.Image.MakeImageFromNativeBuffer(nativeBuffer);
+      Skia.NativeBuffer.Release(nativeBuffer);
+      return Array.from(image.encodeToBytes());
+    });
+    const image = Sk.Image.MakeImageFromEncoded(
+      Sk.Data.fromBytes(new Uint8Array(result))
+    )!;
+    expect(image).not.toBeNull();
+    checkImage(image, "snapshots/cyan-buffer.png");
+  });
+  it("creates an image from native color type", async () => {
+    const { Skia: Sk } = setupSkia();
+    // Skip outside iOS and Android
+    if (!shouldNativeBufferTestRun()) {
+      return;
+    }
+    const result = await surface.eval(
+      (Skia, { alphaType, colorType, ...ctx }) => {
+        const pixels = new Uint8Array(ctx.originalPixels);
+        const data = Skia.Data.fromBytes(pixels);
+        const img = Skia.Image.MakeImage(
+          {
+            width: 256,
+            height: 256,
+            alphaType,
+            colorType,
+          },
+          data,
+          256 * 4
+        )!;
+
+        const nativeBuffer = Skia.NativeBuffer.MakeFromImage(img);
+        const image = Skia.Image.MakeImageFromNativeBuffer(nativeBuffer);
+        Skia.NativeBuffer.Release(nativeBuffer);
+        return Array.from(image.encodeToBytes());
+      },
+      {
+        alphaType: AlphaType.Unpremul,
+        colorType:
+          surface.OS === "android" ? ColorType.RGBA_8888 : ColorType.BGRA_8888,
+        originalPixels: surface.OS === "android" ? rgbaPixels : bgraPixels,
+      }
+    );
+    const image = Sk.Image.MakeImageFromEncoded(
+      Sk.Data.fromBytes(new Uint8Array(result))
+    )!;
+    expect(image).not.toBeNull();
+    checkImage(image, "snapshots/platform-buffer.png", { overwrite: true });
+  });
+});

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

@@ -0,0 +1,109 @@
+import React from "react";
+
+import { checkImage, docPath } from "../../../__tests__/setup";
+import { Circle } from "../../components";
+import { surface, importSkia } from "../setup";
+
+describe("Offscreen Drawings", () => {
+  it("Should use the canvas API to build an image", async () => {
+    const { width, height } = surface;
+    const raw = await surface.eval(
+      (Skia, ctx) => {
+        const r = ctx.width / 2;
+        const offscreen = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
+        if (!offscreen) {
+          throw new Error("Could not create offscreen surface");
+        }
+        const canvas = offscreen.getCanvas();
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color("lightblue"));
+        canvas.drawCircle(r, r, r, paint);
+        offscreen.flush();
+        return offscreen.makeImageSnapshot().encodeToBase64();
+      },
+      { width, height }
+    );
+    const { Skia } = importSkia();
+    const data = Skia.Data.fromBase64(raw);
+    const image = Skia.Image.MakeImageFromEncoded(data)!;
+    expect(data).toBeDefined();
+    checkImage(image, docPath("offscreen/circle.png"));
+  });
+  it("Should transfer one surface image to another", async () => {
+    const { width, height } = surface;
+    const raw = await surface.eval(
+      (Skia, ctx) => {
+        const r = ctx.width / 2;
+        const backSurface = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
+        const frontSurface = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
+        if (!backSurface || !frontSurface) {
+          throw new Error("Could not create offscreen surface");
+        }
+        const canvas = backSurface.getCanvas();
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color("lightblue"));
+        canvas.drawCircle(r, r, r, paint);
+        backSurface.flush();
+        const image = backSurface.makeImageSnapshot();
+        frontSurface.getCanvas().drawImage(image, 0, 0);
+        return frontSurface.makeImageSnapshot().encodeToBase64();
+      },
+      { width, height }
+    );
+    const { Skia } = importSkia();
+    const data = Skia.Data.fromBase64(raw);
+    const image = Skia.Image.MakeImageFromEncoded(data)!;
+    expect(data).toBeDefined();
+    checkImage(image, docPath("offscreen/circle.png"));
+  });
+
+  it("Should render to multiple offscreen surfaces at once (1)", async () => {
+    const { width, height } = surface;
+    const raw = await surface.eval(
+      (Skia, ctx) => {
+        const r = ctx.width / 4;
+        const backSurface1 = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
+        const backSurface2 = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
+        const frontSurface = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
+        if (!backSurface1 || !backSurface2 || !frontSurface) {
+          throw new Error("Could not create offscreen surface");
+        }
+        // Paint to first surface
+        const canvas1 = backSurface1.getCanvas();
+        const paint1 = Skia.Paint();
+        paint1.setColor(Skia.Color("lightblue"));
+        canvas1.drawCircle(r, r, r, paint1);
+        backSurface1.flush();
+
+        // Paint to second surface
+        const canvas2 = backSurface2.getCanvas();
+        const paint2 = Skia.Paint();
+        paint2.setColor(Skia.Color("magenta"));
+        canvas2.drawCircle(r, r, r / 2, paint2);
+        backSurface2.flush();
+
+        const image1 = backSurface1.makeImageSnapshot();
+        const image2 = backSurface2.makeImageSnapshot();
+        frontSurface.getCanvas().drawImage(image1, 0, 0);
+        frontSurface.getCanvas().drawImage(image2, ctx.width / 2, 0);
+        return frontSurface.makeImageSnapshot().encodeToBase64();
+      },
+      { width, height }
+    );
+    const { Skia } = importSkia();
+    const data = Skia.Data.fromBase64(raw);
+    const image = Skia.Image.MakeImageFromEncoded(data)!;
+    expect(data).toBeDefined();
+    checkImage(image, docPath("offscreen/multiple_circles.png"));
+  });
+  it("Should use the React API to build an image", async () => {
+    const { width, height } = surface;
+    const { drawAsImage } = importSkia();
+    const r = width / 2;
+    const image = drawAsImage(
+      <Circle r={r} cx={r} cy={r} color="lightblue" />,
+      { width, height }
+    );
+    checkImage(image, docPath("offscreen/circle.png"));
+  });
+});