@pompadour/react-native-skia 1.4.0

package/src/dom/nodes/PaintNode.ts

@@ -0,0 +1,91 @@
+import { StrokeCap, StrokeJoin, PaintStyle, BlendMode } from "../../skia/types";
+import type { DeclarationNode, PaintProps } from "../types";
+import { NodeType } from "../types";
+import type { DeclarationContext } from "../types/DeclarationContext";
+
+import { enumKey } from "./datatypes";
+import type { NodeContext } from "./Node";
+import { JsiDeclarationNode } from "./Node";
+
+export class PaintNode
+  extends JsiDeclarationNode<PaintProps>
+  implements DeclarationNode<PaintProps>
+{
+  constructor(ctx: NodeContext, props: PaintProps = {}) {
+    super(ctx, NodeType.Paint, props);
+  }
+
+  decorate(ctx: DeclarationContext) {
+    const {
+      color,
+      strokeWidth,
+      blendMode,
+      style,
+      strokeJoin,
+      strokeCap,
+      strokeMiter,
+      opacity,
+      antiAlias,
+      dither,
+    } = 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);
+    }
+    if (dither !== undefined) {
+      paint.setDither(dither);
+    }
+    ctx.save();
+    this._children.forEach((child) => {
+      if (child instanceof JsiDeclarationNode) {
+        child.decorate(ctx);
+      }
+    });
+    const colorFilter = ctx.colorFilters.popAllAsOne();
+    const imageFilter = ctx.imageFilters.popAllAsOne();
+    const shader = ctx.shaders.pop();
+    const maskFilter = ctx.maskFilters.pop();
+    const pathEffect = ctx.pathEffects.popAllAsOne();
+    ctx.restore();
+    if (imageFilter) {
+      paint.setImageFilter(imageFilter);
+    }
+    if (shader) {
+      paint.setShader(shader);
+    }
+    if (pathEffect) {
+      paint.setPathEffect(pathEffect);
+    }
+    if (colorFilter) {
+      paint.setColorFilter(colorFilter);
+    }
+    if (maskFilter) {
+      paint.setMaskFilter(maskFilter);
+    }
+    ctx.paints.push(paint);
+  }
+}

package/src/dom/nodes/RenderNode.ts

@@ -0,0 +1,172 @@
+import type {
+  SkMatrix,
+  SkRect,
+  SkRRect,
+  SkPath,
+  SkPaint,
+} from "../../skia/types";
+import { ClipOp, isRRect } from "../../skia/types";
+import type {
+  RenderNode,
+  GroupProps,
+  NodeType,
+  Node,
+  DrawingContext,
+} from "../types";
+
+import { isPathDef, processPath, processTransformProps } from "./datatypes";
+import type { NodeContext } from "./Node";
+import { JsiNode, JsiDeclarationNode } from "./Node";
+
+const paintProps = [
+  "color",
+  "strokeWidth",
+  "blendMode",
+  "strokeCap",
+  "strokeJoin",
+  "strokeMiter",
+  "style",
+  "antiAlias",
+  "dither",
+  "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();
+  }
+
+  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);
+  }
+
+  render(ctx: DrawingContext) {
+    const { invertClip, layer, matrix, transform } = this.props;
+    const { canvas } = ctx;
+    const parentPaint = ctx.paint;
+
+    const cache =
+      this.paintCache !== null && this.paintCache.parent === ctx.paint
+        ? this.paintCache.child
+        : undefined;
+    const shouldRestore = ctx.saveAndConcat(this, cache);
+
+    const hasTransform = matrix !== undefined || transform !== undefined;
+    const hasClip =
+      this.clipRect !== undefined ||
+      this.clipPath !== undefined ||
+      this.clipRRect !== undefined;
+    const shouldSave = hasTransform || hasClip || !!layer;
+    const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
+    if (shouldSave) {
+      if (layer) {
+        if (typeof layer === "boolean") {
+          canvas.saveLayer();
+        } else {
+          canvas.saveLayer(layer);
+        }
+      } else {
+        canvas.save();
+      }
+    }
+
+    if (this.matrix) {
+      canvas.concat(this.matrix);
+    }
+    if (this.clipRect) {
+      canvas.clipRect(this.clipRect, op, true);
+    } else if (this.clipRRect) {
+      canvas.clipRRect(this.clipRRect, op, true);
+    } else if (this.clipPath) {
+      canvas.clipPath(this.clipPath, op, true);
+    }
+
+    this.renderNode(ctx);
+
+    if (shouldSave) {
+      canvas.restore();
+    }
+    if (shouldRestore) {
+      this.paintCache = {
+        parent: parentPaint,
+        child: ctx.paint,
+      };
+      ctx.restore();
+    }
+  }
+
+  abstract renderNode(ctx: DrawingContext): void;
+}

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

