@shopify/react-native-skia 0.1.147 → 0.1.148

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

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

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, RefObject } from "react";
+
+import type {
+  BlendMode,
+  Color,
+  PaintStyle,
+  SkMatrix,
+  SkPaint,
+  SkPath,
+  SkRect,
+  SkRRect,
+  StrokeCap,
+  StrokeJoin,
+  Transforms2d,
+  Vector,
+} from "../../skia/types";
+
+import type { DeclarationNode } from "./Node";
+
+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: SkRRect };
+
+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?: Transforms2d;
+  origin?: Vector;
+  matrix?: SkMatrix;
+}
+
+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;
+}
+
+export interface GroupProps extends PaintProps, TransformProps {
+  clip?: ClipDef;
+  invertClip?: boolean;
+  layer?: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint | boolean;
+}

package/src/dom/types/DrawingContext.ts

@@ -0,0 +1,7 @@
+import type { SkCanvas, SkPaint } from "../../skia/types";
+
+export interface DrawingContext {
+  canvas: SkCanvas;
+  paint: SkPaint;
+  opacity: number;
+}

package/src/dom/types/Drawings.ts

@@ -0,0 +1,157 @@
+import type { RefObject } from "react";
+
+import type {
+  FillType,
+  SkImage,
+  StrokeOpts,
+  Vector,
+  Color,
+  SkPoint,
+  BlendMode,
+  PointMode,
+  VertexMode,
+  SkFont,
+  SkRRect,
+  SkTextBlob,
+  SkPicture,
+  SkSVG,
+  SkPaint,
+  SkRect,
+} from "../../skia/types";
+
+import type {
+  CircleDef,
+  Fit,
+  GroupProps,
+  PathDef,
+  RectDef,
+  RRectDef,
+  SkEnum,
+} from "./Common";
+import type { DrawingContext } from "./DrawingContext";
+import type { DeclarationNode } from "./Node";
+
+export interface DrawingNodeProps extends GroupProps {
+  paint?: SkPaint | RefObject<DeclarationNode<unknown, SkPaint>>;
+}
+
+export type ImageProps = DrawingNodeProps &
+  RectDef & {
+    fit: Fit;
+    image: SkImage;
+  };
+
+export type CircleProps = CircleDef & DrawingNodeProps;
+
+export interface PathProps extends DrawingNodeProps {
+  path: PathDef;
+  start: number;
+  end: number;
+  stroke?: StrokeOpts;
+  fillType?: SkEnum<typeof FillType>;
+}
+
+export interface CustomDrawingNodeProps extends DrawingNodeProps {
+  drawing: (ctx: DrawingContext) => void;
+}
+
+export interface LineProps extends DrawingNodeProps {
+  p1: Vector;
+  p2: Vector;
+}
+
+export type OvalProps = RectDef & DrawingNodeProps;
+
+export type RectProps = RectDef & DrawingNodeProps;
+
+export type RoundedRectProps = RRectDef & DrawingNodeProps;
+
+export interface CubicBezierHandle {
+  pos: Vector;
+  c1: Vector;
+  c2: Vector;
+}
+
+export interface PatchProps extends DrawingNodeProps {
+  colors?: Color[];
+  patch: [
+    CubicBezierHandle,
+    CubicBezierHandle,
+    CubicBezierHandle,
+    CubicBezierHandle
+  ];
+  texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];
+  blendMode?: SkEnum<typeof BlendMode>;
+}
+
+export interface VerticesProps extends DrawingNodeProps {
+  colors?: string[];
+  vertices: SkPoint[];
+  textures?: SkPoint[];
+  mode: SkEnum<typeof VertexMode>;
+  blendMode?: SkEnum<typeof BlendMode>;
+  indices?: number[];
+}
+
+export type ImageSVGProps = RectDef & {
+  svg: SkSVG;
+} & DrawingNodeProps;
+
+export interface PictureProps extends DrawingNodeProps {
+  picture: SkPicture;
+}
+
+export interface PointsProps extends DrawingNodeProps {
+  points: SkPoint[];
+  mode: SkEnum<typeof PointMode>;
+}
+
+export interface DiffRectProps extends DrawingNodeProps {
+  inner: SkRRect;
+  outer: SkRRect;
+}
+
+export interface TextProps extends DrawingNodeProps {
+  font: SkFont;
+  text: string;
+  x: number;
+  y: number;
+}
+
+export interface TextPathProps extends DrawingNodeProps {
+  font: SkFont;
+  text: string;
+  path: PathDef;
+  initialOffset: number;
+}
+
+export interface TextBlobProps extends DrawingNodeProps {
+  blob: SkTextBlob;
+  x: number;
+  y: number;
+}
+
+export interface Glyph {
+  id: number;
+  pos: SkPoint;
+}
+
+export interface GlyphsProps extends DrawingNodeProps {
+  font: SkFont;
+  x: number;
+  y: number;
+  glyphs: Glyph[];
+}
+
+export interface BoxProps extends DrawingNodeProps {
+  box: SkRRect | SkRect;
+}
+
+export interface BoxShadowProps {
+  dx?: number;
+  dy?: number;
+  spread?: number;
+  blur: number;
+  color?: Color;
+  inner?: boolean;
+}

