@shopify/react-native-skia 0.1.147 → 0.1.148

package/src/dom/nodes/paint/ColorFilters.ts

@@ -0,0 +1,130 @@
+import { BlendMode } from "../../../skia/types";
+import type { SkColorFilter } from "../../../skia/types";
+import type { NodeContext } from "../Node";
+import { JsiDeclarationNode } from "../Node";
+import type {
+  BlendColorFilterProps,
+  MatrixColorFilterProps,
+  Node,
+} from "../../types";
+import { DeclarationType, NodeType } from "../../types";
+import { processColor } from "../datatypes";
+import { enumKey } from "../datatypes/Enum";
+import type { LerpColorFilterProps } from "../../types/ColorFilters";
+
+export abstract class ColorFilterDeclaration<
+  P,
+  Nullable extends null | never = never
+> extends JsiDeclarationNode<P, SkColorFilter, Nullable> {
+  constructor(ctx: NodeContext, type: NodeType, props: P) {
+    super(ctx, DeclarationType.ColorFilter, type, props);
+  }
+
+  addChild(child: Node<unknown>) {
+    if (!(child instanceof ColorFilterDeclaration)) {
+      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
+    }
+    super.addChild(child);
+  }
+
+  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {
+    if (!(child instanceof ColorFilterDeclaration)) {
+      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
+    }
+    super.insertChildBefore(child, before);
+  }
+
+  compose(filter: SkColorFilter) {
+    const children = this._children as ColorFilterDeclaration<unknown>[];
+    if (this._children.length === 0) {
+      return filter;
+    } else {
+      return this.Skia.ColorFilter.MakeCompose(
+        filter,
+        children.reduce<SkColorFilter | null>((acc, child) => {
+          if (acc === null) {
+            return child.materialize();
+          }
+          return this.Skia.ColorFilter.MakeCompose(acc, child.materialize());
+        }, null) as SkColorFilter
+      );
+    }
+  }
+}
+
+export class MatrixColorFilterNode extends ColorFilterDeclaration<MatrixColorFilterProps> {
+  constructor(ctx: NodeContext, props: MatrixColorFilterProps) {
+    super(ctx, NodeType.MatrixColorFilter, props);
+  }
+
+  materialize() {
+    const { matrix } = this.props;
+    const cf = this.Skia.ColorFilter.MakeMatrix(matrix);
+    return this.compose(cf);
+  }
+}
+
+export class BlendColorFilterNode extends ColorFilterDeclaration<BlendColorFilterProps> {
+  constructor(ctx: NodeContext, props: BlendColorFilterProps) {
+    super(ctx, NodeType.BlendColorFilter, props);
+  }
+
+  materialize() {
+    const { mode } = this.props;
+    const color = processColor(this.Skia, this.props.color, 1);
+    const cf = this.Skia.ColorFilter.MakeBlend(color, BlendMode[enumKey(mode)]);
+    return this.compose(cf);
+  }
+}
+
+export class LinearToSRGBGammaColorFilterNode extends ColorFilterDeclaration<null> {
+  constructor(ctx: NodeContext) {
+    super(ctx, NodeType.LinearToSRGBGammaColorFilter, null);
+  }
+
+  materialize() {
+    const cf = this.Skia.ColorFilter.MakeLinearToSRGBGamma();
+    return this.compose(cf);
+  }
+}
+
+export class SRGBToLinearGammaColorFilterNode extends ColorFilterDeclaration<null> {
+  constructor(ctx: NodeContext) {
+    super(ctx, NodeType.SRGBToLinearGammaColorFilter, null);
+  }
+
+  materialize() {
+    const cf = this.Skia.ColorFilter.MakeSRGBToLinearGamma();
+    return this.compose(cf);
+  }
+}
+
+export class LumaColorFilterNode extends ColorFilterDeclaration<null> {
+  constructor(ctx: NodeContext) {
+    super(ctx, NodeType.LumaColorFilter, null);
+  }
+
+  materialize() {
+    const cf = this.Skia.ColorFilter.MakeLumaColorFilter();
+    return this.compose(cf);
+  }
+}
+
+export class LerpColorFilterNode extends ColorFilterDeclaration<LerpColorFilterProps> {
+  constructor(ctx: NodeContext, props: LerpColorFilterProps) {
+    super(ctx, NodeType.LerpColorFilter, props);
+  }
+
+  materialize() {
+    const { t } = this.props;
+    const [first, second] = this.children() as JsiDeclarationNode<
+      unknown,
+      SkColorFilter
+    >[];
+    return this.Skia.ColorFilter.MakeLerp(
+      t,
+      first.materialize(),
+      second.materialize()
+    );
+  }
+}