@@ -0,0 +1,14 @@
+import type { Skia } from "../../../skia/types";
+import type { CircleDef, ScalarCircleDef } from "../../types";
+
+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;
+
+export const processCircle = (Skia: Skia, def: CircleDef) => {
+  if (isCircleScalarDef(def)) {
+    return { c: Skia.Point(def.cx, def.cy), r: def.r };
+  }
+  return { ...def, c: def.c ?? { x: 0, y: 0 } };
+};

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/dom/nodes/datatypes/Fitting.ts

@@ -0,0 +1,131 @@
+import { exhaustiveCheck } from "../../../renderer/typeddash";
+import type { SkRect } from "../../../skia/types";
+import type { Fit } from "../../types";
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export const size = (width = 0, height = 0) => {
+  "worklet";
+  return { width, height };
+};
+
+export const rect2rect = (
+  src: SkRect,
+  dst: SkRect
+): [
+  { translateX: number },
+  { translateY: number },
+  { scaleX: number },
+  { scaleY: number }
+] => {
+  "worklet";
+  const scaleX = dst.width / src.width;
+  const scaleY = dst.height / src.height;
+  const translateX = dst.x - src.x * scaleX;
+  const translateY = dst.y - src.y * scaleY;
+  return [{ translateX }, { translateY }, { scaleX }, { scaleY }];
+};
+
+const inscribe = (
+  { width, height }: Size,
+  rect: { x: number; y: number; width: number; height: number }
+) => {
+  "worklet";
+  const halfWidthDelta = (rect.width - width) / 2.0;
+  const halfHeightDelta = (rect.height - height) / 2.0;
+  return {
+    x: rect.x + halfWidthDelta,
+    y: rect.y + halfHeightDelta,
+    width,
+    height,
+  };
+};
+
+const applyBoxFit = (fit: Fit, input: Size, output: Size) => {
+  "worklet";
+  let src = size(),
+    dst = size();
+  if (
+    input.height <= 0.0 ||
+    input.width <= 0.0 ||
+    output.height <= 0.0 ||
+    output.width <= 0.0
+  ) {
+    return { src, dst };
+  }
+  switch (fit) {
+    case "fill":
+      src = input;
+      dst = output;
+      break;
+    case "contain":
+      src = input;
+      if (output.width / output.height > src.width / src.height) {
+        dst = size((src.width * output.height) / src.height, output.height);
+      } else {
+        dst = size(output.width, (src.height * output.width) / src.width);
+      }
+      break;
+    case "cover":
+      if (output.width / output.height > input.width / input.height) {
+        src = size(input.width, (input.width * output.height) / output.width);
+      } else {
+        src = size((input.height * output.width) / output.height, input.height);
+      }
+      dst = output;
+      break;
+    case "fitWidth":
+      src = size(input.width, (input.width * output.height) / output.width);
+      dst = size(output.width, (src.height * output.width) / src.width);
+      break;
+    case "fitHeight":
+      src = size((input.height * output.width) / output.height, input.height);
+      dst = size((src.width * output.height) / src.height, output.height);
+      break;
+    case "none":
+      src = size(
+        Math.min(input.width, output.width),
+        Math.min(input.height, output.height)
+      );
+      dst = src;
+      break;
+    case "scaleDown":
+      src = input;
+      dst = input;
+      const aspectRatio = input.width / input.height;
+      if (dst.height > output.height) {
+        dst = size(output.height * aspectRatio, output.height);
+      }
+      if (dst.width > output.width) {
+        dst = size(output.width, output.width / aspectRatio);
+      }
+      break;
+    default:
+      exhaustiveCheck(fit);
+  }
+  return { src, dst };
+};
+
+export const fitRects = (
+  fit: Fit,
+  rect: SkRect,
+  { x, y, width, height }: SkRect
+) => {
+  "worklet";
+  const sizes = applyBoxFit(
+    fit,
+    { width: rect.width, height: rect.height },
+    { width, height }
+  );
+  const src = inscribe(sizes.src, rect);
+  const dst = inscribe(sizes.dst, {
+    x,
+    y,
+    width,
+    height,
+  });
+  return { src, dst };
+};

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

