@shopify/react-native-skia 0.1.128 → 0.1.131

package/src/renderer/processors/Clips.ts

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

@@ -1,6 +1,4 @@
-import type { SkFont } from "../../skia";
-import { Skia } from "../../skia/Skia";
-import type { FontMgr } from "../../skia/FontMgr/FontMgr";
+import type { SkFontMgr, SkFont, Skia } from "../../skia/types";
 
 export type FontDef = { font: SkFont } | { familyName: string; size: number };
 
@@ -9,11 +7,19 @@ export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (fontDef as any).font !== undefined;
 
-export const processFont = (fontMgr: FontMgr, fontDef: FontDef) => {
+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) {

package/src/renderer/processors/Paint.ts

@@ -5,16 +5,16 @@ import {
   PaintStyle,
   StrokeJoin,
   StrokeCap,
-  processColor,
   isShader,
   isMaskFilter,
   isColorFilter,
   isPathEffect,
   isImageFilter,
-  Skia,
-} from "../../skia";
-import type { SkPaint, Color, SkImageFilter } from "../../skia";
+} 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 {
@@ -39,6 +39,7 @@ 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,
   {
@@ -59,11 +60,11 @@ export const processPaint = (
     return paintRef.current;
   }
   if (color !== undefined) {
-    const c = processColor(color, currentOpacity);
+    const c = processColor(Skia, color, currentOpacity);
     paint.setShader(null);
     paint.setColor(c);
   } else {
-    const c = processColor(paint.getColor(), currentOpacity);
+    const c = processColor(Skia, paint.getColor(), currentOpacity);
     paint.setColor(c);
   }
   if (blendMode !== undefined) {
@@ -106,7 +107,11 @@ export const processPaint = (
     paint.setImageFilter(
       filters
         .reverse()
-        .reduce<SkImageFilter | null>(Skia.ImageFilter.MakeCompose, null)
+        .reduce<SkImageFilter | null>(
+          (...args: Parameters<typeof Skia.ImageFilter.MakeCompose>) =>
+            Skia.ImageFilter.MakeCompose(...args),
+          null
+        )
     );
   }
   return paint;

package/src/renderer/processors/Paths.ts

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

package/src/renderer/processors/Radius.ts

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

package/src/renderer/processors/Rects.ts

@@ -1,43 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { SkRect, SkRRect } from "../../skia";
-import { Skia } from "../../skia";
+import type { Skia, SkRect, SkRRect, Vector } from "../../skia/types";
 
-import { vec } from "./math/Vector";
 import type { Radius } from "./Radius";
 import { processRadius } from "./Radius";
 
-export const point = (x: number, y: number) => Skia.Point(x, y);
-
-export const rect = (x: number, y: number, width: number, height: number) =>
-  Skia.XYWHRect(x, y, width, height);
-
-export const rrect = (r: SkRect, rx: number, ry: number) =>
-  Skia.RRectXY(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);
+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 =>
@@ -45,9 +13,6 @@ const isRRectCtor = (def: RRectDef): def is RRectCtor =>
 // We have an issue to check property existence on JSI backed instances
 const isRectCtor = (def: RectDef): def is RectCtor =>
   (def as any).rect === undefined;
-// We have an issue to check property existence on JSI backed instances
-export const isRRect = (def: SkRect | SkRRect): def is SkRRect =>
-  (def as any).rect !== undefined;
 
 export interface RectCtor {
   x: number;
@@ -63,18 +28,22 @@ export interface RRectCtor extends RectCtor {
 export type RectDef = RectCtor | { rect: SkRect };
 export type RRectDef = RRectCtor | { rect: SkRRect };
 
-export const processRect = (def: RectDef) => {
+export const processRect = (Skia: Skia, def: RectDef) => {
   if (isRectCtor(def)) {
-    return rect(def.x, def.y, def.width, def.height);
+    return Skia.XYWHRect(def.x, def.y, def.width, def.height);
   } else {
     return def.rect;
   }
 };
 
-export const processRRect = (def: RRectDef) => {
+export const processRRect = (Skia: Skia, 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);
+    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;
   }

package/src/renderer/processors/Transform.ts

@@ -1,8 +1,6 @@
 import type { DrawingContext } from "../DrawingContext";
-import type { SkMatrix } from "../../skia/Matrix";
-
-import { neg, processTransform2d } from "./math";
-import type { Transforms2d, Vector } from "./math";
+import type { SkMatrix, Vector, Transforms2d } from "../../skia/types";
+import { processTransform } from "../../skia/types";
 
 export interface TransformProps {
   transform?: Transforms2d;
@@ -10,35 +8,46 @@ export interface TransformProps {
   matrix?: SkMatrix;
 }
 
-export const processTransform = (
-  { canvas }: DrawingContext,
+export const processCanvasTransform = (
+  { canvas, Skia }: DrawingContext,
   { transform, origin, matrix }: TransformProps
 ) => {
-  if (transform) {
-    if (matrix) {
-      canvas.concat(matrix);
-    } else {
-      const m3 = processTransform2d(
-        origin ? transformOrigin(origin, transform) : transform
-      );
+  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 = ({ transform, origin }: TransformProps) => {
+export const localMatrix = (
+  m: SkMatrix,
+  { transform, origin }: TransformProps
+) => {
   if (transform) {
-    return processTransform2d(
+    return processTransform(
+      m,
       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),
+  { translateX: origin.x },
+  { translateY: origin.y },
   ...transform,
-  ...translate(neg(origin)),
+  { translateX: -origin.x },
+  { translateY: -origin.y },
 ];

package/src/renderer/processors/index.ts

@@ -1,4 +1,3 @@
-export * from "./Paint";
 export * from "./Transform";
 export * from "./Animations";
 export * from "./Circles";
@@ -8,3 +7,5 @@ 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

@@ -1,4 +1,4 @@
-import type { Vector } from "./Vector";
+import type { Vector } from "../../../skia/types";
 
 export interface PolarPoint {
   theta: number;

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

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

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

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

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/skia/NativeSetup.ts

@@ -1,6 +1,6 @@
-import { NativeModules } from "react-native";
+import { NativeModules, Platform } from "react-native";
 
-if (global.SkiaApi == null) {
+if (Platform.OS !== "web" && global.SkiaApi == null) {
   // Initialize RN Skia
   const SkiaModule = NativeModules.RNSkia;
   if (SkiaModule == null || typeof SkiaModule.install !== "function") {

package/src/skia/Skia.ts

@@ -1,6 +1,5 @@
 /*global SkiaApi*/
-import "./NativeSetup";
-import type { SkiaApi as SkSkiaApi } from "./SkiaApi";
+import type { Skia as SkSkiaApi } from "./types";
 
 /**
  * Declares the SkiaApi as an available object in the global scope
@@ -9,39 +8,4 @@ declare global {
   var SkiaApi: SkSkiaApi;
 }
 
-/**
- * Declares the implemented API with overrides.
- */
-export const Skia = {
-  // Factories
-  Typeface: SkiaApi.Typeface,
-  MaskFilter: SkiaApi.MaskFilter,
-  RuntimeEffect: SkiaApi.RuntimeEffect,
-  Shader: SkiaApi.Shader,
-  ImageFilter: SkiaApi.ImageFilter,
-  PathEffect: SkiaApi.PathEffect,
-  Data: SkiaApi.Data,
-  SVG: SkiaApi.SVG,
-  FontMgr: SkiaApi.FontMgr,
-  TextBlob: SkiaApi.TextBlob,
-  // Constructors
-  Matrix: SkiaApi.Matrix,
-  Font: SkiaApi.Font,
-  Point: SkiaApi.Point,
-  XYWHRect: SkiaApi.XYWHRect,
-  RRectXY: SkiaApi.RRectXY,
-  RuntimeShaderBuilder: SkiaApi.RuntimeShaderBuilder,
-  Paint: SkiaApi.Paint,
-  PictureRecorder: SkiaApi.PictureRecorder,
-  Picture: SkiaApi.Picture,
-  Path: SkiaApi.Path,
-  ColorFilter: SkiaApi.ColorFilter,
-  ContourMeasureIter: SkiaApi.ContourMeasureIter,
-  Color: SkiaApi.Color,
-  RSXform: SkiaApi.RSXform,
-  // For the following methods the factory symmetry is broken to be comptatible with CanvasKit
-  MakeSurface: SkiaApi.Surface.Make,
-  MakeImageFromEncoded: SkiaApi.Image.MakeImageFromEncoded,
-  MakeImage: SkiaApi.Image.MakeImage,
-  MakeVertices: SkiaApi.MakeVertices,
-};
+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,81 @@
+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;
+};
+
+export const useDataCollection = <T>(
+  sources: DataSource[],
+  factory: (data: SkData[]) => T,
+  deps: DependencyList = []
+) => {
+  const [data, setData] = useState<T | null>(null);
+  useEffect(() => {
+    const bytesOrURIs = sources.map((source) => {
+      if (source instanceof Uint8Array) {
+        return source;
+      }
+      return typeof source === "string" ? source : resolveAsset(source);
+    });
+    Promise.all(
+      bytesOrURIs.map((bytesOrURI) =>
+        bytesOrURI instanceof Uint8Array
+          ? Skia.Data.fromBytes(bytesOrURI)
+          : Skia.Data.fromURI(bytesOrURI)
+      )
+    ).then((d) => setData(factory(d)));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+  return data;
+};
+
+export const useRawData = <T>(
+  source: DataSource | null | undefined,
+  factory: (data: SkData) => T,
+  onError?: (err: Error) => void
+) => {
+  const [data, setData] = useState<T | null>(null);
+  const prevSourceRef = useRef<DataSource | null | undefined>();
+  useEffect(() => {
+    // Track to avoid re-fetching the same data
+    if (prevSourceRef.current !== source) {
+      prevSourceRef.current = source;
+      if (source !== null && source !== undefined) {
+        const factoryWrapper = (data2: SkData) => {
+          const factoryResult = factory(data2);
+          if (factoryResult === null) {
+            onError && onError(new Error("Could not load data"));
+            setData(null);
+          } else {
+            setData(factoryResult);
+          }
+        };
+        if (source instanceof Uint8Array) {
+          factoryWrapper(Skia.Data.fromBytes(source));
+        } else {
+          const uri =
+            typeof source === "string" ? source : resolveAsset(source);
+          Skia.Data.fromURI(uri).then((d) => factoryWrapper(d));
+        }
+      } else {
+        // new source is null or undefined -> remove cached data
+        setData(null);
+      }
+    }
+  }, [factory, onError, source]);
+  return data;
+};
+
+const identity = (data: SkData) => data;
+
+export const useData = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void
+) => useRawData(source, identity, onError);

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]);
+};