@shopify/react-native-skia 0.0.135

package/src/renderer/processors/Transform.ts

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

package/src/renderer/processors/index.ts

@@ -0,0 +1,11 @@
+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";
+export * from "./Color";
+export * from "./Paint";

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

@@ -0,0 +1,32 @@
+import type { Vector } from "../../../skia/types";
+
+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,18 @@
+/**
+ * Linear interpolation
+ * @param value
+ * @param x
+ * @param y
+ */
+export const mix = (value: number, x: number, y: number) =>
+  x * (1 - value) + y * value;
+
+/**
+ *  @summary Clamps a node with a lower and upper bound.
+ *  @example
+    clamp(-1, 0, 100); // 0
+    clamp(1, 0, 100); // 1
+    clamp(101, 0, 100); // 100
+  */
+export const clamp = (value: number, lowerBound: number, upperBound: number) =>
+  Math.min(Math.max(lowerBound, value), upperBound);

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

@@ -0,0 +1,8 @@
+import type { Vector } from "../../../skia/types";
+
+import { canvas2Polar, polar2Canvas } from "./Coordinates";
+
+export const rotate = (tr: Vector, origin: Vector, rotation: number) => {
+  const { radius, theta } = canvas2Polar(tr, origin);
+  return polar2Canvas({ radius, theta: theta + rotation }, origin);
+};

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

@@ -0,0 +1,3 @@
+export * from "./Coordinates";
+export * from "./Math";
+export * from "./Transforms";

package/src/renderer/typeddash.ts

@@ -0,0 +1,23 @@
+export const mapKeys = <T>(obj: T) => Object.keys(obj) as (keyof T)[];
+
+export const exhaustiveCheck = (a: never): never => {
+  throw new Error(`Unexhaustive handling for ${a}`);
+};
+
+// Shallow eq on props (without children)
+export const shallowEq = <P>(p1: P, p2: P): boolean => {
+  const keys1 = mapKeys(p1);
+  const keys2 = mapKeys(p2);
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (const key of keys1) {
+    if (key === "children") {
+      continue;
+    }
+    if (p1[key] !== p2[key]) {
+      return false;
+    }
+  }
+  return true;
+};

package/src/renderer/useCanvas.ts

@@ -0,0 +1,21 @@
+import React, { useContext } from "react";
+
+import type { Skia } from "../skia/types";
+import type { SkiaValue } from "../values/types";
+
+interface CanvasContext {
+  Skia: Skia;
+  size: SkiaValue<{ width: number; height: number }>;
+}
+
+const CanvasContext = React.createContext<CanvasContext | null>(null);
+
+export const CanvasProvider = CanvasContext.Provider;
+
+export const useCanvas = () => {
+  const ctx = useContext(CanvasContext);
+  if (!ctx) {
+    throw new Error("Canvas context is not available");
+  }
+  return ctx;
+};

package/src/renderer/useContextBridge.tsx

@@ -0,0 +1,21 @@
+import React, { useMemo, useContext } from "react";
+import type { ReactNode, Context, ReactElement } from "react";
+
+// useContextBridge() is taken from https://github.com/pmndrs/drei#usecontextbridge
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useContextBridge = (...contexts: Context<any>[]) => {
+  const values =
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    contexts.map((context) => useContext(context));
+  return useMemo(
+    () =>
+      ({ children }: { children: ReactNode }) =>
+        contexts.reduceRight(
+          (acc, Context, i) => (
+            <Context.Provider value={values[i]} children={acc} />
+          ),
+          children
+        ) as ReactElement,
+    [contexts, values]
+  );
+};

package/src/skia/NativeSetup.ts

@@ -0,0 +1,18 @@
+import { NativeModules, Platform } from "react-native";
+
+if (Platform.OS !== "web" && global.SkiaApi == null) {
+  // Initialize RN Skia
+  const SkiaModule = NativeModules.RNSkia;
+  if (SkiaModule == null || typeof SkiaModule.install !== "function") {
+    throw new Error(
+      "Native RNSkia Module cannot be found! Make sure you correctly " +
+        "installed native dependencies and rebuilt your app."
+    );
+  }
+  const result = SkiaModule.install();
+  if (result !== true) {
+    throw new Error(
+      `Native Skia Module failed to correctly install JSI Bindings! Result: ${result}`
+    );
+  }
+}

package/src/skia/Skia.ts

@@ -0,0 +1,11 @@
+/*global SkiaApi*/
+import type { Skia as SkSkiaApi } from "./types";
+
+/**
+ * Declares the SkiaApi as an available object in the global scope
+ */
+declare global {
+  var SkiaApi: SkSkiaApi;
+}
+
+export const Skia = SkiaApi;

package/src/skia/Skia.web.ts

@@ -0,0 +1,3 @@
+import { JsiSkApi } from "./web";
+
+export const Skia = JsiSkApi(global.CanvasKit);

package/src/skia/core/Data.ts

