@shopify/react-native-skia 2.2.21 → 2.3.4

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

@@ -1,227 +0,0 @@
-import React from "react";
-
-import { images, surface, width as wWidth, height as wHeight } from "../setup";
-import {
-  BlendColor,
-  Circle,
-  ColorMatrix,
-  Group,
-  Image,
-  Lerp,
-  LinearToSRGBGamma,
-  SRGBToLinearGamma,
-} from "../../components";
-import { docPath, checkImage, processResult } from "../../../__tests__/setup";
-import { setupSkia } from "../../../skia/__tests__/setup";
-import { fitRects } from "../../../dom/nodes";
-import { BlendMode } from "../../../skia/types";
-
-const blackAndWhite = [
-  0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
-];
-const purple = [
-  1, -0.2, 0, 0, 0, 0, 1, 0, -0.1, 0, 0, 1.2, 1, 0.1, 0, 0, 0, 1.7, 1, 0,
-];
-
-const identity = [
-  1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0,
-  0.0, 0.0, 0.0, 1.0, 0.0,
-];
-
-describe("Color Filters", () => {
-  it("should apply a color matrix to an image", async () => {
-    const { oslo } = images;
-    const { width, height } = surface;
-    const img = await surface.draw(
-      <Image x={0} y={0} width={width} height={height} image={oslo} fit="cover">
-        <ColorMatrix
-          matrix={[
-            -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69,
-            -0.703, 0, 0, 0, 0, 0, 1, 0,
-          ]}
-        />
-      </Image>
-    );
-    checkImage(img, docPath("color-filters/color-matrix.png"));
-  });
-  it("should blend a color", async () => {
-    const { width } = surface;
-    const r = width / 2;
-    const img = await surface.draw(
-      <>
-        <Group>
-          <BlendColor color="cyan" mode="multiply" />
-          <Circle cx={r} cy={r} r={r} color="yellow" />
-          <Circle cx={2 * r} cy={r} r={r} color="magenta" />
-        </Group>
-      </>
-    );
-    checkImage(img, docPath("color-filters/color-blend.png"));
-  });
-  it("should build the reference result for should use composition", async () => {
-    const { surface: ckSurface, Skia, canvas } = setupSkia(wWidth, wHeight);
-    const paint = Skia.Paint();
-    const outer = Skia.ColorFilter.MakeSRGBToLinearGamma();
-    const inner = Skia.ColorFilter.MakeBlend(
-      Skia.Color("lightblue"),
-      BlendMode.SrcIn
-    );
-    paint.setColorFilter(Skia.ColorFilter.MakeCompose(outer, inner));
-    const r = (surface.width * 3) / 2;
-    canvas.drawCircle(r, r, r, paint);
-    canvas.drawCircle(r * 2, r, r, paint);
-    processResult(ckSurface, docPath("color-filters/composition.png"));
-  });
-  it("should use composition", async () => {
-    const { width } = surface;
-    const r = width / 2;
-    const img = await surface.draw(
-      <Group>
-        <SRGBToLinearGamma>
-          <BlendColor color="lightblue" mode="srcIn" />
-        </SRGBToLinearGamma>
-        <Circle cx={r} cy={r} r={r} />
-        <Circle cx={2 * r} cy={r} r={r} color="red" />
-      </Group>
-    );
-    checkImage(img, docPath("color-filters/composition.png"));
-  });
-  it("should build the reference result for simple-lerp.png", async () => {
-    const { oslo } = images;
-    const { surface: ckSurface, Skia, canvas } = setupSkia(wWidth, wHeight);
-    const paint = Skia.Paint();
-    const cf2 = Skia.ColorFilter.MakeLinearToSRGBGamma();
-    const cf1 = Skia.ColorFilter.MakeLerp(
-      0.5,
-      Skia.ColorFilter.MakeMatrix(identity),
-      Skia.ColorFilter.MakeMatrix(blackAndWhite)
-    );
-    paint.setColorFilter(Skia.ColorFilter.MakeCompose(cf2, cf1));
-    const rect = Skia.XYWHRect(0, 0, wWidth, wHeight);
-    const { src, dst } = fitRects(
-      "cover",
-      {
-        x: 0,
-        y: 0,
-        width: oslo.width(),
-        height: oslo.height(),
-      },
-      rect
-    );
-    canvas.drawImageRect(oslo, src, dst, paint);
-    processResult(ckSurface, docPath("color-filters/simple-lerp.png"));
-  });
-  it("should use basic linear interpolation", async () => {
-    const { oslo } = images;
-    const { width, height } = surface;
-    let img = await surface.draw(
-      <>
-        <Image
-          x={0}
-          y={0}
-          width={width}
-          height={height}
-          image={oslo}
-          fit="cover"
-        >
-          <LinearToSRGBGamma>
-            <Lerp t={0.5}>
-              <ColorMatrix matrix={identity} />
-              <ColorMatrix matrix={blackAndWhite} />
-            </Lerp>
-          </LinearToSRGBGamma>
-        </Image>
-      </>
-    );
-    checkImage(img, docPath("color-filters/simple-lerp.png"));
-    img = await surface.draw(
-      <>
-        <Image
-          x={0}
-          y={0}
-          width={width}
-          height={height}
-          image={oslo}
-          fit="cover"
-        >
-          <LinearToSRGBGamma>
-            <Lerp t={0.5}>
-              <ColorMatrix matrix={blackAndWhite} />
-              <ColorMatrix matrix={identity} />
-            </Lerp>
-          </LinearToSRGBGamma>
-        </Image>
-      </>
-    );
-    checkImage(img, docPath("color-filters/simple-lerp.png"));
-    img = await surface.draw(
-      <>
-        <Image
-          x={0}
-          y={0}
-          width={width}
-          height={height}
-          image={oslo}
-          fit="cover"
-        >
-          <LinearToSRGBGamma>
-            <Lerp t={0}>
-              <ColorMatrix matrix={blackAndWhite} />
-              <ColorMatrix matrix={identity} />
-            </Lerp>
-          </LinearToSRGBGamma>
-        </Image>
-      </>
-    );
-    checkImage(img, docPath("color-filters/black-and-white.png"));
-  });
-  it("should build the reference result for lerp.png", async () => {
-    const { oslo } = images;
-    const { surface: ckSurface, Skia, canvas } = setupSkia(wWidth, wHeight);
-    const paint = Skia.Paint();
-    const cf2 = Skia.ColorFilter.MakeLinearToSRGBGamma();
-    const cf1 = Skia.ColorFilter.MakeLerp(
-      0.5,
-      Skia.ColorFilter.MakeMatrix(purple),
-      Skia.ColorFilter.MakeMatrix(blackAndWhite)
-    );
-    paint.setColorFilter(Skia.ColorFilter.MakeCompose(cf2, cf1));
-    const rect = Skia.XYWHRect(0, 0, wWidth, wHeight);
-    const { src, dst } = fitRects(
-      "cover",
-      {
-        x: 0,
-        y: 0,
-        width: oslo.width(),
-        height: oslo.height(),
-      },
-      rect
-    );
-    canvas.drawImageRect(oslo, src, dst, paint);
-    processResult(ckSurface, docPath("color-filters/lerp.png"));
-  });
-  it("should use linear interpolation between two color matrices", async () => {
-    const { oslo } = images;
-    const { width, height } = surface;
-    const img = await surface.draw(
-      <>
-        <Image
-          x={0}
-          y={0}
-          width={width}
-          height={height}
-          image={oslo}
-          fit="cover"
-        >
-          <LinearToSRGBGamma>
-            <Lerp t={0.5}>
-              <ColorMatrix matrix={purple} />
-              <ColorMatrix matrix={blackAndWhite} />
-            </Lerp>
-          </LinearToSRGBGamma>
-        </Image>
-      </>
-    );
-    checkImage(img, docPath("color-filters/lerp.png"));
-  });
-});

