@shopify/react-native-skia 1.3.12 → 1.4.0

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

@@ -0,0 +1,126 @@
+import fs from "fs";
+import path from "path";
+
+import React from "react";
+
+import { processResult } from "../../__tests__/setup";
+import { Circle, FitBox, Rect, Image, Group, fitbox } from "../components";
+
+import { drawOnNode, width, height, importSkia } from "./setup";
+
+describe("FitBox", () => {
+  it("Should scale the rectangle in half", () => {
+    const { Skia } = importSkia();
+    const surface = drawOnNode(
+      <FitBox
+        src={Skia.XYWHRect(0, 0, width, height)}
+        dst={Skia.XYWHRect(width / 4, height / 4, width / 2, height / 2)}
+      >
+        <Rect x={0} y={0} width={width} height={height} color="lightblue" />
+      </FitBox>
+    );
+    processResult(surface, "snapshots/drawings/lightblue-rect.png");
+  });
+  it("Should take the bottom right quarter of the circle and scale to the full canvas", () => {
+    const { Skia } = importSkia();
+    const surface = drawOnNode(
+      <FitBox
+        src={Skia.XYWHRect(width / 2, height / 2, width / 2, height / 2)}
+        dst={Skia.XYWHRect(0, 0, width, height)}
+      >
+        <Circle
+          r={width / 2}
+          cx={width / 2}
+          cy={height / 2}
+          color="lightblue"
+        />
+      </FitBox>
+    );
+    processResult(surface, "snapshots/drawings/lightblue-quarter-circle.png");
+  });
+  it("Should scale the image (1)", () => {
+    const { Skia, rect } = importSkia();
+    const image = Skia.Image.MakeImageFromEncoded(
+      Skia.Data.fromBytes(
+        fs.readFileSync(
+          path.resolve(__dirname, "../../skia/__tests__/assets/box.png")
+        )
+      )
+    )!;
+    const surface = drawOnNode(
+      <Group
+        transform={fitbox(
+          "cover",
+          rect(0, 0, image.width(), image.height()),
+          rect(0, 0, width, height)
+        )}
+      >
+        <Image
+          image={image}
+          x={0}
+          y={0}
+          width={image.width()}
+          height={image.height()}
+        />
+      </Group>
+    );
+    processResult(surface, "snapshots/drawings/scaled-image.png");
+  });
+  it("Should scale the image (2)", () => {
+    const { Skia, rect } = importSkia();
+    const image = Skia.Image.MakeImageFromEncoded(
+      Skia.Data.fromBytes(
+        fs.readFileSync(
+          path.resolve(__dirname, "../../skia/__tests__/assets/box.png")
+        )
+      )
+    )!;
+    const screen = rect(256, 128, 256, 512);
+    const surface = drawOnNode(
+      <Group>
+        <Image
+          image={image}
+          x={0}
+          y={0}
+          width={image.width()}
+          height={image.height()}
+          transform={fitbox(
+            "cover",
+            rect(0, 0, image.width(), image.height()),
+            screen
+          )}
+        />
+        <Rect rect={screen} color="green" opacity={0.5} />
+      </Group>
+    );
+    processResult(surface, "snapshots/drawings/scaled-image2.png");
+  });
+  it("Should rotate and scale the image", () => {
+    const { Skia, rect } = importSkia();
+    const image = Skia.Image.MakeImageFromEncoded(
+      Skia.Data.fromBytes(
+        fs.readFileSync(
+          path.resolve(__dirname, "../../skia/__tests__/assets/box2.png")
+        )
+      )
+    )!;
+    const screen = rect(256, 128, 256, 512);
+    const imageRect = rect(0, 0, image.width(), image.height());
+    const transform = fitbox("contain", imageRect, screen, 270);
+    const surface = drawOnNode(
+      <Group>
+        <Image
+          image={image}
+          x={0}
+          y={0}
+          width={image.width()}
+          height={image.height()}
+          fit="none"
+          transform={transform}
+        />
+        <Rect rect={screen} color="green" opacity={0.5} />
+      </Group>
+    );
+    processResult(surface, "snapshots/drawings/rotated-scaled-image.png");
+  });
+});

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

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

@@ -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();
+    }
+  });
+});