package/src/dom/nodes/paint/ImageFilters.ts

@@ -0,0 +1,210 @@
+import type { SkImageFilter, SkColor, Skia } from "../../../skia/types";
+import {
+  BlendMode,
+  ColorChannel,
+  processUniforms,
+  TileMode,
+} from "../../../skia/types";
+import type {
+  BlendImageFilterProps,
+  BlurImageFilterProps,
+  DisplacementMapImageFilterProps,
+  DropShadowImageFilterProps,
+  MorphologyImageFilterProps,
+  OffsetImageFilterProps,
+  RuntimeShaderImageFilterProps,
+} from "../../types";
+import { DeclarationType, NodeType } from "../../types";
+import { processRadius, enumKey, processColor } from "../datatypes";
+import type { NodeContext } from "../Node";
+import { JsiDeclarationNode } from "../Node";
+
+const Black = Float32Array.of(0, 0, 0, 1);
+
+const MakeInnerShadow = (
+  Skia: Skia,
+  shadowOnly: boolean | undefined,
+  dx: number,
+  dy: number,
+  sigmaX: number,
+  sigmaY: number,
+  color: SkColor,
+  input: SkImageFilter | null
+) => {
+  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(Black, BlendMode.Dst),
+    null
+  );
+  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(Black, BlendMode.SrcIn),
+    null
+  );
+  const f1 = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),
+    null
+  );
+  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
+  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);
+  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
+  if (shadowOnly) {
+    return f4;
+  }
+  return Skia.ImageFilter.MakeCompose(
+    input,
+    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
+  );
+};
+
+export abstract class ImageFilterDeclaration<
+  P,
+  Nullable extends null | never = never
+> extends JsiDeclarationNode<P, SkImageFilter, Nullable> {
+  constructor(ctx: NodeContext, type: NodeType, props: P) {
+    super(ctx, DeclarationType.ImageFilter, type, props);
+  }
+
+  getOptionalChildInstance(index: number) {
+    const child = this._children[index];
+    if (!child) {
+      return null;
+    }
+    return this.getMandatoryChildInstance(index);
+  }
+
+  getMandatoryChildInstance(index: number) {
+    const child = this._children[index];
+    if (child instanceof JsiDeclarationNode) {
+      if (child.isImageFilter()) {
+        return child.materialize();
+      } else if (child.isShader()) {
+        return this.Skia.ImageFilter.MakeShader(child.materialize(), null);
+      } else if (child.declarationType === DeclarationType.ColorFilter) {
+        return this.Skia.ImageFilter.MakeColorFilter(child.materialize(), null);
+      } else {
+        throw new Error(`Found invalid child ${child.type} in ${this.type}`);
+      }
+    } else {
+      throw new Error(`Found invalid child ${child.type} in ${this.type}`);
+    }
+  }
+}
+
+export class OffsetImageFilterNode extends ImageFilterDeclaration<OffsetImageFilterProps> {
+  constructor(ctx: NodeContext, props: OffsetImageFilterProps) {
+    super(ctx, NodeType.OffsetImageFilter, props);
+  }
+
+  materialize() {
+    const { x, y } = this.props;
+    return this.Skia.ImageFilter.MakeOffset(
+      x,
+      y,
+      this.getOptionalChildInstance(0)
+    );
+  }
+}
+
+export class DisplacementMapImageFilterNode extends ImageFilterDeclaration<DisplacementMapImageFilterProps> {
+  constructor(ctx: NodeContext, props: DisplacementMapImageFilterProps) {
+    super(ctx, NodeType.DisplacementMapImageFilter, props);
+  }
+
+  materialize() {
+    const { channelX, channelY, scale } = this.props;
+    return this.Skia.ImageFilter.MakeDisplacementMap(
+      ColorChannel[enumKey(channelX)],
+      ColorChannel[enumKey(channelY)],
+      scale,
+      this.getMandatoryChildInstance(0),
+      this.getOptionalChildInstance(1)
+    );
+  }
+}
+
+export class BlurImageFilterNode extends ImageFilterDeclaration<BlurImageFilterProps> {
+  constructor(ctx: NodeContext, props: BlurImageFilterProps) {
+    super(ctx, NodeType.BlurImageFilter, props);
+  }
+
+  materialize() {
+    const { mode, blur } = this.props;
+    const sigma = processRadius(this.Skia, blur);
+    return this.Skia.ImageFilter.MakeBlur(
+      sigma.x,
+      sigma.y,
+      TileMode[enumKey(mode)],
+      this.getOptionalChildInstance(0)
+    );
+  }
+}
+
+export class DropShadowImageFilterNode extends ImageFilterDeclaration<DropShadowImageFilterProps> {
+  constructor(ctx: NodeContext, props: DropShadowImageFilterProps) {
+    super(ctx, NodeType.BlurImageFilter, props);
+  }
+
+  materialize() {
+    const { dx, dy, blur, shadowOnly, color: cl, inner } = this.props;
+    const color = processColor(this.Skia, cl, 1);
+    const input = this.getOptionalChildInstance(0);
+    let factory;
+    if (inner) {
+      factory = MakeInnerShadow.bind(null, this.Skia, shadowOnly);
+    } else {
+      factory = shadowOnly
+        ? this.Skia.ImageFilter.MakeDropShadowOnly.bind(this.Skia.ImageFilter)
+        : this.Skia.ImageFilter.MakeDropShadow.bind(this.Skia.ImageFilter);
+    }
+    return factory(dx, dy, blur, blur, color, input);
+  }
+}
+
+export enum MorphologyOperator {
+  Erode,
+  Dilate,
+}
+
+export class MorphologyImageFilterNode extends ImageFilterDeclaration<MorphologyImageFilterProps> {
+  constructor(ctx: NodeContext, props: MorphologyImageFilterProps) {
+    super(ctx, NodeType.MorphologyImageFilter, props);
+  }
+
+  materialize() {
+    const { operator } = this.props;
+    const r = processRadius(this.Skia, this.props.radius);
+    const input = this.getOptionalChildInstance(0);
+    if (MorphologyOperator[enumKey(operator)] === MorphologyOperator.Erode) {
+      return this.Skia.ImageFilter.MakeErode(r.x, r.y, input);
+    }
+    return this.Skia.ImageFilter.MakeDilate(r.x, r.y, input);
+  }
+}
+
+export class BlendImageFilterNode extends ImageFilterDeclaration<BlendImageFilterProps> {
+  constructor(ctx: NodeContext, props: BlendImageFilterProps) {
+    super(ctx, NodeType.BlendImageFilter, props);
+  }
+
+  materialize() {
+    const { mode } = this.props;
+    const a = this.getMandatoryChildInstance(0);
+    const b = this.getMandatoryChildInstance(1);
+    return this.Skia.ImageFilter.MakeBlend(mode, a, b);
+  }
+}
+
+export class RuntimeShaderImageFilterNode extends ImageFilterDeclaration<RuntimeShaderImageFilterProps> {
+  constructor(ctx: NodeContext, props: RuntimeShaderImageFilterProps) {
+    super(ctx, NodeType.RuntimeShaderImageFilter, props);
+  }
+
+  materialize() {
+    const { source, uniforms } = this.props;
+    const rtb = this.Skia.RuntimeShaderBuilder(source);
+    if (uniforms) {
+      processUniforms(source, uniforms, rtb);
+    }
+    const input = this.getOptionalChildInstance(0);
+    return this.Skia.ImageFilter.MakeRuntimeShader(rtb, null, input);
+  }
+}

