@shopify/react-native-skia 1.8.0 → 1.8.2

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 });
+  }
+}

package/src/sksg/Recorder/Recording.ts

@@ -0,0 +1,13 @@
+import type { SkPaint } from "../../skia/types";
+
+import type { Command } from "./Core";
+
+export interface Recording {
+  commands: Command[];
+  paintPool: SkPaint[];
+}
+
+export const createRecording = (commands: Command[]): Recording => ({
+  commands,
+  paintPool: [],
+});