@shopify/react-native-skia 2.3.0 → 2.3.5

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

@@ -1,85 +0,0 @@
-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

@@ -1,367 +0,0 @@
-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,
-  invert4,
-  scale,
-  rotateZ,
-} 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 }
-    );
-    expect(result).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);
-  });
-
-  const almostEqual = (
-    a: number[] | Matrix4 | readonly [number, number, number],
-    b: number[] | Matrix4 | readonly [number, number, number],
-    epsilon = 1e-10
-  ) => {
-    expect(a.length).toBe(b.length);
-    a.forEach((val, idx) => {
-      expect(Math.abs(val - b[idx])).toBeLessThan(epsilon);
-    });
-  };
-
-  const matrixEqual = (a: number[] | Matrix4, b: number[] | Matrix4) => {
-    expect(a.length).toBe(b.length);
-    a.forEach((val, idx) => {
-      // Object.is will distinguish -0 from 0, so we use === instead
-      const equal = val === b[idx] || (val === 0 && b[idx] === 0);
-      expect(equal).toBe(true);
-    });
-  };
-
-  it("should return the identity matrix when inverting the identity matrix", () => {
-    const identityMatrix = Matrix4();
-    const result = invert4(identityMatrix);
-    matrixEqual(result, identityMatrix);
-  });
-
-  it("should correctly invert a translation matrix", () => {
-    const translationMatrix = translate(100, -50, 25);
-    const inverse = invert4(translationMatrix);
-    // Inverse of translation(x,y,z) should be translation(-x,-y,-z)
-    const expectedInverse = translate(-100, 50, -25);
-    matrixEqual(inverse, expectedInverse);
-  });
-
-  it("should correctly invert a scale matrix", () => {
-    const scaleMatrix = scale(2, 4, 8);
-    const inverse = invert4(scaleMatrix);
-    // Inverse of scale(x,y,z) should be scale(1/x,1/y,1/z)
-    const expectedInverse = scale(1 / 2, 1 / 4, 1 / 8);
-    matrixEqual(inverse, expectedInverse);
-  });
-
-  it("should return identity matrix for non-invertible matrix", () => {
-    // A matrix of all zeros is not invertible
-    const nonInvertibleMatrix = [
-      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
-    ] as Matrix4;
-    const result = invert4(nonInvertibleMatrix);
-    matrixEqual(result, Matrix4());
-  });
-
-  it("multiplying a matrix by its inverse should give the identity matrix", () => {
-    // Create a complex transformation matrix
-    const complexMatrix = processTransform3d([
-      { scale: 2 },
-      { rotateZ: Math.PI / 4 },
-      { translate: [100, 100, 50] as const },
-    ]);
-
-    const inverse = invert4(complexMatrix);
-    const result = multiply4(complexMatrix, inverse);
-
-    // Due to floating point arithmetic, we use almostEqual instead of exact equality
-    almostEqual(result, Matrix4());
-  });
-
-  it("should correctly transform points when using inverse matrix", () => {
-    const transformMatrix = translate(100, 100, 100);
-    const inverse = invert4(transformMatrix);
-
-    const point = [200, 0, 300] as const;
-    const transformedPoint = mapPoint3d(inverse, point);
-    const expectedPoint = [100, -100, 200] as const;
-
-    // Using almostEqual for floating point comparison
-    almostEqual(transformedPoint, expectedPoint);
-  });
-
-  it("should maintain inverse relationship for rotations", () => {
-    const rotationMatrix = rotateZ(Math.PI / 3); // 60 degrees rotation
-    const inverse = invert4(rotationMatrix);
-    const point = [100, 100, 0] as const;
-
-    // Transform point forward then backward should give original point
-    const transformed = mapPoint3d(rotationMatrix, point);
-    const backTransformed = mapPoint3d(inverse, transformed);
-
-    almostEqual(backTransformed, point);
-  });
-});

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

@@ -1,158 +0,0 @@
-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 });
-  });
-});