@@ -0,0 +1,98 @@
+import type { DependencyList } from "react";
+import { useRef, useEffect, useState } from "react";
+import { Image, Platform } from "react-native";
+
+import { Skia } from "../Skia";
+import type { SkData, DataSource } from "../types";
+
+const resolveAsset = (source: ReturnType<typeof require>) => {
+  return Platform.OS === "web"
+    ? source.default
+    : Image.resolveAssetSource(source).uri;
+};
+
+const factoryWrapper = <T>(
+  data2: SkData,
+  factory: (data: SkData) => T,
+  onError?: (err: Error) => void
+) => {
+  const factoryResult = factory(data2);
+  if (factoryResult === null) {
+    onError && onError(new Error("Could not load data"));
+    return null;
+  } else {
+    return factoryResult;
+  }
+};
+
+const loadDataCollection = <T>(
+  sources: DataSource[],
+  factory: (data: SkData) => T,
+  onError?: (err: Error) => void
+): Promise<(T | null)[]> =>
+  Promise.all(sources.map((source) => loadData(source, factory, onError)));
+
+const loadData = <T>(
+  source: DataSource,
+  factory: (data: SkData) => T,
+  onError?: (err: Error) => void
+): Promise<T | null> => {
+  if (source instanceof Uint8Array) {
+    return new Promise((resolve) =>
+      resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))
+    );
+  } else {
+    const uri = typeof source === "string" ? source : resolveAsset(source);
+    return Skia.Data.fromURI(uri).then((d) =>
+      factoryWrapper(d, factory, onError)
+    );
+  }
+};
+
+type Source = DataSource | null | undefined;
+
+const useLoading = <T>(
+  source: Source,
+  loader: () => Promise<T | null>,
+  deps: DependencyList = []
+) => {
+  const [data, setData] = useState<T | null>(null);
+  const prevSourceRef = useRef<Source>();
+  useEffect(() => {
+    if (prevSourceRef.current !== source) {
+      prevSourceRef.current = source;
+      loader().then(setData);
+    } else {
+      setData(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+  return data;
+};
+
+export const useDataCollection = <T>(
+  sources: DataSource[],
+  factory: (data: SkData) => T,
+  onError?: (err: Error) => void,
+  deps?: DependencyList
+) =>
+  useLoading(
+    sources,
+    () => loadDataCollection(sources, factory, onError),
+    deps
+  );
+
+export const useRawData = <T>(
+  source: DataSource | null | undefined,
+  factory: (data: SkData) => T,
+  onError?: (err: Error) => void,
+  deps?: DependencyList
+) => useLoading(source, () => loadData(source, factory, onError), deps);
+
+const identity = (data: SkData) => data;
+
+export const useData = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void,
+  deps?: DependencyList
+) => useRawData(source, identity, onError, deps);

package/src/skia/core/Font.ts

@@ -0,0 +1,28 @@
+/*global SkiaApi*/
+import { useMemo } from "react";
+
+import { Skia } from "../Skia";
+import type { DataSource, SkFont } from "../types";
+
+import { useTypeface } from "./Typeface";
+
+/**
+ * Returns a Skia Font object
+ * */
+export const useFont = (
+  font: DataSource | null | undefined,
+  size?: number,
+  onError?: (err: Error) => void
+): SkFont | null => {
+  const typeface = useTypeface(font, onError);
+  return useMemo(() => {
+    if (typeface && size) {
+      return Skia.Font(typeface, size);
+    } else if (typeface && !size) {
+      return Skia.Font(typeface);
+    } else {
+      return null;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [typeface]);
+};

package/src/skia/core/Image.ts

@@ -0,0 +1,12 @@
+import { Skia } from "../Skia";
+import type { DataSource } from "../types";
+
+import { useRawData } from "./Data";
+
+/**
+ * Returns a Skia Image object
+ * */
+export const useImage = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void
+) => useRawData(source, Skia.Image.MakeImageFromEncoded, onError);

package/src/skia/core/Matrix.ts

@@ -0,0 +1,6 @@
+import { Skia } from "../Skia";
+import type { Transforms2d } from "../types";
+import { processTransform } from "../types";
+
+export const processTransform2d = (transforms: Transforms2d) =>
+  processTransform(Skia.Matrix(), transforms);

package/src/skia/core/Paint.ts

@@ -0,0 +1,22 @@
+import type { DependencyList } from "react";
+import { useMemo } from "react";
+
+import { Skia } from "../Skia";
+import type { SkPaint } from "../types";
+
+/**
+ * Returns a Skia Paint object
+ * */
+export const usePaint = (
+  initializer?: (paint: SkPaint) => void,
+  deps?: DependencyList
+) =>
+  useMemo(() => {
+    console.warn("usePaint() is deprecated. Use Skia.Paint() instead.");
+    const p = Skia.Paint();
+    if (initializer) {
+      initializer(p);
+    }
+    return p;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);

package/src/skia/core/Path.ts

@@ -0,0 +1,60 @@
+import type { DependencyList } from "react";
+import { useMemo } from "react";
+
+import { Skia } from "../Skia";
+import type { SkFont, SkPath } from "../types";
+
+/**
+ * Memoizes and returns a Skia Path object with optional initializer
+ * @param initializer
+ * @param deps
+ * @returns
+ */
+export const usePath = (
+  initializer?: (path: SkPath) => void,
+  deps?: DependencyList
+) =>
+  useMemo(() => {
+    console.warn("usePath() is deprecated. Use Skia.Path.Make() instead.");
+    const p = Skia.Path.Make();
+    if (initializer) {
+      initializer(p);
+    }
+    return p;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initializer, deps]);
+
+/**
+ * Initializes a Skia Path from an svg path string
+ * @param svgpath
+ * @returns
+ */
+// MakeFromSVGString
+export const useSvgPath = (svgpath: string) =>
+  useMemo(() => {
+    console.warn(
+      "useSvgPath() is deprecated. Use Skia.Path.MakeFromSVGString() instead."
+    );
+    const p = Skia.Path.MakeFromSVGString(svgpath);
+    if (p === null) {
+      throw new Error(`Invalid SVG path: ${svgpath}`);
+    }
+    return p;
+  }, [svgpath]);
+
+/**
+ * Initializes a Skia Path from a text string
+ * @param svgpath
+ * @returns
+ */
+export const useTextPath = (text: string, x: number, y: number, font: SkFont) =>
+  useMemo(() => {
+    console.warn(
+      "useTextPath() is deprecated. Use Skia.Path.MakeFromText() instead."
+    );
+    const p = Skia.Path.MakeFromText(text, x, y, font);
+    if (p === null) {
+      throw new Error("Text path creation failed.");
+    }
+    return p;
+  }, [text, x, y, font]);

package/src/skia/core/Picture.ts

@@ -0,0 +1,25 @@
+import type { DependencyList } from "react";
+import { useMemo } from "react";
+
+import { Skia } from "../Skia";
+import type { SkCanvas, SkPicture, SkRect } from "../types";
+
+/**
+ * Memoizes and returns an SkPicture that can be drawn to another canvas.
+ * @param rect Picture bounds
+ * @param cb Callback for drawing to the canvas
+ * @returns SkPicture
+ */
+export const usePicture = (
+  rect: SkRect,
+  cb: (canvas: SkCanvas) => void,
+  deps: DependencyList = []
+): SkPicture => {
+  return useMemo(() => {
+    const recorder = Skia.PictureRecorder();
+    const canvas = recorder.beginRecording(rect);
+    cb(canvas);
+    return recorder.finishRecordingAsPicture();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cb, rect, deps]);
+};

package/src/skia/core/RRect.tsx

@@ -0,0 +1,5 @@
+import { Skia } from "../Skia";
+import type { SkRect } from "../types";
+
+export const rrect = (r: SkRect, rx: number, ry: number) =>
+  Skia.RRectXY(r, rx, ry);

package/src/skia/core/Rect.ts

@@ -0,0 +1,33 @@
+import { Skia } from "../Skia";
+import type { SkRect, SkRRect } from "../types";
+import { isRRect } from "../types";
+
+import { vec } from "./Vector";
+
+export const rect = (x: number, y: number, width: number, height: number) =>
+  Skia.XYWHRect(x, y, width, height);
+
+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);

package/src/skia/core/SVG.ts

@@ -0,0 +1,9 @@
+import { Skia } from "../Skia";
+import type { DataSource } from "../types";
+
+import { useRawData } from "./Data";
+
+export const useSVG = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void
+) => useRawData(source, Skia.SVG.MakeFromData, onError);

package/src/skia/core/Typeface.ts

@@ -0,0 +1,16 @@
+import { Skia } from "../Skia";
+import type { DataSource } from "../types";
+
+import { useRawData } from "./Data";
+/**
+ * Returns a Skia Typeface object
+ * */
+export const useTypeface = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void
+) =>
+  useRawData(
+    source,
+    Skia.Typeface.MakeFreeTypeFaceFromData.bind(Skia.Typeface),
+    onError
+  );

package/src/skia/core/Vector.ts

@@ -0,0 +1,11 @@
+import { Skia } from "../Skia";
+import type { Vector } from "../types";
+
+export const vec = (x = 0, y?: number) => Skia.Point(x, y ?? x);
+export const point = vec;
+export const neg = (a: Vector) => vec(-a.x, -a.y);
+export const add = (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y);
+export const sub = (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y);
+export const dist = (a: Vector, b: Vector) => Math.hypot(a.x - b.x, a.y - b.y);
+export const translate = ({ x, y }: Vector) =>
+  [{ translateX: x }, { translateY: y }] as const;

package/src/skia/core/index.ts

@@ -0,0 +1,12 @@
+export * from "./Data";
+export * from "./Font";
+export * from "./Typeface";
+export * from "./Image";
+export * from "./Picture";
+export * from "./SVG";
+export * from "./Path";
+export * from "./Vector";
+export * from "./Rect";
+export * from "./RRect";
+export * from "./Matrix";
+export * from "./Paint";

package/src/skia/index.ts

@@ -0,0 +1,3 @@
+export { Skia } from "./Skia";
+export * from "./core";
+export * from "./types";