@shopify/react-native-skia 0.0.135

package/src/renderer/components/text/TextPath.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+import type { CustomPaintProps, AnimatedProps } from "../../processors";
+import { createDrawing } from "../../nodes";
+import type { SkPath, SkRSXform } from "../../../skia/types";
+import type { FontDef } from "../../processors/Font";
+import { processFont } from "../../processors/Font";
+
+export type TextPathProps = CustomPaintProps &
+  FontDef & {
+    text: string;
+    path: SkPath | string;
+    initialOffset: number;
+  };
+
+const onDraw = createDrawing<TextPathProps>(
+  (
+    { canvas, paint, fontMgr, Skia },
+    { text, initialOffset, path: pathDef, ...fontDef }
+  ) => {
+    const path =
+      typeof pathDef === "string"
+        ? Skia.Path.MakeFromSVGString(pathDef)
+        : pathDef;
+    if (path === null) {
+      throw new Error("Invalid path: " + pathDef);
+    }
+    const font = processFont(Skia, fontMgr, fontDef);
+    const ids = font.getGlyphIDs(text);
+    const widths = font.getGlyphWidths(ids, paint);
+    const rsx: SkRSXform[] = [];
+    const meas = Skia.ContourMeasureIter(path, false, 1);
+    let cont = meas.next();
+    let dist = initialOffset;
+    for (let i = 0; i < text.length && cont; i++) {
+      const width = widths[i];
+      dist += width / 2;
+      if (dist > cont.length()) {
+        // jump to next contour
+        cont = meas.next();
+        if (!cont) {
+          // We have come to the end of the path - terminate the string
+          // right here.
+          text = text.substring(0, i);
+          break;
+        }
+        dist = width / 2;
+      }
+      // Gives us the (x, y) coordinates as well as the cos/sin of the tangent
+      // line at that position.
+      const { px, py, tx, ty } = cont.getPosTan(dist);
+      const adjustedX = px - (width / 2) * tx;
+      const adjustedY = py - (width / 2) * ty;
+      rsx.push(Skia.RSXform(tx, ty, adjustedX, adjustedY));
+      dist += width / 2;
+    }
+    const blob = Skia.TextBlob.MakeFromRSXform(text, rsx, font);
+    canvas.drawTextBlob(blob, 0, 0, paint);
+  }
+);
+
+export const TextPath = (props: AnimatedProps<TextPathProps>) => {
+  return <skDrawing onDraw={onDraw} {...props} />;
+};
+
+TextPath.defaultProps = {
+  initialOffset: 0,
+};

package/src/renderer/components/text/index.ts

@@ -0,0 +1,4 @@
+export * from "./Text";
+export * from "./Glyphs";
+export * from "./TextBlob";
+export * from "./TextPath";

package/src/renderer/index.ts

@@ -0,0 +1,5 @@
+export * from "./components";
+export * from "./nodes";
+export * from "./useContextBridge";
+export * from "./DependencyManager";
+export * from "./useCanvas";

package/src/renderer/nodes/Container.tsx

@@ -0,0 +1,17 @@
+import type { DependencyManager } from "../DependencyManager";
+import type { DrawingContext } from "../DrawingContext";
+
+import { Node } from "./Node";
+
+export class Container extends Node {
+  redraw: () => void;
+
+  constructor(depMgr: DependencyManager, redraw: () => void) {
+    super(depMgr, {});
+    this.redraw = redraw;
+  }
+
+  draw(ctx: DrawingContext) {
+    this.visit(ctx);
+  }
+}

package/src/renderer/nodes/Declaration.tsx

