@shopify/react-native-skia 1.3.12 → 1.4.0

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

@@ -0,0 +1,63 @@
+import React from "react";
+
+import { importSkia, surface } from "../setup";
+import { checkImage } from "../../../__tests__/setup";
+import { Circle, Fill, Group, RoundedRect } from "../../components";
+
+describe("Transform", () => {
+  it("Should render a transform with the correct origin", async () => {
+    const { Skia } = importSkia();
+    const { width, height } = surface;
+    const r = width * 0.33;
+    const image = await surface.draw(
+      <Group
+        blendMode="multiply"
+        transform={[{ rotate: Math.PI }]}
+        origin={Skia.Point(width / 2, height / 2)}
+      >
+        <Circle cx={r} cy={r} r={r} color="cyan" />
+        <Circle cx={width - r} cy={r} r={r} color="magenta" />
+        <Circle cx={width / 2} cy={height - r} r={r} color="yellow" />
+      </Group>
+    );
+    checkImage(image, "snapshots/drawings/transform-origin.png");
+  });
+
+  it("Should use radians for the skewX transformation", async () => {
+    const { Skia } = importSkia();
+    const { width } = surface;
+    const r = width / 4;
+    const image = await surface.draw(
+      <>
+        <Fill color="#e8f4f8" />
+        <Group
+          color="lightblue"
+          origin={Skia.Point(r, r)}
+          transform={[{ skewX: Math.PI / 6 }]}
+        >
+          <RoundedRect x={r} y={r} width={2 * r} height={2 * r} r={10} />
+        </Group>
+      </>
+    );
+    checkImage(image, "snapshots/drawings/skew-transform.png");
+  });
+
+  it("Should use radians for the skewY transformation", async () => {
+    const { Skia } = importSkia();
+    const { width } = surface;
+    const r = width / 4;
+    const image = await surface.draw(
+      <>
+        <Fill color="#e8f4f8" />
+        <Group
+          color="lightblue"
+          origin={Skia.Point(r, r)}
+          transform={[{ skewY: Math.PI / 6 }]}
+        >
+          <RoundedRect x={r} y={r} width={2 * r} height={2 * r} r={10} />
+        </Group>
+      </>
+    );
+    checkImage(image, "snapshots/drawings/skew-transform2.png");
+  });
+});

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

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { checkImage } from "../../../__tests__/setup";
+import { Vertices } from "../../components";
+import { surface, importSkia } from "../setup";
+
+describe("Vertices", () => {
+  it("should draw a single triangle", async () => {
+    const { vec } = importSkia();
+    const vertices = [vec(64, 0), vec(128, 256), vec(0, 256)];
+    const colors = ["#61dafb", "#fb61da", "#dafb61"];
+    const img = await surface.draw(
+      <>
+        <Vertices vertices={vertices} colors={colors} />
+      </>
+    );
+    checkImage(img, "snapshots/vertices/vertices.png");
+  });
+  it("should draw a single triangle strip", async () => {
+    const { vec } = importSkia();
+    const vertices = [vec(0, 0), vec(128, 0), vec(0, 256), vec(128, 256)];
+    const colors = ["#61dafb", "#fb61da", "#dafb61", "cyan"];
+    const img = await surface.draw(
+      <>
+        <Vertices vertices={vertices} colors={colors} mode="triangleStrip" />
+      </>
+    );
+    checkImage(img, "snapshots/vertices/strip.png");
+  });
+});

package/src/renderer/__tests__/e2e/Video.ts

@@ -0,0 +1,69 @@
+/* eslint-disable jest/no-disabled-tests */
+import type { Video } from "../../../skia/types";
+import { surface } from "../setup";
+
+// TODO: to reanable these tests we need to run them on the UI thread
+describe("Videos", () => {
+  it.skip("get video duration and framerate", async () => {
+    const result = await surface.eval((Skia, ctx) => {
+      const video = Skia.Video(ctx.localAssets[0]) as Video;
+      return {
+        duration: video.duration(),
+        framerate: video.framerate(),
+        width: video.size().width,
+        height: video.size().height,
+      };
+    });
+    expect(result).toEqual({
+      duration: 5280,
+      framerate: 25,
+      height: 720,
+      width: 1280,
+    });
+  });
+  // TODO: We need to reanable these tests once we can run them on the UI thread
+  // itRunsE2eOnly("get frame", async () => {
+  //   const { Skia } = importSkia();
+  //   const data = await surface.eval((Sk, ctx) => {
+  //     const video = Sk.Video(ctx.localAssets[0]);
+  //     const img = video.nextImage();
+  //     if (!img) {
+  //       return null;
+  //     }
+  //     return Array.from(img.encodeToBytes());
+  //   });
+  //   expect(data).not.toBeNull();
+  //   const img = Skia.Image.MakeImageFromEncoded(
+  //     Skia.Data.fromBytes(new Uint8Array(data!))
+  //   );
+  //   expect(img).not.toBeNull();
+  //   checkImage(img!, "snapshots/video/frame0.png");
+  // });
+  // itRunsE2eOnly("seek frame", async () => {
+  //   const { Skia } = importSkia();
+  //   const data = await surface.eval((Sk, ctx) => {
+  //     const video = Sk.Video(ctx.localAssets[0]);
+  //     video.seek(100);
+  //     const img = video.nextImage();
+  //     if (!img) {
+  //       return null;
+  //     }
+  //     return Array.from(img.encodeToBytes());
+  //   });
+  //   expect(data).not.toBeNull();
+  //   const img = Skia.Image.MakeImageFromEncoded(
+  //     Skia.Data.fromBytes(new Uint8Array(data!))
+  //   );
+  //   expect(img).not.toBeNull();
+  //   checkImage(img!, "snapshots/video/frame100.png");
+  // });
+  it.skip("seek non existing frame returns null", async () => {
+    const result = await surface.eval((Skia, ctx) => {
+      const video = Skia.Video(ctx.localAssets[0]) as Video;
+      video.seek(100000);
+      const image = video.nextImage();
+      return image === null;
+    });
+    expect(result).toBe(true);
+  });
+});

