@shopify/react-native-skia 0.1.147 → 0.1.148

package/src/dom/nodes/DrawingNode.ts

@@ -0,0 +1,72 @@
+import type {
+  DrawingContext,
+  DrawingNodeProps,
+  Node,
+  NodeType,
+  RenderNode,
+} from "../types";
+
+import type { NodeContext } from "./Node";
+import { JsiDeclarationNode } from "./Node";
+import { PaintNode } from "./PaintNode";
+import { isSkPaint, JsiRenderNode } from "./RenderNode";
+
+export abstract class JsiDrawingNode<P extends DrawingNodeProps, C>
+  extends JsiRenderNode<P>
+  implements RenderNode<P>
+{
+  protected derived?: C;
+
+  constructor(ctx: NodeContext, type: NodeType, props: P) {
+    super(ctx, type, props);
+    this.derived = this.deriveProps();
+  }
+
+  setProps(props: P) {
+    super.setProps(props);
+    this.derived = this.deriveProps();
+  }
+
+  setProp<K extends keyof P>(name: K, value: P[K]) {
+    const hasChanged = super.setProp(name, value);
+    if (hasChanged) {
+      this.derived = this.deriveProps();
+    }
+    return hasChanged;
+  }
+
+  addChild(child: Node<unknown>): void {
+    if (!(child instanceof JsiDeclarationNode)) {
+      throw new Error(`Cannot add ${child.type} to ${this.type}`);
+    }
+    super.addChild(child);
+    this.derived = this.deriveProps();
+  }
+
+  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {
+    if (!(child instanceof JsiDeclarationNode)) {
+      throw new Error(`Cannot add ${child.type} to ${this.type}`);
+    }
+    super.insertChildBefore(child, before);
+    this.derived = this.deriveProps();
+  }
+
+  renderNode(ctx: DrawingContext): void {
+    if (this.props.paint && isSkPaint(this.props.paint)) {
+      this.draw({ ...ctx, paint: this.props.paint });
+    } else if (this.props.paint && this.props.paint.current != null) {
+      this.draw({ ...ctx, paint: this.props.paint.current.materialize() });
+    } else {
+      this.draw(ctx);
+    }
+    this.children().map((child) => {
+      if (child instanceof PaintNode) {
+        const paint = child.materialize();
+        this.draw({ ...ctx, paint });
+      }
+    });
+  }
+
+  protected abstract draw(ctx: DrawingContext): void;
+  protected abstract deriveProps(): C;
+}

package/src/dom/nodes/GroupNode.ts

@@ -0,0 +1,23 @@
+import type { DrawingContext, GroupProps } from "../types";
+import { NodeType } from "../types";
+import type { RenderNode } from "../types/Node";
+
+import { JsiRenderNode } from "./RenderNode";
+import type { NodeContext } from "./Node";
+
+export class GroupNode
+  extends JsiRenderNode<GroupProps>
+  implements RenderNode<GroupProps>
+{
+  constructor(ctx: NodeContext, props: GroupProps) {
+    super(ctx, NodeType.Group, props);
+  }
+
+  renderNode(ctx: DrawingContext): void {
+    this.children().map((child) => {
+      if (child instanceof JsiRenderNode) {
+        child.render(ctx);
+      }
+    });
+  }
+}

package/src/dom/nodes/JsiSkDOM.ts

