@shopify/react-native-skia 0.1.115

package/src/renderer/nodes/Declaration.tsx

@@ -0,0 +1,53 @@
+import type { DrawingContext } from "../DrawingContext";
+import type { SkJSIInstance } from "../../skia/JsiInstance";
+import type { AnimatedProps } from "../processors";
+import { isAnimated, materialize } from "../processors";
+import type { DependencyManager } from "../DependencyManager";
+
+import { Node } from "./Node";
+
+export type DeclarationResult = SkJSIInstance<string> | null;
+
+type DeclarationCallback<T> = (
+  props: T,
+  children: DeclarationResult[],
+  ctx: DrawingContext
+) => DeclarationResult;
+
+export const createDeclaration = <T,>(
+  cb: DeclarationCallback<T>
+): DeclarationCallback<T> => cb;
+
+export interface DeclarationProps<P> {
+  onDeclare: DeclarationCallback<P>;
+}
+
+export class DeclarationNode<P> extends Node<P> {
+  private onDeclare: DeclarationCallback<P>;
+
+  constructor(
+    depMgr: DependencyManager,
+    onDeclare: DeclarationCallback<P>,
+    props: AnimatedProps<P>
+  ) {
+    super(depMgr, props);
+    super.memoizable = !isAnimated(props);
+    this.onDeclare = onDeclare;
+  }
+
+  set props(props: AnimatedProps<P>) {
+    this.memoizable = !isAnimated(props);
+    super.props = props;
+  }
+
+  get props() {
+    return this._props;
+  }
+
+  draw(ctx: DrawingContext) {
+    const children = this.visit(ctx);
+    const props = materialize(this.props);
+    const obj = this.onDeclare(props, children, ctx);
+    return obj;
+  }
+}

package/src/renderer/nodes/Drawing.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import React from "react";
+
+import type { DrawingContext } from "../DrawingContext";
+import { processPaint, selectPaint } from "../processors";
+import type { AnimatedProps } from "../processors/Animations/Animations";
+import { materialize } from "../processors/Animations/Animations";
+import { isPaint } from "../../skia";
+import type { DependencyManager } from "../DependencyManager";
+
+import { Node } from "./Node";
+
+type DrawingCallback<P> = (
+  ctx: DrawingContext,
+  props: P,
+  node: Node<P>
+) => void;
+
+type OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;
+
+export const createDrawing = <P,>(cb: OnDrawCallback<P>): DrawingCallback<P> =>
+  cb;
+
+export type DrawingProps<T> = {
+  onDraw: DrawingCallback<T>;
+  skipProcessing?: boolean;
+  children?: ReactNode | ReactNode[];
+};
+
+export const Drawing = <P,>(props: DrawingProps<P>) => {
+  return <skDrawing {...props} />;
+};
+
+export class DrawingNode<P> extends Node<P> {
+  onDraw: DrawingCallback<P>;
+  skipProcessing: boolean;
+
+  constructor(
+    depMgr: DependencyManager,
+    onDraw: DrawingCallback<P>,
+    skipProcessing: boolean,
+    props: AnimatedProps<P>
+  ) {
+    super(depMgr, props);
+    this.onDraw = onDraw;
+    this.skipProcessing = skipProcessing;
+  }
+
+  draw(ctx: DrawingContext) {
+    const drawingProps = materialize(this.props);
+    if (this.skipProcessing) {
+      this.onDraw(ctx, drawingProps, this);
+    } else {
+      const selectedPaint = selectPaint(ctx.paint, drawingProps);
+      processPaint(selectedPaint, ctx.opacity, drawingProps);
+      // to draw only once:
+      // onDraw({ ...ctx, paint: selectedPaint }, children);
+      [
+        selectedPaint,
+        ...this.children
+          .map((child) => {
+            //if (child.type === NodeType.Declaration) {
+            const ret = child.draw(ctx);
+            if (ret) {
+              return ret;
+            }
+            //}
+            return null;
+          })
+          .filter(isPaint),
+      ].forEach((paint) => {
+        this.onDraw({ ...ctx, paint }, drawingProps, this);
+      });
+    }
+  }
+}

package/src/renderer/nodes/Node.ts

