@shopify/react-native-skia 1.8.0 → 1.8.2

package/src/sksg/Container.ts

@@ -2,31 +2,34 @@ import { type SharedValue } from "react-native-reanimated";
 
 import Rea from "../external/reanimated/ReanimatedProxy";
 import type { Skia, SkCanvas } from "../skia/types";
-import {
-  HAS_REANIMATED,
-  HAS_REANIMATED_3,
-} from "../external/reanimated/renderHelpers";
 
-import { createDrawingContext } from "./DrawingContext";
-import type { Node } from "./nodes";
-import { draw, isSharedValue } from "./nodes";
+import type { Node } from "./Node";
+import { isSharedValue } from "./utils";
+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, root: Node[]) => {
+const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   "worklet";
   const rec = Skia.PictureRecorder();
   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 = createDrawingContext(Skia, canvas);
-  root.forEach((node) => {
-    draw(ctx, node);
-  });
+  // 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);
 };
 
 export class Container {
-  public _root: Node[] = [];
+  private _root: Node[] = [];
+  private _recording: Recording | null = null;
   public unmounted = false;
 
   private values = new Set<SharedValue<unknown>>();
@@ -40,20 +43,20 @@ export class Container {
 
   set root(root: Node[]) {
     const isOnscreen = this.nativeId !== -1;
-    if (HAS_REANIMATED && !HAS_REANIMATED_3) {
-      throw new Error("React Native Skia only supports Reanimated 3 and above");
-    }
     if (isOnscreen) {
       if (this.mapperId !== null) {
         Rea.stopMapper(this.mapperId);
       }
-      const { nativeId, Skia } = this;
+      const { nativeId, Skia, _recording } = this;
       this.mapperId = Rea.startMapper(() => {
         "worklet";
-        drawOnscreen(Skia, nativeId, root);
+        drawOnscreen(Skia, nativeId, _recording!);
       }, Array.from(this.values));
     }
     this._root = root;
+    const recorder = new Recorder();
+    visit(recorder, root);
+    this._recording = createRecording(recorder.commands);
   }
 
   clear() {
@@ -62,13 +65,10 @@ export class Container {
 
   redraw() {
     const isOnscreen = this.nativeId !== -1;
-    if (HAS_REANIMATED && !HAS_REANIMATED_3) {
-      throw new Error("React Native Skia only supports Reanimated 3 and above");
-    }
     if (isOnscreen) {
-      const { nativeId, Skia, root } = this;
+      const { nativeId, Skia, _recording } = this;
       Rea.runOnUI(() => {
-        drawOnscreen(Skia, nativeId, root);
+        drawOnscreen(Skia, nativeId, _recording!);
       })();
     }
   }
@@ -94,9 +94,15 @@ export class Container {
   }
 
   drawOnCanvas(canvas: SkCanvas) {
-    const ctx = createDrawingContext(this.Skia, canvas);
-    this.root.forEach((node) => {
-      draw(ctx, node);
-    });
+    if (!this._recording) {
+      throw new Error("No recording to draw");
+    }
+    const ctx = createDrawingContext(
+      this.Skia,
+      this._recording.paintPool,
+      canvas
+    );
+    //console.log(this._recording);
+    replay(ctx, this._recording.commands);
   }
 }

package/src/sksg/HostConfig.ts

@@ -2,10 +2,10 @@
 import type { Fiber, HostConfig } from "react-reconciler";
 import { DefaultEventPriority } from "react-reconciler/constants";
 
-import { NodeType } from "../dom/types";
+import type { NodeType } from "../dom/types";
 import { shallowEq } from "../renderer/typeddash";
 
-import type { Node } from "./nodes/Node";
+import type { Node } from "./Node";
 import type { Container } from "./Container";
 
 const DEBUG = false;
@@ -15,51 +15,6 @@ export const debug = (...args: Parameters<typeof console.log>) => {
   }
 };
 
-const isDeclaration = (type: NodeType) => {
-  "worklet";
-  return (
-    // BlurMaskFilters
-    type === NodeType.BlurMaskFilter ||
-    // ImageFilters
-    type === NodeType.BlendImageFilter ||
-    type === NodeType.BlurImageFilter ||
-    type === NodeType.OffsetImageFilter ||
-    type === NodeType.DropShadowImageFilter ||
-    type === NodeType.MorphologyImageFilter ||
-    type === NodeType.DisplacementMapImageFilter ||
-    type === NodeType.RuntimeShaderImageFilter ||
-    // ColorFilters
-    type === NodeType.MatrixColorFilter ||
-    type === NodeType.BlendColorFilter ||
-    type === NodeType.LumaColorFilter ||
-    type === NodeType.LinearToSRGBGammaColorFilter ||
-    type === NodeType.SRGBToLinearGammaColorFilter ||
-    type === NodeType.LerpColorFilter ||
-    // Shaders
-    type === NodeType.Shader ||
-    type === NodeType.ImageShader ||
-    type === NodeType.ColorShader ||
-    type === NodeType.Turbulence ||
-    type === NodeType.FractalNoise ||
-    type === NodeType.LinearGradient ||
-    type === NodeType.RadialGradient ||
-    type === NodeType.SweepGradient ||
-    type === NodeType.TwoPointConicalGradient ||
-    // Path Effects
-    type === NodeType.CornerPathEffect ||
-    type === NodeType.DiscretePathEffect ||
-    type === NodeType.DashPathEffect ||
-    type === NodeType.Path1DPathEffect ||
-    type === NodeType.Path2DPathEffect ||
-    type === NodeType.SumPathEffect ||
-    type === NodeType.Line2DPathEffect ||
-    // Mixed
-    type === NodeType.Blend ||
-    // Paint
-    type === NodeType.Paint
-  );
-};
-
 type Instance = Node;
 
 type Props = object;
@@ -129,16 +84,17 @@ export const sksgHostConfig: SkiaHostConfig = {
 
   createInstance(
     type,
-    props,
+    propsWithChildren,
     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,
-      isDeclaration: isDeclaration(type),
       props,
       children: [],
     };
@@ -231,7 +187,6 @@ export const sksgHostConfig: SkiaHostConfig = {
       type: instance.type,
       props: newProps,
       children: keepChildren ? [...instance.children] : [],
-      isDeclaration: instance.isDeclaration,
     };
   },
 

package/src/sksg/Node.ts

@@ -0,0 +1,105 @@
+import { NodeType } from "../dom/types";
+
+export interface Node<Props = unknown> {
+  type: NodeType;
+  props: Props;
+  children: Node[];
+}
+
+export const isColorFilter = (type: NodeType) => {
+  "worklet";
+  return (
+    type === NodeType.BlendColorFilter ||
+    type === NodeType.MatrixColorFilter ||
+    type === NodeType.LerpColorFilter ||
+    type === NodeType.LumaColorFilter ||
+    type === NodeType.SRGBToLinearGammaColorFilter ||
+    type === NodeType.LinearToSRGBGammaColorFilter
+  );
+};
+
+export const isPathEffect = (type: NodeType) => {
+  "worklet";
+  return (
+    type === NodeType.DiscretePathEffect ||
+    type === NodeType.DashPathEffect ||
+    type === NodeType.Path1DPathEffect ||
+    type === NodeType.Path2DPathEffect ||
+    type === NodeType.CornerPathEffect ||
+    type === NodeType.SumPathEffect ||
+    type === NodeType.Line2DPathEffect
+  );
+};
+
+export const isImageFilter = (type: NodeType) => {
+  "worklet";
+  return (
+    type === NodeType.OffsetImageFilter ||
+    type === NodeType.DisplacementMapImageFilter ||
+    type === NodeType.BlurImageFilter ||
+    type === NodeType.DropShadowImageFilter ||
+    type === NodeType.MorphologyImageFilter ||
+    type === NodeType.BlendImageFilter ||
+    type === NodeType.RuntimeShaderImageFilter
+  );
+};
+
+export const isShader = (type: NodeType) => {
+  "worklet";
+  return (
+    type === NodeType.Shader ||
+    type === NodeType.ImageShader ||
+    type === NodeType.ColorShader ||
+    type === NodeType.Turbulence ||
+    type === NodeType.FractalNoise ||
+    type === NodeType.LinearGradient ||
+    type === NodeType.RadialGradient ||
+    type === NodeType.SweepGradient ||
+    type === NodeType.TwoPointConicalGradient
+  );
+};
+
+export const sortNodeChildren = (parent: Node) => {
+  "worklet";
+  const maskFilters: Node[] = [];
+  const colorFilters: Node[] = [];
+  const shaders: Node[] = [];
+  const imageFilters: Node[] = [];
+  const pathEffects: Node[] = [];
+  const drawings: Node[] = [];
+  const paints: Node[] = [];
+  parent.children.forEach((node) => {
+    if (isColorFilter(node.type)) {
+      colorFilters.push(node);
+    } else if (node.type === NodeType.BlurMaskFilter) {
+      maskFilters.push(node);
+    } else if (isPathEffect(node.type)) {
+      pathEffects.push(node);
+    } else if (isImageFilter(node.type)) {
+      imageFilters.push(node);
+    } else if (isShader(node.type)) {
+      shaders.push(node);
+    } else if (node.type === NodeType.Paint) {
+      paints.push(node);
+    } else if (node.type === NodeType.Blend) {
+      if (node.children[0] && isImageFilter(node.children[0].type)) {
+        node.type = NodeType.BlendImageFilter;
+        imageFilters.push(node);
+      } else {
+        node.type = NodeType.Blend;
+        shaders.push(node);
+      }
+    } else {
+      drawings.push(node);
+    }
+  });
+  return {
+    colorFilters,
+    drawings,
+    maskFilters,
+    shaders,
+    pathEffects,
+    imageFilters,
+    paints,
+  };
+};

package/src/sksg/Recorder/Core.ts

@@ -0,0 +1,171 @@
+import type { SharedValue } from "react-native-reanimated";
+
+import type {
+  BlurMaskFilterProps,
+  CircleProps,
+  CTMProps,
+  ImageProps,
+  PointsProps,
+  PathProps,
+  RectProps,
+  RoundedRectProps,
+  OvalProps,
+  LineProps,
+  PatchProps,
+  VerticesProps,
+  DiffRectProps,
+  TextProps,
+  TextPathProps,
+  TextBlobProps,
+  GlyphsProps,
+  PictureProps,
+  ImageSVGProps,
+  ParagraphProps,
+  AtlasProps,
+  DrawingNodeProps,
+} from "../../dom/types";
+
+// export enum CommandType {
+//   // Context
+//   SavePaint = "SavePaint",
+//   RestorePaint = "RestorePaint",
+//   SaveCTM = "SaveCTM",
+//   RestoreCTM = "RestoreCTM",
+//   PushColorFilter = "PushColorFilter",
+//   PushBlurMaskFilter = "PushBlurMaskFilter",
+//   PushImageFilter = "PushImageFilter",
+//   PushPathEffect = "PushPathEffect",
+//   PushShader = "PushShader",
+//   ComposeColorFilter = "ComposeColorFilter",
+//   ComposeImageFilter = "ComposeImageFilter",
+//   ComposePathEffect = "ComposePathEffect",
+//   MaterializePaint = "MaterializePaint",
+//   SaveBackdropFilter = "SaveBackdropFilter",
+//   SaveLayer = "SaveLayer",
+//   RestorePaintDeclaration = "RestorePaintDeclaration",
+//   // Drawing
+//   DrawBox = "DrawBox",
+//   DrawImage = "DrawImage",
+//   DrawCircle = "DrawCircle",
+//   DrawPaint = "DrawPaint",
+//   DrawPoints = "DrawPoints",
+//   DrawPath = "DrawPath",
+//   DrawRect = "DrawRect",
+//   DrawRRect = "DrawRRect",
+//   DrawOval = "DrawOval",
+//   DrawLine = "DrawLine",
+//   DrawPatch = "DrawPatch",
+//   DrawVertices = "DrawVertices",
+//   DrawDiffRect = "DrawDiffRect",
+//   DrawText = "DrawText",
+//   DrawTextPath = "DrawTextPath",
+//   DrawTextBlob = "DrawTextBlob",
+//   DrawGlyphs = "DrawGlyphs",
+//   DrawPicture = "DrawPicture",
+//   DrawImageSVG = "DrawImageSVG",
+//   DrawParagraph = "DrawParagraph",
+//   DrawAtlas = "DrawAtlas",
+// }
+export enum CommandType {
+  // Context
+  SavePaint,
+  RestorePaint,
+  SaveCTM,
+  RestoreCTM,
+  PushColorFilter,
+  PushBlurMaskFilter,
+  PushImageFilter,
+  PushPathEffect,
+  PushShader,
+  ComposeColorFilter,
+  ComposeImageFilter,
+  ComposePathEffect,
+  MaterializePaint,
+  SaveBackdropFilter,
+  SaveLayer,
+  RestorePaintDeclaration,
+  // Drawing
+  DrawBox,
+  DrawImage,
+  DrawCircle,
+  DrawPaint,
+  DrawPoints,
+  DrawPath,
+  DrawRect,
+  DrawRRect,
+  DrawOval,
+  DrawLine,
+  DrawPatch,
+  DrawVertices,
+  DrawDiffRect,
+  DrawText,
+  DrawTextPath,
+  DrawTextBlob,
+  DrawGlyphs,
+  DrawPicture,
+  DrawImageSVG,
+  DrawParagraph,
+  DrawAtlas,
+}
+
+export type Command<T extends CommandType = CommandType> = {
+  type: T;
+  [key: string]: unknown;
+};
+
+export const materializeProps = (command: {
+  props: Record<string, unknown>;
+  animatedProps?: Record<string, SharedValue<unknown>>;
+}) => {
+  "worklet";
+  if (command.animatedProps) {
+    for (const key in command.animatedProps) {
+      command.props[key] = command.animatedProps[key].value;
+    }
+  }
+};
+
+export const isCommand = <T extends CommandType>(
+  command: Command,
+  type: T
+): command is Command<T> => {
+  "worklet";
+  return command.type === type;
+};
+
+interface Props {
+  [CommandType.DrawImage]: ImageProps;
+  [CommandType.DrawCircle]: CircleProps;
+  [CommandType.SaveCTM]: CTMProps;
+  [CommandType.SavePaint]: DrawingNodeProps;
+  [CommandType.PushBlurMaskFilter]: BlurMaskFilterProps;
+  [CommandType.DrawPoints]: PointsProps;
+  [CommandType.DrawPath]: PathProps;
+  [CommandType.DrawRect]: RectProps;
+  [CommandType.DrawRRect]: RoundedRectProps;
+  [CommandType.DrawOval]: OvalProps;
+  [CommandType.DrawLine]: LineProps;
+  [CommandType.DrawPatch]: PatchProps;
+  [CommandType.DrawVertices]: VerticesProps;
+  [CommandType.DrawDiffRect]: DiffRectProps;
+  [CommandType.DrawText]: TextProps;
+  [CommandType.DrawTextPath]: TextPathProps;
+  [CommandType.DrawTextBlob]: TextBlobProps;
+  [CommandType.DrawGlyphs]: GlyphsProps;
+  [CommandType.DrawPicture]: PictureProps;
+  [CommandType.DrawImageSVG]: ImageSVGProps;
+  [CommandType.DrawParagraph]: ParagraphProps;
+  [CommandType.DrawAtlas]: AtlasProps;
+}
+
+interface DrawCommand<T extends CommandType> extends Command<T> {
+  props: T extends keyof Props ? Props[T] : never;
+}
+
+export const isDrawCommand = <T extends keyof Props>(
+  command: Command,
+  type: T
+): command is DrawCommand<T> => {
+  "worklet";
+  return command.type === type;
+};

package/src/sksg/Recorder/DrawingContext.ts

@@ -0,0 +1,130 @@
+import type {
+  Skia,
+  SkCanvas,
+  SkColorFilter,
+  SkPaint,
+  SkShader,
+  SkImageFilter,
+  SkPathEffect,
+} from "../../skia/types";
+
+export const createDrawingContext = (
+  Skia: Skia,
+  paintPool: SkPaint[],
+  canvas: SkCanvas
+) => {
+  "worklet";
+
+  // State (formerly class fields)
+  const paints: SkPaint[] = [];
+  const colorFilters: SkColorFilter[] = [];
+  const shaders: SkShader[] = [];
+  const imageFilters: SkImageFilter[] = [];
+  const pathEffects: SkPathEffect[] = [];
+  const paintDeclarations: SkPaint[] = [];
+
+  let nextPaintIndex = 1;
+
+  // Initialize first paint
+  paintPool[0] = Skia.Paint();
+  paints.push(paintPool[0]);
+
+  // Methods (formerly class methods)
+  const savePaint = () => {
+    // Get next available paint from pool or create new one if needed
+    if (nextPaintIndex >= paintPool.length) {
+      paintPool.push(Skia.Paint());
+    }
+
+    const nextPaint = paintPool[nextPaintIndex];
+    nextPaint.assign(getCurrentPaint()); // Reuse allocation by copying properties
+    paints.push(nextPaint);
+    nextPaintIndex++;
+  };
+
+  const saveBackdropFilter = () => {
+    let imageFilter: SkImageFilter | null = null;
+    const imgf = imageFilters.pop();
+    if (imgf) {
+      imageFilter = imgf;
+    } else {
+      const cf = colorFilters.pop();
+      if (cf) {
+        imageFilter = Skia.ImageFilter.MakeColorFilter(cf, null);
+      }
+    }
+    canvas.saveLayer(undefined, null, imageFilter);
+    canvas.restore();
+  };
+
+  // Equivalent to the `get paint()` getter in the original class
+  const getCurrentPaint = () => {
+    return paints[paints.length - 1];
+  };
+
+  const restorePaint = () => {
+    return paints.pop();
+  };
+
+  const materializePaint = () => {
+    // Color Filters
+    if (colorFilters.length > 0) {
+      getCurrentPaint().setColorFilter(
+        colorFilters.reduceRight((inner, outer) =>
+          inner ? Skia.ColorFilter.MakeCompose(outer, inner) : outer
+        )
+      );
+    }
+    // Shaders
+    if (shaders.length > 0) {
+      getCurrentPaint().setShader(shaders[shaders.length - 1]);
+    }
+    // Image Filters
+    if (imageFilters.length > 0) {
+      getCurrentPaint().setImageFilter(
+        imageFilters.reduceRight((inner, outer) =>
+          inner ? Skia.ImageFilter.MakeCompose(outer, inner) : outer
+        )
+      );
+    }
+    // Path Effects
+    if (pathEffects.length > 0) {
+      getCurrentPaint().setPathEffect(
+        pathEffects.reduceRight((inner, outer) =>
+          inner ? Skia.PathEffect.MakeCompose(outer, inner) : outer
+        )
+      );
+    }
+
+    // Clear arrays
+    colorFilters.length = 0;
+    shaders.length = 0;
+    imageFilters.length = 0;
+    pathEffects.length = 0;
+  };
+
+  // Return an object containing the Skia reference, the canvas, and the methods
+  return {
+    // Public fields
+    Skia,
+    canvas,
+    paints,
+    colorFilters,
+    shaders,
+    imageFilters,
+    pathEffects,
+    paintDeclarations,
+    paintPool,
+
+    // Public methods
+    savePaint,
+    saveBackdropFilter,
+    get paint() {
+      return paints[paints.length - 1];
+    }, // the "getter" for the current paint
+    restorePaint,
+    materializePaint,
+  };
+};
+
+export type DrawingContext = ReturnType<typeof createDrawingContext>;