@shopify/react-native-skia 1.8.0 → 1.8.2

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

@@ -1,235 +0,0 @@
-/* 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

@@ -1,138 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-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/nodes/Node.ts

@@ -1,8 +0,0 @@
-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

@@ -1,79 +0,0 @@
-import { enumKey } from "../../dom/nodes";
-import type {
-  BlendColorFilterProps,
-  LerpColorFilterProps,
-  MatrixColorFilterProps,
-} from "../../dom/types";
-import type { SkColorFilter } from "../../skia/types";
-import { BlendMode } from "../../skia/types";
-import type { DeclarationContext } from "../DeclarationContext";
-
-export const composeColorFilters = (
-  ctx: DeclarationContext,
-  cf: SkColorFilter,
-  processChildren: () => void
-) => {
-  "worklet";
-  const { Skia } = ctx;
-  ctx.colorFilters.save();
-  processChildren();
-  const cf1 = ctx.colorFilters.popAllAsOne();
-  ctx.colorFilters.restore();
-  ctx.colorFilters.push(cf1 ? Skia.ColorFilter.MakeCompose(cf, cf1) : cf);
-};
-
-export const makeBlendColorFilter = (
-  ctx: DeclarationContext,
-  props: BlendColorFilterProps
-) => {
-  "worklet";
-  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) => {
-  "worklet";
-  const cf = ctx.Skia.ColorFilter.MakeSRGBToLinearGamma();
-  return cf;
-};
-
-export const makeLinearToSRGBGammaColorFilter = (ctx: DeclarationContext) => {
-  "worklet";
-  const cf = ctx.Skia.ColorFilter.MakeLinearToSRGBGamma();
-  return cf;
-};
-
-export const declareLerpColorFilter = (
-  ctx: DeclarationContext,
-  props: LerpColorFilterProps
-) => {
-  "worklet";
-  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
-) => {
-  "worklet";
-  const { matrix } = props;
-  const cf = ctx.Skia.ColorFilter.MakeMatrix(matrix);
-  return cf;
-};
-
-export const makeLumaColorFilter = (ctx: DeclarationContext) => {
-  "worklet";
-  const cf = ctx.Skia.ColorFilter.MakeLumaColorFilter();
-  return cf;
-};