@@ -0,0 +1,67 @@
+import type { DependencyList } from "react";
+import { useCallback } from "react";
+
+import type { DrawingContext } from "../DrawingContext";
+import type { AnimatedProps } from "../processors";
+import { isAnimated, materialize } from "../processors";
+import type { DependencyManager } from "../DependencyManager";
+import type { SkJSIInstance } from "../../skia/types";
+
+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 const useDeclaration = <P,>(
+  cb: DeclarationCallback<P>,
+  deps?: DependencyList
+) =>
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useCallback(cb, deps ?? []);
+
+export const isDeclarationNode = (
+  node: Node
+): node is DeclarationNode<unknown> => node instanceof DeclarationNode;
+
+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,67 @@
+import type { DependencyList, ReactNode } from "react";
+import { useCallback } from "react";
+
+import type { DrawingContext } from "../DrawingContext";
+import type { AnimatedProps } from "../processors/Animations/Animations";
+import { materialize } from "../processors/Animations/Animations";
+import { isPaint } from "../../skia/types";
+import type { DependencyManager } from "../DependencyManager";
+import { processPaint } from "../processors";
+
+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 const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useCallback(cb, deps ?? []);
+
+export type DrawingProps<T> = {
+  onDraw: DrawingCallback<T>;
+  skipProcessing?: boolean;
+  children?: ReactNode | ReactNode[];
+};
+
+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 declarations = this.visit(ctx);
+      const paint = processPaint(
+        ctx.Skia,
+        ctx.paint.copy(),
+        ctx.opacity,
+        drawingProps,
+        declarations
+      );
+      [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {
+        this.onDraw({ ...ctx, paint: currentPaint }, drawingProps, this);
+      });
+    }
+  }
+}

package/src/renderer/nodes/Node.ts

@@ -0,0 +1,57 @@
+import type { SkJSIInstance } from "../../skia/types";
+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: DeclarationResult | null = null;
+  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, children?: Node[]) {
+    const returnedValues: Exclude<DeclarationResult, null>[] = [];
+    (children ?? this.children).forEach((child) => {
+      if (child.memoized && child.memoizable) {
+        returnedValues.push(child.memoized);
+      } else {
+        const ret = child.draw(ctx);
+        if (ret) {
+          returnedValues.push(ret);
+          if (child.memoizable) {
+            child.memoized = ret;
+          }
+        }
+      }
+    });
+    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,42 @@
+import type { SkiaValue } from "../../../values";
+import { mapKeys } from "../../typeddash";
+
+export const isValue = (value: unknown): value is SkiaValue<unknown> => {
+  if (value === undefined || value === null) {
+    return false;
+  }
+  try {
+    if (
+      typeof value === "object" &&
+      "__typename__" in value &&
+      (value as unknown as SkiaValue<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 SkiaValue<T[typeof key]>).current;
+    }
+  });
+  return result as T;
+};
+
+export type AnimatedProps<T> = {
+  [K in keyof T]: T[K] | SkiaValue<T[K]>;
+};

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

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

package/src/renderer/processors/Circles.ts

@@ -0,0 +1,26 @@
+import type { Skia, Vector } from "../../skia/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 =>
+  // 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;
+};

package/src/renderer/processors/Clips.ts

