@shopify/react-native-skia 2.3.0 → 2.3.4

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

@@ -1,46 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-import React from "react";
-
-import type { SkFont } from "../../skia/types";
-import { processResult } from "../../__tests__/setup";
-import { Glyphs } from "../components";
-
-import { drawOnNode, importSkia } from "./setup";
-
-let font: SkFont;
-const fontSize = 64;
-
-describe("Glyphs", () => {
-  beforeAll(() => {
-    const { Skia } = importSkia();
-    const data = Skia.Data.fromBytes(
-      fs.readFileSync(
-        path.resolve(__dirname, "../../skia/__tests__/assets/Roboto-Medium.ttf")
-      )
-    );
-    const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data);
-    expect(tf !== null).toBe(true);
-    font = Skia.Font(tf!, 64);
-    expect(font !== null).toBe(true);
-  });
-  it("Should draw glyphs in lightblue", async () => {
-    const { Skia } = importSkia();
-    const ids = font.getGlyphIDs("ab");
-    const glyphs = [
-      { id: ids[0], pos: Skia.Point(0, fontSize) },
-      {
-        id: ids[1],
-        pos: Skia.Point(
-          font.getGlyphWidths([ids[0]]).reduce((a, b) => a + b),
-          fontSize
-        ),
-      },
-    ];
-    const surface = await drawOnNode(
-      <Glyphs x={0} y={0} font={font} glyphs={glyphs} color="lightblue" />
-    );
-    processResult(surface, "snapshots/glyphs/simple.png");
-  });
-});

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

@@ -1,45 +0,0 @@
-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", async () => {
-    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 = await 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

@@ -1,75 +0,0 @@
-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", async () => {
-    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 = await drawOnNode(<Path path={path} color="lightblue" />);
-    processResult(surface, "snapshots/paths/arc.png");
-  });
-
-  it("Should draw an oval", async () => {
-    const { Skia } = importSkia();
-    const path = Skia.Path.Make();
-    const rct = {
-      x: 0,
-      y: 0,
-      width: size,
-      height: size,
-    };
-    path.addOval(rct);
-    const surface = await drawOnNode(<Path path={path} color="lightblue" />);
-    processResult(surface, "snapshots/paths/oval.png");
-  });
-
-  it("Should draw an rounded rectangle", async () => {
-    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 = await drawOnNode(<Path path={path} color="lightblue" />);
-    processResult(surface, "snapshots/paths/rrect.png");
-  });
-
-  it("Should draw a polygon", async () => {
-    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 = await drawOnNode(
-      <Path path={path} strokeWidth={4} style="stroke" color="lightblue" />
-    );
-    processResult(surface, "snapshots/paths/poly.png");
-  });
-});

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

@@ -1,83 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-
-import { processResult } from "../../__tests__/setup";
-import { Fill, Picture, Group } from "../components";
-
-import type { EmptyProps } from "./setup";
-import { importSkia, mountCanvas, wait, 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);
-      }),
-    [Skia, color, createPicture, r]
-  );
-  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 } = await mountCanvas(<CheckPicture />);
-    await draw();
-    processResult(surface, "snapshots/pictures/green.png");
-    await wait(1000);
-    await draw();
-    processResult(surface, "snapshots/pictures/red.png");
-  });
-
-  it("should not redraw if there are no dependency", async () => {
-    const { surface, draw } = await mountCanvas(<CheckPicture2 />);
-    await draw();
-    processResult(surface, "snapshots/pictures/green.png");
-    await wait(1000);
-    await draw();
-    processResult(surface, "snapshots/pictures/green.png");
-  });
-});

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

@@ -1,81 +0,0 @@
-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", async () => {
-    const surface = await 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", async () => {
-    const scale = 2;
-    const scaled = size / scale;
-    const surface = await 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", async () => {
-    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 = await 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__/Surfaces.spec.tsx

