@shopify/react-native-skia 1.3.12 → 1.4.0

package/src/dom/__tests__/Compose.spec.tsx

@@ -0,0 +1,42 @@
+import {
+  importSkia,
+  width,
+  height,
+  loadImage,
+  getSkDOM,
+} from "../../renderer/__tests__/setup";
+import { setupSkia } from "../../skia/__tests__/setup";
+import { docPath, processResult } from "../../__tests__/setup";
+import { JsiDrawingContext } from "../types";
+
+describe("Compose", () => {
+  it("should compose image filters", () => {
+    const size = width;
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, rect, vec } = importSkia();
+    const Sk = getSkDOM();
+    const image = loadImage("skia/__tests__/assets/oslo.jpg");
+
+    const root = Sk.Group();
+    const img = Sk.Image({
+      image,
+      fit: "cover",
+      rect: rect(0, 0, size, size),
+    });
+    root.addChild(img);
+
+    const matrix = [
+      -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69,
+      -0.703, 0, 0, 0, 0, 0, 1, 0,
+    ];
+    const cf = Sk.MatrixColorFilter({ matrix });
+
+    const blur = Sk.BlurImageFilter({ blur: vec(10, 10), mode: "decal" });
+    blur.addChild(cf);
+    root.addChild(blur);
+
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, docPath("image-filters/composing.png"));
+  });
+});

package/src/dom/__tests__/Demos.spec.tsx

@@ -0,0 +1,145 @@
+import {
+  importSkia,
+  width,
+  height,
+  getSkDOM,
+} from "../../renderer/__tests__/setup";
+import { setupSkia } from "../../skia/__tests__/setup";
+import { processResult } from "../../__tests__/setup";
+import { JsiDrawingContext } from "../types";
+
+describe("Drawings", () => {
+  it("Apple Breathe Demo", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, vec, polar2Canvas } = importSkia();
+    const Sk = getSkDOM();
+    const c = vec(width / 2, height / 2);
+    const c1 = Skia.Color("#61bea2");
+    const c2 = Skia.Color("#529ca0");
+    const R = width / 4;
+    const color = Skia.Color("rgb(36,43,56)");
+    const root = Sk.Group({ color });
+    root.addChild(Sk.Fill());
+    const rings = Sk.Group({
+      blendMode: "screen",
+    });
+    const blur = Sk.BlurMaskFilter({
+      blur: 10,
+      style: "solid",
+      respectCTM: true,
+    });
+    rings.addChild(blur);
+    for (let i = 0; i < 6; i++) {
+      const theta = (i * (2 * Math.PI)) / 6;
+      const matrix = Skia.Matrix();
+      const { x, y } = polar2Canvas({ theta, radius: R }, { x: 0, y: 0 });
+      matrix.translate(x, y);
+      const ring = Sk.Group({
+        matrix,
+        color: i % 2 ? c1 : c2,
+      });
+      ring.addChild(Sk.Circle({ c, r: R }));
+      rings.addChild(ring);
+    }
+    root.addChild(rings);
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/demos/breathe.png");
+  });
+
+  it("Apple Breathe Demo with the new API", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, vec, polar2Canvas } = importSkia();
+    const Sk = getSkDOM();
+    const c = vec(width / 2, height / 2);
+    const c1 = Skia.Color("#61bea2");
+    const c2 = Skia.Color("#529ca0");
+    const R = width / 4;
+    const color = Skia.Color("rgb(36,43,56)");
+    const root = Sk.Group({ color });
+    root.addChild(Sk.Fill());
+    const rings = Sk.Group({
+      blendMode: "screen",
+    });
+    const blur = Sk.BlurMaskFilter({
+      blur: 10,
+      style: "solid",
+      respectCTM: true,
+    });
+    rings.addChild(blur);
+    for (let i = 0; i < 6; i++) {
+      const theta = (i * (2 * Math.PI)) / 6;
+      const matrix = Skia.Matrix();
+      const { x, y } = polar2Canvas({ theta, radius: R }, { x: 0, y: 0 });
+      matrix.translate(x, y);
+      rings.addChild(Sk.Circle({ c, r: R, matrix, color: i % 2 ? c1 : c2 }));
+    }
+    root.addChild(rings);
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/demos/breathe.png");
+  });
+
+  it("Apple Breathe Demo with animations", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, vec, polar2Canvas } = importSkia();
+    const Sk = getSkDOM();
+    const c = vec(width / 2, height / 2);
+    const c1 = Skia.Color("#61bea2");
+    const c2 = Skia.Color("#529ca0");
+    const R = width / 4;
+    const color = Skia.Color("rgb(36,43,56)");
+    const root = Sk.Group({ color });
+    root.addChild(Sk.Fill());
+    const rings = Sk.Group({
+      blendMode: "screen",
+    });
+    const blur = Sk.BlurMaskFilter({
+      blur: 10,
+      style: "solid",
+      respectCTM: true,
+    });
+    rings.addChild(blur);
+    for (let i = 0; i < 6; i++) {
+      const theta = (i * (2 * Math.PI)) / 6;
+      const matrix = Skia.Matrix();
+      const { x, y } = polar2Canvas({ theta, radius: R }, { x: 0, y: 0 });
+      matrix.translate(x, y);
+      rings.addChild(Sk.Circle({ c, r: R, matrix, color: i % 2 ? c1 : c2 }));
+    }
+    root.addChild(rings);
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/demos/breathe.png");
+
+    blur.setProp("blur", 0);
+    root.setProp("transform", [
+      { translateX: c.x },
+      { translateY: c.y },
+      { rotate: Math.PI / 4 },
+      { translateX: -c.x },
+      { translateY: -c.y },
+    ]);
+    for (let i = 0; i < 6; i++) {
+      const theta = (i * (2 * Math.PI)) / 6;
+      const matrix = Skia.Matrix();
+      const scale = 0.5;
+      const { x, y } = polar2Canvas({ theta, radius: 0.5 * R }, { x: 0, y: 0 });
+      matrix.translate(x, y);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const ring = rings.children()[i + 1] as any;
+      ring.setProp("matrix", undefined);
+      ring.setProp("transform", [
+        { translateX: c.x },
+        { translateY: c.y },
+        { translateX: x },
+        { translateY: y },
+        { scale },
+        { translateX: -c.x },
+        { translateY: -c.y },
+      ]);
+    }
+    root.render(ctx);
+    processResult(surface, "snapshots/demos/breathe2.png");
+  });
+});

