@shopify/react-native-skia 2.3.0 → 2.3.4

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

@@ -1,109 +0,0 @@
-import React from "react";
-
-import { checkImage, docPath } from "../../../__tests__/setup";
-import { Circle } from "../../components";
-import { surface, importSkia } from "../setup";
-
-describe("Offscreen Drawings", () => {
-  it("Should use the canvas API to build an image", async () => {
-    const { width, height } = surface;
-    const raw = await surface.eval(
-      (Skia, ctx) => {
-        const r = ctx.width / 2;
-        const offscreen = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
-        if (!offscreen) {
-          throw new Error("Could not create offscreen surface");
-        }
-        const canvas = offscreen.getCanvas();
-        const paint = Skia.Paint();
-        paint.setColor(Skia.Color("lightblue"));
-        canvas.drawCircle(r, r, r, paint);
-        offscreen.flush();
-        return offscreen.makeImageSnapshot().encodeToBase64();
-      },
-      { width, height }
-    );
-    const { Skia } = importSkia();
-    const data = Skia.Data.fromBase64(raw);
-    const image = Skia.Image.MakeImageFromEncoded(data)!;
-    expect(data).toBeDefined();
-    checkImage(image, docPath("offscreen/circle.png"));
-  });
-  it("Should transfer one surface image to another", async () => {
-    const { width, height } = surface;
-    const raw = await surface.eval(
-      (Skia, ctx) => {
-        const r = ctx.width / 2;
-        const backSurface = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
-        const frontSurface = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
-        if (!backSurface || !frontSurface) {
-          throw new Error("Could not create offscreen surface");
-        }
-        const canvas = backSurface.getCanvas();
-        const paint = Skia.Paint();
-        paint.setColor(Skia.Color("lightblue"));
-        canvas.drawCircle(r, r, r, paint);
-        backSurface.flush();
-        const image = backSurface.makeImageSnapshot();
-        frontSurface.getCanvas().drawImage(image, 0, 0);
-        return frontSurface.makeImageSnapshot().encodeToBase64();
-      },
-      { width, height }
-    );
-    const { Skia } = importSkia();
-    const data = Skia.Data.fromBase64(raw);
-    const image = Skia.Image.MakeImageFromEncoded(data)!;
-    expect(data).toBeDefined();
-    checkImage(image, docPath("offscreen/circle.png"));
-  });
-
-  it("Should render to multiple offscreen surfaces at once (1)", async () => {
-    const { width, height } = surface;
-    const raw = await surface.eval(
-      (Skia, ctx) => {
-        const r = ctx.width / 4;
-        const backSurface1 = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
-        const backSurface2 = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
-        const frontSurface = Skia.Surface.MakeOffscreen(ctx.width, ctx.height)!;
-        if (!backSurface1 || !backSurface2 || !frontSurface) {
-          throw new Error("Could not create offscreen surface");
-        }
-        // Paint to first surface
-        const canvas1 = backSurface1.getCanvas();
-        const paint1 = Skia.Paint();
-        paint1.setColor(Skia.Color("lightblue"));
-        canvas1.drawCircle(r, r, r, paint1);
-        backSurface1.flush();
-
-        // Paint to second surface
-        const canvas2 = backSurface2.getCanvas();
-        const paint2 = Skia.Paint();
-        paint2.setColor(Skia.Color("magenta"));
-        canvas2.drawCircle(r, r, r / 2, paint2);
-        backSurface2.flush();
-
-        const image1 = backSurface1.makeImageSnapshot();
-        const image2 = backSurface2.makeImageSnapshot();
-        frontSurface.getCanvas().drawImage(image1, 0, 0);
-        frontSurface.getCanvas().drawImage(image2, ctx.width / 2, 0);
-        return frontSurface.makeImageSnapshot().encodeToBase64();
-      },
-      { width, height }
-    );
-    const { Skia } = importSkia();
-    const data = Skia.Data.fromBase64(raw);
-    const image = Skia.Image.MakeImageFromEncoded(data)!;
-    expect(data).toBeDefined();
-    checkImage(image, docPath("offscreen/multiple_circles.png"));
-  });
-  it("Should use the React API to build an image", async () => {
-    const { width, height } = surface;
-    const { drawAsImage } = importSkia();
-    const r = width / 2;
-    const image = await drawAsImage(
-      <Circle r={r} cx={r} cy={r} color="lightblue" />,
-      { width, height }
-    );
-    checkImage(image, docPath("offscreen/circle.png"));
-  });
-});

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