package/src/renderer/__tests__/e2e/Composition/ColorFilterComposition.spec.tsx

@@ -1,102 +0,0 @@
-import React from "react";
-
-import {
-  images,
-  surface,
-  width as wWidth,
-  height as wHeight,
-} from "../../setup";
-import {
-  BlendColor,
-  Circle,
-  ColorMatrix,
-  Group,
-  Image,
-  Lerp,
-  LinearToSRGBGamma,
-  SRGBToLinearGamma,
-} from "../../../components";
-import {
-  checkImage,
-  docPath,
-  processResult,
-} from "../../../../__tests__/setup";
-import { setupSkia } from "../../../../skia/__tests__/setup";
-import { fitRects } from "../../../../dom/nodes";
-
-const matrix = [
-  -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69, -0.703, 0,
-  0, 0, 0, 0, 1, 0,
-];
-const blackAndWhite = [
-  0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
-];
-const purple = [
-  1, -0.2, 0, 0, 0, 0, 1, 0, -0.1, 0, 0, 1.2, 1, 0.1, 0, 0, 0, 1.7, 1, 0,
-];
-const t = 0.5;
-
-describe("Color Filter Composition", () => {
-  it("should build a reference result", async () => {
-    const { oslo } = images;
-    const { surface: ckSurface, Skia, canvas } = setupSkia(wWidth, wHeight);
-    const paint = Skia.Paint();
-    const cf1 = Skia.ColorFilter.MakeMatrix(matrix);
-    const cf2 = Skia.ColorFilter.MakeLinearToSRGBGamma();
-    const cf3 = Skia.ColorFilter.MakeLerp(
-      t,
-      Skia.ColorFilter.MakeMatrix(purple),
-      Skia.ColorFilter.MakeMatrix(blackAndWhite)
-    );
-    paint.setColorFilter(
-      Skia.ColorFilter.MakeCompose(cf1, Skia.ColorFilter.MakeCompose(cf2, cf3))
-    );
-    const rect = Skia.XYWHRect(0, 0, wWidth, wHeight);
-    const { src, dst } = fitRects(
-      "cover",
-      {
-        x: 0,
-        y: 0,
-        width: oslo.width(),
-        height: oslo.height(),
-      },
-      rect
-    );
-    canvas.drawImageRect(oslo, src, dst, paint);
-    processResult(
-      ckSurface,
-      "snapshots/color-filter/color-filter-composition.png"
-    );
-  });
-  it("should apply a color matrix to an image", async () => {
-    const { oslo } = images;
-    const { width, height } = surface;
-
-    const image = await surface.draw(
-      <Image x={0} y={0} width={width} height={height} image={oslo} fit="cover">
-        <ColorMatrix matrix={matrix} />
-        <LinearToSRGBGamma>
-          <Lerp t={t}>
-            <ColorMatrix matrix={purple} />
-            <ColorMatrix matrix={blackAndWhite} />
-          </Lerp>
-        </LinearToSRGBGamma>
-      </Image>
-    );
-    checkImage(image, "snapshots/color-filter/color-filter-composition.png");
-  });
-  it("should use composition", async () => {
-    const { width } = surface;
-    const r = width / 2;
-    const img = await surface.draw(
-      <Group>
-        <SRGBToLinearGamma>
-          <BlendColor color="lightblue" mode="srcIn" />
-        </SRGBToLinearGamma>
-        <Circle cx={r} cy={r} r={r} />
-        <Circle cx={2 * r} cy={r} r={r} color="red" />
-      </Group>
-    );
-    checkImage(img, docPath("color-filters/composition.png"));
-  });
-});

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

