@shopify/react-native-skia 0.1.126 → 0.1.129

package/src/renderer/components/pathEffects/Corner.tsx

@@ -1,10 +1,9 @@
 import type { ReactNode } from "react";
 import React from "react";
 
-import { Skia } from "../../../skia";
+import { Skia, isPathEffect } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import { isPathEffect } from "../../../skia/PathEffect";
 
 export interface CornerPathEffectProps {
   r: number;

package/src/renderer/components/pathEffects/Dash.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia } from "../../../skia";
+import { Skia, isPathEffect } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import { isPathEffect } from "../../../skia/PathEffect";
 
 export interface DashPathEffectProps {
   intervals: number[];

package/src/renderer/components/pathEffects/Discrete.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia } from "../../../skia";
+import { Skia, isPathEffect } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import { isPathEffect } from "../../../skia/PathEffect";
 
 export interface DiscretePathEffectProps {
   length: number;

package/src/renderer/components/pathEffects/Line2D.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia } from "../../../skia";
+import { Skia, isPathEffect } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import { isPathEffect } from "../../../skia/PathEffect";
-import type { SkMatrix } from "../../../skia/Matrix";
+import type { SkMatrix } from "../../../skia";
 
 export interface Line2DPathEffectProps {
   children?: ReactNode | ReactNode[];

package/src/renderer/components/pathEffects/Path1D.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia } from "../../../skia";
+import { Skia, Path1DEffectStyle, isPathEffect } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import { Path1DEffectStyle, isPathEffect } from "../../../skia/PathEffect";
 import type { SkEnum } from "../../processors/Paint";
 import { enumKey } from "../../processors/Paint";
 import type { PathDef } from "../../processors/Paths";

package/src/renderer/components/pathEffects/Path2D.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia } from "../../../skia";
+import { Skia, isPathEffect } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import { isPathEffect } from "../../../skia/PathEffect";
-import type { SkMatrix } from "../../../skia/Matrix";
+import type { SkMatrix } from "../../../skia";
 import type { PathDef } from "../../processors/Paths";
 import { processPath } from "../../processors/Paths";
 

