@shopify/react-native-skia 2.2.21 → 2.3.4

package/src/skia/__tests__/Drawings.spec.ts

@@ -1,119 +0,0 @@
-import { processResult } from "../../__tests__/setup";
-import { BlendMode, PaintStyle, StrokeCap } from "../types";
-
-import { setupSkia } from "./setup";
-
-describe("Drawings", () => {
-  it("Lightblue rectangle", () => {
-    const { surface, canvas, Skia } = setupSkia();
-    const paint = Skia.Paint();
-    paint.setColor(Skia.Color("lightblue"));
-    const rct = Skia.XYWHRect(64, 64, 128, 128);
-    canvas.drawRect(rct, paint);
-    processResult(surface, "snapshots/drawings/small-lightblue-rect.png");
-  });
-
-  it("Multiply blend mode", () => {
-    const { surface, canvas, width, height, Skia } = setupSkia();
-    const r = 0.37 * width;
-
-    const paint = Skia.Paint();
-    paint.setAntiAlias(true);
-    paint.setBlendMode(BlendMode.Multiply);
-
-    const cyan = paint.copy();
-    cyan.setColor(Skia.Color("cyan"));
-    canvas.drawCircle(r, r, r, cyan);
-    // Magenta Circle
-    const magenta = paint.copy();
-    magenta.setColor(Skia.Color("magenta"));
-    canvas.drawCircle(width - r, r, r, magenta);
-    // Yellow Circle
-    const yellow = paint.copy();
-    yellow.setColor(Skia.Color("yellow"));
-    canvas.drawCircle(width / 2, height - r, r, yellow);
-
-    processResult(surface, "snapshots/drawings/blend-modes.png");
-  });
-
-  it("Cyan Circle", () => {
-    const { surface, canvas, Skia } = setupSkia();
-
-    const r = 128;
-
-    const paint = Skia.Paint();
-    paint.setAntiAlias(true);
-
-    paint.setColor(Skia.Color("cyan"));
-    canvas.drawCircle(r, r, r, paint);
-
-    processResult(surface, "snapshots/drawings/cyan-circle.png");
-  });
-
-  it("Rectangle Stroke", () => {
-    const { surface, canvas, Skia } = setupSkia();
-
-    const paint = Skia.Paint();
-    paint.setAntiAlias(true);
-
-    paint.setColor(Skia.Color("cyan"));
-    paint.setStyle(PaintStyle.Stroke);
-    paint.setStrokeWidth(10);
-    const rect = Skia.XYWHRect(64, 64, 128, 128);
-    canvas.drawRect(rect, paint);
-
-    processResult(surface, "snapshots/drawings/stroke.png");
-  });
-
-  it("Cyan line with rounded stroke cap", () => {
-    const { surface, canvas, width, height, Skia } = setupSkia();
-
-    const paint = Skia.Paint();
-    paint.setAntiAlias(true);
-
-    paint.setColor(Skia.Color("cyan"));
-    paint.setStyle(PaintStyle.Stroke);
-    paint.setStrokeWidth(10);
-    paint.setStrokeCap(StrokeCap.Round);
-    canvas.drawLine(32, 32, width - 32, height - 32, paint);
-
-    processResult(surface, "snapshots/drawings/line.png");
-  });
-
-  it("Purple", () => {
-    const { surface, canvas, Skia } = setupSkia();
-    canvas.drawColor(Skia.Color("purple"));
-    processResult(surface, "snapshots/drawings/purple.png");
-  });
-
-  it("Should accept object implementation of SkRect", () => {
-    const { surface, canvas, Skia } = setupSkia();
-    const paint = Skia.Paint();
-    paint.setColor(Skia.Color("lightblue"));
-    canvas.drawRect({ x: 64, y: 64, width: 128, height: 128 }, paint);
-    processResult(surface, "snapshots/drawings/small-lightblue-rect.png");
-  });
-
-  it("Should draw an arc", () => {
-    const { surface, canvas, Skia } = setupSkia();
-    const paint = Skia.Paint();
-    paint.setColor(Skia.Color("lightblue"));
-    canvas.drawArc(
-      { x: 64, y: 64, width: 128, height: 128 },
-      0,
-      180,
-      true,
-      paint
-    );
-    processResult(surface, "snapshots/drawings/arc.png");
-  });
-
-  it("Transparent Circle", () => {
-    const { surface, canvas, Skia } = setupSkia(100, 100);
-    const paint = Skia.Paint();
-    const rct = Skia.XYWHRect(0, 0, 100, 100);
-    paint.setColor(Float32Array.of(1, 0, 0, 0));
-    canvas.drawRect(rct, paint);
-    processResult(surface, "snapshots/drawings/transparent.png");
-  });
-});

