@shopify/react-native-skia 0.1.146 → 0.1.148

package/src/dom/nodes/RenderNode.ts

@@ -0,0 +1,349 @@
+import type { RefObject } from "react";
+
+import type {
+  SkMatrix,
+  SkRect,
+  SkRRect,
+  SkPath,
+  SkPaint,
+} from "../../skia/types";
+import {
+  StrokeCap,
+  StrokeJoin,
+  PaintStyle,
+  BlendMode,
+  ClipOp,
+  isRRect,
+} from "../../skia/types";
+import type {
+  RenderNode,
+  GroupProps,
+  DrawingContext,
+  NodeType,
+  Node,
+  DeclarationNode,
+} from "../types";
+
+import { isPathDef, processPath, processTransformProps } from "./datatypes";
+import type { NodeContext } from "./Node";
+import { JsiNode, JsiDeclarationNode } from "./Node";
+import type { PaintContext } from "./PaintContext";
+import { enumKey } from "./datatypes/Enum";
+
+const paintProps = [
+  "color",
+  "strokeWidth",
+  "blendMode",
+  "strokeCap",
+  "strokeJoin",
+  "strokeMiter",
+  "style",
+  "antiAlias",
+  "opacity",
+];
+
+interface PaintCache {
+  parent: SkPaint;
+  child: SkPaint;
+}
+
+export abstract class JsiRenderNode<P extends GroupProps>
+  extends JsiNode<P>
+  implements RenderNode<P>
+{
+  paintCache: PaintCache | null = null;
+  matrix: SkMatrix;
+  clipRect?: SkRect;
+  clipRRect?: SkRRect;
+  clipPath?: SkPath;
+
+  constructor(ctx: NodeContext, type: NodeType, props: P) {
+    super(ctx, type, props);
+    this.matrix = this.Skia.Matrix();
+    this.onPropChange();
+  }
+
+  setProps(props: P) {
+    super.setProps(props);
+    this.onPropChange();
+    this.paintCache = null;
+  }
+
+  setProp<K extends keyof P>(key: K, value: P[K]) {
+    const hasChanged = super.setProp(key, value);
+    if (hasChanged) {
+      this.onPropChange();
+      if (paintProps.includes(key as string)) {
+        this.paintCache = null;
+      }
+    }
+    return hasChanged;
+  }
+
+  protected onPropChange() {
+    this.matrix.identity();
+    this.clipPath = undefined;
+    this.clipRect = undefined;
+    this.clipRRect = undefined;
+    this.computeMatrix();
+    this.computeClip();
+  }
+
+  addChild(child: Node<unknown>) {
+    if (child instanceof JsiDeclarationNode) {
+      child.setInvalidate(() => (this.paintCache = null));
+    }
+    super.addChild(child);
+  }
+
+  insertChildBefore(child: Node<unknown>, before: Node<unknown>) {
+    if (child instanceof JsiDeclarationNode) {
+      child.setInvalidate(() => (this.paintCache = null));
+    }
+    super.insertChildBefore(child, before);
+  }
+
+  private computeClip() {
+    const { clip } = this.props;
+    if (clip) {
+      if (isPathDef(clip)) {
+        this.clipPath = processPath(this.Skia, clip);
+      } else if (isRRect(clip)) {
+        this.clipRRect = clip;
+      } else {
+        this.clipRect = clip;
+      }
+    }
+  }
+
+  private computeMatrix() {
+    processTransformProps(this.matrix, this.props);
+  }
+
+  private getPaintCtx() {
+    let ctx: PaintContext | undefined;
+    const {
+      color,
+      strokeWidth,
+      blendMode,
+      style,
+      strokeJoin,
+      strokeCap,
+      strokeMiter,
+      opacity,
+      antiAlias,
+    } = this.props;
+    if (
+      color !== undefined ||
+      strokeWidth !== undefined ||
+      blendMode !== undefined ||
+      style !== undefined ||
+      strokeJoin !== undefined ||
+      strokeCap !== undefined ||
+      strokeMiter !== undefined ||
+      opacity !== undefined ||
+      antiAlias !== undefined
+    ) {
+      ctx = {};
+      if (color !== undefined) {
+        ctx.color = this.Skia.Color(color);
+      }
+      if (strokeWidth !== undefined) {
+        ctx.strokeWidth = strokeWidth;
+      }
+      if (blendMode !== undefined) {
+        ctx.blendMode = BlendMode[enumKey(blendMode)];
+      }
+      if (style !== undefined) {
+        ctx.style = PaintStyle[enumKey(style)];
+      }
+      if (strokeJoin !== undefined) {
+        ctx.strokeJoin = StrokeJoin[enumKey(strokeJoin)];
+      }
+      if (strokeCap !== undefined) {
+        ctx.strokeCap = StrokeCap[enumKey(strokeCap)];
+      }
+      if (strokeMiter !== undefined) {
+        ctx.strokeMiter = strokeMiter;
+      }
+      if (opacity !== undefined) {
+        ctx.opacity = opacity;
+      }
+      if (antiAlias !== undefined) {
+        ctx.antiAlias = antiAlias;
+      }
+    }
+    this._children.forEach((child) => {
+      if (child instanceof JsiDeclarationNode) {
+        if (child.isColorFilter()) {
+          ctx = ctx || {};
+          const cf = child.materialize();
+          ctx.colorFilter = ctx.colorFilter
+            ? this.Skia.ColorFilter.MakeCompose(cf, ctx.colorFilter)
+            : cf;
+        } else if (child.isShader()) {
+          ctx = ctx || {};
+          const shader = child.materialize();
+          ctx.shader = shader;
+        } else if (child.isPathEffect()) {
+          ctx = ctx || {};
+          const pe = child.materialize();
+          ctx.pathEffect = ctx.pathEffect
+            ? this.Skia.PathEffect.MakeCompose(pe, ctx.pathEffect)
+            : pe;
+        } else if (child.isImageFilter()) {
+          ctx = ctx || {};
+          const filter = child.materialize();
+          ctx.imageFilter = ctx.imageFilter
+            ? this.Skia.ImageFilter.MakeCompose(filter, ctx.imageFilter)
+            : filter;
+        } else if (child.isMaskFilter()) {
+          ctx = ctx || {};
+          const filter = child.materialize();
+          ctx.maskFilter = filter;
+        }
+      }
+    });
+    return ctx;
+  }
+
+  render(parentCtx: DrawingContext) {
+    const { invertClip, layer, matrix, transform } = this.props;
+    const { canvas } = parentCtx;
+
+    const opacity = this.props.opacity
+      ? parentCtx.opacity * this.props.opacity
+      : parentCtx.opacity;
+
+    if (
+      this.paintCache === null ||
+      this.paintCache.parent !== parentCtx.paint
+    ) {
+      const paintCtx = this.getPaintCtx();
+      const child = paintCtx
+        ? concatPaint(parentCtx.paint, paintCtx, parentCtx.opacity)
+        : parentCtx.paint;
+      this.paintCache = { parent: parentCtx.paint, child };
+    }
+    const paint = this.paintCache.child;
+    // TODO: can we only recreate a new context here if needed?
+    const ctx = { ...parentCtx, opacity, paint };
+    const hasTransform = matrix !== undefined || transform !== undefined;
+    const hasClip = this.clipRect !== undefined;
+    const shouldSave = hasTransform || hasClip || !!layer;
+    const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
+
+    if (shouldSave) {
+      if (layer) {
+        if (typeof layer === "boolean") {
+          canvas.saveLayer();
+        } else if (isSkPaint(layer)) {
+          canvas.saveLayer(layer);
+        } else {
+          canvas.saveLayer(
+            layer.current ? layer.current.materialize() : undefined
+          );
+        }
+      } else {
+        canvas.save();
+      }
+    }
+
+    if (this.matrix) {
+      canvas.concat(this.matrix);
+    }
+    if (this.clipRect) {
+      canvas.clipRect(this.clipRect, op, true);
+    }
+    if (this.clipRRect) {
+      canvas.clipRRect(this.clipRRect, op, true);
+    }
+    if (this.clipPath) {
+      canvas.clipPath(this.clipPath, op, true);
+    }
+
+    this.renderNode(ctx);
+
+    if (shouldSave) {
+      canvas.restore();
+    }
+  }
+
+  abstract renderNode(ctx: DrawingContext): void;
+}
+
+export const isSkPaint = (
+  obj: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint
+): obj is SkPaint => "__typename__" in obj && obj.__typename__ === "Paint";
+
+const concatPaint = (
+  parent: SkPaint,
+  {
+    color,
+    strokeWidth,
+    shader,
+    antiAlias,
+    blendMode,
+    colorFilter,
+    imageFilter,
+    maskFilter,
+    pathEffect,
+    opacity: alpha,
+    strokeCap,
+    strokeJoin,
+    strokeMiter,
+    style,
+  }: PaintContext,
+  opacity: number
+) => {
+  const paint = parent.copy();
+  if (color !== undefined) {
+    paint.setShader(null);
+    color[3] *= opacity;
+    paint.setColor(color);
+  } else {
+    const cl = paint.getColor();
+    cl[3] *= opacity;
+    paint.setColor(cl);
+  }
+  if (strokeWidth !== undefined) {
+    paint.setStrokeWidth(strokeWidth);
+  }
+  if (shader !== undefined) {
+    paint.setShader(shader);
+  }
+  if (antiAlias !== undefined) {
+    paint.setAntiAlias(antiAlias);
+  }
+  if (blendMode !== undefined) {
+    paint.setBlendMode(blendMode);
+  }
+  if (colorFilter !== undefined) {
+    paint.setColorFilter(colorFilter);
+  }
+  if (imageFilter !== undefined) {
+    paint.setImageFilter(imageFilter);
+  }
+  if (maskFilter !== undefined) {
+    paint.setMaskFilter(maskFilter);
+  }
+  if (pathEffect !== undefined) {
+    paint.setPathEffect(pathEffect);
+  }
+  if (alpha !== undefined) {
+    paint.setAlphaf(alpha * opacity);
+  }
+  if (strokeCap !== undefined) {
+    paint.setStrokeCap(strokeCap);
+  }
+  if (strokeJoin !== undefined) {
+    paint.setStrokeJoin(strokeJoin);
+  }
+  if (strokeMiter !== undefined) {
+    paint.setStrokeMiter(strokeMiter);
+  }
+  if (style !== undefined) {
+    paint.setStyle(style);
+  }
+  return paint;
+};

