@shopify/react-native-skia 1.3.11 → 1.3.13

package/src/renderer/__tests__/Image.spec.tsx

@@ -0,0 +1,45 @@
+import fs from "fs";
+import path from "path";
+
+import React from "react";
+
+import { processResult } from "../../__tests__/setup";
+import { Fill, ImageShader, Shader } from "../components";
+
+import { drawOnNode, width, height, importSkia } from "./setup";
+
+describe("Test Image Component", () => {
+  it("Should display the image with a filter", () => {
+    const { Skia } = importSkia();
+    const image = Skia.Image.MakeImageFromEncoded(
+      Skia.Data.fromBytes(
+        fs.readFileSync(
+          path.resolve(__dirname, "../../skia/__tests__/assets/zurich.jpg")
+        )
+      )
+    )!;
+    const filter = Skia.RuntimeEffect.Make(`
+uniform shader image;
+uniform float r;
+
+half4 main(float2 xy) {   
+  xy.x += sin(xy.y / r) * 4;
+  return image.eval(xy).rbga;
+}`)!;
+    const surface = drawOnNode(
+      <Fill>
+        <Shader source={filter} uniforms={{ r: 50 }}>
+          <ImageShader
+            image={image}
+            fit="cover"
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+          />
+        </Shader>
+      </Fill>
+    );
+    processResult(surface, "snapshots/images/filter.png");
+  });
+});

package/src/renderer/__tests__/Paths.spec.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import { processResult } from "../../__tests__/setup";
+import { Path } from "../components";
+
+import { drawOnNode, width, importSkia } from "./setup";
+
+const size = width;
+
+describe("Path Examples", () => {
+  it("Should draw an arc", () => {
+    const { Skia } = importSkia();
+    const path = Skia.Path.Make();
+    const arcRect = {
+      x: 0,
+      y: 0,
+      width: size,
+      height: size,
+    };
+    path.addArc(arcRect, 45, 270);
+    const surface = drawOnNode(<Path path={path} color="lightblue" />);
+    processResult(surface, "snapshots/paths/arc.png");
+  });
+
+  it("Should draw an oval", () => {
+    const { Skia } = importSkia();
+    const path = Skia.Path.Make();
+    const rct = {
+      x: 0,
+      y: 0,
+      width: size,
+      height: size,
+    };
+    path.addOval(rct);
+    const surface = drawOnNode(<Path path={path} color="lightblue" />);
+    processResult(surface, "snapshots/paths/oval.png");
+  });
+
+  it("Should draw an rounded rectangle", () => {
+    const { Skia } = importSkia();
+    const path = Skia.Path.Make();
+    path.addRRect({
+      rect: {
+        x: 0,
+        y: 0,
+        width: size,
+        height: size,
+      },
+      rx: size / 4,
+      ry: size / 4,
+    });
+    const surface = drawOnNode(<Path path={path} color="lightblue" />);
+    processResult(surface, "snapshots/paths/rrect.png");
+  });
+
+  it("Should draw a polygon", () => {
+    const { Skia, vec } = importSkia();
+    const path = Skia.Path.Make();
+    const r = size / 4;
+    path.addPoly(
+      [
+        vec(r, r),
+        { x: size - r, y: r },
+        vec(size - r, size - r),
+        { x: r, y: size - r },
+      ],
+      true
+    );
+
+    const surface = drawOnNode(
+      <Path path={path} strokeWidth={4} style="stroke" color="lightblue" />
+    );
+    processResult(surface, "snapshots/paths/poly.png");
+  });
+});