package/src/dom/nodes/paint/MaskFilters.ts

@@ -0,0 +1,25 @@
+import type { SkMaskFilter } from "../../../skia/types";
+import { BlurStyle } from "../../../skia/types";
+import type { NodeContext } from "../Node";
+import { JsiDeclarationNode } from "../Node";
+import type { BlurMaskFilterProps } from "../../types";
+import { DeclarationType, NodeType } from "../../types";
+import { enumKey } from "../datatypes";
+
+export class BlurMaskFilterNode extends JsiDeclarationNode<
+  BlurMaskFilterProps,
+  SkMaskFilter
+> {
+  constructor(ctx: NodeContext, props: BlurMaskFilterProps) {
+    super(ctx, DeclarationType.MaskFilter, NodeType.BlurMaskFilter, props);
+  }
+
+  materialize() {
+    const { style, blur, respectCTM } = this.props;
+    return this.Skia.MaskFilter.MakeBlur(
+      BlurStyle[enumKey(style)],
+      blur,
+      respectCTM
+    );
+  }
+}

package/src/dom/nodes/paint/PathEffects.ts

@@ -0,0 +1,192 @@
+import { Path1DEffectStyle } from "../../../skia/types";
+import type { SkPathEffect } from "../../../skia/types";
+import type { NodeContext } from "../Node";
+import { JsiDeclarationNode } from "../Node";
+import type {
+  CornerPathEffectProps,
+  DashPathEffectProps,
+  DiscretePathEffectProps,
+  Line2DPathEffectProps,
+  Node,
+  Path1DPathEffectProps,
+  Path2DPathEffectProps,
+} from "../../types";
+import { DeclarationType, NodeType } from "../../types";
+import { enumKey } from "../datatypes/Enum";
+import { processPath } from "../datatypes";
+
+abstract class PathEffectDeclaration<
+  P,
+  Nullable extends null | never = never
+> extends JsiDeclarationNode<P, SkPathEffect, Nullable> {
+  constructor(ctx: NodeContext, type: NodeType, props: P) {
+    super(ctx, DeclarationType.PathEffect, type, props);
+  }
+
+  addChild(child: Node<unknown>) {
+    if (!(child instanceof PathEffectDeclaration)) {
+      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
+    }
+    super.addChild(child);
+  }
+
+  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {
+    if (!(child instanceof PathEffectDeclaration)) {
+      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
+    }
+    super.insertChildBefore(child, before);
+  }
+
+  compose(pe: SkPathEffect) {
+    const children = this._children as PathEffectDeclaration<unknown>[];
+    if (this._children.length === 0) {
+      return pe;
+    } else {
+      return this.Skia.PathEffect.MakeCompose(
+        pe,
+        children.reduce<SkPathEffect | null>((acc, child) => {
+          if (acc === null) {
+            return child.materialize();
+          }
+          return this.Skia.PathEffect.MakeCompose(acc, child.materialize());
+        }, null) as SkPathEffect
+      );
+    }
+  }
+  getOptionalChildInstance(index: number) {
+    const child = this._children[index];
+    if (!child) {
+      return null;
+    }
+    return this.getMandatoryChildInstance(index);
+  }
+
+  getMandatoryChildInstance(index: number) {
+    const child = this._children[index];
+    if (child instanceof JsiDeclarationNode) {
+      if (child.isPathEffect()) {
+        return child.materialize();
+      } else {
+        throw new Error(`Found invalid child ${child.type} in ${this.type}`);
+      }
+    } else {
+      throw new Error(`Found invalid child ${child.type} in ${this.type}`);
+    }
+  }
+}
+
+export class DiscretePathEffectNode extends PathEffectDeclaration<DiscretePathEffectProps> {
+  constructor(ctx: NodeContext, props: DiscretePathEffectProps) {
+    super(ctx, NodeType.DiscretePathEffect, props);
+  }
+
+  materialize() {
+    const { length, deviation, seed } = this.props;
+    const pe = this.Skia.PathEffect.MakeDiscrete(length, deviation, seed);
+    return this.compose(pe);
+  }
+}
+
+export class Path2DPathEffectNode extends PathEffectDeclaration<
+  Path2DPathEffectProps,
+  null
+> {
+  constructor(ctx: NodeContext, props: Path2DPathEffectProps) {
+    super(ctx, NodeType.Path2DPathEffect, props);
+  }
+
+  materialize() {
+    const { matrix } = this.props;
+    const path = processPath(this.Skia, this.props.path);
+    const pe = this.Skia.PathEffect.MakePath2D(matrix, path);
+    if (pe === null) {
+      return null;
+    }
+    return this.compose(pe);
+  }
+}
+
+export class DashPathEffectNode extends PathEffectDeclaration<DashPathEffectProps> {
+  constructor(ctx: NodeContext, props: DashPathEffectProps) {
+    super(ctx, NodeType.DashPathEffect, props);
+  }
+
+  materialize() {
+    const { intervals, phase } = this.props;
+    const pe = this.Skia.PathEffect.MakeDash(intervals, phase);
+    return this.compose(pe);
+  }
+}
+
+export class CornerPathEffectNode extends PathEffectDeclaration<
+  CornerPathEffectProps,
+  null
+> {
+  constructor(ctx: NodeContext, props: CornerPathEffectProps) {
+    super(ctx, NodeType.CornerPathEffect, props);
+  }
+
+  materialize() {
+    const { r } = this.props;
+    const pe = this.Skia.PathEffect.MakeCorner(r);
+    if (pe === null) {
+      return null;
+    }
+    return this.compose(pe);
+  }
+}
+
+export class SumPathEffectNode extends PathEffectDeclaration<null> {
+  constructor(ctx: NodeContext) {
+    super(ctx, NodeType.SumPathEffect, null);
+  }
+
+  materialize() {
+    return this.Skia.PathEffect.MakeSum(
+      this.getMandatoryChildInstance(0),
+      this.getMandatoryChildInstance(1)
+    );
+  }
+}
+
+export class Line2DPathEffectNode extends PathEffectDeclaration<
+  Line2DPathEffectProps,
+  null
+> {
+  constructor(ctx: NodeContext, props: Line2DPathEffectProps) {
+    super(ctx, NodeType.Line2DPathEffect, props);
+  }
+
+  materialize() {
+    const { width, matrix } = this.props;
+    const pe = this.Skia.PathEffect.MakeLine2D(width, matrix);
+    if (pe === null) {
+      return null;
+    }
+    return this.compose(pe);
+  }
+}
+
+export class Path1DPathEffectNode extends PathEffectDeclaration<
+  Path1DPathEffectProps,
+  null
+> {
+  constructor(ctx: NodeContext, props: Path1DPathEffectProps) {
+    super(ctx, NodeType.Path1DPathEffect, props);
+  }
+
+  materialize() {
+    const { advance, phase, style } = this.props;
+    const path = processPath(this.Skia, this.props.path);
+    const pe = this.Skia.PathEffect.MakePath1D(
+      path,
+      advance,
+      phase,
+      Path1DEffectStyle[enumKey(style)]
+    );
+    if (pe === null) {
+      return null;
+    }
+    return this.compose(pe);
+  }
+}