@shopify/react-native-skia 1.7.5 → 1.7.7

package/src/sksg/__tests__/Declarations.spec.tsx

@@ -0,0 +1,235 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { NodeType } from "../../dom/types";
+import type { Node } from "../nodes";
+
+import type { SkColorFilter } from "./MockDeclaration";
+import {
+  compose,
+  DeclarationContext,
+  DeclarationType,
+} from "./MockDeclaration";
+
+const makeSRGBToLinearGammaColorFilter = () => ({
+  type: DeclarationType.ColorFilter as const,
+  tag: "SRGBToLinearGamma",
+});
+
+const makeBlendColorFilter = () => ({
+  type: DeclarationType.ColorFilter as const,
+  tag: "Blend",
+});
+
+const makeMatrixColorFilter = () => ({
+  type: DeclarationType.ColorFilter as const,
+  tag: "Matrix",
+});
+
+const makeLerpColorFilter = (children: SkColorFilter[]) => ({
+  type: DeclarationType.ColorFilter as const,
+  tag: `Lerp(0.5, ${children[0].tag}, ${children[1].tag})`,
+});
+
+const composeColorFilters = (
+  ctx: DeclarationContext,
+  node: Node<any>,
+  cf: SkColorFilter
+) => {
+  ctx.save();
+  node.children.forEach((child) => processContext(ctx, child));
+  const cf1 = ctx.colorFilters.popAllAsOne();
+  ctx.restore();
+  ctx.colorFilters.push(cf1 ? compose(cf, cf1) : cf);
+};
+
+const processContext = (ctx: DeclarationContext, node: Node<any>) => {
+  switch (node.type) {
+    case NodeType.Group:
+      node.children.forEach((child) => processContext(ctx, child));
+      break;
+    case NodeType.SRGBToLinearGammaColorFilter: {
+      const cf = makeSRGBToLinearGammaColorFilter();
+      composeColorFilters(ctx, node, cf);
+      break;
+    }
+    case NodeType.BlendColorFilter: {
+      const cf = makeBlendColorFilter();
+      composeColorFilters(ctx, node, cf);
+      break;
+    }
+    case NodeType.MatrixColorFilter: {
+      const cf = makeMatrixColorFilter();
+      composeColorFilters(ctx, node, cf);
+      break;
+    }
+    case NodeType.LerpColorFilter: {
+      node.children.forEach((child) => processContext(ctx, child));
+      const cf = makeLerpColorFilter(ctx.colorFilters.popAll());
+      ctx.colorFilters.push(cf);
+      break;
+    }
+  }
+};
+
+describe("Declarations", () => {
+  it("should create a filter from a tree 1", () => {
+    const tree: Node = {
+      type: NodeType.Group,
+      isDeclaration: false,
+      props: {},
+      children: [
+        {
+          type: NodeType.SRGBToLinearGammaColorFilter,
+          isDeclaration: true,
+          props: {},
+          children: [
+            {
+              type: NodeType.BlendColorFilter,
+              isDeclaration: true,
+              props: {
+                color: "lightblue",
+                mode: "srcIn",
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    };
+    const ctx = new DeclarationContext();
+    processContext(ctx, tree);
+    const cf = ctx.colorFilters.popAllAsOne();
+    expect(cf).toBeDefined();
+    expect(cf!.tag).toBe("Compose(SRGBToLinearGamma, Blend)");
+  });
+
+  it("should create a filter from a tree 2", () => {
+    const tree: Node = {
+      type: NodeType.Group,
+      isDeclaration: false,
+      props: {},
+      children: [
+        {
+          type: NodeType.LerpColorFilter,
+          isDeclaration: true,
+          props: {
+            t: 0.5,
+          },
+          children: [
+            {
+              type: NodeType.MatrixColorFilter,
+              isDeclaration: true,
+              props: {
+                values: [],
+              },
+              children: [],
+            },
+            {
+              type: NodeType.MatrixColorFilter,
+              isDeclaration: true,
+              props: {
+                values: [],
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    };
+
+    const ctx = new DeclarationContext();
+    processContext(ctx, tree);
+    const cf = ctx.colorFilters.popAllAsOne();
+    expect(cf).toBeDefined();
+    expect(cf!.tag).toBe("Lerp(0.5, Matrix, Matrix)");
+  });
+
+  it("should create a filter from a tree 3", () => {
+    const tree: Node = {
+      type: NodeType.Group,
+      isDeclaration: false,
+      props: {},
+      children: [
+        {
+          type: NodeType.MatrixColorFilter,
+          isDeclaration: true,
+          props: {
+            value: [],
+          },
+          children: [],
+        },
+        {
+          type: NodeType.SRGBToLinearGammaColorFilter,
+          isDeclaration: true,
+          props: {},
+          children: [
+            {
+              type: NodeType.LerpColorFilter,
+              isDeclaration: true,
+              props: {
+                t: 0.5,
+              },
+              children: [
+                {
+                  type: NodeType.MatrixColorFilter,
+                  isDeclaration: true,
+                  props: {
+                    values: [],
+                  },
+                  children: [],
+                },
+                {
+                  type: NodeType.MatrixColorFilter,
+                  isDeclaration: true,
+                  props: {
+                    values: [],
+                  },
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+
+    const ctx = new DeclarationContext();
+    processContext(ctx, tree);
+    const cf = ctx.colorFilters.popAllAsOne();
+    expect(cf).toBeDefined();
+    expect(cf!.tag).toBe(
+      "Compose(Matrix, Compose(SRGBToLinearGamma, Lerp(0.5, Matrix, Matrix)))"
+    );
+  });
+
+  it("should create a filter from a tree 4", () => {
+    const tree: Node = {
+      type: NodeType.Group,
+      isDeclaration: false,
+      props: {},
+      children: [
+        {
+          type: NodeType.MatrixColorFilter,
+          isDeclaration: true,
+          props: {
+            value: [],
+          },
+          children: [
+            {
+              type: NodeType.MatrixColorFilter,
+              isDeclaration: true,
+              props: {
+                value: [],
+              },
+              children: [],
+            },
+          ],
+        },
+      ],
+    };
+    const ctx = new DeclarationContext();
+    processContext(ctx, tree);
+    const cf = ctx.colorFilters.popAllAsOne();
+    expect(cf).toBeDefined();
+    expect(cf!.tag).toBe("Compose(Matrix, Matrix)");
+  });
+});

package/src/sksg/__tests__/MockDeclaration.ts

@@ -0,0 +1,140 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"worklet";
+
+export enum DeclarationType {
+  ColorFilter,
+  ImageFilter,
+  Shader,
+  MaskFilter,
+  PathEffect,
+  Paint,
+}
+
+interface Filter {
+  tag: string;
+}
+
+export interface SkColorFilter extends Filter {
+  type: DeclarationType.ColorFilter;
+}
+
+interface SkImageFilter extends Filter {
+  type: DeclarationType.ImageFilter;
+}
+
+interface SkShader extends Filter {
+  type: DeclarationType.Shader;
+}
+
+interface SkMaskFilter extends Filter {
+  type: DeclarationType.MaskFilter;
+}
+
+interface SkPathEffect extends Filter {
+  type: DeclarationType.PathEffect;
+}
+
+interface SkPaint extends Filter {
+  type: DeclarationType.Paint;
+}
+
+type Composer<T> = (outer: T, inner: T) => T;
+export const compose: any = <T extends Filter>(outer: T, inner: T) => ({
+  tag: `Compose(${outer.tag}, ${inner.tag})`,
+});
+
+export const composeDeclarations = <T>(filters: T[], composer: Composer<T>) => {
+  if (filters.length <= 1) {
+    return filters[0];
+  }
+  return filters.reverse().reduce((inner, outer) => {
+    if (!inner) {
+      return outer;
+    }
+    return composer(outer, inner);
+  });
+};
+
+class Declaration<T extends Filter> {
+  public decls: T[] = [];
+  public indexes = [0];
+  public composer?: Composer<T>;
+
+  constructor(composer?: Composer<T>) {
+    this.composer = composer;
+  }
+
+  private get index() {
+    return this.indexes[this.indexes.length - 1];
+  }
+
+  save() {
+    this.indexes.push(this.decls.length);
+  }
+
+  restore() {
+    this.indexes.pop();
+  }
+
+  pop() {
+    return this.decls.pop();
+  }
+
+  push(decl: T) {
+    this.decls.push(decl);
+  }
+
+  popAll() {
+    return this.decls.splice(this.index, this.decls.length - this.index);
+  }
+
+  popAllAsOne() {
+    if (this.decls.length === 0) {
+      return undefined;
+    }
+    if (!this.composer) {
+      throw new Error("No composer for this type of declaration");
+    }
+    const decls = this.popAll();
+    return composeDeclarations(decls, this.composer!);
+  }
+}
+
+export class DeclarationContext {
+  readonly paints: Declaration<SkPaint>;
+  readonly maskFilters: Declaration<SkMaskFilter>;
+  readonly shaders: Declaration<SkShader>;
+  readonly pathEffects: Declaration<SkPathEffect>;
+  readonly imageFilters: Declaration<SkImageFilter>;
+  readonly colorFilters: Declaration<SkColorFilter>;
+
+  constructor() {
+    const peComp: Composer<SkPathEffect> = compose;
+    const ifComp: Composer<SkImageFilter> = compose;
+    const cfComp: Composer<SkColorFilter> = compose;
+    this.paints = new Declaration<SkPaint>();
+    this.maskFilters = new Declaration<SkMaskFilter>();
+    this.shaders = new Declaration<SkShader>();
+    this.pathEffects = new Declaration<SkPathEffect>(peComp);
+    this.imageFilters = new Declaration<SkImageFilter>(ifComp);
+    this.colorFilters = new Declaration<SkColorFilter>(cfComp);
+  }
+
+  save() {
+    this.paints.save();
+    this.maskFilters.save();
+    this.shaders.save();
+    this.pathEffects.save();
+    this.imageFilters.save();
+    this.colorFilters.save();
+  }
+
+  restore() {
+    this.paints.restore();
+    this.maskFilters.restore();
+    this.shaders.restore();
+    this.pathEffects.restore();
+    this.imageFilters.restore();
+    this.colorFilters.restore();
+  }
+}

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

@@ -0,0 +1,148 @@
+import React from "react";
+
+import { importSkia } from "../../renderer/__tests__/setup";
+import { SkiaSGRoot } from "../Reconciler";
+import { checkImage } from "../../__tests__/setup";
+import { mix, polar2Canvas } from "../../renderer";
+
+interface RingProps {
+  index: number;
+  progress: number;
+  width: number;
+  height: number;
+  center: { x: number; y: number };
+}
+
+const Ring = ({ index, progress, width, center }: RingProps) => {
+  const c1 = "#61bea2";
+  const c2 = "#529ca0";
+  const R = width / 4;
+  const theta = (index * (2 * Math.PI)) / 6;
+  const transform = (() => {
+    const { x, y } = polar2Canvas(
+      { theta, radius: progress * R },
+      { x: 0, y: 0 }
+    );
+    const scale = mix(progress, 0.3, 1);
+    return [{ translateX: x }, { translateY: y }, { scale }];
+  })();
+
+  return (
+    <skCircle
+      c={center}
+      r={R}
+      color={index % 2 ? c1 : c2}
+      origin={center}
+      transform={transform}
+    />
+  );
+};
+
+describe("Simple", () => {
+  it("should have a simple render (1)", () => {
+    const { Skia } = importSkia();
+    const root = new SkiaSGRoot(Skia);
+    root.render(<skCircle r={128} color="cyan" />);
+    const surface = Skia.Surface.Make(768, 768)!;
+    expect(surface).toBeDefined();
+    const canvas = surface.getCanvas();
+    root.drawOnCanvas(canvas);
+    surface.flush();
+    const image = surface.makeImageSnapshot();
+    expect(image).toBeDefined();
+    checkImage(image, "snapshots/sksg/simple.png");
+  });
+  it("should have a simple render (2)", () => {
+    const { Skia } = importSkia();
+    const root = new SkiaSGRoot(Skia);
+    root.render(
+      <>
+        <skFill color="magenta" />
+        <skCircle r={128} cx={768 / 2} cy={768 / 2} color="cyan" />
+      </>
+    );
+    const surface = Skia.Surface.Make(768, 768)!;
+    expect(surface).toBeDefined();
+    const canvas = surface.getCanvas();
+    root.drawOnCanvas(canvas);
+    surface.flush();
+    const image = surface.makeImageSnapshot();
+    expect(image).toBeDefined();
+    checkImage(image, "snapshots/sksg/simple2.png");
+  });
+  it("simple demo", () => {
+    const { Skia } = importSkia();
+    const root = new SkiaSGRoot(Skia);
+    const width = 768;
+    const height = 768;
+    const center = { x: width / 2, y: height / 2 };
+    const progress = 0.5;
+    const transform = (() => [{ rotate: mix(progress, -Math.PI, 0) }])();
+    root.render(
+      <>
+        <skFill color="rgb(36,43,56)" />
+        <skGroup blendMode="screen" origin={center} transform={transform}>
+          <skBlurMaskFilter style="solid" blur={40} respectCTM={true} />
+          {new Array(6).fill(0).map((_, index) => {
+            return (
+              <Ring
+                key={index}
+                index={index}
+                progress={progress}
+                center={center}
+                width={width}
+                height={height}
+              />
+            );
+          })}
+        </skGroup>
+      </>
+    );
+    const surface = Skia.Surface.Make(width, height)!;
+    expect(surface).toBeDefined();
+    const canvas = surface.getCanvas();
+    root.drawOnCanvas(canvas);
+    surface.flush();
+    const image = surface.makeImageSnapshot();
+    expect(image).toBeDefined();
+    checkImage(image, "snapshots/sksg/breathe.png");
+  });
+
+  it("simple demo (2)", () => {
+    const { Skia } = importSkia();
+    const root = new SkiaSGRoot(Skia);
+    const width = 768;
+    const height = 768;
+    const center = { x: width / 2, y: height / 2 };
+    const progress = 0;
+    const transform = (() => [{ rotate: mix(progress, -Math.PI, 0) }])();
+    root.render(
+      <>
+        <skFill color="rgb(36,43,56)" />
+        <skGroup blendMode="screen" origin={center} transform={transform}>
+          <skBlurMaskFilter style="solid" blur={40} respectCTM={true} />
+          {new Array(6).fill(0).map((_, index) => {
+            return (
+              <Ring
+                key={index}
+                index={index}
+                progress={progress}
+                center={center}
+                width={width}
+                height={height}
+              />
+            );
+          })}
+        </skGroup>
+      </>
+    );
+    const surface = Skia.Surface.Make(width, height)!;
+    expect(surface).toBeDefined();
+    const canvas = surface.getCanvas();
+    root.drawOnCanvas(canvas);
+    surface.flush();
+    const image = surface.makeImageSnapshot();
+    expect(image).toBeDefined();
+    checkImage(image, "snapshots/sksg/breathe-0.png");
+  });
+});

package/src/sksg/nodes/Node.ts

@@ -0,0 +1,8 @@
+import type { NodeType } from "../../dom/types";
+
+export interface Node<Props = unknown> {
+  type: NodeType;
+  isDeclaration: boolean;
+  props: Props;
+  children: Node[];
+}

package/src/sksg/nodes/colorFilters.ts

@@ -0,0 +1,60 @@
+"worklet";
+
+import { enumKey } from "../../dom/nodes";
+import type {
+  BlendColorFilterProps,
+  DeclarationContext,
+  LerpColorFilterProps,
+  MatrixColorFilterProps,
+} from "../../dom/types";
+import { BlendMode } from "../../skia/types";
+
+export const makeBlendColorFilter = (
+  ctx: DeclarationContext,
+  props: BlendColorFilterProps
+) => {
+  const { mode } = props;
+  const color = ctx.Skia.Color(props.color);
+  const cf = ctx.Skia.ColorFilter.MakeBlend(color, BlendMode[enumKey(mode)]);
+  return cf;
+};
+
+export const makeSRGBToLinearGammaColorFilter = (ctx: DeclarationContext) => {
+  const cf = ctx.Skia.ColorFilter.MakeSRGBToLinearGamma();
+  return cf;
+};
+
+export const makeLinearToSRGBGammaColorFilter = (ctx: DeclarationContext) => {
+  const cf = ctx.Skia.ColorFilter.MakeLinearToSRGBGamma();
+  return cf;
+};
+
+export const declareLerpColorFilter = (
+  ctx: DeclarationContext,
+  props: LerpColorFilterProps
+) => {
+  const { t } = props;
+  const second = ctx.colorFilters.pop();
+  const first = ctx.colorFilters.pop();
+  if (!first || !second) {
+    throw new Error(
+      "LerpColorFilterNode: missing two color filters as children"
+    );
+  }
+  const cf = ctx.Skia.ColorFilter.MakeLerp(t, first, second);
+  ctx.colorFilters.push(cf);
+};
+
+export const makeMatrixColorFilter = (
+  ctx: DeclarationContext,
+  props: MatrixColorFilterProps
+) => {
+  const { matrix } = props;
+  const cf = ctx.Skia.ColorFilter.MakeMatrix(matrix);
+  return cf;
+};
+
+export const makeLumaColorFilter = (ctx: DeclarationContext) => {
+  const cf = ctx.Skia.ColorFilter.MakeLumaColorFilter();
+  return cf;
+};