@shopify/react-native-skia 0.1.236 → 0.1.237

package/src/renderer/Offscreen.tsx

@@ -1,26 +1,11 @@
 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 picture = drawAsPicture(element);
-  const surface = Skia.Surface.MakeOffscreen(width, height);
-  if (!surface) {
-    throw new Error("Could not create offscreen surface");
-  }
-  const canvas = surface.getCanvas();
-  canvas.drawPicture(picture);
-  surface.flush();
-  return surface.makeImageSnapshot();
-};
-
 export const drawAsPicture = (element: ReactElement) => {
   const recorder = Skia.PictureRecorder();
   const canvas = recorder.beginRecording();
@@ -31,3 +16,22 @@ export const drawAsPicture = (element: ReactElement) => {
   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/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/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/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,