@pompadour/react-native-skia 1.4.0

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

@@ -0,0 +1,233 @@
+import {
+  processUniforms,
+  FilterMode,
+  MipmapMode,
+  TileMode,
+} from "../../../skia/types";
+import type { NodeContext } from "../Node";
+import { JsiDeclarationNode } from "../Node";
+import type {
+  ColorProps,
+  DeclarationContext,
+  FractalNoiseProps,
+  ImageShaderProps,
+  LinearGradientProps,
+  RadialGradientProps,
+  ShaderProps,
+  SweepGradientProps,
+  TurbulenceProps,
+  TwoPointConicalGradientProps,
+} from "../../types";
+import { NodeType } from "../../types";
+import {
+  enumKey,
+  fitRects,
+  getRect,
+  processGradientProps,
+  processTransformProps,
+  rect2rect,
+} from "../datatypes";
+
+export abstract class ShaderDeclaration<P> extends JsiDeclarationNode<P> {
+  constructor(ctx: NodeContext, type: NodeType, props: P) {
+    super(ctx, type, props);
+  }
+}
+
+export class ShaderNode extends ShaderDeclaration<ShaderProps> {
+  constructor(ctx: NodeContext, props: ShaderProps) {
+    super(ctx, NodeType.Shader, props);
+  }
+
+  decorate(ctx: DeclarationContext) {
+    this.decorateChildren(ctx);
+    const { source, uniforms, ...transform } = this.props;
+    const m3 = this.Skia.Matrix();
+    processTransformProps(m3, transform);
+    const shader = source.makeShaderWithChildren(
+      processUniforms(source, uniforms),
+      ctx.shaders.popAll(),
+      m3
+    );
+    ctx.shaders.push(shader);
+  }
+}
+
+export class ImageShaderNode extends ShaderDeclaration<ImageShaderProps> {
+  constructor(ctx: NodeContext, props: ImageShaderProps) {
+    super(ctx, NodeType.ImageShader, props);
+  }
+
+  decorate(ctx: DeclarationContext) {
+    const { fit, image, tx, ty, fm, mm, ...imageShaderProps } = this.props;
+    if (!image) {
+      return;
+    }
+
+    const rct = getRect(this.Skia, imageShaderProps);
+    const m3 = this.Skia.Matrix();
+    if (rct) {
+      const rects = fitRects(
+        fit,
+        { x: 0, y: 0, width: image.width(), height: image.height() },
+        rct
+      );
+      const [x, y, sx, sy] = rect2rect(rects.src, rects.dst);
+      m3.translate(x.translateX, y.translateY);
+      m3.scale(sx.scaleX, sy.scaleY);
+    }
+    const lm = this.Skia.Matrix();
+    lm.concat(m3);
+    processTransformProps(lm, imageShaderProps);
+    const shader = image.makeShaderOptions(
+      TileMode[enumKey(tx)],
+      TileMode[enumKey(ty)],
+      FilterMode[enumKey(fm)],
+      MipmapMode[enumKey(mm)],
+      lm
+    );
+    ctx.shaders.push(shader);
+  }
+}
+
+export class ColorNode extends ShaderDeclaration<ColorProps> {
+  constructor(ctx: NodeContext, props: ColorProps) {
+    super(ctx, NodeType.ColorShader, props);
+  }
+
+  decorate(ctx: DeclarationContext) {
+    const { color } = this.props;
+    const shader = this.Skia.Shader.MakeColor(this.Skia.Color(color));
+    ctx.shaders.push(shader);
+  }
+}
+
+export class TurbulenceNode extends ShaderDeclaration<TurbulenceProps> {
+  constructor(ctx: NodeContext, props: TurbulenceProps) {
+    super(ctx, NodeType.Turbulence, props);
+  }
+
+  decorate(ctx: DeclarationContext) {
+    const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = this.props;
+    const shader = this.Skia.Shader.MakeTurbulence(
+      freqX,
+      freqY,
+      octaves,
+      seed,
+      tileWidth,
+      tileHeight
+    );
+    ctx.shaders.push(shader);
+  }
+}
+
+export class FractalNoiseNode extends ShaderDeclaration<FractalNoiseProps> {
+  constructor(ctx: NodeContext, props: FractalNoiseProps) {
+    super(ctx, NodeType.FractalNoise, props);
+  }
+
+  decorate(ctx: DeclarationContext) {
+    const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = this.props;
+    const shader = this.Skia.Shader.MakeFractalNoise(
+      freqX,
+      freqY,
+      octaves,
+      seed,
+      tileWidth,
+      tileHeight
+    );
+    ctx.shaders.push(shader);
+  }
+}
+
+export class LinearGradientNode extends ShaderDeclaration<LinearGradientProps> {
+  constructor(ctx: NodeContext, props: LinearGradientProps) {
+    super(ctx, NodeType.LinearGradient, props);
+  }
+
+  decorate(ctx: DeclarationContext) {
+    const { start, end } = this.props;
+    const { colors, positions, mode, localMatrix, flags } =
+      processGradientProps(this.Skia, this.props);
+    const shader = this.Skia.Shader.MakeLinearGradient(
+      start,
+      end,
+      colors,
+      positions ?? null,
+      mode,
+      localMatrix,
+      flags
+    );
+    ctx.shaders.push(shader);
+  }
+}
+
+export class RadialGradientNode extends ShaderDeclaration<RadialGradientProps> {
+  constructor(ctx: NodeContext, props: RadialGradientProps) {
+    super(ctx, NodeType.RadialGradient, props);
+  }
+
+  decorate(ctx: DeclarationContext) {
+    const { c, r } = this.props;
+    const { colors, positions, mode, localMatrix, flags } =
+      processGradientProps(this.Skia, this.props);
+    const shader = this.Skia.Shader.MakeRadialGradient(
+      c,
+      r,
+      colors,
+      positions,
+      mode,
+      localMatrix,
+      flags
+    );
+    ctx.shaders.push(shader);
+  }
+}
+
+export class SweepGradientNode extends ShaderDeclaration<SweepGradientProps> {
+  constructor(ctx: NodeContext, props: SweepGradientProps) {
+    super(ctx, NodeType.SweepGradient, props);
+  }
+
+  decorate(ctx: DeclarationContext) {
+    const { c, start, end } = this.props;
+    const { colors, positions, mode, localMatrix, flags } =
+      processGradientProps(this.Skia, this.props);
+    const shader = this.Skia.Shader.MakeSweepGradient(
+      c.x,
+      c.y,
+      colors,
+      positions,
+      mode,
+      localMatrix,
+      flags,
+      start,
+      end
+    );
+    ctx.shaders.push(shader);
+  }
+}
+
+export class TwoPointConicalGradientNode extends ShaderDeclaration<TwoPointConicalGradientProps> {
+  constructor(ctx: NodeContext, props: TwoPointConicalGradientProps) {
+    super(ctx, NodeType.TwoPointConicalGradient, props);
+  }
+
+  decorate(ctx: DeclarationContext) {
+    const { startR, endR, start, end } = this.props;
+    const { colors, positions, mode, localMatrix, flags } =
+      processGradientProps(this.Skia, this.props);
+    const shader = this.Skia.Shader.MakeTwoPointConicalGradient(
+      start,
+      startR,
+      end,
+      endR,
+      colors,
+      positions,
+      mode,
+      localMatrix,
+      flags
+    );
+    ctx.shaders.push(shader);
+  }
+}

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

