@shopify/react-native-skia 1.3.12 → 1.4.0

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

@@ -0,0 +1,56 @@
+import React from "react";
+
+import { checkImage, docPath, processResult } from "../../../__tests__/setup";
+import { Blur, Image } from "../../components";
+import { PIXEL_RATIO, surface, images } from "../setup";
+import { Group } from "../../components/Group";
+import { setupSkia } from "../../../skia/__tests__/setup";
+import { TileMode } from "../../../skia/types";
+import { fitRects } from "../../../dom/nodes";
+
+describe("Blur Image Filter", () => {
+  it("should build the reference build images for later", async () => {
+    const { oslo } = images;
+    const { surface: ckSurface, Skia } = setupSkia(
+      surface.width * PIXEL_RATIO,
+      surface.height * PIXEL_RATIO
+    );
+    const canvas = ckSurface.getCanvas();
+    const imgRect = Skia.XYWHRect(0, 0, oslo.width(), oslo.height());
+    const { src, dst } = fitRects("cover", imgRect, {
+      x: 0,
+      y: 0,
+      width: surface.width,
+      height: surface.height,
+    });
+
+    const m3 = Skia.Matrix();
+    m3.scale(3, 3);
+
+    const paint = Skia.Paint();
+    paint.setImageFilter(Skia.ImageFilter.MakeBlur(4, 4, TileMode.Decal, null));
+    canvas.save();
+    canvas.concat(m3);
+    canvas.drawImageRect(oslo, src, dst, paint);
+    canvas.restore();
+    processResult(ckSurface, docPath("blur.png"));
+  });
+  it("should blur the image with tile mode=decal", async () => {
+    const { oslo } = images;
+    const { width } = surface;
+    const img = await surface.draw(
+      <Group>
+        <Blur blur={4} />
+        <Image
+          image={oslo}
+          x={0}
+          y={0}
+          width={width}
+          height={width}
+          fit="cover"
+        />
+      </Group>
+    );
+    checkImage(img, docPath("blur.png"));
+  });
+});

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

@@ -0,0 +1,83 @@
+import React from "react";
+
+import { checkImage, docPath } from "../../../__tests__/setup";
+import { Box, BoxShadow, Fill, FitBox } from "../../components";
+import { surface, importSkia, PIXEL_RATIO } from "../setup";
+
+describe("Box", () => {
+  it("should draw a box with inner and outer shadow", async () => {
+    const { rect, rrect } = importSkia();
+    const { width } = surface;
+    const size = width / 2;
+    const d = 10 * PIXEL_RATIO;
+    const img = await surface.draw(
+      <>
+        <Fill color="#add8e6" />
+        <Box
+          box={rrect(rect(size / 2, size / 2, size, size), 24, 24)}
+          color="#add8e6"
+        >
+          <BoxShadow dx={d} dy={d} blur={d} color="#93b8c4" inner />
+          <BoxShadow dx={-d} dy={-d} blur={d} color="#c7f8ff" inner />
+          <BoxShadow dx={d} dy={d} blur={d} color="#93b8c4" />
+          <BoxShadow dx={-d} dy={-d} blur={d} color="#c7f8ff" />
+        </Box>
+      </>
+    );
+    checkImage(img, docPath("box/box-shadow.png"));
+  });
+  it("should render negative values", async () => {
+    const { rect } = importSkia();
+    const { width } = surface;
+    const w = width;
+    const h = width;
+    const src = { x: 15, y: 15, width: w - 30, height: h - 30 };
+    const img = await surface.draw(
+      <FitBox src={src} dst={rect(30, 15, w - 30, h - 10)}>
+        <Box box={src} color={"white"}>
+          <BoxShadow dx={5} dy={12} blur={5} color={"red"} />
+          <BoxShadow dx={5} dy={12} blur={5} color={"red"} />
+          <BoxShadow dx={-5} dy={-12} blur={5} color={"green"} />
+          <BoxShadow dx={-5} dy={-12} blur={5} color={"green"} />
+        </Box>
+      </FitBox>
+    );
+    checkImage(img, "snapshots/box/box-shadow2.png");
+  });
+  it("should render have rounded corners", async () => {
+    const { rect } = importSkia();
+    const { width } = surface;
+    const w = width;
+    const h = width;
+    const src = { x: 15, y: 15, width: w - 30, height: h - 30 };
+    const border = { rect: src, rx: 10, ry: 10 };
+    const img = await surface.draw(
+      <FitBox src={src} dst={rect(30, 15, w - 30, h - 10)}>
+        <Box box={border} color={"white"}>
+          <BoxShadow dx={5} dy={12} blur={5} color={"red"} />
+          <BoxShadow dx={5} dy={12} blur={5} color={"red"} />
+          <BoxShadow dx={-5} dy={-12} blur={5} color={"green"} />
+          <BoxShadow dx={-5} dy={-12} blur={5} color={"green"} />
+        </Box>
+      </FitBox>
+    );
+    checkImage(img, "snapshots/box/box-shadow3.png");
+  });
+
+  it("should draw a box with red stroke", async () => {
+    const { width } = surface;
+    const size = width / 2;
+    const img = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Box
+          box={{ width: size, height: size, x: 1 / 3, y: 1 / 3 }}
+          color="red"
+          style="stroke"
+          strokeWidth={2 / 3}
+        />
+      </>
+    );
+    checkImage(img, "snapshots/box/box-stroke.png");
+  });
+});

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

@@ -0,0 +1,212 @@
+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";
+
+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 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

@@ -0,0 +1,81 @@
+import React from "react";
+
+import {
+  images,
+  surface,
+  width as wWidth,
+  height as wHeight,
+} from "../../setup";
+import {
+  ColorMatrix,
+  Image,
+  Lerp,
+  LinearToSRGBGamma,
+} from "../../../components";
+import { checkImage, 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"
+    );
+  });
+  // TODO: a bug should be reported here
+  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");
+  });
+});

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

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

@@ -0,0 +1,75 @@
+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);
+      return Array.from(offscreen.makeImageSnapshot().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);
+      return offscreen.makeImageSnapshot().encodeToBase64();
+    });
+    expect(result.length).toBeGreaterThan(0);
+  });
+});