@shopify/react-native-skia 0.1.234 → 0.1.237

package/src/mock/index.ts

@@ -31,9 +31,17 @@ export const Mock = (CanvasKit: CanvasKit) => {
     // Reanimated hooks
     useClock: NoopSharedValue,
     usePathInterpolation: NoopSharedValue,
+    useTextureValue: NoopSharedValue,
+    useTextureValueFromPicture: NoopSharedValue,
+    useRSXformBuffer: NoopSharedValue,
+    usePointBuffer: NoopSharedValue,
+    useColorBuffer: NoopSharedValue,
+    useRectBuffer: NoopSharedValue,
+    useBuffer: NoopSharedValue,
     useRawData: Noop,
     useData: Noop,
     useFont: () => Skia.Font(undefined, 0),
+    useFonts: Noop,
     useTypeface: () => null,
     useImage: () => null,
     useSVG: () => null,

package/src/renderer/Canvas.tsx

@@ -75,7 +75,7 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
     }, [innerRef]);
 
     const root = useMemo(
-      () => new SkiaRoot(Skia, redraw, getNativeId),
+      () => new SkiaRoot(Skia, NATIVE_DOM, redraw, getNativeId),
       [redraw, getNativeId]
     );
 

package/src/renderer/Container.tsx

@@ -13,9 +13,10 @@ export class Container {
   constructor(
     Skia: Skia,
     public redraw: () => void = () => {},
-    public getNativeId: () => number = () => 0
+    public getNativeId: () => number = () => 0,
+    native: boolean
   ) {
-    this.Sk = new JsiSkDOM({ Skia });
+    this.Sk = new JsiSkDOM({ Skia }, native);
     this._root = this.Sk.Group();
   }
 

package/src/renderer/HostComponents.ts

@@ -50,6 +50,7 @@ import type {
   BoxProps,
   BoxShadowProps,
   ParagraphProps,
+  AtlasProps,
 } from "../dom/types";
 import type { ChildrenProps } from "../dom/types/Common";
 import type {
@@ -69,7 +70,6 @@ export const NATIVE_DOM = shouldUseJSDomOnNative ? false : !!global.SkiaDomApi;
 
 declare global {
   var SkiaDomApi: {
-    // FIXME: We need a better type for this
     RectNode: (props: RectProps) => JsiDrawingNode<RectProps, SkRect>;
     RRectNode: (
       props: RoundedRectProps
@@ -85,6 +85,8 @@ declare global {
     PatchNode: (props: PatchProps) => RenderNode<PatchProps>;
     PointsNode: (props: PointsProps) => RenderNode<PointsProps>;
     DiffRectNode: (props: DiffRectProps) => RenderNode<DiffRectProps>;
+    AtlasNode: (props: AtlasProps) => RenderNode<AtlasProps>;
+
     // Mask filters
     BlurMaskFilterNode: (
       props: BlurMaskFilterProps
@@ -207,6 +209,7 @@ declare global {
       skPoints: SkiaProps<PointsProps>;
       skRect: SkiaProps<RectProps>;
       skRRect: SkiaProps<RoundedRectProps>;
+      skAtlas: SkiaProps<AtlasProps>;
       skVertices: SkiaProps<VerticesProps>;
       skText: SkiaProps<TextProps>;
       skTextPath: SkiaProps<TextPathProps>;
@@ -313,6 +316,8 @@ export const createNode = (
       return Sk.TextBlob(props);
     case NodeType.Glyphs:
       return Sk.Glyphs(props);
+    case NodeType.Atlas:
+      return Sk.Atlas(props);
     case NodeType.DiffRect:
       return Sk.DiffRect(props);
     case NodeType.Picture:

package/src/renderer/Offscreen.tsx

@@ -1,24 +1,37 @@
 import type { ReactElement } from "react";
 
 import { JsiDrawingContext } from "../dom/types";
+import type { SkPicture, SkSize } from "../skia/types";
 import { Skia } from "../skia";
 
 import { SkiaRoot } from "./Reconciler";
 
-export const drawAsImage = (
-  element: ReactElement,
-  width: number,
-  height: number
-) => {
-  const surface = Skia.Surface.MakeOffscreen(width, height);
-  if (!surface) {
-    throw new Error("Could not create offscreen surface");
-  }
-  const canvas = surface.getCanvas();
-  const root = new SkiaRoot(Skia);
+export const drawAsPicture = (element: ReactElement) => {
+  const recorder = Skia.PictureRecorder();
+  const canvas = recorder.beginRecording();
+  const root = new SkiaRoot(Skia, false);
   root.render(element);
   const ctx = new JsiDrawingContext(Skia, canvas);
   root.dom.render(ctx);
+  const picture = recorder.finishRecordingAsPicture();
+  return picture;
+};
+
+export const drawAsImage = (element: ReactElement, size: SkSize) => {
+  return drawAsImageFromPicture(drawAsPicture(element), size);
+};
+
+// TODO: We're not sure yet why PixelRatio is not needed here.
+const pd = 1;
+export const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {
+  "worklet";
+  const surface = Skia.Surface.MakeOffscreen(
+    size.width * pd,
+    size.height * pd
+  )!;
+  const canvas = surface.getCanvas();
+  canvas.scale(pd, pd);
+  canvas.drawPicture(picture);
   surface.flush();
   return surface.makeImageSnapshot();
 };

package/src/renderer/Reconciler.tsx

@@ -21,10 +21,11 @@ export class SkiaRoot {
 
   constructor(
     Skia: Skia,
+    native = false,
     redraw: () => void = () => {},
     getNativeId: () => number = () => 0
   ) {
-    this.container = new Container(Skia, redraw, getNativeId);
+    this.container = new Container(Skia, redraw, getNativeId, native);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,
@@ -45,7 +46,9 @@ export class SkiaRoot {
   }
 
   unmount() {
-    skiaReconciler.updateContainer(null, this.root, null, () => {});
+    skiaReconciler.updateContainer(null, this.root, null, () => {
+      hostDebug("unmountContainer");
+    });
   }
 
   get dom() {

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

@@ -0,0 +1,8 @@
+import React from "react";
+
+import type { AtlasProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
+
+export const Atlas = (props: SkiaProps<AtlasProps>) => {
+  return <skAtlas {...props} />;
+};

package/src/renderer/components/shapes/index.ts

@@ -11,3 +11,4 @@ export * from "./Vertices";
 export * from "./Fill";
 export * from "./FitBox";
 export * from "./Box";
+export * from "./Atlas";

package/src/skia/core/AnimatedImage.ts

@@ -12,5 +12,6 @@ const animatedImgFactory = Skia.AnimatedImage.MakeAnimatedImageFromEncoded.bind(
  * */
 export const useAnimatedImage = (
   source: DataSourceParam,
-  onError?: (err: Error) => void
-) => useRawData(source, animatedImgFactory, onError);
+  onError?: (err: Error) => void,
+  managed = true
+) => useRawData(source, animatedImgFactory, onError, managed);

package/src/skia/core/Data.ts

@@ -40,7 +40,8 @@ export const loadData = <T>(
 
 const useLoading = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
-  loader: () => Promise<T | null>
+  loader: () => Promise<T | null>,
+  manage = true
 ) => {
   const mounted = useRef(false);
   const [data, setData] = useState<T | null>(null);
@@ -54,7 +55,9 @@ const useLoading = <T extends SkJSIInstance<string>>(
       }
     });
     return () => {
-      dataRef.current?.dispose();
+      if (manage) {
+        dataRef.current?.dispose();
+      }
       mounted.current = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -94,8 +97,9 @@ export const useCollectionLoading = <T extends SkJSIInstance<string>>(
 export const useRawData = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
   factory: (data: SkData) => T | null,
-  onError?: (err: Error) => void
-) => useLoading(source, () => loadData<T>(source, factory, onError));
+  onError?: (err: Error) => void,
+  manage = true
+) => useLoading(source, () => loadData<T>(source, factory, onError), manage);
 
 const identity = (data: SkData) => data;
 

package/src/skia/types/Canvas.ts

@@ -2,7 +2,14 @@ import type { SkPaint } from "./Paint";
 import type { SkRect } from "./Rect";
 import type { SkFont } from "./Font";
 import type { SkPath } from "./Path";
-import type { SkImage, MipmapMode, FilterMode, ImageInfo } from "./Image";
+import type {
+  SkImage,
+  MipmapMode,
+  FilterMode,
+  ImageInfo,
+  CubicResampler,
+  FilterOptions,
+} from "./Image";
 import type { SkSVG } from "./SVG";
 import type { SkColor } from "./Color";
 import type { InputRRect } from "./RRect";
@@ -13,6 +20,7 @@ import type { SkImageFilter } from "./ImageFilter";
 import type { SkVertices } from "./Vertices";
 import type { SkTextBlob } from "./TextBlob";
 import type { SkPicture } from "./Picture";
+import type { SkRSXform } from "./RSXform";
 
 export enum ClipOp {
   Difference,
@@ -493,6 +501,29 @@ export interface SkCanvas {
    */
   drawPicture(skp: SkPicture): void;
 
+  /**
+   * This method is used to draw an atlas on the canvas.
+   *
+   * @method drawAtlas
+   * @param {SkImage} atlas - The image to be drawn.
+   * @param {SkRect[]} srcs - The source rectangles.
+   * @param {SkRSXform[]} dsts - The destination transformations.
+   * @param {SkPaint} paint - The paint used for drawing.
+   * @param {BlendMode} [blendMode] - The blend mode used for drawing. Optional.
+   * @param {SkColor[]} [colors] - The colors used for drawing. Optional.
+   * @param {CubicResampler | FilterOptions} [sampling] - The sampling options. Optional.
+   * @returns {void} This method does not return anything.
+   */
+  drawAtlas(
+    atlas: SkImage,
+    srcs: SkRect[],
+    dsts: SkRSXform[],
+    paint: SkPaint,
+    blendMode?: BlendMode,
+    colors?: SkColor[],
+    sampling?: CubicResampler | FilterOptions
+  ): void;
+
   /** Read Image pixels
    *
    * @param srcX - x-axis upper left corner of the rectangle to read from

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

@@ -5,6 +5,16 @@ import type { SkShader } from "../Shader";
 
 import type { ImageInfo } from "./ImageFactory";
 
+export interface CubicResampler {
+  B: number;
+  C: number;
+}
+
+export interface FilterOptions {
+  filter: FilterMode;
+  mipmap?: MipmapMode;
+}
+
 export enum FilterMode {
   Nearest,
   Linear,

package/src/skia/types/Matrix4.ts

@@ -356,13 +356,13 @@ export const convertToColumnMajor = (rowMajorMatrix: Matrix4) => {
       colMajorMatrix[col * size + row] = rowMajorMatrix[row * size + col];
     }
   }
-  return colMajorMatrix;
+  return colMajorMatrix as unknown as Matrix4;
 };
 
 /**
  * @worklet
  */
-export const convertToAffineMatrix = (m4: number[]) => {
+export const convertToAffineMatrix = (m4: Matrix4) => {
   "worklet";
   // Extracting the relevant components from the 4x4 matrix
   const a = m4[0]; // Scale X

package/src/skia/types/RSXform.ts

@@ -1,3 +1,9 @@
 import type { SkJSIInstance } from "./JsiInstance";
 
-export type SkRSXform = SkJSIInstance<"RSXform">;
+export interface SkRSXform extends SkJSIInstance<"RSXform"> {
+  readonly scos: number;
+  readonly ssin: number;
+  readonly tx: number;
+  readonly ty: number;
+  set(scos: number, ssin: number, tx: number, ty: number): void;
+}

package/src/skia/types/Rect.ts

@@ -1,3 +1,5 @@
+import type { SkJSIInstance } from "./JsiInstance";
+
 export interface SkRect {
   readonly x: number;
   readonly y: number;
@@ -5,6 +7,10 @@ export interface SkRect {
   readonly height: number;
 }
 
+export interface SkHostRect extends SkRect, SkJSIInstance<"Rect"> {
+  setXYWH(x: number, y: number, width: number, height: number): void;
+}
+
 export const isRect = (def: unknown): def is SkRect => {
   "worklet";
   if (typeof def === "object" && def !== null) {

package/src/skia/types/Shader/Shader.ts

@@ -7,7 +7,12 @@ export const isShader = (obj: SkJSIInstance<string> | null): obj is SkShader =>
 
 export type SkShader = SkJSIInstance<"Shader">;
 
-export type Uniform = number | Vector | Float32Array | Uniform[];
+export type Uniform =
+  | number
+  | Vector
+  | Float32Array
+  | readonly Uniform[]
+  | Uniform[];
 
 export interface Uniforms {
   [name: string]: Uniform;

package/src/skia/types/Skia.ts

@@ -6,7 +6,7 @@ import type { SkTypeface, TypefaceFactory } from "./Typeface";
 import type { ImageFactory } from "./Image";
 import type { MaskFilterFactory } from "./MaskFilter";
 import type { SkPaint } from "./Paint";
-import type { SkRect } from "./Rect";
+import type { SkHostRect, SkRect } from "./Rect";
 import type { SkRRect } from "./RRect";
 import type {
   RuntimeEffectFactory,
@@ -36,10 +36,18 @@ import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
  */
 export interface Skia {
   Point: (x: number, y: number) => SkPoint;
-  XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
+  XYWHRect: (x: number, y: number, width: number, height: number) => SkHostRect;
   RuntimeShaderBuilder: (rt: SkRuntimeEffect) => SkRuntimeShaderBuilder;
   RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
   RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
+  RSXformFromRadians: (
+    scale: number,
+    radians: number,
+    tx: number,
+    ty: number,
+    px: number,
+    py: number
+  ) => SkRSXform;
   Color: (color: Color) => SkColor;
   ContourMeasureIter: (
     path: SkPath,

package/src/skia/web/JsiSkCanvas.ts

@@ -1,28 +1,31 @@
 import type { Canvas, CanvasKit } from "canvaskit-wasm";
 
-import type {
-  BlendMode,
-  ClipOp,
-  FilterMode,
-  MipmapMode,
-  PointMode,
-  SaveLayerFlag,
-  ImageInfo,
-  SkCanvas,
-  SkColor,
-  SkFont,
-  SkImage,
-  SkImageFilter,
-  SkMatrix,
-  SkPaint,
-  SkPath,
-  SkPicture,
-  SkPoint,
-  SkRect,
-  InputRRect,
-  SkSVG,
-  SkTextBlob,
-  SkVertices,
+import {
+  type BlendMode,
+  type ClipOp,
+  type FilterMode,
+  type MipmapMode,
+  type PointMode,
+  type SaveLayerFlag,
+  type ImageInfo,
+  type SkCanvas,
+  type SkColor,
+  type SkFont,
+  type SkImage,
+  type SkImageFilter,
+  type SkMatrix,
+  type SkPaint,
+  type SkPath,
+  type SkPicture,
+  type SkPoint,
+  type SkRect,
+  type InputRRect,
+  type SkSVG,
+  type SkTextBlob,
+  type SkVertices,
+  type SkRSXform,
+  type CubicResampler,
+  type FilterOptions,
 } from "../types";
 
 import { getEnum, HostObject } from "./Host";
@@ -38,6 +41,7 @@ import { JsiSkPicture } from "./JsiSkPicture";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";
 import { JsiSkPoint } from "./JsiSkPoint";
+import { JsiSkRSXform } from "./JsiSkRSXform";
 
 export class JsiSkCanvas
   extends HostObject<Canvas, "Canvas">
@@ -383,6 +387,39 @@ export class JsiSkCanvas
     this.ref.drawPicture(JsiSkPicture.fromValue(skp));
   }
 
+  drawAtlas(
+    atlas: SkImage,
+    srcs: SkRect[],
+    dsts: SkRSXform[],
+    paint: SkPaint,
+    blendMode?: BlendMode,
+    colors?: SkColor[],
+    _sampling?: CubicResampler | FilterOptions
+  ) {
+    const src = srcs.flatMap((s) =>
+      Array.from(JsiSkRect.fromValue(this.CanvasKit, s))
+    );
+    const dst = dsts.flatMap((s) => Array.from(JsiSkRSXform.fromValue(s)));
+    let cls: Uint32Array | undefined;
+    if (colors) {
+      cls = new Uint32Array(colors.length);
+      for (let i = 0; i < colors.length; i++) {
+        const [r, g, b, a] = colors[i];
+        cls[i] = this.CanvasKit.ColorAsInt(r * 255, g * 255, b * 255, a * 255);
+      }
+    }
+    this.ref.drawAtlas(
+      JsiSkImage.fromValue(atlas),
+      src,
+      dst,
+      JsiSkPaint.fromValue(paint),
+      blendMode
+        ? getEnum(this.CanvasKit.BlendMode, blendMode)
+        : this.CanvasKit.BlendMode.DstOver,
+      cls
+    );
+  }
+
   readPixels(srcX: number, srcY: number, imageInfo: ImageInfo) {
     const pxInfo = {
       width: imageInfo.width,

package/src/skia/web/JsiSkRSXform.ts

@@ -2,19 +2,43 @@ import type { CanvasKit } from "canvaskit-wasm";
 
 import type { SkRSXform } from "../types";
 
-import { HostObject } from "./Host";
+import { BaseHostObject } from "./Host";
 
 export type RSXform = Float32Array;
 
 export class JsiSkRSXform
-  extends HostObject<RSXform, "RSXform">
+  extends BaseHostObject<RSXform, "RSXform">
   implements SkRSXform
 {
+  static fromValue(rsxform: SkRSXform) {
+    if (rsxform instanceof JsiSkRSXform) {
+      return rsxform.ref;
+    }
+    return Float32Array.of(rsxform.scos, rsxform.ssin, rsxform.tx, rsxform.ty);
+  }
+
   constructor(CanvasKit: CanvasKit, ref: RSXform) {
     super(CanvasKit, ref, "RSXform");
   }
-
+  set(scos: number, ssin: number, tx: number, ty: number) {
+    this.ref[0] = scos;
+    this.ref[1] = ssin;
+    this.ref[2] = tx;
+    this.ref[3] = ty;
+  }
+  get scos() {
+    return this.ref[0];
+  }
+  get ssin() {
+    return this.ref[1];
+  }
+  get tx() {
+    return this.ref[2];
+  }
+  get ty() {
+    return this.ref[3];
+  }
   dispose = () => {
-    // Do nothing in the web implementation
+    // nothing to do here, RSXform is a Float32Array
   };
 }

package/src/skia/web/JsiSkRect.ts

@@ -1,10 +1,13 @@
 import type { CanvasKit, Rect } from "canvaskit-wasm";
 
-import type { SkRect } from "../types";
+import type { SkHostRect, SkRect } from "../types";
 
 import { BaseHostObject } from "./Host";
 
-export class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkRect {
+export class JsiSkRect
+  extends BaseHostObject<Rect, "Rect">
+  implements SkHostRect
+{
   static fromValue(CanvasKit: CanvasKit, rect: SkRect) {
     if (rect instanceof JsiSkRect) {
       return rect.ref;
@@ -20,6 +23,13 @@ export class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkRect {
     super(CanvasKit, ref, "Rect");
   }
 
+  setXYWH(x: number, y: number, width: number, height: number): void {
+    this.ref[0] = x;
+    this.ref[1] = y;
+    this.ref[2] = x + width;
+    this.ref[3] = y + height;
+  }
+
   get x() {
     return this.ref[0];
   }

package/src/skia/web/JsiSkTextBlobFactory.ts

@@ -7,7 +7,6 @@ import type { SkRSXform } from "../types/RSXform";
 import { Host } from "./Host";
 import { JsiSkFont } from "./JsiSkFont";
 import { JsiSkTextBlob } from "./JsiSkTextBlob";
-import type { RSXform } from "./JsiSkRSXform";
 import { JsiSkRSXform } from "./JsiSkRSXform";
 
 export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
@@ -34,20 +33,21 @@ export class JsiSkTextBlobFactory extends Host implements TextBlobFactory {
       this.CanvasKit,
       this.CanvasKit.TextBlob.MakeFromRSXform(
         str,
-        rsxforms
-          .map((f) => Array.from(JsiSkRSXform.fromValue<RSXform>(f)))
-          .flat(),
+        rsxforms.map((f) => Array.from(JsiSkRSXform.fromValue(f))).flat(),
         JsiSkFont.fromValue(font)
       )
     );
   }
 
   MakeFromRSXformGlyphs(glyphs: number[], rsxforms: SkRSXform[], font: SkFont) {
+    const transforms = rsxforms.flatMap((s) =>
+      Array.from(JsiSkRSXform.fromValue(s))
+    );
     return new JsiSkTextBlob(
       this.CanvasKit,
       this.CanvasKit.TextBlob.MakeFromRSXformGlyphs(
         glyphs,
-        rsxforms.map((f) => JsiSkRSXform.fromValue(f)),
+        transforms,
         JsiSkFont.fromValue(font)
       )
     );

package/src/skia/web/JsiSkia.ts

@@ -52,6 +52,21 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
     new JsiSkRRect(CanvasKit, rect, rx, ry),
   RSXform: (scos: number, ssin: number, tx: number, ty: number) =>
     new JsiSkRSXform(CanvasKit, Float32Array.of(scos, ssin, tx, ty)),
+  RSXformFromRadians: (
+    scale: number,
+    r: number,
+    tx: number,
+    ty: number,
+    px: number,
+    py: number
+  ) => {
+    const s = Math.sin(r) * scale;
+    const c = Math.cos(r) * scale;
+    return new JsiSkRSXform(
+      CanvasKit,
+      Float32Array.of(c, s, tx - c * px + s * py, ty - s * px - c * py)
+    );
+  },
   Color,
   ContourMeasureIter: (
     path: SkPath,