package/src/{renderer/processors/Circles.ts → dom/nodes/datatypes/Circle.ts}

@@ -1,19 +1,7 @@
-import type { Skia, Vector } from "../../skia/types";
+import type { Skia } from "../../../skia/types";
+import type { CircleDef, ScalarCircleDef } from "../../types";
 
-interface PointCircleDef {
-  c: Vector;
-  r: number;
-}
-
-interface ScalarCircleDef {
-  cx: number;
-  cy: number;
-  r: number;
-}
-
-export type CircleDef = PointCircleDef | ScalarCircleDef;
-
-const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>
+export const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>
   // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (def as any).cx !== undefined;

package/src/{renderer/processors → dom/nodes/datatypes}/Color.ts

@@ -1,4 +1,4 @@
-import type { Color, Skia } from "../../skia/types";
+import type { Color, Skia } from "../../../skia/types";
 
 export const RED = 0;
 export const GREEN = 1;

package/src/dom/nodes/datatypes/Enum.ts

@@ -0,0 +1,2 @@
+export const enumKey = <K extends string>(k: K) =>
+  (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;

package/src/{renderer/components/image/BoxFit.ts → dom/nodes/datatypes/Fitting.ts}

@@ -1,15 +1,6 @@
-import { exhaustiveCheck } from "../../typeddash";
+import { exhaustiveCheck } from "../../../renderer/typeddash";
 import type { SkRect } from "../../../skia/types";
-
-// https://api.flutter.dev/flutter/painting/BoxFit-class.html
-export type Fit =
-  | "cover"
-  | "contain"
-  | "fill"
-  | "fitHeight"
-  | "fitWidth"
-  | "none"
-  | "scaleDown";
+import type { Fit } from "../../types";
 
 export interface Size {
   width: number;

package/src/dom/nodes/datatypes/Gradient.ts

@@ -0,0 +1,48 @@
+import type { Skia, SkRect, Transforms2d, Vector } from "../../../skia/types";
+import { TileMode } from "../../../skia/types";
+import type { GradientProps, ImageShaderProps } from "../../types";
+
+import { enumKey } from "./Enum";
+import { processTransformProps } from "./Transform";
+
+export const transformOrigin = (origin: Vector, transform: Transforms2d) => [
+  { translateX: origin.x },
+  { translateY: origin.y },
+  ...transform,
+  { translateX: -origin.x },
+  { translateY: -origin.y },
+];
+
+export const processGradientProps = (
+  Skia: Skia,
+  { colors, positions, mode, flags, ...transform }: GradientProps
+) => {
+  const localMatrix = Skia.Matrix();
+  processTransformProps(localMatrix, transform);
+  return {
+    colors: colors.map((color) => Skia.Color(color)),
+    positions: positions ?? null,
+    mode: TileMode[enumKey(mode ?? "clamp")],
+    flags,
+    localMatrix,
+  };
+};
+
+export const getRect = (
+  Skia: Skia,
+  props: Omit<ImageShaderProps, "tx" | "ty" | "fm" | "mm" | "fit" | "image">
+): SkRect | undefined => {
+  const { x, y, width, height } = props;
+  if (props.rect) {
+    return props.rect;
+  } else if (
+    x !== undefined &&
+    y !== undefined &&
+    width !== undefined &&
+    height !== undefined
+  ) {
+    return Skia.XYWHRect(x, y, width, height);
+  } else {
+    return undefined;
+  }
+};

package/src/{renderer/processors/Paths.ts → dom/nodes/datatypes/Path.ts}

@@ -1,7 +1,6 @@
-import type { SkPath, Skia } from "../../skia/types";
-import { isPath } from "../../skia/types";
-
-export type PathDef = string | SkPath;
+import type { Skia } from "../../../skia/types";
+import { isPath } from "../../../skia/types";
+import type { PathDef } from "../../types";
 
 export const processPath = (Skia: Skia, rawPath: PathDef) => {
   const path =

package/src/{renderer/processors → dom/nodes/datatypes}/Radius.ts

@@ -1,6 +1,5 @@
-import type { Skia, Vector } from "../../skia/types";
-
-export type Radius = number | Vector;
+import type { Skia, Vector } from "../../../skia/types";
+import type { Radius } from "../../types";
 
 export const processRadius = (Skia: Skia, radius: Radius): Vector => {
   if (typeof radius === "number") {

package/src/{renderer/processors/Rects.ts → dom/nodes/datatypes/Rect.ts}

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { Skia, SkRect, SkRRect, Vector } from "../../skia/types";
+import type { Skia, SkRect, Vector } from "../../../skia/types";
+import type { RectCtor, RectDef, RRectCtor, RRectDef } from "../../types";
 
-import type { Radius } from "./Radius";
 import { processRadius } from "./Radius";
 
 export const isEdge = (pos: Vector, b: SkRect) =>
@@ -14,20 +14,6 @@ const isRRectCtor = (def: RRectDef): def is RRectCtor =>
 const isRectCtor = (def: RectDef): def is RectCtor =>
   (def as any).rect === undefined;
 
-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 const processRect = (Skia: Skia, def: RectDef) => {
   if (isRectCtor(def)) {
     return Skia.XYWHRect(def.x, def.y, def.width, def.height);

package/src/dom/nodes/datatypes/Transform.ts

@@ -0,0 +1,26 @@
+import type { TransformProps } from "../../types";
+import type { SkMatrix } from "../../../skia/types";
+import { processTransform } from "../../../skia/types";
+
+export const processTransformProps = (m3: SkMatrix, props: TransformProps) => {
+  const { transform, origin, matrix } = props;
+  if (matrix) {
+    if (origin) {
+      m3.translate(origin.x, origin.y);
+      m3.concat(matrix);
+      m3.translate(-origin.x, -origin.y);
+    } else {
+      m3.identity();
+      m3.concat(matrix);
+    }
+  } else if (transform) {
+    m3.identity();
+    if (origin) {
+      m3.translate(origin.x, origin.y);
+    }
+    processTransform(m3, transform);
+    if (origin) {
+      m3.translate(-origin.x, -origin.y);
+    }
+  }
+};

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

@@ -0,0 +1,9 @@
+export * from "./Enum";
+export * from "./Path";
+export * from "./Fitting";
+export * from "./Color";
+export * from "./Rect";
+export * from "./Radius";
+export * from "./Circle";
+export * from "./Gradient";
+export * from "./Transform";

package/src/dom/nodes/drawings/BackdropFilterNode.ts

@@ -0,0 +1,30 @@
+import { isColorFilter } from "../../../skia/types";
+import type { ChildrenProps, DrawingContext } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+import { JsiDeclarationNode } from "../Node";
+
+export class BackdropFilterNode extends JsiDrawingNode<ChildrenProps, null> {
+  constructor(ctx: NodeContext, props: ChildrenProps) {
+    super(ctx, NodeType.BackdropFilter, props);
+  }
+
+  protected deriveProps() {
+    return null;
+  }
+
+  draw({ canvas }: DrawingContext) {
+    const child = this._children[0];
+    const filter =
+      child instanceof JsiDeclarationNode ? child.materialize() : null;
+    canvas.saveLayer(
+      undefined,
+      null,
+      isColorFilter(filter)
+        ? this.Skia.ImageFilter.MakeColorFilter(filter, null)
+        : filter
+    );
+    canvas.restore();
+  }
+}

package/src/dom/nodes/drawings/Box.ts

@@ -0,0 +1,105 @@
+import type { SkRRect, Skia } from "../../../skia/types";
+import { BlurStyle, ClipOp, isRRect } from "../../../skia/types";
+import type { DrawingContext } from "../../types";
+import { DeclarationType, NodeType } from "../../types";
+import type { BoxShadowProps, BoxProps } from "../../types/Drawings";
+import type { NodeContext } from "../Node";
+import { JsiDeclarationNode } from "../Node";
+import { processColor } from "../datatypes";
+import { JsiRenderNode } from "../RenderNode";
+
+const inflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) =>
+  Skia.RRectXY(
+    Skia.XYWHRect(
+      box.rect.x - dx + tx,
+      box.rect.y - dy + ty,
+      box.rect.width + 2 * dx,
+      box.rect.height + 2 * dy
+    ),
+    box.rx + dx,
+    box.ry + dy
+  );
+
+const deflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) => inflate(Skia, box, -dx, -dy, tx, ty);
+
+export class BoxShadowNode extends JsiDeclarationNode<
+  BoxShadowProps,
+  BoxShadowProps
+> {
+  constructor(ctx: NodeContext, props: BoxShadowProps) {
+    super(ctx, DeclarationType.Unknown, NodeType.Box, props);
+  }
+
+  materialize() {
+    return this.props;
+  }
+}
+
+export class BoxNode extends JsiRenderNode<BoxProps> {
+  constructor(ctx: NodeContext, props: BoxProps) {
+    super(ctx, NodeType.Box, props);
+  }
+
+  renderNode({ canvas, paint, opacity }: DrawingContext) {
+    const { box: defaultBox } = this.props;
+    const box = isRRect(defaultBox)
+      ? defaultBox
+      : this.Skia.RRectXY(defaultBox, 0, 0);
+    const shadows = this._children
+      .map((node) => {
+        if (node instanceof BoxShadowNode) {
+          return node.materialize();
+        }
+        return null;
+      })
+      .filter((n): n is BoxShadowProps => n !== null);
+    shadows
+      .filter((shadow) => !shadow.inner)
+      .map((shadow) => {
+        const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
+        const lPaint = this.Skia.Paint();
+        lPaint.setColor(processColor(this.Skia, color, opacity));
+        lPaint.setMaskFilter(
+          this.Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
+        );
+        canvas.drawRRect(
+          inflate(this.Skia, box, spread, spread, dx, dy),
+          lPaint
+        );
+      });
+
+    canvas.drawRRect(box, paint);
+
+    shadows
+      .filter((shadow) => shadow.inner)
+      .map((shadow) => {
+        const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
+        const delta = this.Skia.Point(10 + Math.abs(dx), 10 + Math.abs(dy));
+        canvas.save();
+        canvas.clipRRect(box, ClipOp.Intersect, false);
+        const lPaint = this.Skia.Paint();
+        lPaint.setColor(processColor(this.Skia, color, opacity));
+        lPaint.setMaskFilter(
+          this.Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
+        );
+        const inner = deflate(this.Skia, box, spread, spread, dx, dy);
+        const outer = inflate(this.Skia, box, delta.x, delta.y);
+        canvas.drawDRRect(outer, inner, lPaint);
+        canvas.restore();
+      });
+  }
+}

package/src/dom/nodes/drawings/CircleNode.ts

@@ -0,0 +1,24 @@
+import type { SkPoint } from "../../../skia/types";
+import type { CircleProps, DrawingContext } from "../../types";
+import { NodeType } from "../../types";
+import { processCircle } from "../datatypes";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class CircleNode extends JsiDrawingNode<CircleProps, SkPoint> {
+  constructor(ctx: NodeContext, props: CircleProps) {
+    super(ctx, NodeType.Circle, props);
+  }
+
+  protected deriveProps() {
+    return processCircle(this.Skia, this.props).c;
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    if (!this.derived) {
+      throw new Error("CircleNode: c is undefined");
+    }
+    const { x, y } = this.derived;
+    canvas.drawCircle(x, y, this.props.r, paint);
+  }
+}