@@ -0,0 +1,353 @@
+import type {
+  PathProps,
+  SkDOM,
+  GroupProps,
+  ImageProps,
+  BlurImageFilterProps,
+  MatrixColorFilterProps,
+  CircleProps,
+  BlurMaskFilterProps,
+  LinearGradientProps,
+  PaintProps,
+  ShaderProps,
+  ImageShaderProps,
+  CustomDrawingNodeProps,
+  LineProps,
+  OvalProps,
+  PatchProps,
+  PointsProps,
+  RectProps,
+  RoundedRectProps,
+  VerticesProps,
+  TextProps,
+  DiffRectProps,
+  OffsetImageFilterProps,
+  BlendColorFilterProps,
+  TextPathProps,
+  TextBlobProps,
+  GlyphsProps,
+  TwoPointConicalGradientProps,
+  TurbulenceProps,
+  SweepGradientProps,
+  RadialGradientProps,
+  FractalNoiseProps,
+  ColorProps,
+  PictureProps,
+  ImageSVGProps,
+  LerpColorFilterProps,
+  DrawingNodeProps,
+  BoxProps,
+  BoxShadowProps,
+  ChildrenProps,
+} from "../types";
+import type {
+  BlendImageFilterProps,
+  BlendProps,
+  DisplacementMapImageFilterProps,
+  DropShadowImageFilterProps,
+  MorphologyImageFilterProps,
+  RuntimeShaderImageFilterProps,
+} from "../types/ImageFilters";
+import type {
+  CornerPathEffectProps,
+  DashPathEffectProps,
+  DiscretePathEffectProps,
+  Line2DPathEffectProps,
+  Path1DPathEffectProps,
+  Path2DPathEffectProps,
+} from "../types/PathEffects";
+
+import {
+  FillNode,
+  ImageNode,
+  CircleNode,
+  PathNode,
+  LineNode,
+  PatchNode,
+  PointsNode,
+  RectNode,
+  RRectNode,
+  VerticesNode,
+  TextNode,
+  OvalNode,
+  CustomDrawingNode,
+  TextPathNode,
+  TextBlobNode,
+  GlyphsNode,
+  DiffRectNode,
+  PictureNode,
+  ImageSVGNode,
+  BackdropFilterNode,
+  BoxNode,
+  BoxShadowNode,
+} from "./drawings";
+import {
+  BlendImageFilterNode,
+  BlurImageFilterNode,
+  BlurMaskFilterNode,
+  DisplacementMapImageFilterNode,
+  DropShadowImageFilterNode,
+  OffsetImageFilterNode,
+  RuntimeShaderImageFilterNode,
+  CornerPathEffectNode,
+  DiscretePathEffectNode,
+  DashPathEffectNode,
+  Path1DPathEffectNode,
+  Path2DPathEffectNode,
+  SumPathEffectNode,
+  Line2DPathEffectNode,
+  BlendNode,
+} from "./paint";
+import {
+  MatrixColorFilterNode,
+  LumaColorFilterNode,
+  LinearToSRGBGammaColorFilterNode,
+  SRGBToLinearGammaColorFilterNode,
+  BlendColorFilterNode,
+  LerpColorFilterNode,
+} from "./paint/ColorFilters";
+import {
+  LinearGradientNode,
+  ShaderNode,
+  ImageShaderNode,
+  TwoPointConicalGradientNode,
+  TurbulenceNode,
+  SweepGradientNode,
+  RadialGradientNode,
+  FractalNoiseNode,
+  ColorNode,
+} from "./paint/Shaders";
+import { MorphologyImageFilterNode } from "./paint/ImageFilters";
+import { GroupNode } from "./GroupNode";
+import { PaintNode } from "./PaintNode";
+import type { NodeContext } from "./Node";
+
+export class JsiSkDOM implements SkDOM {
+  constructor(private ctx: NodeContext) {}
+
+  Group(props?: GroupProps) {
+    return new GroupNode(this.ctx, props ?? {});
+  }
+
+  Paint(props: PaintProps) {
+    return new PaintNode(this.ctx, props);
+  }
+
+  // Drawings
+  Fill(props?: DrawingNodeProps) {
+    return new FillNode(this.ctx, props);
+  }
+
+  Image(props: ImageProps) {
+    return new ImageNode(this.ctx, props);
+  }
+
+  Circle(props: CircleProps) {
+    return new CircleNode(this.ctx, props);
+  }
+
+  Path(props: PathProps) {
+    return new PathNode(this.ctx, props);
+  }
+
+  CustomDrawing(props: CustomDrawingNodeProps) {
+    return new CustomDrawingNode(this.ctx, props);
+  }
+
+  Line(props: LineProps) {
+    return new LineNode(this.ctx, props);
+  }
+
+  Oval(props: OvalProps) {
+    return new OvalNode(this.ctx, props);
+  }
+
+  Patch(props: PatchProps) {
+    return new PatchNode(this.ctx, props);
+  }
+
+  Points(props: PointsProps) {
+    return new PointsNode(this.ctx, props);
+  }
+
+  Rect(props: RectProps) {
+    return new RectNode(this.ctx, props);
+  }
+
+  RRect(props: RoundedRectProps) {
+    return new RRectNode(this.ctx, props);
+  }
+
+  Vertices(props: VerticesProps) {
+    return new VerticesNode(this.ctx, props);
+  }
+
+  Text(props: TextProps) {
+    return new TextNode(this.ctx, props);
+  }
+
+  TextPath(props: TextPathProps) {
+    return new TextPathNode(this.ctx, props);
+  }
+
+  TextBlob(props: TextBlobProps) {
+    return new TextBlobNode(this.ctx, props);
+  }
+
+  Glyphs(props: GlyphsProps) {
+    return new GlyphsNode(this.ctx, props);
+  }
+
+  DiffRect(props: DiffRectProps) {
+    return new DiffRectNode(this.ctx, props);
+  }
+
+  Picture(props: PictureProps) {
+    return new PictureNode(this.ctx, props);
+  }
+
+  ImageSVG(props: ImageSVGProps) {
+    return new ImageSVGNode(this.ctx, props);
+  }
+
+  // BlurMaskFilters
+  BlurMaskFilter(props: BlurMaskFilterProps) {
+    return new BlurMaskFilterNode(this.ctx, props);
+  }
+
+  // ImageFilters
+  BlendImageFilter(props: BlendImageFilterProps) {
+    return new BlendImageFilterNode(this.ctx, props);
+  }
+
+  DropShadowImageFilter(props: DropShadowImageFilterProps) {
+    return new DropShadowImageFilterNode(this.ctx, props);
+  }
+
+  DisplacementMapImageFilter(props: DisplacementMapImageFilterProps) {
+    return new DisplacementMapImageFilterNode(this.ctx, props);
+  }
+
+  BlurImageFilter(props: BlurImageFilterProps) {
+    return new BlurImageFilterNode(this.ctx, props);
+  }
+
+  OffsetImageFilter(props: OffsetImageFilterProps) {
+    return new OffsetImageFilterNode(this.ctx, props);
+  }
+
+  MorphologyImageFilter(props: MorphologyImageFilterProps) {
+    return new MorphologyImageFilterNode(this.ctx, props);
+  }
+
+  RuntimeShaderImageFilter(props: RuntimeShaderImageFilterProps) {
+    return new RuntimeShaderImageFilterNode(this.ctx, props);
+  }
+
+  // Color Filters
+  MatrixColorFilter(props: MatrixColorFilterProps) {
+    return new MatrixColorFilterNode(this.ctx, props);
+  }
+
+  BlendColorFilter(props: BlendColorFilterProps) {
+    return new BlendColorFilterNode(this.ctx, props);
+  }
+
+  LumaColorFilter() {
+    return new LumaColorFilterNode(this.ctx);
+  }
+
+  LinearToSRGBGammaColorFilter() {
+    return new LinearToSRGBGammaColorFilterNode(this.ctx);
+  }
+
+  SRGBToLinearGammaColorFilter() {
+    return new SRGBToLinearGammaColorFilterNode(this.ctx);
+  }
+
+  LerpColorFilter(props: LerpColorFilterProps) {
+    return new LerpColorFilterNode(this.ctx, props);
+  }
+
+  // Shaders
+  Shader(props: ShaderProps) {
+    return new ShaderNode(this.ctx, props);
+  }
+
+  ImageShader(props: ImageShaderProps) {
+    return new ImageShaderNode(this.ctx, props);
+  }
+
+  ColorShader(props: ColorProps) {
+    return new ColorNode(this.ctx, props);
+  }
+
+  SweepGradient(props: SweepGradientProps) {
+    return new SweepGradientNode(this.ctx, props);
+  }
+
+  Turbulence(props: TurbulenceProps) {
+    return new TurbulenceNode(this.ctx, props);
+  }
+
+  FractalNoise(props: FractalNoiseProps) {
+    return new FractalNoiseNode(this.ctx, props);
+  }
+
+  LinearGradient(props: LinearGradientProps) {
+    return new LinearGradientNode(this.ctx, props);
+  }
+
+  RadialGradient(props: RadialGradientProps) {
+    return new RadialGradientNode(this.ctx, props);
+  }
+
+  TwoPointConicalGradient(props: TwoPointConicalGradientProps) {
+    return new TwoPointConicalGradientNode(this.ctx, props);
+  }
+
+  // Path Effects
+  CornerPathEffect(props: CornerPathEffectProps) {
+    return new CornerPathEffectNode(this.ctx, props);
+  }
+
+  DiscretePathEffect(props: DiscretePathEffectProps) {
+    return new DiscretePathEffectNode(this.ctx, props);
+  }
+
+  DashPathEffect(props: DashPathEffectProps) {
+    return new DashPathEffectNode(this.ctx, props);
+  }
+
+  Path1DPathEffect(props: Path1DPathEffectProps) {
+    return new Path1DPathEffectNode(this.ctx, props);
+  }
+
+  Path2DPathEffect(props: Path2DPathEffectProps) {
+    return new Path2DPathEffectNode(this.ctx, props);
+  }
+
+  SumPathEffect() {
+    return new SumPathEffectNode(this.ctx);
+  }
+
+  Line2DPathEffect(props: Line2DPathEffectProps) {
+    return new Line2DPathEffectNode(this.ctx, props);
+  }
+
+  Blend(props: BlendProps) {
+    return new BlendNode(this.ctx, props);
+  }
+
+  BackdropFilter(props: ChildrenProps) {
+    return new BackdropFilterNode(this.ctx, props);
+  }
+
+  Box(props: BoxProps) {
+    return new BoxNode(this.ctx, props);
+  }
+
+  BoxShadow(props: BoxShadowProps) {
+    return new BoxShadowNode(this.ctx, props);
+  }
+}