package/src/renderer/__tests__/Picture.spec.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+import { processResult } from "../../__tests__/setup";
+import { Fill, Picture, Group } from "../components";
+
+import type { EmptyProps } from "./setup";
+import { wait, importSkia, mountCanvas, width } from "./setup";
+
+const CheckPicture = ({}: EmptyProps) => {
+  const { createPicture, Skia } = importSkia();
+  const [color, setColor] = useState("green");
+  const r = width / 2;
+  useEffect(() => {
+    setTimeout(() => {
+      setColor("red");
+    }, 16);
+  }, [Skia]);
+  const picture = useMemo(
+    () =>
+      createPicture((canvas) => {
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color(color));
+        canvas.drawCircle(r, r, r, paint);
+      }),
+    // In a non-test environment, createPicture and Skia will be top-level, not part of the array
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [color]
+  );
+  return (
+    <Group>
+      <Fill color="white" />
+      <Picture picture={picture} />
+    </Group>
+  );
+};
+
+const CheckPicture2 = ({}: EmptyProps) => {
+  const { createPicture, Skia } = importSkia();
+  const [color, setColor] = useState("green");
+  const r = width / 2;
+  useEffect(() => {
+    setTimeout(() => {
+      setColor("red");
+    }, 16);
+  }, [Skia]);
+  const picture = useMemo(
+    () =>
+      createPicture((canvas) => {
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color(color));
+        canvas.drawCircle(r, r, r, paint);
+      }, Skia.XYWHRect(0, 0, r * 2, r * 2)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  return (
+    <Group>
+      <Fill color="white" />
+      <Picture picture={picture} />
+    </Group>
+  );
+};
+
+describe("Picture", () => {
+  it("should respect dependency array", async () => {
+    const { surface, draw } = mountCanvas(<CheckPicture />);
+    draw();
+    processResult(surface, "snapshots/pictures/green.png");
+    await wait(32);
+    draw();
+    processResult(surface, "snapshots/pictures/red.png");
+  });
+
+  it("should not redraw if there are no dependency", async () => {
+    const { surface, draw } = mountCanvas(<CheckPicture2 />);
+    draw();
+    processResult(surface, "snapshots/pictures/green.png");
+    await wait(32);
+    draw();
+    processResult(surface, "snapshots/pictures/green.png");
+  });
+});

package/src/renderer/__tests__/Simple.spec.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+
+import { processResult } from "../../__tests__/setup";
+import { Group, Line, Points, Rect } from "../components";
+import * as SkiaRenderer from "../index";
+
+import { center, drawOnNode, width, importSkia } from "./setup";
+
+const size = width / 2;
+
+describe("Renderer", () => {
+  it("Loads renderer without Skia", () => {
+    expect(SkiaRenderer).toBeDefined();
+  });
+  it("Light blue rectangle", () => {
+    const surface = drawOnNode(
+      <Rect
+        x={(width - size) / 2}
+        y={(width - size) / 2}
+        width={size}
+        height={size}
+        color="lightblue"
+      />
+    );
+    processResult(surface, "snapshots/drawings/lightblue-rect.png");
+  });
+  it("Scaled light blue rectangle", () => {
+    const scale = 2;
+    const scaled = size / scale;
+    const surface = drawOnNode(
+      <Group transform={[{ scale }]} origin={center}>
+        <Rect
+          x={(width - scaled) / 2}
+          y={(width - scaled) / 2}
+          width={scaled}
+          height={scaled}
+          color="lightblue"
+        />
+      </Group>
+    );
+    processResult(surface, "snapshots/drawings/lightblue-rect.png");
+  });
+  it("Points", () => {
+    const { vec } = importSkia();
+    const c = { x: width / 2, y: size / 2 + 16 };
+    const S = 25;
+    const c1 = [
+      vec(c.x - 2 * S, c.y - S),
+      vec(c.x - S, c.y - 2 * S),
+      vec(c.x - S, c.y - S),
+    ];
+
+    const c2 = [
+      vec(c.x, c.y - 2 * S),
+      vec(c.x + S, c.y),
+      vec(c.x + S, c.y - S),
+    ];
+
+    const c3 = [
+      vec(c.x - 10, c.y + 10),
+      vec(c.x + S, c.y),
+      vec(c.x + S, c.y + S),
+    ];
+
+    const c4 = [
+      vec(c.x - 2 * S, c.y + S),
+      vec(c.x - S, c.y + 2 * S),
+      vec(c.x - S, c.y + S),
+    ];
+
+    const cubics = [...c1, ...c2, ...c3, ...c4];
+    const surface = drawOnNode(
+      <Group color="#61DAFB" style="stroke" strokeWidth={3}>
+        <Points mode="polygon" points={cubics} />
+        <Line p1={c} p2={vec(size, 0)} />
+        <Points mode="points" points={cubics} color="red" />
+      </Group>
+    );
+    processResult(surface, "snapshots/drawings/points.png");
+  });
+});

package/src/renderer/__tests__/SkiaDOM.spec.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import { NodeType } from "../../dom/types";
+import { Circle, Group, Paint } from "../components";
+
+import { width, height, mountCanvas } from "./setup";
+
+describe("Test introductionary examples from our documentation", () => {
+  it("Should blend colors using multiplication", () => {
+    const r = width * 0.33;
+    const { root } = mountCanvas(
+      <Group blendMode="multiply">
+        <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>
+    );
+    expect(root.dom.children().length).toBe(1);
+    const child = root.dom.children()[0]!;
+    expect(child).toBeDefined();
+    expect(child.type).toBe(NodeType.Group);
+    expect(child.children().length).toBe(3);
+  });
+  it("Accept multiple paint definiton", () => {
+    const r = width * 0.33;
+    const strokeWidth = 30;
+    const { root } = mountCanvas(
+      <Circle cx={width / 2} cy={width / 2} r={r} color="red">
+        <Paint color="lightblue" />
+        <Paint color="#adbce6" style="stroke" strokeWidth={strokeWidth} />
+        <Paint color="#ade6d8" style="stroke" strokeWidth={strokeWidth / 2} />
+      </Circle>
+    );
+    expect(root.dom.children().length).toBe(1);
+    const child = root.dom.children()[0]!;
+    expect(child).toBeDefined();
+    expect(child.type).toBe(NodeType.Circle);
+    const circle = child;
+    expect(circle).toBeDefined();
+    expect(circle.type).toBe(NodeType.Circle);
+    expect(circle.children().length).toBe(3);
+    expect(circle.children()[0].type).toBe(NodeType.Paint);
+    expect(circle.children()[1].type).toBe(NodeType.Paint);
+    expect(circle.children()[2].type).toBe(NodeType.Paint);
+  });
+});

package/src/renderer/__tests__/Surfaces.spec.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+import { Circle, Group } from "../components";
+import { processResult } from "../../__tests__/setup";
+import { setupSkia } from "../../skia/__tests__/setup";
+
+import { drawOnNode } from "./setup";
+
+describe("Surface", () => {
+  it("MakeNonImageTexture on a CPU surface shouldn't leak", () => {
+    const { Skia } = setupSkia();
+    // When leaking, the WASM memory limit will be reached quite quickly
+    // causing the test to fail
+    for (let i = 0; i < 500; i++) {
+      const surface = Skia.Surface.Make(1920, 1080)!;
+      const canvas = surface.getCanvas();
+      canvas.clear(Skia.Color("cyan"));
+      surface.flush();
+      const image = surface.makeImageSnapshot();
+      const copy = image.makeNonTextureImage();
+      copy.dispose();
+      image.dispose();
+      surface.dispose();
+    }
+  });
+  it("A raster surface shouldn't leak (1)", () => {
+    const { Skia } = setupSkia();
+    // When leaking, the WASM memory limit will be reached quite quickly
+    // causing the test to fail
+    for (let i = 0; i < 500; i++) {
+      const surface = Skia.Surface.Make(1920, 1080)!;
+      const canvas = surface.getCanvas();
+      canvas.clear(Skia.Color("cyan"));
+      surface.flush();
+      const image = surface.makeImageSnapshot();
+      image.dispose();
+      surface.dispose();
+    }
+  });
+  it("A raster surface shouldn't leak (2)", () => {
+    const { Skia } = setupSkia();
+    // When leaking, the WASM memory limit will be reached quite quickly
+    // causing the test to fail
+    for (let i = 0; i < 500; i++) {
+      const surface = Skia.Surface.MakeOffscreen(1920, 1080)!;
+      const canvas = surface.getCanvas();
+      canvas.clear(Skia.Color("cyan"));
+      surface.flush();
+      const image = surface.makeImageSnapshot();
+      image.dispose();
+      surface.dispose();
+    }
+  });
+  it("A raster surface shouldn't leak (3)", () => {
+    for (let i = 0; i < 10; i++) {
+      //const t = performance.now();
+      const r = 128;
+      const surface = drawOnNode(
+        <>
+          <Group blendMode="multiply">
+            <Circle cx={r} cy={r} r={r} color="cyan" />
+            <Circle cx={r} cy={r} r={r} color="magenta" />
+            <Circle cx={r} cy={r} r={r} color="yellow" />
+          </Group>
+        </>
+      );
+      surface.flush();
+      //console.log(`Iteration ${i} took ${Math.floor(performance.now() - t)}ms`);
+      processResult(surface, "snapshots/leak.png");
+      surface.dispose();
+    }
+  });
+});

package/src/renderer/__tests__/Text.spec.tsx

@@ -0,0 +1,134 @@
+import fs from "fs";
+import nodePath from "path";
+
+import React from "react";
+
+import { processResult, docPath } from "../../__tests__/setup";
+import { TextPath, Fill, Text, Glyphs, TextBlob, Group } from "../components";
+
+import {
+  drawOnNode,
+  width,
+  fontSize,
+  importSkia,
+  loadFont,
+  height,
+} from "./setup";
+
+describe("Test different text examples", () => {
+  it("Should draw Hello World", () => {
+    const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
+    const surface = drawOnNode(
+      <>
+        <Fill color="white" />
+        <Text x={0} y={fontSize} font={font} text="Hello World" />
+      </>
+    );
+    processResult(surface, docPath("text/hello-world.png"));
+  });
+
+  it("Should draw Hello World vertically", () => {
+    const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
+    const { Skia } = importSkia();
+    const glyphs = font
+      .getGlyphIDs("Hello World!")
+      .map((id, i) => ({ id, pos: Skia.Point(0, (i + 1) * fontSize) }));
+    const surface = drawOnNode(
+      <>
+        <Fill color="white" />
+        <Glyphs font={font} glyphs={glyphs} />
+      </>
+    );
+    processResult(surface, docPath("text/hello-world-vertical.png"));
+  });
+
+  it("Should render the text around a circle", () => {
+    const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
+    const { Skia } = importSkia();
+    const path = Skia.Path.Make();
+    const r = width / 2;
+    path.addCircle(r, r, r / 2);
+    const surface = drawOnNode(
+      <>
+        <Fill color="white" />
+        <Group transform={[{ rotate: Math.PI }]} origin={Skia.Point(r, r)}>
+          <TextPath font={font} path={path} text="Hello World!" />
+        </Group>
+      </>
+    );
+    processResult(surface, docPath("text/text-path.png"));
+  });
+
+  it("Should render a text blob", () => {
+    const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
+    const { Skia } = importSkia();
+    const blob = Skia.TextBlob.MakeFromText("Hello World!", font);
+    const surface = drawOnNode(
+      <>
+        <Fill color="white" />
+        <TextBlob blob={blob} y={fontSize} x={0} />
+      </>
+    );
+    processResult(surface, docPath("text/text-blob.png"));
+  });
+
+  it("Should render text with Emojis", () => {
+    const { Skia } = importSkia();
+    const data = Skia.Data.fromBytes(
+      fs.readFileSync(
+        nodePath.resolve(
+          __dirname,
+          "../../skia/__tests__/assets/NotoColorEmoji.ttf"
+        )
+      )
+    );
+    const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data)!;
+    expect(tf).toBeTruthy();
+    const emojiFont = Skia.Font(tf, fontSize);
+    const surface = drawOnNode(
+      <>
+        <Fill color="white" />
+        <Text text="🙋🌎" font={emojiFont} y={fontSize} x={0} />
+      </>
+    );
+    processResult(surface, docPath("text/text-emoji.png"));
+  });
+
+  it("Should calculate chinese text width correctly", () => {
+    const { Skia } = importSkia();
+    const data = Skia.Data.fromBytes(
+      fs.readFileSync(
+        nodePath.resolve(
+          __dirname,
+          "../../skia/__tests__/assets/NotoSansSC-Regular.otf"
+        )
+      )
+    );
+    const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data)!;
+    expect(tf).toBeTruthy();
+    const font = Skia.Font(tf, fontSize);
+    const text = "欢迎";
+    const padding = 16;
+    const surface = drawOnNode(
+      <>
+        <Text
+          text={text}
+          font={font}
+          y={height / 2}
+          x={(width - font.getTextWidth(text)) / 2}
+        />
+
+        <Text
+          text={text}
+          font={font}
+          y={height / 2 + fontSize + padding}
+          x={(width - font.getTextWidth(text)) / 2}
+          style={"stroke"}
+          color={"black"}
+          strokeWidth={1}
+        />
+      </>
+    );
+    processResult(surface, docPath("text/welcome.png"));
+  });
+});