@@ -0,0 +1,60 @@
+import { isPaint } from "../../skia";
+import type { SkJSIInstance } from "../../skia/JsiInstance";
+import type { DependencyManager } from "../DependencyManager";
+import type { DrawingContext } from "../DrawingContext";
+import type { AnimatedProps } from "../processors";
+
+export enum NodeType {
+  Declaration = "skDeclaration",
+  Drawing = "skDrawing",
+}
+
+type DeclarationResult = SkJSIInstance<string> | null;
+
+export abstract class Node<P = unknown> {
+  readonly children: Node[] = [];
+  _props: AnimatedProps<P>;
+  memoizable = false;
+  memoized = false;
+  parent?: Node;
+  depMgr: DependencyManager;
+
+  constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {
+    this._props = props;
+    this.depMgr = depMgr;
+    this.depMgr.unSubscribeNode(this);
+    this.depMgr.subscribeNode(this, props);
+  }
+
+  abstract draw(ctx: DrawingContext): void | DeclarationResult;
+
+  set props(props: AnimatedProps<P>) {
+    this.depMgr.unSubscribeNode(this);
+    this.depMgr.subscribeNode(this, props);
+    this._props = props;
+  }
+
+  get props() {
+    return this._props;
+  }
+
+  visit(ctx: DrawingContext) {
+    const returnedValues: Exclude<DeclarationResult, null>[] = [];
+    let currentCtx = ctx;
+    this.children.forEach((child) => {
+      if (!child.memoized) {
+        const ret = child.draw(currentCtx);
+        if (ret) {
+          if (isPaint(ret)) {
+            currentCtx = { ...currentCtx, paint: ret };
+          }
+          returnedValues.push(ret);
+        }
+        if (child.memoizable) {
+          child.memoized = true;
+        }
+      }
+    });
+    return returnedValues;
+  }
+}

package/src/renderer/nodes/index.ts

@@ -0,0 +1,4 @@
+export * from "./Drawing";
+export * from "./Declaration";
+export * from "./Container";
+export * from "./Node";

package/src/renderer/processors/Animations/Animations.ts

@@ -0,0 +1,48 @@
+import type { SkiaReadonlyValue } from "../../../values";
+import type { DrawingContext } from "../../DrawingContext";
+import { mapKeys } from "../../typeddash";
+
+export type FrameValue<T> = (ctx: DrawingContext) => T;
+
+export const isValue = (
+  value: unknown
+): value is SkiaReadonlyValue<unknown> => {
+  if (value === undefined || value === null) {
+    return false;
+  }
+  try {
+    if (
+      typeof value === "object" &&
+      "__typename__" in value &&
+      (value as unknown as SkiaReadonlyValue<unknown>).__typename__ ===
+        "RNSkValue"
+    ) {
+      return true;
+    }
+  } catch {}
+  return false;
+};
+
+export const isAnimated = <T>(props: AnimatedProps<T>) => {
+  for (const value of Object.values(props)) {
+    if (isValue(value)) {
+      return true;
+    }
+  }
+  return false;
+};
+
+export const materialize = <T>(props: AnimatedProps<T>) => {
+  const result = { ...props };
+  mapKeys(props).forEach((key) => {
+    const value = props[key];
+    if (isValue(value)) {
+      result[key] = (value as SkiaReadonlyValue<T[typeof key]>).current;
+    }
+  });
+  return result as T;
+};
+
+export type AnimatedProps<T> = {
+  [K in keyof T]: T[K] | SkiaReadonlyValue<T[K]>;
+};

package/src/renderer/processors/Animations/index.ts

@@ -0,0 +1 @@
+export * from "./Animations";

package/src/renderer/processors/Circles.ts

@@ -0,0 +1,25 @@
+import type { Vector } from "./math/Vector";
+import { vec } from "./math/Vector";
+
+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 =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (def as any).cx;
+export const processCircle = (def: CircleDef) => {
+  if (isCircleScalarDef(def)) {
+    return { c: vec(def.cx, def.cy), r: def.r };
+  }
+  return def;
+};

package/src/renderer/processors/Clips.ts

@@ -0,0 +1,19 @@
+import type { SkCanvas, ClipOp } from "../../skia/Canvas";
+import type { SkRect, SkRRect } from "../../skia";
+
+import type { PathDef } from "./Paths";
+import { processPath, isPathDef } from "./Paths";
+import { isRRect } from "./Rects";
+
+export type ClipDef = SkRRect | SkRect | PathDef;
+
+export const processClip = (canvas: SkCanvas, def: ClipDef, op: ClipOp) => {
+  if (isPathDef(def)) {
+    const path = processPath(def);
+    canvas.clipPath(path, op, true);
+  } else if (isRRect(def)) {
+    canvas.clipRRect(def, op, true);
+  } else {
+    canvas.clipRect(def, op, true);
+  }
+};

package/src/renderer/processors/Font.ts

@@ -0,0 +1,25 @@
+import type { SkFont } from "../../skia";
+import { Skia } from "../../skia/Skia";
+import type { FontMgr } from "../../skia/FontMgr/FontMgr";
+
+export type FontDef = { font: SkFont } | { familyName: string; size: number };
+
+export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
+  // We use any here for safety (JSI instances don't have hasProperty working properly);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (fontDef as any).font !== undefined;
+
+export const processFont = (fontMgr: FontMgr, fontDef: FontDef) => {
+  let selectedFont: SkFont;
+  if (isFont(fontDef)) {
+    selectedFont = fontDef.font;
+  } else {
+    const { familyName, size } = fontDef;
+    const typeface = fontMgr.matchFamilyStyle(familyName);
+    if (typeface === null) {
+      throw new Error(`No typeface found for ${familyName}`);
+    }
+    selectedFont = Skia.Font(typeface, size);
+  }
+  return selectedFont;
+};

