@shopify/react-native-skia 1.7.7 → 1.8.0

package/src/renderer/Offscreen.tsx

@@ -1,11 +1,9 @@
 import type { ReactElement } from "react";
 
-import { JsiDrawingContext } from "../dom/types";
 import type { SkPicture, SkRect, SkSize } from "../skia/types";
 import { Skia } from "../skia";
 import { Platform } from "../Platform";
-
-import { SkiaRoot } from "./Reconciler";
+import { SkiaSGRoot } from "../sksg/Reconciler";
 
 // We call it main thread because on web main is JS thread
 export const isOnMainThread = () => {
@@ -19,10 +17,9 @@ export const isOnMainThread = () => {
 export const drawAsPicture = (element: ReactElement, bounds?: SkRect) => {
   const recorder = Skia.PictureRecorder();
   const canvas = recorder.beginRecording(bounds);
-  const root = new SkiaRoot(Skia, false);
+  const root = new SkiaSGRoot(Skia);
   root.render(element);
-  const ctx = new JsiDrawingContext(Skia, canvas);
-  root.dom.render(ctx);
+  root.drawOnCanvas(canvas);
   const picture = recorder.finishRecordingAsPicture();
   root.unmount();
   return picture;

package/src/renderer/Reconciler.tsx

@@ -2,8 +2,6 @@ import type { ReactNode } from "react";
 import type { OpaqueRoot } from "react-reconciler";
 import ReactReconciler from "react-reconciler";
 
-import type { Skia } from "../skia/types";
-
 import { skHostConfig, debug as hostDebug } from "./HostConfig";
 import { Container } from "./Container";
 
@@ -20,12 +18,10 @@ export class SkiaRoot {
   private container: Container;
 
   constructor(
-    Skia: Skia,
-    native = false,
     redraw: () => void = () => {},
     getNativeId: () => number = () => 0
   ) {
-    this.container = new Container(Skia, redraw, getNativeId, native);
+    this.container = new Container(redraw, getNativeId);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,

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

@@ -1,5 +1,3 @@
-"worklet";
-
 import type { SkJSIInstance } from "../JsiInstance";
 import type { Vector } from "../Point";
 import type { SkRuntimeEffect, SkRuntimeShaderBuilder } from "../RuntimeEffect";
@@ -21,12 +19,14 @@ export interface Uniforms {
 }
 
 const isVector = (obj: unknown): obj is Vector => {
+  "worklet";
   // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (obj as any).x !== undefined && (obj as any).y !== undefined;
 };
 
 function processValue(values: number[], value: Uniform) {
+  "worklet";
   if (typeof value === "number") {
     values.push(value);
   } else if (Array.isArray(value)) {
@@ -43,6 +43,7 @@ export const processUniforms = (
   uniforms: Uniforms,
   builder?: SkRuntimeShaderBuilder
 ) => {
+  "worklet";
   const result: number[] = [];
   const uniformsCount = source.getUniformCount();
   for (let i = 0; i < uniformsCount; i++) {

package/src/sksg/Container.ts

@@ -7,7 +7,7 @@ import {
   HAS_REANIMATED_3,
 } from "../external/reanimated/renderHelpers";
 
-import { DrawingContext } from "./DrawingContext";
+import { createDrawingContext } from "./DrawingContext";
 import type { Node } from "./nodes";
 import { draw, isSharedValue } from "./nodes";
 
@@ -17,7 +17,7 @@ const drawOnscreen = (Skia: Skia, nativeId: number, root: Node[]) => {
   const canvas = rec.beginRecording();
   // TODO: This is only support from 3.15 and above (check the exact version)
   // This could be polyfilled in C++ if needed (or in JS via functions only?)
-  const ctx = new DrawingContext(Skia, canvas);
+  const ctx = createDrawingContext(Skia, canvas);
   root.forEach((node) => {
     draw(ctx, node);
   });
@@ -94,7 +94,7 @@ export class Container {
   }
 
   drawOnCanvas(canvas: SkCanvas) {
-    const ctx = new DrawingContext(this.Skia, canvas);
+    const ctx = createDrawingContext(this.Skia, canvas);
     this.root.forEach((node) => {
       draw(ctx, node);
     });

package/src/sksg/DeclarationContext.ts

@@ -0,0 +1,85 @@
+import type {
+  SkShader,
+  SkPaint,
+  SkImageFilter,
+  SkMaskFilter,
+  SkPathEffect,
+  Skia,
+  SkColorFilter,
+} from "../skia/types";
+
+type Composer<T> = (outer: T, inner: T) => T;
+
+export const composeDeclarations = <T>(filters: T[], composer: Composer<T>) => {
+  "worklet";
+  const len = filters.length;
+  if (len <= 1) {
+    return filters[0];
+  }
+  return filters.reduceRight((inner, outer) =>
+    inner ? composer(outer, inner) : outer
+  );
+};
+
+const createDeclaration = <T>(composer?: Composer<T>) => {
+  "worklet";
+  const state = {
+    decls: [] as T[],
+    indexes: [0],
+  };
+
+  return {
+    save: () => {
+      state.indexes.push(state.decls.length);
+    },
+    restore: () => {
+      state.indexes.pop();
+    },
+    pop: () => state.decls.pop(),
+    push: (decl: T) => {
+      state.decls.push(decl);
+    },
+    popAll: () => {
+      const idx = state.indexes[state.indexes.length - 1];
+      return state.decls.splice(idx, state.decls.length - idx);
+    },
+    popAllAsOne: () => {
+      if (state.decls.length === 0) {
+        return undefined;
+      }
+      if (!composer) {
+        throw new Error("No composer for this type of declaration");
+      }
+      if (!state.decls.length) {
+        return undefined;
+      }
+      if (!composer) {
+        throw new Error("No composer for this type of declaration");
+      }
+
+      const idx = state.indexes[state.indexes.length - 1];
+      const decls = state.decls.splice(idx, state.decls.length - idx);
+      return composeDeclarations(decls, composer);
+    },
+  };
+};
+
+export const createDeclarationContext = (Skia: Skia) => {
+  "worklet";
+  const composers = {
+    pathEffect: Skia.PathEffect.MakeCompose.bind(Skia.PathEffect),
+    imageFilter: Skia.ImageFilter.MakeCompose.bind(Skia.ImageFilter),
+    colorFilter: Skia.ColorFilter.MakeCompose.bind(Skia.ColorFilter),
+  };
+  return {
+    Skia,
+    paints: createDeclaration<SkPaint>(),
+    maskFilters: createDeclaration<SkMaskFilter>(),
+    shaders: createDeclaration<SkShader>(),
+    pathEffects: createDeclaration<SkPathEffect>(composers.pathEffect),
+    imageFilters: createDeclaration<SkImageFilter>(composers.imageFilter),
+    colorFilters: createDeclaration<SkColorFilter>(composers.colorFilter),
+  };
+};
+
+export type DeclarationContext = ReturnType<typeof createDeclarationContext>;

package/src/sksg/DrawingContext.ts

@@ -1,5 +1,3 @@
-"worklet";
-
 import {
   enumKey,
   isPathDef,
@@ -7,7 +5,6 @@ import {
   processTransformProps2,
 } from "../dom/nodes";
 import type { ClipDef, DrawingNodeProps, GroupProps } from "../dom/types";
-import { DeclarationContext } from "../dom/types";
 import {
   BlendMode,
   ClipOp,
@@ -25,6 +22,8 @@ import type {
   SkPaint,
 } from "../skia/types";
 
+import type { DeclarationContext } from "./DeclarationContext";
+
 const computeClip = (
   Skia: Skia,
   clip: ClipDef | undefined
@@ -33,6 +32,7 @@ const computeClip = (
   | { clipPath: SkPath }
   | { clipRect: SkRect }
   | { clipRRect: SkRRect } => {
+  "worklet";
   if (clip) {
     if (isPathDef(clip)) {
       return { clipPath: processPath(Skia, clip) };
@@ -45,63 +45,59 @@ const computeClip = (
   return undefined;
 };
 
-export class DrawingContext {
-  private paints: SkPaint[];
-  public declCtx: DeclarationContext;
-  public Skia: Skia;
-  public canvas: SkCanvas;
-
-  constructor(Skia: Skia, canvas: SkCanvas) {
-    this.Skia = Skia;
-    this.canvas = canvas;
-    this.paints = [Skia.Paint()];
-    this.declCtx = new DeclarationContext(this.Skia);
-  }
-
-  save() {
-    this.paints.push(this.paint.copy());
-  }
-
-  restore() {
-    this.paints.pop();
+const processColor = (
+  Skia: Skia,
+  color: number | string | Float32Array | number[]
+) => {
+  "worklet";
+  if (typeof color === "string" || typeof color === "number") {
+    return Skia.Color(color);
+  } else if (Array.isArray(color) || color instanceof Float32Array) {
+    return color instanceof Float32Array ? color : new Float32Array(color);
+  } else {
+    throw new Error(
+      `Invalid color type: ${typeof color}. Expected number, string, or array.`
+    );
   }
+};
 
-  get paint() {
-    const paint = this.paints[this.paints.length - 1];
-    if (!paint) {
-      throw new Error("Paint is undefined");
-    }
-    return paint;
-  }
+export const createDrawingContext = (Skia: Skia, canvas: SkCanvas) => {
+  "worklet";
+  const state = {
+    paints: [Skia.Paint()],
+  };
 
-  getLocalPaints() {
-    const { paint } = this;
-    return [paint, ...this.declCtx.paints.popAll()];
-  }
+  const getPaint = () => {
+    return state.paints[state.paints.length - 1];
+  };
 
-  processPaint({
-    opacity,
-    color,
-    strokeWidth,
-    blendMode,
-    style,
-    strokeJoin,
-    strokeCap,
-    strokeMiter,
-    antiAlias,
-    dither,
-    paint: paintProp,
-  }: DrawingNodeProps) {
+  const processPaint = (
+    {
+      opacity,
+      color,
+      strokeWidth,
+      blendMode,
+      style,
+      strokeJoin,
+      strokeCap,
+      strokeMiter,
+      antiAlias,
+      dither,
+      paint: paintProp,
+    }: DrawingNodeProps,
+    declCtx: DeclarationContext
+  ) => {
     if (paintProp) {
-      this.declCtx.paints.push(paintProp);
+      declCtx.paints.push(paintProp);
       return true;
     }
     let shouldRestore = false;
-    const colorFilter = this.declCtx.colorFilters.popAllAsOne();
-    const imageFilter = this.declCtx.imageFilters.popAllAsOne();
-    const shader = this.declCtx.shaders.pop();
-    const maskFilter = this.declCtx.maskFilters.pop();
-    const pathEffect = this.declCtx.pathEffects.popAllAsOne();
+    const colorFilter = declCtx.colorFilters.popAllAsOne();
+    const imageFilter = declCtx.imageFilters.popAllAsOne();
+    const shader = declCtx.shaders.pop();
+    const maskFilter = declCtx.maskFilters.pop();
+    const pathEffect = declCtx.pathEffects.popAllAsOne();
+
     if (
       opacity !== undefined ||
       color !== undefined ||
@@ -120,26 +116,19 @@ export class DrawingContext {
       pathEffect !== undefined
     ) {
       if (!shouldRestore) {
-        this.save();
+        state.paints.push(getPaint().copy());
         shouldRestore = true;
       }
     }
-    const { paint } = this;
+
+    const paint = getPaint();
     if (opacity !== undefined) {
       paint.setAlphaf(paint.getAlphaf() * opacity);
     }
     if (color !== undefined) {
       const currentOpacity = paint.getAlphaf();
       paint.setShader(null);
-      if (typeof color === "string" || typeof color === "number") {
-        paint.setColor(this.Skia.Color(color));
-      } else if (Array.isArray(color)) {
-        paint.setColor(new Float32Array(color));
-      } else if (color instanceof Float32Array) {
-        paint.setColor(color);
-      } else {
-        throw new Error("Invalid color");
-      }
+      paint.setColor(processColor(Skia, color));
       paint.setAlphaf(currentOpacity * paint.getAlphaf());
     }
     if (strokeWidth !== undefined) {
@@ -182,40 +171,56 @@ export class DrawingContext {
       paint.setPathEffect(pathEffect);
     }
     return shouldRestore;
-  }
+  };
 
-  processMatrixAndClipping(props: GroupProps, layer?: boolean | SkPaint) {
+  const processMatrixAndClipping = (
+    props: GroupProps,
+    layer?: boolean | SkPaint
+  ) => {
     const hasTransform =
       props.matrix !== undefined || props.transform !== undefined;
-    const clip = computeClip(this.Skia, props.clip);
+    const clip = computeClip(Skia, props.clip);
     const hasClip = clip !== undefined;
     const op = props.invertClip ? ClipOp.Difference : ClipOp.Intersect;
-    const m3 = processTransformProps2(this.Skia, props);
+    const m3 = processTransformProps2(Skia, props);
     const shouldSave = hasTransform || hasClip || !!layer;
+
     if (shouldSave) {
       if (layer) {
         if (typeof layer === "boolean") {
-          this.canvas.saveLayer();
+          canvas.saveLayer();
         } else {
-          this.canvas.saveLayer(layer);
+          canvas.saveLayer(layer);
         }
       } else {
-        this.canvas.save();
+        canvas.save();
       }
     }
 
     if (m3) {
-      this.canvas.concat(m3);
+      canvas.concat(m3);
     }
     if (clip) {
       if ("clipRect" in clip) {
-        this.canvas.clipRect(clip.clipRect, op, true);
+        canvas.clipRect(clip.clipRect, op, true);
       } else if ("clipRRect" in clip) {
-        this.canvas.clipRRect(clip.clipRRect, op, true);
+        canvas.clipRRect(clip.clipRRect, op, true);
       } else {
-        this.canvas.clipPath(clip.clipPath, op, true);
+        canvas.clipPath(clip.clipPath, op, true);
       }
     }
     return shouldSave;
-  }
-}
+  };
+
+  return {
+    Skia,
+    canvas,
+    save: () => state.paints.push(getPaint().copy()),
+    restore: () => state.paints.pop(),
+    getPaint,
+    processPaint,
+    processMatrixAndClipping,
+  };
+};
+
+export type DrawingContext = ReturnType<typeof createDrawingContext>;

package/src/sksg/Reconciler.ts

@@ -20,7 +20,7 @@ export class SkiaSGRoot {
   private root: OpaqueRoot;
   private container: Container;
 
-  constructor(Skia: Skia, nativeId = -1) {
+  constructor(public Skia: Skia, nativeId = -1) {
     this.container = new Container(Skia, nativeId);
     this.root = skiaReconciler.createContainer(
       this.container,
@@ -50,6 +50,13 @@ export class SkiaSGRoot {
     this.container.drawOnCanvas(canvas);
   }
 
+  getPicture() {
+    const recorder = this.Skia.PictureRecorder();
+    const canvas = recorder.beginRecording();
+    this.drawOnCanvas(canvas);
+    return recorder.finishRecordingAsPicture();
+  }
+
   unmount() {
     this.container.unmounted = true;
     skiaReconciler.updateContainer(null, this.root, null, () => {

package/src/sksg/__tests__/MockDeclaration.ts

@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-"worklet";
-
 export enum DeclarationType {
   ColorFilter,
   ImageFilter,

package/src/sksg/nodes/colorFilters.ts

@@ -1,18 +1,32 @@
-"worklet";
-
 import { enumKey } from "../../dom/nodes";
 import type {
   BlendColorFilterProps,
-  DeclarationContext,
   LerpColorFilterProps,
   MatrixColorFilterProps,
 } from "../../dom/types";
+import type { SkColorFilter } from "../../skia/types";
 import { BlendMode } from "../../skia/types";
+import type { DeclarationContext } from "../DeclarationContext";
+
+export const composeColorFilters = (
+  ctx: DeclarationContext,
+  cf: SkColorFilter,
+  processChildren: () => void
+) => {
+  "worklet";
+  const { Skia } = ctx;
+  ctx.colorFilters.save();
+  processChildren();
+  const cf1 = ctx.colorFilters.popAllAsOne();
+  ctx.colorFilters.restore();
+  ctx.colorFilters.push(cf1 ? Skia.ColorFilter.MakeCompose(cf, cf1) : cf);
+};
 
 export const makeBlendColorFilter = (
   ctx: DeclarationContext,
   props: BlendColorFilterProps
 ) => {
+  "worklet";
   const { mode } = props;
   const color = ctx.Skia.Color(props.color);
   const cf = ctx.Skia.ColorFilter.MakeBlend(color, BlendMode[enumKey(mode)]);
@@ -20,11 +34,13 @@ export const makeBlendColorFilter = (
 };
 
 export const makeSRGBToLinearGammaColorFilter = (ctx: DeclarationContext) => {
+  "worklet";
   const cf = ctx.Skia.ColorFilter.MakeSRGBToLinearGamma();
   return cf;
 };
 
 export const makeLinearToSRGBGammaColorFilter = (ctx: DeclarationContext) => {
+  "worklet";
   const cf = ctx.Skia.ColorFilter.MakeLinearToSRGBGamma();
   return cf;
 };
@@ -33,6 +49,7 @@ export const declareLerpColorFilter = (
   ctx: DeclarationContext,
   props: LerpColorFilterProps
 ) => {
+  "worklet";
   const { t } = props;
   const second = ctx.colorFilters.pop();
   const first = ctx.colorFilters.pop();
@@ -49,12 +66,14 @@ export const makeMatrixColorFilter = (
   ctx: DeclarationContext,
   props: MatrixColorFilterProps
 ) => {
+  "worklet";
   const { matrix } = props;
   const cf = ctx.Skia.ColorFilter.MakeMatrix(matrix);
   return cf;
 };
 
 export const makeLumaColorFilter = (ctx: DeclarationContext) => {
+  "worklet";
   const cf = ctx.Skia.ColorFilter.MakeLumaColorFilter();
   return cf;
 };