package/src/dom/nodes/Node.ts

@@ -0,0 +1,158 @@
+import type {
+  SkColorFilter,
+  Skia,
+  SkImageFilter,
+  SkMaskFilter,
+  SkShader,
+  SkPathEffect,
+  SkPaint,
+} from "../../skia/types";
+import type { Node, DeclarationNode, NodeType } from "../types";
+import { DeclarationType } from "../types";
+import type { DependencyManager } from "../../renderer/DependencyManager";
+
+export interface NodeContext {
+  Skia: Skia;
+  depMgr: DependencyManager;
+}
+
+export abstract class JsiNode<P> implements Node<P> {
+  protected _children: JsiNode<unknown>[] = [];
+  protected Skia: Skia;
+  protected depMgr: DependencyManager;
+
+  constructor(ctx: NodeContext, public type: NodeType, protected props: P) {
+    this.Skia = ctx.Skia;
+    this.depMgr = ctx.depMgr;
+  }
+
+  setProps(props: P) {
+    this.props = props;
+  }
+
+  setProp<K extends keyof P>(name: K, v: P[K]) {
+    const hasChanged = this.props[name] !== v;
+    this.props[name] = v;
+    return hasChanged;
+  }
+
+  getProps() {
+    return this.props;
+  }
+
+  children() {
+    return this._children;
+  }
+
+  addChild(child: Node<unknown>) {
+    this._children.push(child as JsiNode<unknown>);
+  }
+
+  dispose() {
+    this.depMgr.unsubscribeNode(this);
+    this._children.forEach((child) => child.dispose());
+  }
+
+  removeChild(child: Node<unknown>) {
+    const index = this._children.indexOf(child as JsiNode<unknown>);
+    if (index !== -1) {
+      const [node] = this._children.splice(index, 1);
+      node.dispose();
+    }
+  }
+
+  insertChildBefore(child: Node<unknown>, before: Node<unknown>) {
+    const index = this._children.indexOf(child as JsiNode<unknown>);
+    if (index !== -1) {
+      this._children.splice(index, 1);
+    }
+    const beforeIndex = this._children.indexOf(before as JsiNode<unknown>);
+    this._children.splice(beforeIndex, 0, child as JsiNode<unknown>);
+  }
+}
+
+export type Invalidate = () => void;
+
+export abstract class JsiDeclarationNode<
+    P,
+    T,
+    Nullable extends null | never = never
+  >
+  extends JsiNode<P>
+  implements DeclarationNode<P, T, Nullable>
+{
+  private invalidate: Invalidate = () => {};
+
+  constructor(
+    ctx: NodeContext,
+    public declarationType: DeclarationType,
+    type: NodeType,
+    props: P
+  ) {
+    super(ctx, type, props);
+  }
+
+  abstract materialize(): T | Nullable;
+
+  addChild(child: Node<unknown>): void {
+    if (!(child instanceof JsiDeclarationNode)) {
+      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
+    }
+    super.addChild(child);
+    this.invalidate();
+  }
+
+  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {
+    if (!(child instanceof JsiDeclarationNode)) {
+      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
+    }
+    super.insertChildBefore(child, before);
+    this.invalidate();
+  }
+
+  dispose() {
+    this.invalidate();
+    super.dispose();
+  }
+
+  setInvalidate(invalidate: Invalidate) {
+    this.invalidate = invalidate;
+  }
+
+  setProps(props: P) {
+    super.setProps(props);
+    this.invalidate();
+  }
+
+  setProp<K extends keyof P>(name: K, v: P[K]) {
+    const hasChanged = super.setProp(name, v);
+    if (hasChanged) {
+      this.invalidate();
+    }
+    return hasChanged;
+  }
+
+  isPaint(): this is DeclarationNode<unknown, SkPaint> {
+    return this.declarationType === DeclarationType.Paint;
+  }
+
+  isImageFilter(): this is DeclarationNode<unknown, SkImageFilter> {
+    return this.declarationType === DeclarationType.ImageFilter;
+  }
+
+  isColorFilter(): this is DeclarationNode<unknown, SkColorFilter> {
+    return this.declarationType === DeclarationType.ColorFilter;
+  }
+
+  isShader(): this is DeclarationNode<unknown, SkShader> {
+    return this.declarationType === DeclarationType.Shader;
+  }
+
+  isMaskFilter(): this is DeclarationNode<unknown, SkMaskFilter> {
+    return this.declarationType === DeclarationType.MaskFilter;
+  }
+
+  isPathEffect(): this is DeclarationNode<unknown, SkPathEffect> {
+    return this.declarationType === DeclarationType.PathEffect;
+  }
+}