@@ -1,301 +0,0 @@
-import React from "react";
-
-import {
-  height as wHeight,
-  importSkia,
-  surface,
-  width as wWidth,
-  images,
-} from "../setup";
-import { processResult, checkImage } from "../../../__tests__/setup";
-import {
-  ColorShader,
-  Fill,
-  Group,
-  Image,
-  ImageShader,
-  Paint,
-  RoundedRect,
-} from "../../components";
-import { setupSkia } from "../../../skia/__tests__/setup";
-import { fitRects } from "../../../dom/nodes/datatypes/Fitting";
-
-describe("Opacity", () => {
-  it("Build reference result", async () => {
-    const image = await surface.draw(
-      <>
-        <Fill color="white" />
-        <Fill color="rgba(0, 0, 255, 0.25)" />
-      </>
-    );
-    checkImage(image, "snapshots/drawings/violet.png");
-  });
-  it("Should multiply multiply the color opacity (1)", async () => {
-    const image = await surface.draw(
-      <>
-        <Fill color="white" />
-        <Group opacity={0.5}>
-          <Fill color="rgba(0, 0, 255, 0.5)" />
-        </Group>
-      </>
-    );
-    checkImage(image, "snapshots/drawings/violet.png");
-  });
-  it("Should multiply multiply the color opacity (2)", async () => {
-    const image = await surface.draw(
-      <>
-        <Fill color="white" />
-        <Group opacity={0.5}>
-          <Group opacity={0.5}>
-            <Fill color="blue" />
-          </Group>
-        </Group>
-      </>
-    );
-    checkImage(image, "snapshots/drawings/violet.png");
-  });
-  it("Should multiply the opacity to 0", async () => {
-    const { rect, rrect } = importSkia();
-    const { width } = surface;
-    const r = width * 0.5;
-    const image = await surface.draw(
-      <Group>
-        <Fill color="lightblue" />
-        <Group opacity={0}>
-          <RoundedRect
-            rect={rrect(rect(0, 0, r, r), r, r)}
-            color="rgba(0, 0, 0, 0.2)"
-          />
-          <RoundedRect
-            rect={rrect(rect(0, 0, r / 2, r / 2), r, r)}
-            color="white"
-          />
-        </Group>
-      </Group>
-    );
-    checkImage(image, "snapshots/drawings/opacity-multiplication.png");
-  });
-  it("Should build a reference result for the opacity", () => {
-    const { surface: ckSurface, canvas, Skia } = setupSkia(wWidth, wHeight);
-    const { rect, rrect } = importSkia();
-    const p1 = Skia.Paint();
-    const r = wWidth * 0.5;
-
-    p1.setColor(Skia.Color("lightblue"));
-    p1.setAlphaf(0.5);
-    canvas.drawPaint(p1);
-
-    const p2 = Skia.Paint();
-    p2.setColor(Skia.Color("rgba(0, 0, 0, 1)"));
-    p2.setAlphaf(0.2 * 0.5 * 0.5);
-    canvas.drawRRect(rrect(rect(0, 0, r, r), r, r), p2);
-
-    const p3 = Skia.Paint();
-    p3.setColor(Skia.Color("white"));
-    p3.setAlphaf(0.5 * 0.5);
-    canvas.drawRRect(rrect(rect(0, 0, r / 2, r / 2), r, r), p3);
-
-    processResult(ckSurface, "snapshots/drawings/opacity-multiplication2.png");
-  });
-  it("Should multiply the opacity to 0.25", async () => {
-    const { rect, rrect } = importSkia();
-    const { width } = surface;
-    const r = width * 0.5;
-    const image = await surface.draw(
-      <Group opacity={0.5}>
-        <Fill color="lightblue" />
-        <Group opacity={0.5}>
-          <RoundedRect
-            rect={rrect(rect(0, 0, r, r), r, r)}
-            color="rgba(0, 0, 0, 0.2)"
-          />
-          <RoundedRect
-            rect={rrect(rect(0, 0, r / 2, r / 2), r, r)}
-            color="white"
-          />
-        </Group>
-      </Group>
-    );
-    checkImage(image, "snapshots/drawings/opacity-multiplication2.png");
-  });
-  it("Should build a reference result for shader opacity", () => {
-    const { surface: ckSurface, Skia, canvas } = setupSkia(wWidth, wHeight);
-    canvas.drawColor(Skia.Color("white"));
-    const paint = Skia.Paint();
-    paint.setShader(Skia.Shader.MakeColor(Skia.Color("lightblue")));
-    paint.setAlphaf(0.5);
-    canvas.drawPaint(paint);
-    processResult(ckSurface, "snapshots/drawings/shader-opacity-reference.png");
-  });
-  it("Should set shader opacity (1)", async () => {
-    let image = await surface.draw(
-      <>
-        <Fill color="white" />
-        <Group opacity={0.5}>
-          <ColorShader color="lightblue" />
-          <Fill />
-        </Group>
-      </>
-    );
-    checkImage(image, "snapshots/drawings/shader-opacity-reference.png");
-    image = await surface.draw(
-      <>
-        <Fill color="white" />
-        <Fill opacity={0.5}>
-          <ColorShader color="lightblue" />
-        </Fill>
-      </>
-    );
-    checkImage(image, "snapshots/drawings/shader-opacity-reference.png");
-  });
-  it("Should multiply the opacity to 0.25 using a Shader", async () => {
-    const { rect, rrect } = importSkia();
-    const { width } = surface;
-    const r = width * 0.5;
-    const image = await surface.draw(
-      <Group opacity={0.5}>
-        <Fill color="lightblue" />
-        <Group opacity={0.5}>
-          <RoundedRect rect={rrect(rect(0, 0, r, r), r, r)} opacity={0.2}>
-            <ColorShader color="black" />
-          </RoundedRect>
-          <RoundedRect
-            rect={rrect(rect(0, 0, r / 2, r / 2), r, r)}
-            color="white"
-          />
-        </Group>
-      </Group>
-    );
-    checkImage(image, "snapshots/drawings/opacity-multiplication2.png");
-  });
-  it("Build reference result (2)", () => {
-    const {
-      surface: ckSurface,
-      Skia,
-      canvas,
-      width,
-      height,
-    } = setupSkia(wWidth, wHeight);
-    const { oslo } = images;
-    canvas.drawColor(Skia.Color("lightblue"));
-    const paint = Skia.Paint();
-    paint.setAlphaf(0.5);
-    const { src, dst } = fitRects(
-      "cover",
-      {
-        x: 0,
-        y: 0,
-        width: oslo.width(),
-        height: oslo.height(),
-      },
-      { x: 0, y: 0, width, height }
-    );
-    canvas.drawImageRect(oslo, src, dst, paint);
-    processResult(ckSurface, "snapshots/drawings/opacity-image.png");
-  });
-  it("Should apply opacity to an image (1)", async () => {
-    const { oslo } = images;
-    const { width, height } = surface;
-    const img = await surface.draw(
-      <Group>
-        <Fill color="lightblue" />
-        <Group opacity={0.5}>
-          <Image
-            image={oslo}
-            x={0}
-            y={0}
-            width={width}
-            height={height}
-            fit="cover"
-          />
-        </Group>
-      </Group>
-    );
-    checkImage(img, "snapshots/drawings/opacity-image.png");
-  });
-  it("Should apply opacity to an image (2)", async () => {
-    const { oslo } = images;
-    const {} = importSkia();
-    const { width, height } = surface;
-    const img = await surface.draw(
-      <Group>
-        <Fill color="lightblue" />
-        <Image
-          opacity={0.5}
-          image={oslo}
-          x={0}
-          y={0}
-          width={width}
-          height={height}
-          fit="cover"
-        />
-      </Group>
-    );
-    checkImage(img, "snapshots/drawings/opacity-image.png");
-  });
-  it("Should apply opacity to an image shader (1)", async () => {
-    const { oslo } = images;
-    const { width, height } = surface;
-    const img = await surface.draw(
-      <Group>
-        <Fill color="lightblue" />
-        <Fill opacity={0.5}>
-          <ImageShader
-            image={oslo}
-            x={0}
-            y={0}
-            width={width}
-            height={height}
-            fit="cover"
-          />
-        </Fill>
-      </Group>
-    );
-    checkImage(img, "snapshots/drawings/opacity-image.png");
-  });
-  it("Should apply opacity to an image shader (2)", async () => {
-    const { oslo } = images;
-    const {} = importSkia();
-    const { width, height } = surface;
-    const img = await surface.draw(
-      <Group>
-        <Fill color="lightblue" />
-        <Group opacity={0.5}>
-          <Fill>
-            <ImageShader
-              image={oslo}
-              x={0}
-              y={0}
-              width={width}
-              height={height}
-              fit="cover"
-            />
-          </Fill>
-        </Group>
-      </Group>
-    );
-    checkImage(img, "snapshots/drawings/opacity-image.png");
-  });
-  it("Should apply opacity on a layer (1)", async () => {
-    const {} = importSkia();
-    const img = await surface.draw(
-      <Group>
-        <Group layer={<Paint opacity={0.5} />}>
-          <Fill color="lightblue" />
-        </Group>
-      </Group>
-    );
-    checkImage(img, "snapshots/drawings/semi-transparent-layer.png");
-  });
-  it("Should apply opacity on a layer (2)", async () => {
-    const {} = importSkia();
-    const img = await surface.draw(
-      <Group>
-        <Group layer={<Paint opacity={0} />}>
-          <Fill color="lightblue" />
-        </Group>
-      </Group>
-    );
-    checkImage(img, "snapshots/drawings/transparent-layer.png");
-  });
-});

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

