@shopify/react-native-skia 1.7.7 → 1.8.1

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>;

package/src/sksg/Recorder/Player.ts

@@ -0,0 +1,160 @@
+import {
+  drawCircle,
+  drawImage,
+  drawOval,
+  drawPath,
+  drawPoints,
+  drawRect,
+  drawRRect,
+  drawLine,
+  drawAtlas,
+  drawParagraph,
+  drawImageSVG,
+  drawPicture,
+  drawGlyphs,
+  drawTextBlob,
+  drawTextPath,
+  drawText,
+  drawDiffRect,
+  drawVertices,
+  drawPatch,
+} from "./commands/Drawing";
+import { drawBox, isBoxCommand } from "./commands/Box";
+import {
+  composeColorFilters,
+  isPushColorFilter,
+  pushColorFilter,
+} from "./commands/ColorFilters";
+import { saveCTM } from "./commands/CTM";
+import {
+  setBlurMaskFilter,
+  isPushImageFilter,
+  pushImageFilter,
+  composeImageFilters,
+} from "./commands/ImageFilters";
+import { setPaintProperties } from "./commands/Paint";
+import {
+  composePathEffects,
+  isPushPathEffect,
+  pushPathEffect,
+} from "./commands/PathEffects";
+import { isPushShader, pushShader } from "./commands/Shaders";
+import {
+  CommandType,
+  isCommand,
+  isDrawCommand,
+  materializeProps,
+  type Command,
+} from "./Core";
+import type { DrawingContext } from "./DrawingContext";
+
+const play = (ctx: DrawingContext, command: Command) => {
+  "worklet";
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  materializeProps(command as any);
+  if (isCommand(command, CommandType.SaveBackdropFilter)) {
+    ctx.saveBackdropFilter();
+  } else if (isCommand(command, CommandType.SaveLayer)) {
+    ctx.materializePaint();
+    const paint = ctx.paintDeclarations.pop();
+    ctx.canvas.saveLayer(paint);
+  } else if (isDrawCommand(command, CommandType.SavePaint)) {
+    if (command.props.paint) {
+      ctx.paints.push(command.props.paint);
+    } else {
+      ctx.savePaint();
+      setPaintProperties(ctx.Skia, ctx.paint, command.props);
+    }
+  } else if (isCommand(command, CommandType.RestorePaint)) {
+    ctx.restorePaint();
+  } else if (isCommand(command, CommandType.ComposeColorFilter)) {
+    composeColorFilters(ctx);
+  } else if (isCommand(command, CommandType.RestorePaintDeclaration)) {
+    ctx.materializePaint();
+    const paint = ctx.restorePaint();
+    if (!paint) {
+      throw new Error("No paint declaration to push");
+    }
+    ctx.paintDeclarations.push(paint);
+  } else if (isCommand(command, CommandType.MaterializePaint)) {
+    ctx.materializePaint();
+  } else if (isPushColorFilter(command)) {
+    pushColorFilter(ctx, command);
+  } else if (isPushShader(command)) {
+    pushShader(ctx, command);
+  } else if (isPushImageFilter(command)) {
+    pushImageFilter(ctx, command);
+  } else if (isPushPathEffect(command)) {
+    pushPathEffect(ctx, command);
+  } else if (isCommand(command, CommandType.ComposePathEffect)) {
+    composePathEffects(ctx);
+  } else if (isCommand(command, CommandType.ComposeImageFilter)) {
+    composeImageFilters(ctx);
+  } else if (isDrawCommand(command, CommandType.PushBlurMaskFilter)) {
+    setBlurMaskFilter(ctx, command.props);
+  } else if (isDrawCommand(command, CommandType.SaveCTM)) {
+    saveCTM(ctx, command.props);
+  } else if (isCommand(command, CommandType.RestoreCTM)) {
+    ctx.canvas.restore();
+  } else {
+    const paints = [ctx.paint, ...ctx.paintDeclarations];
+    ctx.paintDeclarations = [];
+    paints.forEach((p) => {
+      ctx.paints.push(p);
+      if (isBoxCommand(command)) {
+        drawBox(ctx, command);
+      } else if (isCommand(command, CommandType.DrawPaint)) {
+        ctx.canvas.drawPaint(ctx.paint);
+      } else if (isDrawCommand(command, CommandType.DrawImage)) {
+        drawImage(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawCircle)) {
+        drawCircle(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawPoints)) {
+        drawPoints(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawPath)) {
+        drawPath(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawRect)) {
+        drawRect(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawRRect)) {
+        drawRRect(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawOval)) {
+        drawOval(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawLine)) {
+        drawLine(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawPatch)) {
+        drawPatch(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawVertices)) {
+        drawVertices(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawDiffRect)) {
+        drawDiffRect(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawText)) {
+        drawText(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawTextPath)) {
+        drawTextPath(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawTextBlob)) {
+        drawTextBlob(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawGlyphs)) {
+        drawGlyphs(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawPicture)) {
+        drawPicture(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawImageSVG)) {
+        drawImageSVG(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawParagraph)) {
+        drawParagraph(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawAtlas)) {
+        drawAtlas(ctx, command.props);
+      } else {
+        console.warn(`Unknown command: ${command.type}`);
+      }
+      ctx.paints.pop();
+    });
+  }
+};
+
+export const replay = (ctx: DrawingContext, commands: Command[]) => {
+  "worklet";
+  commands.forEach((command) => {
+    play(ctx, command);
+  });
+};