package/src/renderer/__tests__/e2e/setup/Paragraph.ts

@@ -0,0 +1,56 @@
+import type { SkParagraph, Skia, SkCanvas } from "../../../../skia/types";
+import type { EvalContext } from "../../setup";
+
+import { SkiaObject } from "./SkiaObject";
+
+export class ParagraphAsset<Ctx extends EvalContext>
+  extends SkiaObject<Ctx, SkParagraph>
+  implements SkParagraph
+{
+  constructor(
+    Skia: Skia,
+    fn: (Skia: Skia, ctx: Ctx) => SkParagraph,
+    context: Ctx = {} as Ctx
+  ) {
+    super(Skia, fn, context);
+  }
+
+  layout(width: number) {
+    this.instance.layout(width);
+  }
+  paint(canvas: SkCanvas, x: number, y: number) {
+    this.instance.paint(canvas, x, y);
+  }
+  getHeight() {
+    return this.instance.getHeight();
+  }
+  getMaxWidth() {
+    return this.instance.getMaxWidth();
+  }
+  getMinIntrinsicWidth() {
+    return this.instance.getMinIntrinsicWidth();
+  }
+  getMaxIntrinsicWidth() {
+    return this.instance.getMaxIntrinsicWidth();
+  }
+  getLongestLine() {
+    return this.instance.getLongestLine();
+  }
+  getGlyphPositionAtCoordinate(x: number, y: number) {
+    return this.instance.getGlyphPositionAtCoordinate(x, y);
+  }
+  getRectsForRange(start: number, end: number) {
+    return this.instance.getRectsForRange(start, end);
+  }
+  getLineMetrics() {
+    return this.instance.getLineMetrics();
+  }
+  getRectsForPlaceholders() {
+    return this.instance.getRectsForPlaceholders();
+  }
+  __typename__ = "Paragraph" as const;
+
+  dispose(): void {
+    this.instance.dispose();
+  }
+}

package/src/renderer/__tests__/e2e/setup/SVG.ts

@@ -0,0 +1,27 @@
+// Because SkSVG doesn't exist on web,
+
+import type { SkSVG } from "../../../../skia/types";
+
+// this instance is just to send the svg over the wire
+export class SVGAsset implements SkSVG {
+  __typename__ = "SVG" as const;
+  constructor(
+    private _source: string,
+    private _width: number,
+    private _height: number
+  ) {}
+
+  dispose() {}
+
+  source() {
+    return this._source;
+  }
+
+  width() {
+    return this._width;
+  }
+
+  height() {
+    return this._height;
+  }
+}

package/src/renderer/__tests__/e2e/setup/SkiaObject.ts

@@ -0,0 +1,31 @@
+import type { SkJSIInstance, Skia } from "../../../../skia/types";
+import type { EvalContext } from "../../setup";
+
+export abstract class SkiaObject<
+  Ctx extends EvalContext,
+  R extends SkJSIInstance<string>
+> {
+  protected _source: string;
+  protected _instance: R;
+
+  constructor(
+    Skia: Skia,
+    fn: (Skia: Skia, ctx: Ctx) => R,
+    public _context: Ctx
+  ) {
+    this._source = fn.toString();
+    this._instance = fn(Skia, _context);
+  }
+
+  get source() {
+    return this._source;
+  }
+
+  get context() {
+    return this._context;
+  }
+
+  get instance() {
+    return this._instance;
+  }
+}

package/src/renderer/__tests__/e2e/setup/index.ts

@@ -0,0 +1,3 @@
+export * from "./Paragraph";
+export * from "./SVG";
+export * from "./SkiaObject";