package/src/renderer/processors/Paint.ts

@@ -0,0 +1,105 @@
+import type { ReactNode, RefObject } from "react";
+
+import {
+  BlendMode,
+  PaintStyle,
+  StrokeJoin,
+  StrokeCap,
+  processColor,
+} from "../../skia";
+import type { SkPaint, Color } from "../../skia";
+export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
+
+export interface ChildrenProps {
+  children?: ReactNode | ReactNode[];
+}
+
+export interface CustomPaintProps extends ChildrenProps {
+  paint?: RefObject<SkPaint>;
+  color?: Color;
+  strokeWidth?: number;
+  blendMode?: SkEnum<typeof BlendMode>;
+  style?: SkEnum<typeof PaintStyle>;
+  strokeJoin?: SkEnum<typeof StrokeJoin>;
+  strokeCap?: SkEnum<typeof StrokeCap>;
+  strokeMiter?: number;
+  opacity?: number;
+}
+
+export const enumKey = <K extends string>(k: K) =>
+  (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;
+
+export const processPaint = (
+  paint: SkPaint,
+  currentOpacity: number,
+  {
+    color,
+    blendMode,
+    style,
+    strokeWidth,
+    strokeJoin,
+    strokeCap,
+    strokeMiter,
+    opacity,
+  }: CustomPaintProps
+) => {
+  if (color !== undefined) {
+    const c = processColor(color, currentOpacity);
+    paint.setShader(null);
+    paint.setColor(c);
+  } else {
+    const c = processColor(paint.getColor(), currentOpacity);
+    paint.setColor(c);
+  }
+  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 (strokeWidth !== undefined) {
+    paint.setStrokeWidth(strokeWidth);
+  }
+  if (opacity !== undefined) {
+    paint.setAlphaf(opacity);
+  }
+};
+
+export const selectPaint = (
+  currentPaint: SkPaint,
+  {
+    paint,
+    color: cl,
+    blendMode,
+    style: paintStyle,
+    strokeWidth,
+    strokeJoin,
+    strokeCap,
+    strokeMiter,
+    opacity,
+  }: CustomPaintProps
+) => {
+  const hasCustomPaint =
+    cl !== undefined ||
+    blendMode !== undefined ||
+    paintStyle !== undefined ||
+    strokeWidth !== undefined ||
+    strokeJoin !== undefined ||
+    opacity !== undefined ||
+    strokeCap !== undefined ||
+    strokeMiter !== undefined;
+  const parentPaint = paint?.current ?? currentPaint;
+  if (hasCustomPaint) {
+    return parentPaint.copy();
+  }
+  return parentPaint;
+};

package/src/renderer/processors/Paths.ts

@@ -0,0 +1,19 @@
+import type { SkPath } from "../../skia";
+import { Skia, isPath } from "../../skia";
+
+export type PathDef = string | SkPath;
+
+export const processPath = (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/renderer/processors/Radius.ts

@@ -0,0 +1,11 @@
+import type { Vector } from "./math";
+import { vec } from "./math";
+
+export type Radius = number | Vector;
+
+export const processRadius = (radius: Radius): Vector => {
+  if (typeof radius === "number") {
+    return vec(radius, radius);
+  }
+  return radius;
+};

package/src/renderer/processors/Rects.ts

@@ -0,0 +1,86 @@
+// Here we use any because hasOwnProperty doesn't work on JSI instances not does the (key in obj) syntax
+// And using Object.keys for such use-case is incredibly slow
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { SkRect, SkRRect } from "../../skia";
+
+import { vec } from "./math/Vector";
+import type { Radius } from "./Radius";
+import { processRadius } from "./Radius";
+
+export const point = (x: number, y: number) => ({ x, y });
+
+export const rect = (x: number, y: number, width: number, height: number) => ({
+  x,
+  y,
+  width,
+  height,
+});
+
+export const rrect = (r: SkRect, rx: number, ry: number) => ({
+  rect: r,
+  rx,
+  ry,
+});
+
+export const bounds = (rects: SkRect[]) => {
+  const x = Math.min(...rects.map((r) => r.x));
+  const y = Math.min(...rects.map((r) => r.y));
+  const width = Math.max(...rects.map((r) => r.x + r.width));
+  const height = Math.max(...rects.map((r) => r.y + r.height));
+  return rect(x, y, width, height);
+};
+
+export const topLeft = (r: SkRect | SkRRect) =>
+  isRRect(r) ? vec(r.rect.x, r.rect.y) : vec(r.x, r.y);
+export const topRight = (r: SkRect | SkRRect) =>
+  isRRect(r) ? vec(r.rect.x + r.rect.width, r.rect.y) : vec(r.x + r.width, r.y);
+export const bottomLeft = (r: SkRect | SkRRect) =>
+  isRRect(r)
+    ? vec(r.rect.x, r.rect.y + r.rect.height)
+    : vec(r.x, r.y + r.height);
+export const bottomRight = (r: SkRect | SkRRect) =>
+  isRRect(r)
+    ? vec(r.rect.x + r.rect.width, r.rect.y + r.rect.height)
+    : vec(r.x + r.width, r.y + r.height);
+export const center = (r: SkRect | SkRRect) =>
+  isRRect(r)
+    ? vec(r.rect.x + r.rect.width / 2, r.rect.y + r.rect.height / 2)
+    : vec(r.x + r.width / 2, r.y + r.height / 2);
+
+const isRRectCtor = (def: RRectDef): def is RRectCtor =>
+  (def as any).rect === undefined;
+const isRectCtor = (def: RectDef): def is RectCtor =>
+  (def as any).rect === undefined;
+export const isRRect = (def: SkRect | SkRRect): def is SkRRect =>
+  (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 = (def: RectDef) => {
+  if (isRectCtor(def)) {
+    return rect(def.x, def.y, def.width, def.height);
+  } else {
+    return def.rect;
+  }
+};
+
+export const processRRect = (def: RRectDef) => {
+  if (isRRectCtor(def)) {
+    const r = processRadius(def.r);
+    return rrect(rect(def.x, def.y, def.width, def.height), r.x, r.y);
+  } else {
+    return def.rect;
+  }
+};

package/src/renderer/processors/Transform.ts

@@ -0,0 +1,44 @@
+import type { DrawingContext } from "../DrawingContext";
+import type { SkMatrix } from "../../skia/Matrix";
+
+import { neg, processTransform2d } from "./math";
+import type { Transforms2d, Vector } from "./math";
+
+export interface TransformProps {
+  transform?: Transforms2d;
+  origin?: Vector;
+  matrix?: SkMatrix;
+}
+
+export const processTransform = (
+  { canvas }: DrawingContext,
+  { transform, origin, matrix }: TransformProps
+) => {
+  if (transform) {
+    if (matrix) {
+      canvas.concat(matrix);
+    } else {
+      const m3 = processTransform2d(
+        origin ? transformOrigin(origin, transform) : transform
+      );
+      canvas.concat(m3);
+    }
+  }
+};
+
+export const localMatrix = ({ transform, origin }: TransformProps) => {
+  if (transform) {
+    return processTransform2d(
+      origin ? transformOrigin(origin, transform) : transform
+    );
+  }
+  return undefined;
+};
+
+const translate = (a: Vector) => [{ translateX: a.x }, { translateY: a.y }];
+
+export const transformOrigin = (origin: Vector, transform: Transforms2d) => [
+  ...translate(origin),
+  ...transform,
+  ...translate(neg(origin)),
+];

package/src/renderer/processors/index.ts

@@ -0,0 +1,10 @@
+export * from "./Paint";
+export * from "./Transform";
+export * from "./Animations";
+export * from "./Circles";
+export * from "./Rects";
+export * from "./math";
+export * from "./Font";
+export * from "./Paths";
+export * from "./Clips";
+export * from "./Radius";

package/src/renderer/processors/math/Coordinates.ts

@@ -0,0 +1,32 @@
+import type { Vector } from "./Vector";
+
+export interface PolarPoint {
+  theta: number;
+  radius: number;
+}
+
+export const canvas2Cartesian = (v: Vector, center: Vector) => ({
+  x: v.x - center.x,
+  y: -1 * (v.y - center.y),
+});
+
+export const cartesian2Canvas = (v: Vector, center: Vector) => ({
+  x: v.x + center.x,
+  y: -1 * v.y + center.y,
+});
+
+export const cartesian2Polar = (v: Vector) => ({
+  theta: Math.atan2(v.y, v.x),
+  radius: Math.sqrt(v.x ** 2 + v.y ** 2),
+});
+
+export const polar2Cartesian = (p: PolarPoint) => ({
+  x: p.radius * Math.cos(p.theta),
+  y: p.radius * Math.sin(p.theta),
+});
+
+export const polar2Canvas = (p: PolarPoint, center: Vector) =>
+  cartesian2Canvas(polar2Cartesian(p), center);
+
+export const canvas2Polar = (v: Vector, center: Vector) =>
+  cartesian2Polar(canvas2Cartesian(v, center));

package/src/renderer/processors/math/Math.ts

@@ -0,0 +1,2 @@
+export const mix = (value: number, x: number, y: number) =>
+  x * (1 - value) + y * value;