@@ -1,230 +0,0 @@
-import React from "react";
-
-import { surface, importSkia } from "../setup";
-import {
-  Circle,
-  Fill,
-  Group,
-  LinearGradient,
-  Paint,
-  Path,
-  SweepGradient,
-} from "../../components";
-import { checkImage, docPath } from "../../../__tests__/setup";
-import { fitbox } from "../../components/shapes/FitBox";
-
-const blendModes = [
-  "clear",
-  "src",
-  "dst",
-  "srcOver",
-  "dstOver",
-  "srcIn",
-  "dstIn",
-  "srcOut",
-  "dstOut",
-  "srcATop",
-  "dstATop",
-  "xor",
-  "plus",
-  "modulate",
-  "screen",
-  "overlay",
-  "darken",
-  "lighten",
-  "colorDodge",
-  "colorBurn",
-  "hardLight",
-  "softLight",
-  "difference",
-  "exclusion",
-  "multiply",
-  "hue",
-  "saturation",
-  "color",
-  "luminosity",
-] as const;
-
-const SIZE = 32;
-const COLS = 256 / SIZE;
-
-describe("Paint", () => {
-  it("should interpret the #rrggbbaa correctly", async () => {
-    const { width, height } = surface;
-    const { rect } = importSkia();
-    const image = await surface.draw(
-      <>
-        <Group clip={rect(0, 0, width / 2, height)}>
-          <Fill color="#ff000079" />
-        </Group>
-        <Group clip={rect(width / 2, 0, width / 2, height)}>
-          <Fill color="#ff000080" />
-        </Group>
-      </>
-    );
-    checkImage(image, "snapshots/paint/colors.png");
-  });
-  it("should accept a paint object as property", async () => {
-    const { width, height } = surface;
-    const { Skia } = importSkia();
-    const paint = Skia.Paint();
-    paint.setColor(Skia.Color("lightblue"));
-    const image = await surface.draw(
-      <Group>
-        <Circle
-          cx={width / 2}
-          cy={height / 2}
-          r={width / 2}
-          paint={paint}
-          color="red"
-        />
-      </Group>
-    );
-    checkImage(image, "snapshots/paint/circle.png");
-  });
-  it("should accept a paint object as path property", async () => {
-    const { Skia } = importSkia();
-    const paint = Skia.Paint();
-    paint.setColor(Skia.Color("lightblue"));
-    const image = await surface.draw(
-      <Group>
-        <Path path="M0 0h100v100H0z" paint={paint} color="red" />
-      </Group>
-    );
-    checkImage(image, "snapshots/paint/path-paint.png");
-  });
-  it("should display blend modes properly", async () => {
-    const { Skia, rect } = importSkia();
-    const src = Skia.Path.MakeFromSVGString(
-      [
-        "M170.699 148.614C135.228 184.085 100.799 213.726 74.0057 232.813C90.1873 241.166 108.534 245.913 127.998 245.913C193.121 245.913 245.909 193.124 245.909 128.001C245.909 110.165 241.926 93.2652 234.837 78.1096C217.359 99.6154 195.456 123.859 170.699 148.615V148.614Z",
-        "M254.299 1.69725C247.995 -4.60656 225.09 7.01991 194.111 30.4188C175.254 17.6079 152.513 10.089 127.998 10.089C62.8758 10.089 10.0869 62.8778 10.0869 128C10.0869 152.517 17.6079 175.254 30.4188 194.113C7.01991 225.094 -4.60656 248.001 1.69725 254.301C13.1117 265.715 78.9083 218.421 148.663 148.666C218.418 78.9109 265.715 13.1111 254.298 1.69986L254.299 1.69725Z",
-      ].join(" ")
-    )!;
-    const dst = Skia.Path.MakeFromSVGString(
-      [
-        "M3.75337 3.75477C10.8647 -3.35674 92.9919 -5.28784 142.454 44.1778C154.016 55.7403 163.904 67.9247 171.948 80.1734L208.991 81.7669L256 128.773L195.968 145.267C196.467 160.332 192.34 173.419 182.882 182.88C173.423 192.338 160.334 196.467 145.27 195.967L128.776 256L81.7688 208.991L80.1773 171.946C67.9284 163.902 55.7442 154.012 44.1825 142.451C-5.28603 92.9918 -3.359 10.8662 3.75637 3.75272L3.75337 3.75477ZM48.1571 79.8283C56.9032 88.5745 71.0812 88.5745 79.8252 79.8283C88.5712 71.0821 88.5712 56.9038 79.8252 48.1595C71.0791 39.4133 56.9012 39.4133 48.1571 48.1595C39.4111 56.9038 39.4111 71.0841 48.1571 79.8283Z",
-        "M195.01 222.191C184.687 211.867 183.417 199.108 191.258 191.264C199.098 183.425 211.857 184.692 222.184 195.017C235.86 208.692 242.751 238.822 240.785 240.789C238.817 242.759 208.688 235.867 195.01 222.191Z",
-      ].join(" ")
-    )!;
-    expect(src).toBeDefined();
-    expect(dst).toBeDefined();
-    const srcBox = src.computeTightBounds();
-    const dstBox = dst.computeTightBounds();
-    const img = await surface.draw(
-      <>
-        {blendModes.map((blendMode, i) => {
-          return (
-            <Group
-              transform={[
-                { translateX: SIZE * (i % COLS) },
-                { translateY: SIZE * Math.floor(i / COLS) },
-              ]}
-              key={blendMode}
-              layer
-            >
-              <Path
-                path={dst}
-                transform={fitbox("contain", dstBox, rect(0, 0, SIZE, SIZE))}
-                color="pink"
-              />
-              <Group layer={<Paint blendMode={blendMode} />}>
-                <Path
-                  path={src}
-                  color="lightblue"
-                  transform={fitbox("contain", srcBox, rect(0, 0, SIZE, SIZE))}
-                />
-              </Group>
-            </Group>
-          );
-        })}
-      </>
-    );
-    checkImage(img, "snapshots/paint/blend-mode.png");
-  });
-  it("Dithering", async () => {
-    const { height } = surface;
-    const { vec } = importSkia();
-    const c1 = "#202225ff";
-    const c2 = "#141619FF";
-    async function drawGradientWithDither(dither: boolean) {
-      return surface.draw(
-        <Fill dither={dither}>
-          <LinearGradient
-            start={vec(0, 0)}
-            end={vec(0, height)}
-            colors={[c1, c2]}
-          />
-        </Fill>
-      );
-    }
-    const withDither = await drawGradientWithDither(true);
-    const withoutDither = await drawGradientWithDither(false);
-    checkImage(withDither, "snapshots/paint/dither.png");
-    checkImage(withoutDither, "snapshots/paint/without-dither.png");
-    checkImage(withoutDither, "snapshots/paint/dither.png", {
-      shouldFail: true,
-      threshold: 0,
-    });
-  });
-  it("should override colors", async () => {
-    const { vec } = importSkia();
-    const strokeWidth = 10;
-    const { width, height } = surface;
-    const c = vec(width / 2, height / 2);
-    const r = (width - strokeWidth) / 2;
-    const result = await surface.draw(
-      <>
-        <Circle c={c} r={r} color="transparent">
-          <Paint color="lightblue" />
-          <Paint color="#adbce6" style="stroke" strokeWidth={strokeWidth} />
-          <Paint color="#ade6d8" style="stroke" strokeWidth={strokeWidth / 2} />
-        </Circle>
-      </>
-    );
-    checkImage(result, docPath("paint/stroke.png"));
-  });
-  it("colors don't influence opacity (1)", async () => {
-    const { vec } = importSkia();
-    const strokeWidth = 10;
-    const { width, height } = surface;
-    const c = vec(width / 2, height / 2);
-    const r = (width - strokeWidth) / 2;
-    const result = await surface.draw(
-      <Group color="rgba(0,0,0,0.5)">
-        <Circle c={c} r={r} color="lightblue" />
-      </Group>
-    );
-    checkImage(result, docPath("paint/opaque-circle.png"));
-  });
-  it("colors don't influence opacity (2)", async () => {
-    const { vec } = importSkia();
-    const strokeWidth = 10;
-    const { width, height } = surface;
-    const c = vec(width / 2, height / 2);
-    const r = (width - strokeWidth) / 2;
-    const result = await surface.draw(
-      <Group opacity={0.5}>
-        <Circle c={c} r={r} color="lightblue" />
-      </Group>
-    );
-    checkImage(result, docPath("paint/semi-transparent-circle.png"));
-  });
-  it("test paint", async () => {
-    const { vec, Skia } = importSkia();
-    const strokeWidth = 10;
-    const { width, height } = surface;
-    const c = vec(width / 2, height / 2);
-    const r = (width - strokeWidth) / 2;
-    const path = Skia.Path.Make();
-    path.addCircle(c.x, c.y, r);
-    const result = await surface.draw(
-      <Path path={path} color="transparent">
-        <Paint style="stroke" strokeWidth={20} strokeCap="round">
-          <SweepGradient c={c} colors={["#64BC65", "#4488ff"]} />
-        </Paint>
-      </Path>
-    );
-    checkImage(result, docPath("paint/test-paint.png"));
-  });
-});