package/src/renderer/__tests__/examples/BlendModes.spec.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+
+import { processResult } from "../../../__tests__/setup";
+import {
+  BlendColor,
+  Image,
+  ImageShader,
+  Mask,
+  Rect,
+  Shader,
+} from "../../components";
+import { height, drawOnNode, width, loadImage, importSkia } from "../setup";
+
+describe("Test blend modes", () => {
+  it("Should nicely blend the product color to the image", () => {
+    const image = loadImage("skia/__tests__/assets/product.png");
+    const rect = { x: 0, y: 0, width, height };
+    const surface = drawOnNode(
+      <Mask mask={<Image image={image} rect={rect} />}>
+        <Image image={image} rect={rect}>
+          <BlendColor color="lightgreen" mode="hue" />
+        </Image>
+      </Mask>
+    );
+    processResult(surface, "snapshots/demos/product.png");
+  });
+  it("Should nicely blend the product color to the image using a runtime effect", () => {
+    const { Skia } = importSkia();
+    const image = loadImage("skia/__tests__/assets/product.png");
+    const rect = { x: 0, y: 0, width, height };
+    const source = Skia.RuntimeEffect.Make(blender)!;
+    const surface = drawOnNode(
+      <Rect rect={rect}>
+        <Shader
+          source={source}
+          uniforms={{ src: [144 / 255, 238 / 255, 144 / 255, 1] }}
+        >
+          <ImageShader image={image} rect={rect} fit="cover" />
+        </Shader>
+      </Rect>
+    );
+    processResult(surface, "snapshots/demos/product2.png");
+  });
+});
+
+// Blend mode shaders
+// https://github.com/google/skia/blob/1f193df9b393d50da39570dab77a0bb5d28ec8ef/src/sksl/sksl_gpu.sksl
+const blender = `
+uniform shader image;
+uniform vec4 src;
+
+half3 _guarded_divide(half3 n, half d) {
+  return n/(d + 0.00000001);
+}
+
+half _guarded_divide(half n, half d) {
+  return n/(d + 0.00000001);
+}
+
+half3 _blend_set_color_saturation_helper(half3 minMidMax, half sat) {
+  if (minMidMax.r < minMidMax.b) {
+      return half3(0,
+                  _guarded_divide(sat*(minMidMax.g - minMidMax.r), (minMidMax.b - minMidMax.r)),
+                  sat);
+  } else {
+      return half3(0);
+  }
+}
+
+half _blend_color_saturation(half3 color) {
+  return max(max(color.r, color.g), color.b) - min(min(color.r, color.g), color.b);
+}
+
+half3 _blend_set_color_saturation(half3 hueLumColor, half3 satColor) {
+  half sat = _blend_color_saturation(satColor);
+  if (hueLumColor.r <= hueLumColor.g) {
+      if (hueLumColor.g <= hueLumColor.b) {
+          return _blend_set_color_saturation_helper(hueLumColor.rgb, sat);
+      } else if (hueLumColor.r <= hueLumColor.b) {
+          return _blend_set_color_saturation_helper(hueLumColor.rbg, sat).rbg;
+      } else {
+          return _blend_set_color_saturation_helper(hueLumColor.brg, sat).gbr;
+      }
+  } else if (hueLumColor.r <= hueLumColor.b) {
+     return _blend_set_color_saturation_helper(hueLumColor.grb, sat).grb;
+  } else if (hueLumColor.g <= hueLumColor.b) {
+     return _blend_set_color_saturation_helper(hueLumColor.gbr, sat).brg;
+  } else {
+     return _blend_set_color_saturation_helper(hueLumColor.bgr, sat).bgr;
+  }
+}
+
+half _blend_color_luminance(half3 color) { return dot(half3(0.3, 0.59, 0.11), color); }
+
+half3 _blend_set_color_luminance(half3 hueSatColor, half alpha, half3 lumColor) {
+  half lum = _blend_color_luminance(lumColor);
+  half3 result = lum - _blend_color_luminance(hueSatColor) + hueSatColor;
+  half minComp = min(min(result.r, result.g), result.b);
+  half maxComp = max(max(result.r, result.g), result.b);
+  if (minComp < 0 && lum != minComp) {
+      result = lum + (result - lum) * _guarded_divide(lum, (lum - minComp));
+  }
+  if (maxComp > alpha && maxComp != lum) {
+      return lum + _guarded_divide((result - lum) * (alpha - lum), (maxComp - lum));
+  } else {
+      return result;
+  }
+}
+
+half4 blend_hue(half4 src, half4 dst) {
+  half alpha = dst.a*src.a;
+  half3 sda = src.rgb*dst.a;
+  half3 dsa = dst.rgb*src.a;
+  return half4(_blend_set_color_luminance(_blend_set_color_saturation(sda, dsa), alpha, dsa) +
+               dst.rgb - dsa + src.rgb - sda,
+               src.a + dst.a - alpha);
+}
+
+vec4 main(vec2 xy) {
+  vec4 dst = image.eval(xy);
+  return blend_hue(src, dst) * dst.a;
+}
+`;