package/src/skia/__tests__/Enums.spec.ts

@@ -1,136 +0,0 @@
-import type { EmbindEnum } from "canvaskit-wasm";
-
-import {
-  AlphaType,
-  BlurStyle,
-  ClipOp,
-  ColorType,
-  FillType,
-  FilterMode,
-  FontEdging,
-  FontHinting,
-  FontSlant,
-  FontWeight,
-  FontWidth,
-  ImageFormat,
-  MipmapMode,
-  PaintStyle,
-  PathOp,
-  PathVerb,
-  PointMode,
-  SaveLayerFlag,
-  StrokeCap,
-  StrokeJoin,
-  TileMode,
-  VertexMode,
-} from "../types";
-import { Path1DEffectStyle } from "../types/PathEffect";
-import { BlendMode } from "../types/Paint/BlendMode";
-import { mapKeys } from "../../renderer/typeddash";
-
-import { setupSkia } from "./setup";
-
-const checkEnum = <T>(skiaEnum: T, canvasKitEnum: EmbindEnum) => {
-  mapKeys(canvasKitEnum.values).forEach((key) => {
-    const namedKey = skiaEnum[key as keyof T] as keyof T;
-    const expected = skiaEnum[namedKey];
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    const selectedEnum = canvasKitEnum[namedKey];
-    if (namedKey === undefined || selectedEnum === undefined) {
-      console.log({ skiaEnum, canvasKitEnum, key, namedKey, expected });
-    }
-    expect(selectedEnum).toBeDefined();
-    expect(expected).toBe(selectedEnum.value);
-  });
-};
-
-describe("Enums", () => {
-  it("Should match Paint enums values with CanvasKit", () => {
-    const { CanvasKit } = setupSkia();
-    checkEnum(PaintStyle, CanvasKit.PaintStyle);
-    checkEnum(StrokeCap, CanvasKit.StrokeCap);
-    checkEnum(StrokeJoin, CanvasKit.StrokeJoin);
-    checkEnum(BlendMode, CanvasKit.BlendMode);
-  });
-  it("Should match TileMode enums values with CanvasKit", () => {
-    const { CanvasKit } = setupSkia();
-    checkEnum(TileMode, CanvasKit.TileMode);
-  });
-  it("Should match Font enums values with CanvasKit", () => {
-    const { CanvasKit } = setupSkia();
-    checkEnum(FontHinting, CanvasKit.FontHinting);
-    checkEnum(FontEdging, CanvasKit.FontEdging);
-    checkEnum(FontSlant, CanvasKit.FontSlant);
-    checkEnum(FontWidth, CanvasKit.FontWidth);
-    checkEnum(FontWeight, CanvasKit.FontWeight);
-  });
-  it("Should match PointMode enums values with CanvasKit", () => {
-    const { CanvasKit } = setupSkia();
-    checkEnum(PointMode, CanvasKit.PointMode);
-  });
-  it("Should match Image enums values with CanvasKit", () => {
-    const { CanvasKit } = setupSkia();
-    checkEnum(ColorType, CanvasKit.ColorType);
-    checkEnum(AlphaType, CanvasKit.AlphaType);
-    checkEnum(ImageFormat, CanvasKit.ImageFormat);
-    checkEnum(MipmapMode, CanvasKit.MipmapMode);
-    checkEnum(FilterMode, CanvasKit.FilterMode);
-  });
-  it("Should match Path enums values with CanvasKit", () => {
-    const { CanvasKit } = setupSkia();
-    checkEnum(PathOp, CanvasKit.PathOp);
-    checkEnum(FillType, CanvasKit.FillType);
-    checkEnum(Path1DEffectStyle, CanvasKit.Path1DEffect);
-    expect(PathVerb.Close).toBe(CanvasKit.CLOSE_VERB);
-    expect(PathVerb.Conic).toBe(CanvasKit.CONIC_VERB);
-    expect(PathVerb.Cubic).toBe(CanvasKit.CUBIC_VERB);
-    expect(PathVerb.Line).toBe(CanvasKit.LINE_VERB);
-    expect(PathVerb.Move).toBe(CanvasKit.MOVE_VERB);
-    expect(PathVerb.Quad).toBe(CanvasKit.QUAD_VERB);
-  });
-  it("Should match BlurStyle enums values with CanvasKit", () => {
-    const { CanvasKit } = setupSkia();
-    checkEnum(BlurStyle, CanvasKit.BlurStyle);
-  });
-  it("Should match VertexMode enums values with CanvasKit", () => {
-    const { CanvasKit } = setupSkia();
-    expect(VertexMode.TriangleFan).toBe(CanvasKit.VertexMode.TriangleFan.value);
-    expect(VertexMode.TriangleStrip).toBe(
-      CanvasKit.VertexMode.TrianglesStrip.value
-    );
-    expect(VertexMode.Triangles).toBe(CanvasKit.VertexMode.Triangles.value);
-  });
-  it("Should match Canvas enums values with CanvasKit", () => {
-    const { CanvasKit } = setupSkia();
-    expect(SaveLayerFlag.SaveLayerF16ColorType).toBe(
-      CanvasKit.SaveLayerF16ColorType
-    );
-    expect(SaveLayerFlag.SaveLayerInitWithPrevious).toBe(
-      CanvasKit.SaveLayerInitWithPrevious
-    );
-    checkEnum(ClipOp, CanvasKit.ClipOp);
-  });
-  it("Should match color types with CanvasKit", () => {
-    const { CanvasKit } = setupSkia();
-    //expect(CanvasKit.ColorType.Unknown.value).toBe(ColorType.Unknown);
-    expect(CanvasKit.ColorType.Alpha_8.value).toBe(ColorType.Alpha_8);
-    expect(CanvasKit.ColorType.RGB_565.value).toBe(ColorType.RGB_565);
-    //expect(CanvasKit.ColorType.ARGB_4444.value).toBe(ColorType.ARGB_4444);
-    expect(CanvasKit.ColorType.RGBA_8888.value).toBe(ColorType.RGBA_8888);
-    //expect(CanvasKit.ColorType.RGB_888x.value).toBe(ColorType.RGB_888x);
-    expect(CanvasKit.ColorType.BGRA_8888.value).toBe(ColorType.BGRA_8888);
-    expect(CanvasKit.ColorType.RGBA_1010102.value).toBe(ColorType.RGBA_1010102);
-    //expect(CanvasKit.ColorType.BGRA_1010102.value).toBe(ColorType.BGRA_1010102);
-    expect(CanvasKit.ColorType.RGB_101010x.value).toBe(ColorType.RGB_101010x);
-    //expect(CanvasKit.ColorType.BGR_101010x.value).toBe(ColorType.BGR_101010x);
-    //expect(CanvasKit.ColorType.BGR_101010x_XR.value).toBe(ColorType.BGR_101010x_XR);
-    //expect(CanvasKit.ColorType.BGRA_10101010_XR.value).toBe(ColorType.BGRA_10101010_XR);
-    //expect(CanvasKit.ColorType.RGBA_10x6.value).toBe(ColorType.RGBA_10x6);
-    expect(CanvasKit.ColorType.Gray_8.value).toBe(ColorType.Gray_8);
-    //expect(CanvasKit.ColorType.RGBA_F16Norm.value).toBe(ColorType.RGBA_F16Norm);
-    expect(CanvasKit.ColorType.RGBA_F16.value).toBe(ColorType.RGBA_F16);
-    //expect(CanvasKit.ColorType.RGB_F16F16F16x.value).toBe(ColorType.RGB_F16F16F16x);
-    expect(CanvasKit.ColorType.RGBA_F32.value).toBe(ColorType.RGBA_F32);
-  });
-});