@@ -0,0 +1,6 @@
+export * from "./Shaders";
+export * from "./MaskFilters";
+export * from "./ColorFilters";
+export * from "./ImageFilters";
+export * from "./PathEffects";
+export * from "./BlendNode";

package/src/dom/types/ColorFilters.ts

@@ -0,0 +1,16 @@
+import type { BlendMode, Color } from "../../skia/types";
+
+import type { ChildrenProps, SkEnum } from "./Common";
+
+export interface MatrixColorFilterProps extends ChildrenProps {
+  matrix: number[];
+}
+
+export interface BlendColorFilterProps extends ChildrenProps {
+  mode: SkEnum<typeof BlendMode>;
+  color: Color;
+}
+
+export interface LerpColorFilterProps extends ChildrenProps {
+  t: number;
+}

package/src/dom/types/Common.ts

@@ -0,0 +1,90 @@
+import type { ReactNode } from "react";
+
+import type {
+  BlendMode,
+  Color,
+  InputMatrix,
+  InputRRect,
+  PaintStyle,
+  SkPaint,
+  SkPath,
+  SkRect,
+  SkRRect,
+  StrokeCap,
+  StrokeJoin,
+  Transforms3d,
+  Vector,
+} from "../../skia/types";
+
+export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
+
+export type PathDef = string | SkPath;
+
+export type ClipDef = SkRRect | SkRect | PathDef;
+
+export type Fit =
+  | "cover"
+  | "contain"
+  | "fill"
+  | "fitHeight"
+  | "fitWidth"
+  | "none"
+  | "scaleDown";
+
+export type Radius = number | Vector;
+
+export interface ChildrenProps {
+  children?: ReactNode | ReactNode[];
+}
+
+export interface RectCtor {
+  x?: number;
+  y?: number;
+  width: number;
+  height: number;
+}
+
+export interface RRectCtor extends RectCtor {
+  r?: Radius;
+}
+
+export type RectDef = RectCtor | { rect: SkRect };
+export type RRectDef = RRectCtor | { rect: InputRRect };
+
+export interface PointCircleDef {
+  c?: Vector;
+  r: number;
+}
+
+export interface ScalarCircleDef {
+  cx: number;
+  cy: number;
+  r: number;
+}
+
+export type CircleDef = PointCircleDef | ScalarCircleDef;
+
+export interface TransformProps {
+  transform?: Transforms3d;
+  origin?: Vector;
+  matrix?: InputMatrix;
+}
+
+export interface PaintProps extends ChildrenProps {
+  color?: Color;
+  strokeWidth?: number;
+  blendMode?: SkEnum<typeof BlendMode>;
+  style?: SkEnum<typeof PaintStyle>;
+  strokeJoin?: SkEnum<typeof StrokeJoin>;
+  strokeCap?: SkEnum<typeof StrokeCap>;
+  strokeMiter?: number;
+  opacity?: number;
+  antiAlias?: boolean;
+  dither?: boolean;
+}
+
+export interface GroupProps extends PaintProps, TransformProps {
+  clip?: ClipDef;
+  invertClip?: boolean;
+  layer?: SkPaint | boolean;
+}

package/src/dom/types/DeclarationContext.ts

@@ -0,0 +1,105 @@
+import type {
+  SkShader,
+  SkPaint,
+  SkImageFilter,
+  SkMaskFilter,
+  SkPathEffect,
+  Skia,
+  SkColorFilter,
+} from "../../skia/types";
+
+type Composer<T> = (outer: T, inner: T) => T;
+
+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> {
+  private decls: T[] = [];
+  private indexes = [0];
+
+  constructor(private composer?: Composer<T>) {}
+
+  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.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(private Skia: Skia) {
+    const peComp = this.Skia.PathEffect.MakeCompose.bind(this.Skia.PathEffect);
+    const ifComp = this.Skia.ImageFilter.MakeCompose.bind(
+      this.Skia.ImageFilter
+    );
+    const cfComp = this.Skia.ColorFilter.MakeCompose.bind(
+      this.Skia.ColorFilter
+    );
+    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();
+  }
+}