@@ -1,68 +0,0 @@
-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++) {
-      using surface = Skia.Surface.Make(1920, 1080)!;
-      const canvas = surface.getCanvas();
-      canvas.clear(Skia.Color("cyan"));
-      surface.flush();
-      using image = surface.makeImageSnapshot();
-      using copy = image.makeNonTextureImage();
-      expect(copy).toBeDefined();
-    }
-  });
-  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++) {
-      using surface = Skia.Surface.Make(1920, 1080)!;
-      const canvas = surface.getCanvas();
-      canvas.clear(Skia.Color("cyan"));
-      surface.flush();
-      using image = surface.makeImageSnapshot();
-      expect(image).toBeDefined();
-    }
-  });
-  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++) {
-      using surface = Skia.Surface.MakeOffscreen(1920, 1080)!;
-      const canvas = surface.getCanvas();
-      canvas.clear(Skia.Color("cyan"));
-      surface.flush();
-      using image = surface.makeImageSnapshot();
-      expect(image).toBeDefined();
-    }
-  });
-  it("A raster surface shouldn't leak (3)", async () => {
-    for (let i = 0; i < 10; i++) {
-      //const t = performance.now();
-      const r = 128;
-      using surface = await 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");
-    }
-  });
-});

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

@@ -1,134 +0,0 @@
-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", async () => {
-    const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
-    const surface = await 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", async () => {
-    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 = await 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", async () => {
-    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 = await 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", async () => {
-    const font = loadFont("skia/__tests__/assets/Roboto-Medium.ttf");
-    const { Skia } = importSkia();
-    const blob = Skia.TextBlob.MakeFromText("Hello World!", font);
-    const surface = await drawOnNode(
-      <>
-        <Fill color="white" />
-        <TextBlob blob={blob} y={fontSize} x={0} />
-      </>
-    );
-    processResult(surface, docPath("text/text-blob.png"));
-  });
-
-  it("Should render text with Emojis", async () => {
-    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 = await 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", async () => {
-    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 = await 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__/Transform.spec.tsx

@@ -1,72 +0,0 @@
-import React from "react";
-
-import { processResult } from "../../__tests__/setup";
-import { Group, Rect } from "../components";
-import * as SkiaRenderer from "../index";
-
-import { drawOnNode, width, importSkia } from "./setup";
-
-describe("Renderer", () => {
-  it("Loads renderer without Skia", () => {
-    expect(SkiaRenderer).toBeDefined();
-  });
-  it("Scale with origin", async () => {
-    const { Skia } = importSkia();
-    const size = width;
-    const origin = Skia.Point(size / 2, size / 2);
-    const surface = await drawOnNode(
-      <Group transform={[{ scale: 0.5 }]} origin={origin}>
-        <Rect x={0} y={0} width={size} height={size} color="lightblue" />
-      </Group>
-    );
-    processResult(surface, "snapshots/transform/scale-origin.png");
-  });
-  it("Scale with origin using a matrix", async () => {
-    const { Skia } = importSkia();
-    const size = width;
-    const matrix = Skia.Matrix();
-    const origin = Skia.Point(size / 2, size / 2);
-    matrix
-      .translate(origin.x, origin.y)
-      .scale(0.5)
-      .translate(-origin.x, -origin.y);
-    expect(matrix.get()).toStrictEqual([0.5, 0, 192, 0, 0.5, 192, 0, 0, 1]);
-    const surface = await drawOnNode(
-      <Group matrix={matrix}>
-        <Rect x={0} y={0} width={size} height={size} color="lightblue" />
-      </Group>
-    );
-    processResult(surface, "snapshots/transform/scale-origin.png");
-  });
-  it("Scale with matrix and origin", async () => {
-    const { Skia } = importSkia();
-    const size = width;
-    const matrix = Skia.Matrix();
-    const origin = Skia.Point(size / 2, size / 2);
-    matrix.scale(0.5);
-    const surface = await drawOnNode(
-      <Group matrix={matrix} origin={origin}>
-        <Rect x={0} y={0} width={size} height={size} color="lightblue" />
-      </Group>
-    );
-    processResult(surface, "snapshots/transform/scale-origin.png");
-  });
-  it("Should rotate a rectangle to 180deg", async () => {
-    const { Skia } = importSkia();
-    const size = width;
-    const origin = Skia.Point(size / 2, size / 2);
-    const w = size / 4;
-    const surface = await drawOnNode(
-      <Group transform={[{ rotate: Math.PI }]} origin={origin}>
-        <Rect
-          x={origin.x - w / 2}
-          y={0}
-          width={w}
-          height={size}
-          color="lightblue"
-        />
-      </Group>
-    );
-    processResult(surface, "snapshots/transform/rotate-radiants.png");
-  });
-});