@@ -0,0 +1,48 @@
+import type { Skia, SkRect, Transforms3d, 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: Transforms3d) => [
+  { 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/dom/nodes/datatypes/Path.ts

@@ -0,0 +1,18 @@
+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 =
+    typeof rawPath === "string"
+      ? Skia.Path.MakeFromSVGString(rawPath)
+      : rawPath;
+  if (!path) {
+    throw new Error("Invalid path: " + rawPath);
+  }
+  return path;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isPathDef = (def: any): def is PathDef =>
+  typeof def === "string" || isPath(def);

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

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

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

@@ -0,0 +1,40 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Skia, SkRect, Vector } from "../../../skia/types";
+import type { RectCtor, RectDef, RRectCtor, RRectDef } from "../../types";
+
+import { processRadius } from "./Radius";
+
+export const isEdge = (pos: Vector, b: SkRect) => {
+  "worklet";
+  return (
+    pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.height
+  );
+};
+
+// We have an issue to check property existence on JSI backed instances
+const isRRectCtor = (def: RRectDef): def is RRectCtor =>
+  (def as any).rect === undefined;
+// We have an issue to check property existence on JSI backed instances
+const isRectCtor = (def: RectDef): def is RectCtor =>
+  (def as any).rect === undefined;
+
+export const processRect = (Skia: Skia, def: RectDef) => {
+  if (isRectCtor(def)) {
+    return Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height);
+  } else {
+    return def.rect;
+  }
+};
+
+export const processRRect = (Skia: Skia, def: RRectDef) => {
+  if (isRRectCtor(def)) {
+    const r = processRadius(Skia, def.r ?? 0);
+    return Skia.RRectXY(
+      Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height),
+      r.x,
+      r.y
+    );
+  } else {
+    return def.rect;
+  }
+};

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

@@ -0,0 +1,24 @@
+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.concat(matrix);
+    }
+  } else if (transform) {
+    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,8 @@
+export * from "./Enum";
+export * from "./Path";
+export * from "./Fitting";
+export * from "./Rect";
+export * from "./Radius";
+export * from "./Circle";
+export * from "./Gradient";
+export * from "./Transform";

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

@@ -0,0 +1,24 @@
+import { BlendMode } from "../../../skia/types";
+import type { AtlasProps, DrawingContext } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+import { enumKey } from "../datatypes";
+
+export class AtlasNode extends JsiDrawingNode<AtlasProps, null> {
+  protected deriveProps() {
+    return null;
+  }
+
+  constructor(ctx: NodeContext, props: AtlasProps) {
+    super(ctx, NodeType.Atlas, props);
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    const { image, sprites, transforms, colors, blendMode } = this.props;
+    const blend = blendMode ? BlendMode[enumKey(blendMode)] : undefined;
+    if (image) {
+      canvas.drawAtlas(image, sprites, transforms, paint, blend, colors);
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+import type { ChildrenProps, DrawingContext } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+import { JsiDeclarationNode } from "../Node";
+import type { SkImageFilter } from "../../../skia/types/ImageFilter/ImageFilter";
+
+export class BackdropFilterNode extends JsiDrawingNode<ChildrenProps, null> {
+  constructor(ctx: NodeContext, props: ChildrenProps) {
+    super(ctx, NodeType.BackdropFilter, props);
+  }
+
+  protected deriveProps() {
+    return null;
+  }
+
+  draw({ canvas, declarationCtx }: DrawingContext) {
+    const child = this._children[0];
+    let imageFilter: SkImageFilter | null = null;
+    if (child instanceof JsiDeclarationNode) {
+      declarationCtx.save();
+      child.decorate(declarationCtx);
+      const imgf = declarationCtx.imageFilters.pop();
+      if (imgf) {
+        imageFilter = imgf;
+      } else {
+        const cf = declarationCtx.colorFilters.pop();
+        if (cf) {
+          imageFilter = this.Skia.ImageFilter.MakeColorFilter(cf, null);
+        }
+      }
+      declarationCtx.restore();
+    }
+    canvas.saveLayer(undefined, null, imageFilter);
+    canvas.restore();
+  }
+}