package/src/renderer/components/pathEffects/Sum.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia } from "../../../skia";
+import { Skia, isPathEffect } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import { isPathEffect } from "../../../skia/PathEffect";
 
 export interface SumPathEffectProps {
   children?: ReactNode | ReactNode[];

package/src/renderer/components/shaders/Gradient.ts

@@ -3,7 +3,7 @@ import type { SkEnum } from "../../processors/Paint";
 import type { TransformProps } from "../../processors/Transform";
 import { enumKey } from "../../processors/Paint";
 import { localMatrix } from "../../processors/Transform";
-import type { Color } from "../../../skia/Color";
+import type { Color } from "../../../skia";
 
 export interface GradientProps extends TransformProps {
   colors: Color[];

package/src/renderer/components/shapes/Box.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 
-import type { Color, SkRRect } from "../../../skia";
+import type { Color, SkRRect, SkJSIInstance, SkRect } from "../../../skia";
 import { ClipOp, BlurStyle, Skia, processColor } from "../../../skia";
 import { createDrawing } from "../../nodes";
 import type { AnimatedProps, CustomPaintProps } from "../../processors";
 import { add, vec, rrect } from "../../processors";
 import { rect, isRRect } from "../../processors/Rects";
 import { createDeclaration } from "../../nodes/Declaration";
-import type { SkJSIInstance } from "../../../skia/JsiInstance";
-import type { SkRect } from "../../../skia/Rect";
 
 const inflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
   rrect(

package/src/renderer/components/shapes/DiffRect.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { CustomPaintProps } from "../../processors";
-import type { SkRRect } from "../../../skia/RRect";
+import type { SkRRect } from "../../../skia";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 import { createDrawing } from "../../nodes/Drawing";
 

package/src/renderer/components/shapes/Patch.tsx

@@ -8,9 +8,8 @@ import type {
 } from "../../processors";
 import { enumKey } from "../../processors";
 import type { SkPoint, Color } from "../../../skia";
-import { BlendMode } from "../../../skia";
+import { BlendMode, processColor } from "../../../skia";
 import { createDrawing } from "../../nodes";
-import { processColor } from "../../../skia/Color";
 
 export interface CubicBezierHandle {
   pos: Vector;

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

@@ -2,7 +2,7 @@ import React from "react";
 
 import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
-import type { SkTextBlob } from "../../../skia/TextBlob";
+import type { SkTextBlob } from "../../../skia";
 
 export interface TextBlobProps extends CustomPaintProps {
   blob: SkTextBlob;

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

@@ -2,8 +2,7 @@ import React from "react";
 
 import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes";
-import type { SkPath } from "../../../skia/Path";
-import type { SkRSXform } from "../../../skia/RSXform";
+import type { SkPath, SkRSXform } from "../../../skia";
 import { Skia } from "../../../skia/Skia";
 import type { FontDef } from "../../processors/Font";
 import { processFont } from "../../processors/Font";

package/src/renderer/index.ts

@@ -2,3 +2,4 @@ export * from "./Canvas";
 export * from "./components";
 export * from "./nodes";
 export * from "./useContextBridge";
+export * from "./DependencyManager";

package/src/renderer/nodes/Declaration.tsx

@@ -2,10 +2,10 @@ import type { DependencyList } from "react";
 import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
-import type { SkJSIInstance } from "../../skia/JsiInstance";
 import type { AnimatedProps } from "../processors";
 import { isAnimated, materialize } from "../processors";
 import type { DependencyManager } from "../DependencyManager";
+import type { SkJSIInstance } from "../../skia";
 
 import { Node } from "./Node";
 

package/src/renderer/nodes/Node.ts

@@ -1,4 +1,4 @@
-import type { SkJSIInstance } from "../../skia/JsiInstance";
+import type { SkJSIInstance } from "../../skia";
 import type { DependencyManager } from "../DependencyManager";
 import type { DrawingContext } from "../DrawingContext";
 import type { AnimatedProps } from "../processors";

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

@@ -1,12 +1,10 @@
-import type { SkiaReadonlyValue } from "../../../values";
+import type { SkiaValue } from "../../../values";
 import type { DrawingContext } from "../../DrawingContext";
 import { mapKeys } from "../../typeddash";
 
 export type FrameValue<T> = (ctx: DrawingContext) => T;
 
-export const isValue = (
-  value: unknown
-): value is SkiaReadonlyValue<unknown> => {
+export const isValue = (value: unknown): value is SkiaValue<unknown> => {
   if (value === undefined || value === null) {
     return false;
   }
@@ -14,8 +12,7 @@ export const isValue = (
     if (
       typeof value === "object" &&
       "__typename__" in value &&
-      (value as unknown as SkiaReadonlyValue<unknown>).__typename__ ===
-        "RNSkValue"
+      (value as unknown as SkiaValue<unknown>).__typename__ === "RNSkValue"
     ) {
       return true;
     }
@@ -37,12 +34,12 @@ export const materialize = <T>(props: AnimatedProps<T>) => {
   mapKeys(props).forEach((key) => {
     const value = props[key];
     if (isValue(value)) {
-      result[key] = (value as SkiaReadonlyValue<T[typeof key]>).current;
+      result[key] = (value as SkiaValue<T[typeof key]>).current;
     }
   });
   return result as T;
 };
 
 export type AnimatedProps<T> = {
-  [K in keyof T]: T[K] | SkiaReadonlyValue<T[K]>;
+  [K in keyof T]: T[K] | SkiaValue<T[K]>;
 };

package/src/renderer/processors/Clips.ts

@@ -1,5 +1,4 @@
-import type { SkCanvas, ClipOp } from "../../skia/Canvas";
-import type { SkRect, SkRRect } from "../../skia";
+import type { SkCanvas, ClipOp, SkRect, SkRRect } from "../../skia";
 
 import type { PathDef } from "./Paths";
 import { processPath, isPathDef } from "./Paths";

package/src/renderer/processors/Font.ts

@@ -1,6 +1,5 @@
-import type { SkFont } from "../../skia";
+import type { FontMgr, SkFont } from "../../skia";
 import { Skia } from "../../skia/Skia";
-import type { FontMgr } from "../../skia/FontMgr/FontMgr";
 
 export type FontDef = { font: SkFont } | { familyName: string; size: number };
 

package/src/renderer/processors/Rects.ts

@@ -2,6 +2,7 @@
 import type { SkRect, SkRRect } from "../../skia";
 import { Skia } from "../../skia";
 
+import type { Vector } from "./math/Vector";
 import { vec } from "./math/Vector";
 import type { Radius } from "./Radius";
 import { processRadius } from "./Radius";
@@ -22,6 +23,9 @@ export const bounds = (rects: SkRect[]) => {
   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) =>

package/src/renderer/processors/Transform.ts

@@ -1,5 +1,5 @@
 import type { DrawingContext } from "../DrawingContext";
-import type { SkMatrix } from "../../skia/Matrix";
+import type { SkMatrix } from "../../skia/types";
 
 import { neg, processTransform2d } from "./math";
 import type { Transforms2d, Vector } from "./math";

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

@@ -48,11 +48,11 @@ export const processTransform2d = (transforms: Transforms2d) => {
       continue;
     }
     if (key === "scaleX") {
-      m.preScale(value, 0);
+      m.preScale(value, 1);
       continue;
     }
     if (key === "scaleY") {
-      m.preScale(0, value);
+      m.preScale(1, value);
       continue;
     }
     if (key === "skewX") {

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/__tests__/Rects.spec.ts

@@ -0,0 +1,40 @@
+import fs from "fs";
+import path from "path";
+
+import CanvasKitInit from "canvaskit-wasm";
+
+import { JsiSkApi } from "../web";
+
+//import type { SkiaApi } from "../SkiaApi";
+
+let Skia: ReturnType<typeof JsiSkApi>;
+
+beforeAll(async () => {
+  const CanvasKit = await CanvasKitInit();
+  Skia = JsiSkApi(CanvasKit);
+});
+
+describe("Draw a rectangle", () => {
+  it("Check that CanvasKit and CanvasKit are loaded", async () => {
+    expect(Skia).toBeDefined();
+  });
+  it("Draws a lightblue rectange", () => {
+    const paint = Skia.Paint();
+    paint.setColor(Skia.Color("lightblue"));
+    const rct = Skia.XYWHRect(64, 64, 128, 128);
+    const surface = Skia.Surface.Make(256, 256);
+    expect(surface).toBeDefined();
+    if (!surface) {
+      return;
+    }
+    const canvas = surface.getCanvas();
+    canvas.drawRect(rct, paint);
+    surface.ref.flush();
+    const image = surface.makeImageSnapshot();
+    const png = image.encodeToBytes();
+    const ref = fs.readFileSync(
+      path.resolve(__dirname, "snapshots/lightblue-rect.png")
+    );
+    expect(ref.equals(png)).toBe(true);
+  });
+});

package/src/skia/{Color.ts → core/Color.ts}

@@ -1,9 +1,5 @@
-import { Skia } from "./Skia";
-
-// This is the JSI color
-export type SkColor = Float32Array;
-// Input colors can be string, number or Float32Array
-export type Color = string | Float32Array | number;
+import { Skia } from "../Skia";
+import type { Color } from "../types";
 
 export const RED = 0;
 export const GREEN = 1;

package/src/skia/core/Data.ts

@@ -0,0 +1,78 @@
+import type { DependencyList } from "react";
+import { useRef, useEffect, useState } from "react";
+import { Image } from "react-native";
+
+import { Skia } from "../Skia";
+import type { Data, DataSource } from "../types";
+
+export const useDataCollection = <T>(
+  sources: DataSource[],
+  factory: (data: Data[]) => 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
+        : Image.resolveAssetSource(source).uri;
+    });
+    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: Data) => 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: Data) => {
+          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
+              : Image.resolveAssetSource(source).uri;
+          Skia.Data.fromURI(uri).then((d) => factoryWrapper(d));
+        }
+      }
+    } else {
+      setData(null);
+    }
+  }, [factory, onError, source]);
+  return data;
+};
+
+const identity = (data: Data) => data;
+
+export const useData = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void
+) => useRawData(source, identity, onError);