@@ -0,0 +1,23 @@
+import { isRRect } from "../../skia/types";
+import type { SkCanvas, ClipOp, SkRect, SkRRect, Skia } from "../../skia/types";
+
+import type { PathDef } from "./Paths";
+import { processPath, isPathDef } from "./Paths";
+
+export type ClipDef = SkRRect | SkRect | PathDef;
+
+export const processClip = (
+  Skia: Skia,
+  canvas: SkCanvas,
+  def: ClipDef,
+  op: ClipOp
+) => {
+  if (isPathDef(def)) {
+    const path = processPath(Skia, 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/Color.ts

@@ -0,0 +1,15 @@
+import type { Color, Skia } from "../../skia/types";
+
+export const RED = 0;
+export const GREEN = 1;
+export const BLUE = 2;
+export const ALPHA = 3;
+
+export const rgbaColor = (r: number, g: number, b: number, a: number) =>
+  new Float32Array([r, g, b, a]);
+
+export const processColor = (Skia: Skia, cl: Color, currentOpacity: number) => {
+  const color = Skia.Color(cl);
+  color[ALPHA] *= currentOpacity;
+  return color;
+};

package/src/renderer/processors/Font.ts

@@ -0,0 +1,31 @@
+import type { SkFontMgr, SkFont, Skia } from "../../skia/types";
+
+export type FontDef = { font: SkFont } | { familyName: string; size: number };
+
+export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
+  // We have an issue to check property existence on JSI backed instances
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (fontDef as any).font !== undefined;
+
+export const processFont = (
+  Skia: Skia,
+  fontMgr: SkFontMgr,
+  fontDef: FontDef
+) => {
+  let selectedFont: SkFont;
+  if (isFont(fontDef)) {
+    selectedFont = fontDef.font;
+  } else {
+    console.warn(
+      // eslint-disable-next-line max-len
+      "Using system fonts is deprecated. Please use the font property instead: https://shopify.github.io/react-native-skia/docs/text/fonts"
+    );
+    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,118 @@
+import type { ReactNode, RefObject } from "react";
+
+import {
+  BlendMode,
+  PaintStyle,
+  StrokeJoin,
+  StrokeCap,
+  isShader,
+  isMaskFilter,
+  isColorFilter,
+  isPathEffect,
+  isImageFilter,
+} from "../../skia/types";
+import type { SkPaint, Color, SkImageFilter, Skia } from "../../skia/types";
+import type { DeclarationResult } from "../nodes";
+
+import { processColor } from "./Color";
+export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
+
+export interface ChildrenProps {
+  children?: ReactNode | ReactNode[];
+}
+
+// TODO: rename to paint props?
+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;
+  antiAlias?: boolean;
+}
+
+export const enumKey = <K extends string>(k: K) =>
+  (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;
+
+export const processPaint = (
+  Skia: Skia,
+  paint: SkPaint,
+  currentOpacity: number,
+  {
+    paint: paintRef,
+    color,
+    blendMode,
+    style,
+    strokeWidth,
+    strokeJoin,
+    strokeCap,
+    strokeMiter,
+    opacity,
+    antiAlias,
+  }: CustomPaintProps,
+  children: DeclarationResult[]
+) => {
+  if (paintRef && paintRef.current) {
+    return paintRef.current;
+  }
+  if (color !== undefined) {
+    const c = processColor(Skia, color, currentOpacity);
+    paint.setShader(null);
+    paint.setColor(c);
+  } else {
+    const c = processColor(Skia, 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);
+  }
+  if (antiAlias !== undefined) {
+    paint.setAntiAlias(antiAlias);
+  }
+  children.forEach((child) => {
+    if (isShader(child)) {
+      paint.setShader(child);
+    } else if (isMaskFilter(child)) {
+      paint.setMaskFilter(child);
+    } else if (isColorFilter(child)) {
+      paint.setColorFilter(child);
+    } else if (isPathEffect(child)) {
+      paint.setPathEffect(child);
+    }
+  });
+  const filters = children.filter(isImageFilter);
+  if (filters.length > 0) {
+    paint.setImageFilter(
+      filters
+        .reverse()
+        .reduce<SkImageFilter | null>(
+          (...args: Parameters<typeof Skia.ImageFilter.MakeCompose>) =>
+            Skia.ImageFilter.MakeCompose(...args),
+          null
+        )
+    );
+  }
+  return paint;
+};

package/src/renderer/processors/Paths.ts

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

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

package/src/renderer/processors/Rects.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Skia, SkRect, SkRRect, Vector } from "../../skia/types";
+
+import type { Radius } from "./Radius";
+import { processRadius } from "./Radius";
+
+export const isEdge = (pos: Vector, b: SkRect) =>
+  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 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);
+  } else {
+    return def.rect;
+  }
+};
+
+export const processRRect = (Skia: Skia, def: RRectDef) => {
+  if (isRRectCtor(def)) {
+    const r = processRadius(Skia, def.r);
+    return Skia.RRectXY(
+      Skia.XYWHRect(def.x, def.y, def.width, def.height),
+      r.x,
+      r.y
+    );
+  } else {
+    return def.rect;
+  }
+};