@shopify/react-native-skia 0.1.130 → 0.1.131

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,57 +1,18 @@
 /* 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 type { Vector } from "./math/Vector";
-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 isEdge = (pos: Vector, b: SkRect) =>
   pos.x === b.x || pos.y === b.y || pos.x === b.width || pos.y === b.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);
-
 // 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;
-// 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;
@@ -67,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/types";
-
-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.web.ts

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

package/src/skia/core/Data.ts

@@ -1,13 +1,19 @@
 import type { DependencyList } from "react";
 import { useRef, useEffect, useState } from "react";
-import { Image } from "react-native";
+import { Image, Platform } from "react-native";
 
 import { Skia } from "../Skia";
-import type { Data, DataSource } from "../types";
+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: Data[]) => T,
+  factory: (data: SkData[]) => T,
   deps: DependencyList = []
 ) => {
   const [data, setData] = useState<T | null>(null);
@@ -16,9 +22,7 @@ export const useDataCollection = <T>(
       if (source instanceof Uint8Array) {
         return source;
       }
-      return typeof source === "string"
-        ? source
-        : Image.resolveAssetSource(source).uri;
+      return typeof source === "string" ? source : resolveAsset(source);
     });
     Promise.all(
       bytesOrURIs.map((bytesOrURI) =>
@@ -34,7 +38,7 @@ export const useDataCollection = <T>(
 
 export const useRawData = <T>(
   source: DataSource | null | undefined,
-  factory: (data: Data) => T,
+  factory: (data: SkData) => T,
   onError?: (err: Error) => void
 ) => {
   const [data, setData] = useState<T | null>(null);
@@ -44,7 +48,7 @@ export const useRawData = <T>(
     if (prevSourceRef.current !== source) {
       prevSourceRef.current = source;
       if (source !== null && source !== undefined) {
-        const factoryWrapper = (data2: Data) => {
+        const factoryWrapper = (data2: SkData) => {
           const factoryResult = factory(data2);
           if (factoryResult === null) {
             onError && onError(new Error("Could not load data"));
@@ -57,20 +61,19 @@ export const useRawData = <T>(
           factoryWrapper(Skia.Data.fromBytes(source));
         } else {
           const uri =
-            typeof source === "string"
-              ? source
-              : Image.resolveAssetSource(source).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);
       }
-    } else {
-      setData(null);
     }
   }, [factory, onError, source]);
   return data;
 };
 
-const identity = (data: Data) => data;
+const identity = (data: SkData) => data;
 
 export const useData = (
   source: DataSource | null | undefined,

package/src/skia/core/Font.ts

@@ -16,14 +16,12 @@ export const useFont = (
 ): SkFont | null => {
   const typeface = useTypeface(font, onError);
   return useMemo(() => {
-    if (typeface === null) {
-      return null;
-    } else if (typeface && size) {
+    if (typeface && size) {
       return Skia.Font(typeface, size);
     } else if (typeface && !size) {
       return Skia.Font(typeface);
     } else {
-      return Skia.Font();
+      return null;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [typeface]);

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

@@ -4,11 +4,6 @@ import { useMemo } from "react";
 import { Skia } from "../Skia";
 import type { SkPaint } from "../types";
 
-export const SkiaPaint = () => {
-  const paint = Skia.Paint();
-  paint.setAntiAlias(true);
-  return paint;
-};
 /**
  * Returns a Skia Paint object
  * */