package/src/dom/types/ImageFilters.ts

@@ -0,0 +1,53 @@
+import type {
+  BlendMode,
+  Color,
+  ColorChannel,
+  SkRuntimeEffect,
+  TileMode,
+  Uniforms,
+} from "../../skia/types";
+
+import type { Radius, SkEnum, ChildrenProps } from "./Common";
+
+export interface BlurImageFilterProps extends ChildrenProps {
+  blur: Radius;
+  mode: SkEnum<typeof TileMode>;
+}
+
+export interface OffsetImageFilterProps extends ChildrenProps {
+  x: number;
+  y: number;
+}
+
+export interface RuntimeShaderImageFilterProps extends ChildrenProps {
+  source: SkRuntimeEffect;
+  uniforms?: Uniforms;
+}
+
+export interface BlendImageFilterProps extends ChildrenProps {
+  mode: BlendMode;
+}
+
+export interface MorphologyImageFilterProps extends ChildrenProps {
+  operator: "erode" | "dilate";
+  radius: Radius;
+}
+
+export interface DropShadowImageFilterProps extends ChildrenProps {
+  dx: number;
+  dy: number;
+  blur: number;
+  color: Color;
+  inner?: boolean;
+  shadowOnly?: boolean;
+}
+
+export interface DisplacementMapImageFilterProps extends ChildrenProps {
+  channelX: SkEnum<typeof ColorChannel>;
+  channelY: SkEnum<typeof ColorChannel>;
+  scale: number;
+}
+
+export interface BlendProps extends ChildrenProps {
+  mode: SkEnum<typeof BlendMode>;
+}

package/src/dom/types/MaskFilters.ts

@@ -0,0 +1,9 @@
+import type { BlurStyle } from "../../skia/types";
+
+import type { SkEnum } from "./Common";
+
+export interface BlurMaskFilterProps {
+  style: SkEnum<typeof BlurStyle>;
+  blur: number;
+  respectCTM: boolean;
+}

package/src/dom/types/Node.ts