package/src/skia/__tests__/Geometry.spec.ts

@@ -1,39 +0,0 @@
-import { importSkia } from "../../renderer/__tests__/setup";
-
-describe("Geometry", () => {
-  it("should calculate the bounding box the union of multiple rectangles", () => {
-    const { bounds, rect } = importSkia();
-
-    const r1 = rect(-10, -10, 30, 30);
-    const r2 = rect(30, 30, 100, 20);
-    const result = bounds([r1, r2]);
-    expect(result.x).toBe(-10);
-    expect(result.y).toBe(-10);
-    expect(result.width).toBe(140);
-    expect(result.height).toBe(60);
-  });
-
-  test("parse #hex without opacity", () => {
-    const { Skia } = importSkia();
-
-    const color = Skia.Color("#808080");
-    expect(color[0]).toBeCloseTo(0.5);
-    expect(color[1]).toBeCloseTo(0.5);
-    expect(color[2]).toBeCloseTo(0.5);
-  });
-  test("parse #hex with opacity", () => {
-    const { Skia } = importSkia();
-
-    let color = Skia.Color("#80808080");
-    expect(color[0]).toBeCloseTo(0.5);
-    expect(color[1]).toBeCloseTo(0.5);
-    expect(color[2]).toBeCloseTo(0.5);
-    expect(color[3]).toBeCloseTo(0.5);
-
-    color = Skia.Color("#ff800080");
-    expect(color[0]).toBeCloseTo(1);
-    expect(color[1]).toBeCloseTo(0.5);
-    expect(color[2]).toBeCloseTo(0);
-    expect(color[3]).toBeCloseTo(0.5);
-  });
-});