@@ -17,7 +12,8 @@ export const usePaint = (
   deps?: DependencyList
 ) =>
   useMemo(() => {
-    const p = SkiaPaint();
+    console.warn("usePaint() is deprecated. Use Skia.Paint() instead.");
+    const p = Skia.Paint();
     if (initializer) {
       initializer(p);
     }

package/src/skia/core/Path.ts

@@ -15,6 +15,7 @@ export const usePath = (
   deps?: DependencyList
 ) =>
   useMemo(() => {
+    console.warn("usePath() is deprecated. Use Skia.Path.Make() instead.");
     const p = Skia.Path.Make();
     if (initializer) {
       initializer(p);
@@ -31,6 +32,9 @@ export const usePath = (
 // 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}`);
@@ -44,9 +48,13 @@ export const useSvgPath = (svgpath: string) =>
  * @returns
  */
 export const useTextPath = (text: string, x: number, y: number, font: SkFont) =>
-  usePath(
-    (p) => {
-      p.fromText(text, x, y, font);
-    },
-    [text, x, y, font]
-  );
+  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/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/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

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

package/src/skia/types/ContourMeasure.tsx

@@ -8,15 +8,13 @@ export interface PosTan {
   ty: number;
 }
 
-export interface SkContourMeasure extends SkJSIInstance<"ContourMeasureIter"> {
+export interface SkContourMeasure extends SkJSIInstance<"ContourMeasure"> {
   /**
    * Returns the given position and tangent line for the distance on the given contour.
    * The return value is 4 floats in this order: posX, posY, vecX, vecY.
    * @param distance - will be pinned between 0 and length().
-   * @param output - if provided, the four floats of the PosTan will be copied into this array
-   *                 instead of allocating a new one.
    */
-  getPosTan(distance: number, output?: PosTan): PosTan;
+  getPosTan(distance: number): PosTan;
 
   /**
    * Returns an Path representing the segment of this contour.

package/src/skia/types/Data/Data.ts

@@ -1,5 +1,5 @@
 import type { SkJSIInstance } from "../JsiInstance";
 
-export type Data = SkJSIInstance<"Data">;
+export type SkData = SkJSIInstance<"Data">;
 
 export type DataSource = ReturnType<typeof require> | string | Uint8Array;

package/src/skia/types/Data/DataFactory.ts

@@ -1,19 +1,19 @@
-import type { Data } from "./Data";
+import type { SkData } from "./Data";
 
 export interface DataFactory {
   /**
    * Creates a new Data object from an Uri, either locally or remotely.
    * @param uri Uri to a valid resource
    */
-  fromURI(uri: string): Promise<Data>;
+  fromURI(uri: string): Promise<SkData>;
   /**
    * Creates a new Data object from a byte array.
    * @param bytes An array of bytes representing the data
    */
-  fromBytes(bytes: Uint8Array): Data;
+  fromBytes(bytes: Uint8Array): SkData;
   /**
    * Creates a new Data object from a base64 encoded string.
    * @param base64 A Base64 encoded string representing the data
    */
-  fromBase64(base64: string): Data;
+  fromBase64(base64: string): SkData;
 }

package/src/skia/types/FontMgr/FontMgr.ts

@@ -2,7 +2,7 @@ import type { SkJSIInstance } from "../JsiInstance";
 import type { FontStyle } from "../Font/Font";
 import type { SkTypeface } from "../Typeface";
 
-export interface FontMgr extends SkJSIInstance<"FontMgr"> {
+export interface SkFontMgr extends SkJSIInstance<"FontMgr"> {
   /**
    * Return the number of font families loaded in this manager. Useful for debugging.
    */

package/src/skia/types/FontMgr/FontMgrFactory.ts

@@ -1,9 +1,9 @@
-import type { FontMgr } from "./FontMgr";
+import type { SkFontMgr } from "./FontMgr";
 
 // Commented code below is the CanvasKit reference
 export interface FontMgrFactory {
   // FromData: (...data: Data[]) => FontMgr | null;
-  RefDefault: () => FontMgr;
+  RefDefault: () => SkFontMgr;
 }
 
 //const fontMgrFactory = (data: Data[]) => Skia.FontMgr.FromData(...data);

package/src/skia/types/Image/ImageFactory.ts

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
-import type { Data } from "../Data";
+import type { SkData } from "../Data";
 
 import type { SkImage } from "./Image";
 
@@ -62,7 +62,7 @@ export interface ImageFactory {
    * @returns If the encoded format is not supported, or subset is outside of the bounds of the decoded
    *  image, nullptr is returned.
    */
-  MakeImageFromEncoded: (encoded: Data) => SkImage | null;
+  MakeImageFromEncoded: (encoded: SkData) => SkImage | null;
 
   /**
    * Returns an image with the given pixel data and format.
@@ -74,5 +74,5 @@ export interface ImageFactory {
    * @param data - bytes representing the pixel data.
    * @param bytesPerRow
    */
-  MakeImage(info: ImageInfo, data: Data, bytesPerRow: number): SkImage | null;
+  MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number): SkImage | null;
 }