package/src/sksg/Recorder/Recorder.ts

@@ -0,0 +1,259 @@
+import type { SharedValue } from "react-native-reanimated";
+
+import { NodeType } from "../../dom/types";
+import type {
+  BlurMaskFilterProps,
+  CircleProps,
+  CTMProps,
+  ImageProps,
+  PaintProps,
+  PointsProps,
+  PathProps,
+  RectProps,
+  RoundedRectProps,
+  OvalProps,
+  LineProps,
+  PatchProps,
+  VerticesProps,
+  DiffRectProps,
+  TextProps,
+  TextPathProps,
+  TextBlobProps,
+  GlyphsProps,
+  PictureProps,
+  ImageSVGProps,
+  ParagraphProps,
+  AtlasProps,
+  BoxProps,
+  BoxShadowProps,
+} from "../../dom/types";
+import type { AnimatedProps } from "../../renderer";
+import { isSharedValue } from "../utils";
+import { isColorFilter, isImageFilter, isPathEffect, isShader } from "../Node";
+
+import { CommandType } from "./Core";
+import type { Command } from "./Core";
+
+export class Recorder {
+  commands: Command[] = [];
+
+  private processProps(props: Record<string, unknown>) {
+    const animatedProps: Record<string, SharedValue<unknown>> = {};
+    let hasAnimatedProps = false;
+
+    for (const key in props) {
+      const prop = props[key];
+      if (isSharedValue(prop)) {
+        props[key] = prop.value;
+        animatedProps[key] = prop;
+        hasAnimatedProps = true;
+      }
+    }
+
+    return {
+      props,
+      animatedProps: hasAnimatedProps ? animatedProps : undefined,
+    };
+  }
+
+  private add(command: Command) {
+    if (command.props) {
+      const { animatedProps } = this.processProps(
+        command.props as Record<string, unknown>
+      );
+      if (animatedProps) {
+        command.animatedProps = animatedProps;
+      }
+    }
+    this.commands.push(command);
+  }
+
+  savePaint(props: AnimatedProps<PaintProps>) {
+    this.add({ type: CommandType.SavePaint, props });
+  }
+
+  restorePaint() {
+    this.add({ type: CommandType.RestorePaint });
+  }
+
+  restorePaintDeclaration() {
+    this.add({ type: CommandType.RestorePaintDeclaration });
+  }
+
+  materializePaint() {
+    this.add({ type: CommandType.MaterializePaint });
+  }
+
+  pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>) {
+    if (!isPathEffect(pathEffectType)) {
+      throw new Error("Invalid color filter type: " + pathEffectType);
+    }
+    this.add({
+      type: CommandType.PushPathEffect,
+      pathEffectType,
+      props,
+    });
+  }
+
+  pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>) {
+    if (!isImageFilter(imageFilterType)) {
+      throw new Error("Invalid color filter type: " + imageFilterType);
+    }
+    this.add({
+      type: CommandType.PushImageFilter,
+      imageFilterType,
+      props,
+    });
+  }
+
+  pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>) {
+    if (!isColorFilter(colorFilterType)) {
+      throw new Error("Invalid color filter type: " + colorFilterType);
+    }
+    this.add({
+      type: CommandType.PushColorFilter,
+      colorFilterType,
+      props,
+    });
+  }
+
+  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>) {
+    if (!isShader(shaderType) && !(shaderType === NodeType.Blend)) {
+      throw new Error("Invalid color filter type: " + shaderType);
+    }
+    this.add({ type: CommandType.PushShader, shaderType, props });
+  }
+
+  pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>) {
+    this.add({ type: CommandType.PushBlurMaskFilter, props });
+  }
+
+  composePathEffect() {
+    this.add({ type: CommandType.ComposePathEffect });
+  }
+
+  composeColorFilter() {
+    this.add({ type: CommandType.ComposeColorFilter });
+  }
+
+  composeImageFilter() {
+    this.add({ type: CommandType.ComposeImageFilter });
+  }
+
+  saveCTM(props: AnimatedProps<CTMProps>) {
+    this.add({ type: CommandType.SaveCTM, props });
+  }
+
+  restoreCTM() {
+    this.add({ type: CommandType.RestoreCTM });
+  }
+
+  drawPaint() {
+    this.add({ type: CommandType.DrawPaint });
+  }
+
+  saveLayer() {
+    this.add({ type: CommandType.SaveLayer });
+  }
+
+  saveBackdropFilter() {
+    this.add({ type: CommandType.SaveBackdropFilter });
+  }
+
+  drawBox(
+    boxProps: AnimatedProps<BoxProps>,
+    shadows: {
+      props: BoxShadowProps;
+      animatedProps?: Record<string, SharedValue<unknown>>;
+    }[]
+  ) {
+    shadows.forEach((shadow) => {
+      if (shadow.props) {
+        if (shadow.props) {
+          const { animatedProps } = this.processProps(
+            shadow.props as unknown as Record<string, unknown>
+          );
+          if (animatedProps) {
+            shadow.animatedProps = animatedProps;
+          }
+        }
+      }
+    });
+    this.add({ type: CommandType.DrawBox, props: boxProps, shadows });
+  }
+
+  drawImage(props: AnimatedProps<ImageProps>) {
+    this.add({ type: CommandType.DrawImage, props });
+  }
+
+  drawCircle(props: AnimatedProps<CircleProps>) {
+    this.add({ type: CommandType.DrawCircle, props });
+  }
+  drawPoints(props: AnimatedProps<PointsProps>) {
+    this.add({ type: CommandType.DrawPoints, props });
+  }
+
+  drawPath(props: AnimatedProps<PathProps>) {
+    this.add({ type: CommandType.DrawPath, props });
+  }
+
+  drawRect(props: AnimatedProps<RectProps>) {
+    this.add({ type: CommandType.DrawRect, props });
+  }
+
+  drawRRect(props: AnimatedProps<RoundedRectProps>) {
+    this.add({ type: CommandType.DrawRRect, props });
+  }
+
+  drawOval(props: AnimatedProps<OvalProps>) {
+    this.add({ type: CommandType.DrawOval, props });
+  }
+
+  drawLine(props: AnimatedProps<LineProps>) {
+    this.add({ type: CommandType.DrawLine, props });
+  }
+
+  drawPatch(props: AnimatedProps<PatchProps>) {
+    this.add({ type: CommandType.DrawPatch, props });
+  }
+
+  drawVertices(props: AnimatedProps<VerticesProps>) {
+    this.add({ type: CommandType.DrawVertices, props });
+  }
+
+  drawDiffRect(props: AnimatedProps<DiffRectProps>) {
+    this.add({ type: CommandType.DrawDiffRect, props });
+  }
+
+  drawText(props: AnimatedProps<TextProps>) {
+    this.add({ type: CommandType.DrawText, props });
+  }
+
+  drawTextPath(props: AnimatedProps<TextPathProps>) {
+    this.add({ type: CommandType.DrawTextPath, props });
+  }
+
+  drawTextBlob(props: AnimatedProps<TextBlobProps>) {
+    this.add({ type: CommandType.DrawTextBlob, props });
+  }
+
+  drawGlyphs(props: AnimatedProps<GlyphsProps>) {
+    this.add({ type: CommandType.DrawGlyphs, props });
+  }
+
+  drawPicture(props: AnimatedProps<PictureProps>) {
+    this.add({ type: CommandType.DrawPicture, props });
+  }
+
+  drawImageSVG(props: AnimatedProps<ImageSVGProps>) {
+    this.add({ type: CommandType.DrawImageSVG, props });
+  }
+
+  drawParagraph(props: AnimatedProps<ParagraphProps>) {
+    this.add({ type: CommandType.DrawParagraph, props });
+  }
+
+  drawAtlas(props: AnimatedProps<AtlasProps>) {
+    this.add({ type: CommandType.DrawAtlas, props });
+  }
+}