package/src/skia/__tests__/ImageFilter.spec.ts

@@ -1,19 +0,0 @@
-import { processResult } from "../../__tests__/setup";
-import { TileMode } from "../types";
-
-import { setupSkia } from "./setup";
-
-describe("ImageFilter", () => {
-  it("Blured lightblue circle", () => {
-    const { surface, canvas, width, Skia } = setupSkia();
-    const r = width / 2;
-    const paint = Skia.Paint();
-    paint.setAntiAlias(true);
-    paint.setColor(Skia.Color("lightblue"));
-    paint.setImageFilter(
-      Skia.ImageFilter.MakeBlur(40, 40, TileMode.Clamp, null)
-    );
-    canvas.drawCircle(r, r, r, paint);
-    processResult(surface, "snapshots/image-filter/blur.png");
-  });
-});

package/src/skia/__tests__/Mock.spec.ts

@@ -1,7 +0,0 @@
-describe("Test the mock we provide to users", () => {
-  it("Should load the mock successfully", () => {
-    expect(() => {
-      require("../../mock");
-    }).not.toThrow();
-  });
-});

package/src/skia/__tests__/Paint.spec.ts

@@ -1,25 +0,0 @@
-import { processResult } from "../../__tests__/setup";
-
-import { setupSkia } from "./setup";
-
-describe("Paint", () => {
-  it("should have anti-aliasing is true by default but the value be preserved when using copy()", () => {
-    const { surface, canvas, Skia, width } = setupSkia();
-    const size = width;
-    const p1 = Skia.Paint();
-    const rct = Skia.RRectXY(
-      Skia.XYWHRect(0, 0, size, size),
-      size / 4,
-      size / 4
-    );
-    canvas.drawRRect(rct, p1);
-    processResult(surface, "snapshots/drawings/rrect-aa.png");
-    const p2 = Skia.Paint();
-    p2.setAntiAlias(false);
-    canvas.drawRRect(rct, p2);
-    processResult(surface, "snapshots/drawings/rrect-no-aa.png");
-    const p3 = p2.copy();
-    canvas.drawRRect(rct, p3);
-    processResult(surface, "snapshots/drawings/rrect-no-aa.png");
-  });
-});