@shopify/react-native-skia 0.1.129 → 0.1.132

package/src/renderer/processors/Clips.ts

@@ -1,14 +1,19 @@
-import type { SkCanvas, ClipOp, 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/{skia/core → renderer/processors}/Color.ts

@@ -1,5 +1,4 @@
-import { Skia } from "../Skia";
-import type { Color } from "../types";
+import type { Color, Skia } from "../../skia/types";
 
 export const RED = 0;
 export const GREEN = 1;
@@ -9,7 +8,7 @@ export const ALPHA = 3;
 export const rgbaColor = (r: number, g: number, b: number, a: number) =>
   new Float32Array([r, g, b, a]);
 
-export const processColor = (cl: Color, currentOpacity: number) => {
+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,5 +1,4 @@
-import type { FontMgr, SkFont } from "../../skia";
-import { Skia } from "../../skia/Skia";
+import type { SkFontMgr, SkFont, Skia } from "../../skia/types";
 
 export type FontDef = { font: SkFont } | { familyName: string; size: number };
 
@@ -8,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,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;