package/src/skia/{Font/useFont.ts → core/Font.ts}

@@ -1,17 +1,20 @@
 /*global SkiaApi*/
 import { useMemo } from "react";
 
-import type { DataSource } from "../Data";
 import { Skia } from "../Skia";
-import { useTypeface } from "../Typeface";
+import type { DataSource, SkFont } from "../types";
 
-import type { SkFont } from "./Font";
+import { useTypeface } from "./Typeface";
 
 /**
  * Returns a Skia Font object
  * */
-export const useFont = (font: DataSource, size?: number): SkFont | null => {
-  const typeface = useTypeface(font);
+export const useFont = (
+  font: DataSource | null | undefined,
+  size?: number,
+  onError?: (err: Error) => void
+): SkFont | null => {
+  const typeface = useTypeface(font, onError);
   return useMemo(() => {
     if (typeface === null) {
       return null;

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/{Paint/usePaint.ts → core/Paint.ts}

@@ -1,9 +1,14 @@
 import type { DependencyList } from "react";
 import { useMemo } from "react";
 
-import { SkiaPaint } from "./Paint";
-import type { SkPaint } from "./Paint";
+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
  * */

package/src/skia/{Path/usePath.ts → core/Path.ts}

@@ -1,10 +1,8 @@
 import type { DependencyList } from "react";
 import { useMemo } from "react";
 
-import type { SkFont } from "../Font";
 import { Skia } from "../Skia";
-
-import type { SkPath } from "./Path";
+import type { SkFont, SkPath } from "../types";
 
 /**
  * Memoizes and returns a Skia Path object with optional initializer

package/src/skia/{Picture/usePicture.ts → core/Picture.ts}

@@ -1,11 +1,8 @@
 import type { DependencyList } from "react";
 import { useMemo } from "react";
 
-import type { SkCanvas } from "../Canvas";
-import type { SkRect } from "../Rect";
 import { Skia } from "../Skia";
-
-import type { SkPicture } from "./Picture";
+import type { SkCanvas, SkPicture, SkRect } from "../types";
 
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.

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,11 @@
+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, onError);

package/src/skia/core/index.ts

@@ -0,0 +1,10 @@
+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";

package/src/skia/index.ts

@@ -1,24 +1,3 @@
 export { Skia } from "./Skia";
-export * from "./Canvas";
-export * from "./Paint";
-export * from "./Rect";
-export * from "./RRect";
-export * from "./Point";
-export * from "./Path";
-export * from "./Font";
-export * from "./Typeface";
-export * from "./MaskFilter";
-export * from "./ColorFilter";
-export * from "./ImageFilter";
-export * from "./PathEffect";
-export * from "./RuntimeEffect";
-export * from "./Shader";
-export * from "./Image";
-export * from "./Matrix";
-export * from "./SVG";
-export * from "./Surface";
-export * from "./FontMgr";
-export * from "./Vertices";
-export * from "./Color";
-export * from "./Picture";
-export * from "./Data";
+export * from "./core";
+export * from "./types";

package/src/skia/types/Color.ts

@@ -0,0 +1,4 @@
+// This is the JSI color
+export type SkColor = Float32Array;
+// Input colors can be string, number or Float32Array
+export type Color = string | Float32Array | number;

package/src/skia/{ColorFilter → types/ColorFilter}/ColorFilterFactory.ts

@@ -1,5 +1,5 @@
 import type { SkColor } from "../Color";
-import type { BlendMode } from "../Paint/BlendMode";
+import type { BlendMode } from "../Paint";
 
 import type { SkColorFilter } from "./ColorFilter";