@shopify/react-native-skia 1.8.2 → 1.9.1

package/src/dom/types/Shaders.ts

@@ -1,7 +1,6 @@
 import type {
   Color,
-  FilterMode,
-  MipmapMode,
+  SamplingOptions,
   SkImage,
   SkRect,
   SkRuntimeEffect,
@@ -26,11 +25,10 @@ export interface ShaderProps extends TransformProps, ChildrenProps {
 export interface ImageShaderProps extends TransformProps, Partial<RectCtor> {
   tx: SkEnum<typeof TileMode>;
   ty: SkEnum<typeof TileMode>;
-  fm: SkEnum<typeof FilterMode>;
-  mm: SkEnum<typeof MipmapMode>;
   fit: Fit;
   rect?: SkRect;
   image: SkImage | null;
+  sampling?: SamplingOptions;
 }
 
 export interface ColorProps {

package/src/renderer/__tests__/e2e/Text.spec.tsx

@@ -18,7 +18,7 @@ describe("Text", () => {
       },
       { font }
     );
-    expect(result).toEqual([892, 896]);
+    expect(result).toEqual(surface.OS === "ios" ? [0, 0] : [892, 896]);
   });
   it("Should calculate chinese text width correctly", async () => {
     const font = fonts.NotoSansSCRegular;

package/src/renderer/components/image/ImageShader.tsx

@@ -6,24 +6,11 @@ import type { SkiaDefaultProps } from "../../processors";
 export const ImageShader = ({
   tx = "decal",
   ty = "decal",
-  fm = "nearest",
-  mm = "none",
   fit = "none",
   transform = [],
   ...props
-}: SkiaDefaultProps<
-  ImageShaderProps,
-  "tx" | "ty" | "fm" | "mm" | "fit" | "transform"
->) => {
+}: SkiaDefaultProps<ImageShaderProps, "tx" | "ty" | "fit" | "transform">) => {
   return (
-    <skImageShader
-      tx={tx}
-      ty={ty}
-      fm={fm}
-      mm={mm}
-      fit={fit}
-      transform={transform}
-      {...props}
-    />
+    <skImageShader tx={tx} ty={ty} fit={fit} transform={transform} {...props} />
   );
 };

package/src/skia/types/Canvas.ts

@@ -7,8 +7,7 @@ import type {
   MipmapMode,
   FilterMode,
   ImageInfo,
-  CubicResampler,
-  FilterOptions,
+  SamplingOptions,
 } from "./Image";
 import type { SkSVG } from "./SVG";
 import type { SkColor } from "./Color";
@@ -521,7 +520,7 @@ export interface SkCanvas {
     paint: SkPaint,
     blendMode?: BlendMode,
     colors?: SkColor[],
-    sampling?: CubicResampler | FilterOptions
+    sampling?: SamplingOptions
   ): void;
 
   /** Read Image pixels

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

@@ -32,6 +32,20 @@ export enum ImageFormat {
   WEBP = 6,
 }
 
+export type SamplingOptions = CubicResampler | FilterOptions;
+
+export const isCubicSampling = (
+  sampling: SamplingOptions
+): sampling is CubicResampler => {
+  "worklet";
+  return "B" in sampling && "C" in sampling;
+};
+
+export const MitchellCubicSampling = { B: 1 / 3.0, C: 1 / 3.0 };
+export const CatmullRomCubicSampling = { B: 0, C: 1 / 2.0 };
+export const CubicSampling = { B: 0, C: 0 };
+export const MakeCubic = (B: number, C: number) => ({ B, C });
+
 export interface SkImage extends SkJSIInstance<"Image"> {
   /**
    * Returns the possibly scaled height of the image.

package/src/skia/types/Picture/PictureRecorder.ts

@@ -1,9 +1,10 @@
 import type { SkCanvas } from "../Canvas";
+import type { SkJSIInstance } from "../JsiInstance";
 import type { SkRect } from "../Rect";
 
 import type { SkPicture } from "./Picture";
 
-export interface SkPictureRecorder {
+export interface SkPictureRecorder extends SkJSIInstance<"PictureRecorder"> {
   /**
    * Returns a canvas on which to draw. When done drawing, call finishRecordingAsPicture()
    *

package/src/skia/web/JsiSkCanvas.ts

@@ -1,31 +1,37 @@
-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,
-  SkRSXform,
-  CubicResampler,
-  FilterOptions,
+  Canvas,
+  CanvasKit,
+  CubicResampler as CKCubicResampler,
+  FilterOptions as CKFilterOptions,
+} from "canvaskit-wasm";
+
+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,
+  isCubicSampling,
 } from "../types";
 
 import { getEnum, HostObject } from "./Host";
@@ -398,7 +404,7 @@ export class JsiSkCanvas
     paint: SkPaint,
     blendMode?: BlendMode,
     colors?: SkColor[],
-    _sampling?: CubicResampler | FilterOptions
+    sampling?: CubicResampler | FilterOptions
   ) {
     const src = srcs.flatMap((s) =>
       Array.from(JsiSkRect.fromValue(this.CanvasKit, s))
@@ -412,6 +418,20 @@ export class JsiSkCanvas
         cls[i] = this.CanvasKit.ColorAsInt(r * 255, g * 255, b * 255, a * 255);
       }
     }
+    let ckSampling: CKCubicResampler | CKFilterOptions = {
+      filter: this.CanvasKit.FilterMode.Linear,
+      mipmap: this.CanvasKit.MipmapMode.None,
+    };
+    if (sampling && isCubicSampling(sampling)) {
+      ckSampling = sampling;
+    } else if (sampling) {
+      ckSampling = {
+        filter: getEnum(this.CanvasKit.FilterMode, sampling.filter),
+        mipmap: sampling.mipmap
+          ? getEnum(this.CanvasKit.MipmapMode, sampling.mipmap)
+          : this.CanvasKit.MipmapMode.None,
+      };
+    }
     this.ref.drawAtlas(
       JsiSkImage.fromValue(atlas),
       src,
@@ -420,7 +440,8 @@ export class JsiSkCanvas
       blendMode
         ? getEnum(this.CanvasKit.BlendMode, blendMode)
         : this.CanvasKit.BlendMode.DstOver,
-      cls
+      cls,
+      ckSampling
     );
   }
 

package/src/sksg/Container.ts

@@ -1,108 +1,104 @@
-import { type SharedValue } from "react-native-reanimated";
-
 import Rea from "../external/reanimated/ReanimatedProxy";
 import type { Skia, SkCanvas } from "../skia/types";
+import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 
 import type { Node } from "./Node";
-import { isSharedValue } from "./utils";
+import type { Recording } from "./Recorder/Recorder";
 import { Recorder } from "./Recorder/Recorder";
 import { visit } from "./Recorder/Visitor";
 import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
-import { createRecording, type Recording } from "./Recorder/Recording";
 
 const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   "worklet";
+
   const rec = Skia.PictureRecorder();
   const canvas = rec.beginRecording();
   // const start = performance.now();
 
-  // TODO: because the pool is not a shared value here, it is copied on every frame
   const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
-  //console.log(recording.commands);
   replay(ctx, recording.commands);
   const picture = rec.finishRecordingAsPicture();
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+  rec.dispose();
+  picture.dispose();
 };
 
-export class Container {
-  private _root: Node[] = [];
-  private _recording: Recording | null = null;
-  public unmounted = false;
+export abstract class Container {
+  public root: Node[] = [];
+  protected recording: Recording | null = null;
 
-  private values = new Set<SharedValue<unknown>>();
-  private mapperId: number | null = null;
+  constructor(protected Skia: Skia, protected nativeId: number) {}
 
-  constructor(public Skia: Skia, private nativeId: number) {}
-
-  get root() {
-    return this._root;
-  }
-
-  set root(root: Node[]) {
-    const isOnscreen = this.nativeId !== -1;
-    if (isOnscreen) {
-      if (this.mapperId !== null) {
-        Rea.stopMapper(this.mapperId);
-      }
-      const { nativeId, Skia, _recording } = this;
-      this.mapperId = Rea.startMapper(() => {
-        "worklet";
-        drawOnscreen(Skia, nativeId, _recording!);
-      }, Array.from(this.values));
+  drawOnCanvas(canvas: SkCanvas) {
+    if (!this.recording) {
+      throw new Error("No recording to draw");
     }
-    this._root = root;
-    const recorder = new Recorder();
-    visit(recorder, root);
-    this._recording = createRecording(recorder.commands);
+    const ctx = createDrawingContext(
+      this.Skia,
+      this.recording.paintPool,
+      canvas
+    );
+    //console.log(this.recording.commands);
+    replay(ctx, this.recording.commands);
   }
 
-  clear() {
-    console.log("clear container");
+  abstract redraw(): void;
+}
+
+class StaticContainer extends Container {
+  constructor(Skia: Skia, nativeId: number) {
+    super(Skia, nativeId);
   }
 
   redraw() {
-    const isOnscreen = this.nativeId !== -1;
-    if (isOnscreen) {
-      const { nativeId, Skia, _recording } = this;
-      Rea.runOnUI(() => {
-        drawOnscreen(Skia, nativeId, _recording!);
-      })();
+    const recorder = new Recorder();
+    visit(recorder, this.root);
+    this.recording = recorder.getRecording();
+    const isOnScreen = this.nativeId !== -1;
+    if (isOnScreen) {
+      const rec = this.Skia.PictureRecorder();
+      const canvas = rec.beginRecording();
+      this.drawOnCanvas(canvas);
+      const picture = rec.finishRecordingAsPicture();
+      SkiaViewApi.setJsiProperty(this.nativeId, "picture", picture);
     }
   }
+}
 
-  getNativeId() {
-    return this.nativeId;
-  }
-
-  unregisterValues(values: object) {
-    Object.values(values)
-      .filter(isSharedValue)
-      .forEach((value) => {
-        this.values.delete(value);
-      });
-  }
+class ReanimatedContainer extends Container {
+  private mapperId: number | null = null;
 
-  registerValues(values: object) {
-    Object.values(values)
-      .filter(isSharedValue)
-      .forEach((value) => {
-        this.values.add(value);
-      });
+  constructor(Skia: Skia, nativeId: number) {
+    super(Skia, nativeId);
   }
 
-  drawOnCanvas(canvas: SkCanvas) {
-    if (!this._recording) {
-      throw new Error("No recording to draw");
+  redraw() {
+    if (this.mapperId !== null) {
+      Rea.stopMapper(this.mapperId);
+    }
+    const recorder = new Recorder();
+    visit(recorder, this.root);
+    const record = recorder.getRecording();
+    const { animationValues } = record;
+    this.recording = {
+      commands: record.commands,
+      paintPool: record.paintPool,
+    };
+    if (animationValues.size > 0) {
+      const { nativeId, Skia, recording } = this;
+      this.mapperId = Rea.startMapper(() => {
+        "worklet";
+        drawOnscreen(Skia, nativeId, recording!);
+      }, Array.from(animationValues));
     }
-    const ctx = createDrawingContext(
-      this.Skia,
-      this._recording.paintPool,
-      canvas
-    );
-    //console.log(this._recording);
-    replay(ctx, this._recording.commands);
   }
 }
+
+export const createContainer = (Skia: Skia, nativeId: number) => {
+  return HAS_REANIMATED_3 && nativeId !== -1
+    ? new ReanimatedContainer(Skia, nativeId)
+    : new StaticContainer(Skia, nativeId);
+};

package/src/sksg/HostConfig.ts

@@ -85,14 +85,13 @@ export const sksgHostConfig: SkiaHostConfig = {
   createInstance(
     type,
     propsWithChildren,
-    container,
+    _container,
     _hostContext,
     _internalInstanceHandle
   ) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const { children, ...props } = propsWithChildren as any;
     debug("createInstance", type);
-    container.registerValues(props);
     const instance = {
       type,
       props,
@@ -121,7 +120,7 @@ export const sksgHostConfig: SkiaHostConfig = {
     debug("commitMount");
   },
 
-  prepareForCommit(_containerInfo) {
+  prepareForCommit(_container: Container) {
     debug("prepareForCommit");
     return null;
   },
@@ -144,9 +143,8 @@ export const sksgHostConfig: SkiaHostConfig = {
     //  textInstance.instance = newText;
   },
 
-  clearContainer: (container) => {
+  clearContainer: (_container) => {
     debug("clearContainer");
-    container.clear();
   },
 
   prepareUpdate(
@@ -162,8 +160,6 @@ export const sksgHostConfig: SkiaHostConfig = {
     if (propsAreEqual) {
       return null;
     }
-    container.unregisterValues(oldProps);
-    container.registerValues(newProps);
     return container;
   },
 
@@ -208,7 +204,6 @@ export const sksgHostConfig: SkiaHostConfig = {
   },
 
   replaceContainerChildren(container: Container, newChildren: ChildSet) {
-    debug("replaceContainerChildren");
     container.root = newChildren;
   },
 
@@ -229,7 +224,7 @@ export const sksgHostConfig: SkiaHostConfig = {
   getCurrentEventPriority: () => DefaultEventPriority,
   beforeActiveInstanceBlur: () => {},
   afterActiveInstanceBlur: () => {},
-  detachDeletedInstance: () => {},
+  detachDeletedInstance: (_node: Instance) => {},
   getInstanceFromNode: function (_node): Fiber | null | undefined {
     throw new Error("Function not implemented.");
   },

package/src/sksg/Reconciler.ts

@@ -6,7 +6,8 @@ import type { SkCanvas, Skia } from "../skia/types";
 import { NodeType } from "../dom/types";
 
 import { debug, sksgHostConfig } from "./HostConfig";
-import { Container } from "./Container";
+import type { Container } from "./Container";
+import { createContainer } from "./Container";
 
 const skiaReconciler = ReactReconciler(sksgHostConfig);
 
@@ -21,7 +22,7 @@ export class SkiaSGRoot {
   private container: Container;
 
   constructor(public Skia: Skia, nativeId = -1) {
-    this.container = new Container(Skia, nativeId);
+    this.container = createContainer(Skia, nativeId);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,
@@ -58,7 +59,6 @@ export class SkiaSGRoot {
   }
 
   unmount() {
-    this.container.unmounted = true;
     skiaReconciler.updateContainer(null, this.root, null, () => {
       debug("unmountContainer");
     });

package/src/sksg/Recorder/Core.ts

@@ -68,6 +68,7 @@ import type {
 // }
 export enum CommandType {
   // Context
+  Group,
   SavePaint,
   RestorePaint,
   SaveCTM,
@@ -133,6 +134,15 @@ export const isCommand = <T extends CommandType>(
   return command.type === type;
 };
 
+interface GroupCommand extends Command<CommandType.Group> {
+  children: Command[];
+}
+
+export const isGroup = (command: Command): command is GroupCommand => {
+  "worklet";
+  return command.type === CommandType.Group;
+};
+
 interface Props {
   [CommandType.DrawImage]: ImageProps;
   [CommandType.DrawCircle]: CircleProps;

package/src/sksg/Recorder/Player.ts

@@ -43,6 +43,7 @@ import {
   CommandType,
   isCommand,
   isDrawCommand,
+  isGroup,
   materializeProps,
   type Command,
 } from "./Core";
@@ -50,7 +51,10 @@ import type { DrawingContext } from "./DrawingContext";
 
 const play = (ctx: DrawingContext, command: Command) => {
   "worklet";
-
+  if (isGroup(command)) {
+    command.children.forEach((child) => play(ctx, child));
+    return;
+  }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   materializeProps(command as any);
   if (isCommand(command, CommandType.SaveBackdropFilter)) {

package/src/sksg/Recorder/Recorder.ts

@@ -30,12 +30,36 @@ import type {
 import type { AnimatedProps } from "../../renderer";
 import { isSharedValue } from "../utils";
 import { isColorFilter, isImageFilter, isPathEffect, isShader } from "../Node";
+import type { SkPaint } from "../../skia/types";
 
 import { CommandType } from "./Core";
 import type { Command } from "./Core";
 
+export interface Recording {
+  commands: Command[];
+  paintPool: SkPaint[];
+}
+
+interface AnimationValues {
+  animationValues: Set<SharedValue<unknown>>;
+}
+
 export class Recorder {
   commands: Command[] = [];
+  cursors: Command[][] = [];
+  animationValues: Set<SharedValue<unknown>> = new Set();
+
+  constructor() {
+    this.cursors.push(this.commands);
+  }
+
+  getRecording(): Recording & AnimationValues {
+    return {
+      commands: this.commands,
+      paintPool: [],
+      animationValues: this.animationValues,
+    };
+  }
 
   private processProps(props: Record<string, unknown>) {
     const animatedProps: Record<string, SharedValue<unknown>> = {};
@@ -44,6 +68,7 @@ export class Recorder {
     for (const key in props) {
       const prop = props[key];
       if (isSharedValue(prop)) {
+        this.animationValues.add(prop);
         props[key] = prop.value;
         animatedProps[key] = prop;
         hasAnimatedProps = true;
@@ -65,7 +90,17 @@ export class Recorder {
         command.animatedProps = animatedProps;
       }
     }
-    this.commands.push(command);
+    this.cursors[this.cursors.length - 1].push(command);
+  }
+
+  saveGroup() {
+    const children: Command[] = [];
+    this.add({ type: CommandType.Group, children });
+    this.cursors.push(children);
+  }
+
+  restoreGroup() {
+    this.cursors.pop();
   }
 
   savePaint(props: AnimatedProps<PaintProps>) {

package/src/sksg/Recorder/Visitor.ts

@@ -196,6 +196,9 @@ const pushPaints = (recorder: Recorder, paints: Node<any>[]) => {
 };
 
 const visitNode = (recorder: Recorder, node: Node<any>) => {
+  if (node.type === NodeType.Group) {
+    recorder.saveGroup();
+  }
   const { props } = node;
   const {
     colorFilters,
@@ -315,6 +318,9 @@ const visitNode = (recorder: Recorder, node: Node<any>) => {
   if (shouldRestore) {
     recorder.restoreCTM();
   }
+  if (node.type === NodeType.Group) {
+    recorder.restoreGroup();
+  }
 };
 
 export const visit = (recorder: Recorder, root: Node[]) => {

package/src/sksg/Recorder/commands/Drawing.ts

@@ -40,7 +40,10 @@ import {
   BlurStyle,
   ClipOp,
   FillType,
+  FilterMode,
+  isCubicSampling,
   isRRect,
+  MipmapMode,
   PointMode,
   VertexMode,
 } from "../../../skia/types";
@@ -117,7 +120,7 @@ export const drawBox = (
 
 export const drawImage = (ctx: DrawingContext, props: ImageProps) => {
   "worklet";
-  const { image } = props;
+  const { image, sampling } = props;
   if (image) {
     const fit = props.fit ?? "contain";
     const rect = processRect(ctx.Skia, props);
@@ -131,7 +134,25 @@ export const drawImage = (ctx: DrawingContext, props: ImageProps) => {
       },
       rect
     );
-    ctx.canvas.drawImageRect(image, src, dst, ctx.paint);
+    if (sampling && isCubicSampling(sampling)) {
+      ctx.canvas.drawImageRectCubic(
+        image,
+        src,
+        dst,
+        sampling.B,
+        sampling.C,
+        ctx.paint
+      );
+    } else {
+      ctx.canvas.drawImageRectOptions(
+        image,
+        src,
+        dst,
+        sampling?.filter ?? FilterMode.Linear,
+        sampling?.mipmap ?? MipmapMode.None,
+        ctx.paint
+      );
+    }
   }
 };
 
@@ -349,10 +370,18 @@ export const drawPicture = (ctx: DrawingContext, props: PictureProps) => {
 
 export const drawAtlas = (ctx: DrawingContext, props: AtlasProps) => {
   "worklet";
-  const { image, sprites, transforms, colors, blendMode } = props;
+  const { image, sprites, transforms, colors, blendMode, sampling } = props;
   const blend = blendMode ? BlendMode[enumKey(blendMode)] : undefined;
   if (image) {
-    ctx.canvas.drawAtlas(image, sprites, transforms, ctx.paint, blend, colors);
+    ctx.canvas.drawAtlas(
+      image,
+      sprites,
+      transforms,
+      ctx.paint,
+      blend,
+      colors,
+      sampling
+    );
   }
 };