@@ -1,74 +0,0 @@
-import React from "react";
-
-import { surface } from "../setup";
-import { Fill, Patch } from "../../components";
-import * as SkiaRenderer from "../../index";
-import { checkImage } from "../../../__tests__/setup";
-
-describe("CoonsPatch", () => {
-  it("Renderer", () => {
-    expect(SkiaRenderer).toBeDefined();
-  });
-  it("Simple Coons Patch", async () => {
-    const vec = (x: number, y: number) => ({ x, y });
-    const colors = ["#61dafb", "#fb61da", "#61fbcf", "#dafb61"];
-    const { width } = surface;
-    const C = width / 4;
-    const topLeft = { pos: vec(0, 0), c1: vec(0, C), c2: vec(C, 0) };
-    const topRight = {
-      pos: vec(width, 0),
-      c1: vec(width, C),
-      c2: vec(width + C, 0),
-    };
-    const bottomRight = {
-      pos: vec(width, width),
-      c1: vec(width, width - 2 * C),
-      c2: vec(width - 2 * C, width),
-    };
-    const bottomLeft = {
-      pos: vec(0, width),
-      c1: vec(0, width - 2 * C),
-      c2: vec(-2 * C, width),
-    };
-    const img = await surface.draw(
-      <Patch
-        colors={colors}
-        patch={[topLeft, topRight, bottomRight, bottomLeft]}
-      />
-    );
-    checkImage(img, "snapshots/coons-patch/simple.png");
-  });
-  it("Coons Patch with opacity", async () => {
-    const vec = (x: number, y: number) => ({ x, y });
-    const colors = ["#61dafb", "#fb61da", "#61fbcf", "#dafb61"];
-    const { width } = surface;
-    const C = width / 4;
-    const topLeft = { pos: vec(0, 0), c1: vec(0, C), c2: vec(C, 0) };
-    const topRight = {
-      pos: vec(width, 0),
-      c1: vec(width, C),
-      c2: vec(width + C, 0),
-    };
-    const bottomRight = {
-      pos: vec(width, width),
-      c1: vec(width, width - 2 * C),
-      c2: vec(width - 2 * C, width),
-    };
-    const bottomLeft = {
-      pos: vec(0, width),
-      c1: vec(0, width - 2 * C),
-      c2: vec(-2 * C, width),
-    };
-    const img = await surface.draw(
-      <>
-        <Fill color="white" />
-        <Patch
-          colors={colors}
-          patch={[topLeft, topRight, bottomRight, bottomLeft]}
-          opacity={0.5}
-        />
-      </>
-    );
-    checkImage(img, "snapshots/coons-patch/patch-with-opacity.png");
-  });
-});

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