@@ -0,0 +1,46 @@
+import type {
+  SkColorFilter,
+  SkImageFilter,
+  SkMaskFilter,
+  SkPaint,
+  SkPathEffect,
+  SkShader,
+} from "../../skia/types";
+
+import type { GroupProps } from "./Common";
+import type { DrawingContext } from "./DrawingContext";
+import type { DeclarationType, NodeType } from "./NodeType";
+
+export interface Node<P> {
+  type: NodeType;
+
+  setProps(props: P): void;
+  setProp<K extends keyof P>(name: K, v: P[K]): boolean;
+  getProps(): P;
+
+  children(): Node<unknown>[];
+  addChild(child: Node<unknown>): void;
+  removeChild(child: Node<unknown>): void;
+  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
+}
+
+export type Invalidate = () => void;
+
+export interface DeclarationNode<P, T, Nullable extends null | never = never>
+  extends Node<P> {
+  declarationType: DeclarationType;
+  materialize(): T | Nullable;
+
+  setInvalidate(invalidate: Invalidate): void;
+
+  isPaint(): this is DeclarationNode<unknown, SkPaint>;
+  isImageFilter(): this is DeclarationNode<unknown, SkImageFilter>;
+  isColorFilter(): this is DeclarationNode<unknown, SkColorFilter>;
+  isShader(): this is DeclarationNode<unknown, SkShader>;
+  isMaskFilter(): this is DeclarationNode<unknown, SkMaskFilter>;
+  isPathEffect(): this is DeclarationNode<unknown, SkPathEffect>;
+}
+
+export interface RenderNode<P extends GroupProps> extends Node<P> {
+  render(ctx: DrawingContext): void;
+}

package/src/dom/types/NodeType.ts

@@ -0,0 +1,80 @@
+export const enum NodeType {
+  // Shaders
+  Shader = "skShader",
+  ImageShader = "skImageShader",
+  ColorShader = "skColorShader",
+  Turbulence = "skTurbulence",
+  FractalNoise = "skFractalNoise",
+  LinearGradient = "skLinearGradient",
+  RadialGradient = "skRadialGradient",
+  SweepGradient = "skSweepGradient",
+  TwoPointConicalGradient = "skTwoPointConicalGradient",
+
+  // Mask Filters
+  BlurMaskFilter = "skBlurMaskFilter",
+
+  // Path Effects
+  DiscretePathEffect = "skDiscretePathEffect",
+  DashPathEffect = "skDashPathEffect",
+  Path1DPathEffect = "skPath1DPathEffect",
+  Path2DPathEffect = "skPath2DPathEffect",
+  CornerPathEffect = "skCornerPathEffect",
+  SumPathEffect = "skSumPathEffect",
+  Line2DPathEffect = "skLine2DPathEffect",
+
+  // Color Filters
+  MatrixColorFilter = "skMatrixColorFilter",
+  BlendColorFilter = "skBlendColorFilter",
+  LinearToSRGBGammaColorFilter = "skLinearToSRGBGammaColorFilter",
+  SRGBToLinearGammaColorFilter = "skSRGBToLinearGammaColorFilter",
+  LumaColorFilter = "skLumaColorFilter",
+  LerpColorFilter = "skLerpColorFilter",
+
+  // Image Filters
+  OffsetImageFilter = "skOffsetImageFilter",
+  DisplacementMapImageFilter = "skDisplacementMapImageFilter",
+  BlurImageFilter = "skBlurImageFilter",
+  DropShadowImageFilter = "skDropShadowImageFilter",
+  MorphologyImageFilter = "skMorphologyImageFilter",
+  BlendImageFilter = "skBlendImageFilter",
+  RuntimeShaderImageFilter = "skRuntimeShaderImageFilter",
+
+  // Mixed
+  Blend = "skBlend",
+  BackdropFilter = "skBackdropFilter",
+  Box = "skBox",
+  BoxShadow = "skBoxShadow",
+
+  // Drawings
+  Group = "skGroup",
+  Drawing = "skDrawing",
+  Paint = "skPaint",
+  Circle = "skCircle",
+  Fill = "skFill",
+  Image = "skImage",
+  Points = "skPoints",
+  Path = "skPath",
+  Rect = "skRect",
+  RRect = "skRRect",
+  Oval = "skOval",
+  Line = "skLine",
+  Patch = "skPatch",
+  Vertices = "skVertices",
+  DiffRect = "skDiffRect",
+  Text = "skText",
+  TextPath = "skTextPath",
+  TextBlob = "skTextBlob",
+  Glyphs = "skGlyphs",
+  Picture = "skPicture",
+  ImageSVG = "skImageSVG",
+}
+
+export const enum DeclarationType {
+  Paint,
+  Shader,
+  ImageFilter,
+  ColorFilter,
+  PathEffect,
+  MaskFilter,
+  Unknown,
+}