package/src/dom/__tests__/DrawingContext.spec.tsx

@@ -0,0 +1,99 @@
+import {
+  importSkia,
+  width,
+  height,
+  getSkDOM,
+} from "../../renderer/__tests__/setup";
+import { setupSkia } from "../../skia/__tests__/setup";
+import type { Node, PaintProps } from "../types";
+import { JsiDrawingContext } from "../types";
+
+describe("DrawingContext", () => {
+  it("should create contextes properly", () => {
+    const { canvas } = setupSkia(width, height);
+    const { Skia } = importSkia();
+    const Sk = getSkDOM();
+    const group = Sk.Group({ color: "red" });
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    const rootPaint = ctx.paint;
+    expect(rootPaint).toBeDefined();
+
+    const shouldRestore = ctx.saveAndConcat(group);
+    expect(shouldRestore).toBe(true);
+    expect(ctx.paint).not.toBe(rootPaint);
+    expect(ctx.paint.getColor()).toEqual(Skia.Color("red"));
+    ctx.restore();
+
+    expect(ctx.paint).toBe(rootPaint);
+  });
+
+  it("should only create a context if necessary", () => {
+    const { canvas } = setupSkia(width, height);
+    const { Skia } = importSkia();
+    const Sk = getSkDOM();
+    const group = Sk.Group();
+    group.addChild(Sk.Group({ color: "red" }));
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    const rootPaint = ctx.paint;
+    expect(rootPaint).toBeDefined();
+
+    let shouldRestore = ctx.saveAndConcat(group);
+    expect(shouldRestore).toBe(false);
+    expect(ctx.paint).toBe(rootPaint);
+    expect(ctx.paint.getColor()).toEqual(Skia.Color("black"));
+
+    shouldRestore = ctx.saveAndConcat(group.children()[0] as Node<PaintProps>);
+    expect(shouldRestore).toBe(true);
+    expect(ctx.paint).not.toBe(rootPaint);
+    expect(ctx.paint.getColor()).toEqual(Skia.Color("red"));
+  });
+
+  it("should only visit declarations if needed", () => {
+    const { canvas } = setupSkia(width, height);
+    const { Skia } = importSkia();
+    const Sk = getSkDOM();
+    const group = Sk.Group({ color: "red" });
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    const rootPaint = ctx.paint;
+    expect(rootPaint).toBeDefined();
+
+    ctx.saveAndConcat(group);
+    const cachedPaint = ctx.paint;
+    ctx.restore();
+
+    ctx.saveAndConcat(group);
+    expect(ctx.paint).not.toBe(cachedPaint);
+    ctx.restore();
+
+    ctx.saveAndConcat(group, cachedPaint);
+    expect(ctx.paint).toBe(cachedPaint);
+    ctx.restore();
+  });
+
+  it("should keep a paint stable if the parent doesn't change", () => {
+    const { canvas } = setupSkia(width, height);
+    const { Skia } = importSkia();
+    const Sk = getSkDOM();
+    const root = Sk.Group({});
+    const child = Sk.Group({ color: "red" });
+    root.addChild(child);
+
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    const rootPaint = ctx.paint;
+    expect(rootPaint).toBeDefined();
+
+    ctx.saveAndConcat(root);
+
+    ctx.saveAndConcat(child);
+    const p1 = ctx.paint;
+    ctx.restore();
+
+    ctx.saveAndConcat(child, p1);
+    const p2 = ctx.paint;
+    ctx.restore();
+
+    ctx.restore();
+
+    expect(p1).toBe(p2);
+  });
+});