@@ -1,79 +0,0 @@
-import { importSkia, surface } from "../setup";
-
-describe("Data Encoding", () => {
-  it("encodeToBytes() from CPU image", async () => {
-    const result = await surface.eval((Skia) => {
-      const data = Skia.Data.fromBase64(
-        "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
-      );
-      const img = Skia.Image.MakeImageFromEncoded(data);
-      if (!img) {
-        return [];
-      }
-      return Array.from(img.encodeToBytes());
-    });
-    const { Skia } = importSkia();
-    const data = Skia.Data.fromBase64(
-      "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
-    );
-    const img = Skia.Image.MakeImageFromEncoded(data)!;
-    expect(img).toBeTruthy();
-    expect(result).toEqual(Array.from(img.encodeToBytes()));
-  });
-  it("encodeToBase64() from CPU image", async () => {
-    const result = await surface.eval((Skia) => {
-      const data = Skia.Data.fromBase64(
-        "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
-      );
-      const img = Skia.Image.MakeImageFromEncoded(data);
-      if (!img) {
-        return "";
-      }
-      return img.encodeToBase64();
-    });
-    const { Skia } = importSkia();
-
-    const data = Skia.Data.fromBase64(
-      "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
-    );
-    const img = Skia.Image.MakeImageFromEncoded(data)!;
-    expect(img).toBeTruthy();
-    expect(result).toEqual(img.encodeToBase64());
-  });
-  it("encodeToBytes() from GPU image", async () => {
-    const result = await surface.eval((Skia) => {
-      const data = Skia.Data.fromBase64(
-        "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
-      );
-      const img = Skia.Image.MakeImageFromEncoded(data);
-      if (!img) {
-        return [];
-      }
-      const offscreen = Skia.Surface.MakeOffscreen(1, 1)!;
-      const canvas = offscreen.getCanvas();
-      canvas.drawImage(img, 0, 0);
-      const snapshotImage = Skia.Image.MakeNull();
-      offscreen.makeImageSnapshot(undefined, snapshotImage);
-      return Array.from(snapshotImage.encodeToBytes());
-    });
-    expect(result.length).toBeGreaterThan(0);
-  });
-  it("encodeToBase64() from GPU image", async () => {
-    const result = await surface.eval((Skia) => {
-      const data = Skia.Data.fromBase64(
-        "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
-      );
-      const img = Skia.Image.MakeImageFromEncoded(data);
-      if (!img) {
-        return "";
-      }
-      const offscreen = Skia.Surface.MakeOffscreen(1, 1)!;
-      const canvas = offscreen.getCanvas();
-      canvas.drawImage(img, 0, 0);
-      const snapshotImage = Skia.Image.MakeNull();
-      offscreen.makeImageSnapshot(undefined, snapshotImage);
-      return snapshotImage.encodeToBase64();
-    });
-    expect(result.length).toBeGreaterThan(0);
-  });
-});