package/src/dom/nodes/PaintContext.ts

@@ -0,0 +1,30 @@
+import type {
+  BlendMode,
+  PaintStyle,
+  SkColorFilter,
+  SkImageFilter,
+  SkMaskFilter,
+  SkPathEffect,
+  SkShader,
+  StrokeCap,
+  StrokeJoin,
+} from "../../skia/types";
+import type { SkColor } from "../../skia/types/Color";
+
+export interface PaintContext {
+  color?: SkColor;
+  strokeWidth?: number;
+  blendMode?: BlendMode;
+  style?: PaintStyle;
+  strokeJoin?: StrokeJoin;
+  strokeCap?: StrokeCap;
+  strokeMiter?: number;
+  opacity?: number;
+  antiAlias?: boolean;
+
+  shader?: SkShader;
+  colorFilter?: SkColorFilter;
+  imageFilter?: SkImageFilter;
+  maskFilter?: SkMaskFilter;
+  pathEffect?: SkPathEffect;
+}

package/src/dom/nodes/PaintNode.ts

@@ -0,0 +1,77 @@
+import type { SkPaint } from "../../skia/types";
+import { StrokeCap, StrokeJoin, PaintStyle, BlendMode } from "../../skia/types";
+import type { DeclarationNode, PaintProps } from "../types";
+import { DeclarationType, NodeType } from "../types";
+
+import { enumKey } from "./datatypes";
+import type { NodeContext } from "./Node";
+import { JsiDeclarationNode } from "./Node";
+
+export class PaintNode
+  extends JsiDeclarationNode<PaintProps, SkPaint>
+  implements DeclarationNode<PaintProps, SkPaint>
+{
+  constructor(ctx: NodeContext, props: PaintProps = {}) {
+    super(ctx, DeclarationType.Paint, NodeType.Paint, props);
+  }
+
+  materialize() {
+    const {
+      color,
+      strokeWidth,
+      blendMode,
+      style,
+      strokeJoin,
+      strokeCap,
+      strokeMiter,
+      opacity,
+      antiAlias,
+    } = this.props;
+    const paint = this.Skia.Paint();
+    if (color !== undefined) {
+      paint.setColor(this.Skia.Color(color));
+    }
+    if (strokeWidth !== undefined) {
+      paint.setStrokeWidth(strokeWidth);
+    }
+    if (blendMode !== undefined) {
+      paint.setBlendMode(BlendMode[enumKey(blendMode)]);
+    }
+    if (style !== undefined) {
+      paint.setStyle(PaintStyle[enumKey(style)]);
+    }
+    if (strokeJoin !== undefined) {
+      paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);
+    }
+    if (strokeCap !== undefined) {
+      paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);
+    }
+    if (strokeMiter !== undefined) {
+      paint.setStrokeMiter(strokeMiter);
+    }
+    if (opacity !== undefined) {
+      paint.setAlphaf(opacity);
+    }
+    if (antiAlias !== undefined) {
+      paint.setAntiAlias(antiAlias);
+    }
+    this._children.forEach((child) => {
+      if (child instanceof JsiDeclarationNode) {
+        if (child.isShader()) {
+          paint.setShader(child.materialize());
+        } else if (child.isColorFilter()) {
+          paint.setColorFilter(child.materialize());
+        } else if (child.isImageFilter()) {
+          paint.setImageFilter(child.materialize());
+        } else if (child.isMaskFilter()) {
+          paint.setMaskFilter(child.materialize());
+        } else if (child.isPathEffect()) {
+          paint.setPathEffect(child.materialize());
+        } else {
+          throw new Error(`Unknown paint child ${child.type}`);
+        }
+      }
+    });
+    return paint;
+  }
+}