package/src/renderer/__tests__/TouchHandler.spec.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+
+import { TouchType } from "../../views/types";
+
+import type { EmptyProps } from "./setup";
+import { mountCanvas, importSkia } from "./setup";
+
+const SimpleActiveTouch = ({}: EmptyProps) => {
+  const { useTouchHandler } = importSkia();
+  const touchHandler = useTouchHandler({
+    onStart: ({ x, y }) => {
+      expect(x).toBe(10);
+      expect(y).toBe(10);
+    },
+    onActive: ({ x, y, velocityX, velocityY }) => {
+      expect(x).toBe(20);
+      expect(y).toBe(20);
+      expect(velocityX).toBe(10);
+      expect(velocityY).toBe(10);
+    },
+  });
+  const history = [
+    [
+      {
+        x: 10,
+        y: 10,
+        force: 0,
+        type: TouchType.Start,
+        id: 2,
+        timestamp: 0,
+      },
+    ],
+    [
+      {
+        x: 20,
+        y: 20,
+        force: 0,
+        type: TouchType.Active,
+        id: 2,
+        timestamp: 1,
+      },
+    ],
+  ];
+  touchHandler(history);
+  return null;
+};
+
+const SimpleEndTouch = ({}: EmptyProps) => {
+  const { useTouchHandler } = importSkia();
+  const touchHandler = useTouchHandler({
+    onStart: ({ x, y }) => {
+      expect(x).toBe(10);
+      expect(y).toBe(10);
+    },
+    onActive: ({ x, y, velocityX, velocityY }) => {
+      expect(x).toBe(20);
+      expect(y).toBe(20);
+      expect(velocityX).toBe(10);
+      expect(velocityY).toBe(10);
+    },
+    onEnd: ({ x, y, velocityX, velocityY }) => {
+      expect(x).toBe(30);
+      expect(y).toBe(30);
+      expect(velocityX).toBe(10);
+      expect(velocityY).toBe(10);
+    },
+  });
+  const history = [
+    [
+      {
+        x: 10,
+        y: 10,
+        force: 0,
+        type: TouchType.Start,
+        id: 2,
+        timestamp: 0,
+      },
+    ],
+    [
+      {
+        x: 20,
+        y: 20,
+        force: 0,
+        type: TouchType.Active,
+        id: 2,
+        timestamp: 1,
+      },
+    ],
+    [
+      {
+        x: 30,
+        y: 30,
+        force: 0,
+        type: TouchType.End,
+        id: 2,
+        timestamp: 2,
+      },
+    ],
+  ];
+  touchHandler(history);
+  return null;
+};
+
+describe("Test handling of touch information", () => {
+  it("Should check that the received values are correct", () => {
+    const { draw } = mountCanvas(<SimpleActiveTouch />);
+    draw();
+  });
+  it("Calculates the velocity properly onEnd event", () => {
+    const { draw } = mountCanvas(<SimpleEndTouch />);
+    draw();
+  });
+});