@shopify/react-native-skia 1.10.2 → 1.11.1

package/src/sksg/Recorder/ReanimatedRecorder.ts

@@ -0,0 +1,271 @@
+import type { SharedValue } from "react-native-reanimated";
+
+import type { BaseRecorder, JsiRecorder, Skia } from "../../skia/types";
+import type {
+  PaintProps,
+  NodeType,
+  BlurMaskFilterProps,
+  CTMProps,
+  BoxProps,
+  BoxShadowProps,
+  ImageProps,
+  CircleProps,
+  PointsProps,
+  PathProps,
+  RectProps,
+  RoundedRectProps,
+  OvalProps,
+  LineProps,
+  PatchProps,
+  VerticesProps,
+  DiffRectProps,
+  TextProps,
+  TextPathProps,
+  TextBlobProps,
+  GlyphsProps,
+  PictureProps,
+  ImageSVGProps,
+  ParagraphProps,
+  AtlasProps,
+} from "../../dom/types";
+import type { AnimatedProps } from "../../renderer";
+import { isSharedValue } from "../utils";
+
+export class ReanimatedRecorder implements BaseRecorder {
+  private values = new Set<SharedValue<unknown>>();
+  private recorder: JsiRecorder;
+
+  constructor(Skia: Skia) {
+    this.recorder = Skia.Recorder();
+  }
+
+  private processAnimationValues(props?: Record<string, unknown>) {
+    if (!props) {
+      return;
+    }
+    Object.values(props).forEach((value) => {
+      if (isSharedValue(value) && !this.values.has(value)) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        value.name = `variable${this.values.size}`;
+        this.values.add(value as SharedValue<unknown>);
+      }
+    });
+  }
+
+  getRecorder() {
+    return this.recorder;
+  }
+
+  getSharedValues() {
+    return Array.from(this.values);
+  }
+
+  saveGroup(): void {
+    this.recorder.saveGroup();
+  }
+
+  restoreGroup(): void {
+    this.recorder.restoreGroup();
+  }
+
+  savePaint(props: AnimatedProps<PaintProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.savePaint(props);
+  }
+
+  restorePaint(): void {
+    this.recorder.restorePaint();
+  }
+
+  restorePaintDeclaration(): void {
+    this.recorder.restorePaintDeclaration();
+  }
+
+  materializePaint(): void {
+    this.recorder.materializePaint();
+  }
+
+  pushPathEffect(
+    pathEffectType: NodeType,
+    props: AnimatedProps<unknown>
+  ): void {
+    this.processAnimationValues(props);
+    this.recorder.pushPathEffect(pathEffectType, props);
+  }
+
+  pushImageFilter(
+    imageFilterType: NodeType,
+    props: AnimatedProps<unknown>
+  ): void {
+    this.processAnimationValues(props);
+    this.recorder.pushImageFilter(imageFilterType, props);
+  }
+
+  pushColorFilter(
+    colorFilterType: NodeType,
+    props: AnimatedProps<unknown>
+  ): void {
+    this.processAnimationValues(props);
+    this.recorder.pushColorFilter(colorFilterType, props);
+  }
+
+  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void {
+    this.processAnimationValues(props);
+    this.recorder.pushShader(shaderType, props);
+  }
+
+  pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.pushBlurMaskFilter(props);
+  }
+
+  composePathEffect(): void {
+    this.recorder.composePathEffect();
+  }
+
+  composeColorFilter(): void {
+    this.recorder.composeColorFilter();
+  }
+
+  composeImageFilter(): void {
+    this.recorder.composeImageFilter();
+  }
+
+  saveCTM(props: AnimatedProps<CTMProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.saveCTM(props);
+  }
+
+  restoreCTM(): void {
+    this.recorder.restoreCTM();
+  }
+
+  drawPaint(): void {
+    this.recorder.drawPaint();
+  }
+
+  saveLayer(): void {
+    this.recorder.saveLayer();
+  }
+
+  saveBackdropFilter(): void {
+    this.recorder.saveBackdropFilter();
+  }
+
+  drawBox(
+    boxProps: AnimatedProps<BoxProps>,
+    shadows: {
+      props: BoxShadowProps;
+    }[]
+  ): void {
+    this.processAnimationValues(boxProps);
+    shadows.forEach((shadow) => {
+      this.processAnimationValues(
+        shadow.props as AnimatedProps<BoxShadowProps>
+      );
+    });
+    this.recorder.drawBox(
+      boxProps,
+      // TODO: Fix this type BaseRecorder.drawBox()
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-expect-error
+      shadows.map((s) => s.props)
+    );
+  }
+
+  drawImage(props: AnimatedProps<ImageProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawImage(props);
+  }
+
+  drawCircle(props: AnimatedProps<CircleProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawCircle(props);
+  }
+
+  drawPoints(props: AnimatedProps<PointsProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawPoints(props);
+  }
+
+  drawPath(props: AnimatedProps<PathProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawPath(props);
+  }
+
+  drawRect(props: AnimatedProps<RectProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawRect(props);
+  }
+
+  drawRRect(props: AnimatedProps<RoundedRectProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawRRect(props);
+  }
+
+  drawOval(props: AnimatedProps<OvalProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawOval(props);
+  }
+
+  drawLine(props: AnimatedProps<LineProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawLine(props);
+  }
+
+  drawPatch(props: AnimatedProps<PatchProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawPatch(props);
+  }
+
+  drawVertices(props: AnimatedProps<VerticesProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawVertices(props);
+  }
+
+  drawDiffRect(props: AnimatedProps<DiffRectProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawDiffRect(props);
+  }
+
+  drawText(props: AnimatedProps<TextProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawText(props);
+  }
+
+  drawTextPath(props: AnimatedProps<TextPathProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawTextPath(props);
+  }
+
+  drawTextBlob(props: AnimatedProps<TextBlobProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawTextBlob(props);
+  }
+
+  drawGlyphs(props: AnimatedProps<GlyphsProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawGlyphs(props);
+  }
+
+  drawPicture(props: AnimatedProps<PictureProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawPicture(props);
+  }
+
+  drawImageSVG(props: AnimatedProps<ImageSVGProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawImageSVG(props);
+  }
+
+  drawParagraph(props: AnimatedProps<ParagraphProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawParagraph(props);
+  }
+
+  drawAtlas(props: AnimatedProps<AtlasProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawAtlas(props);
+  }
+}

package/src/sksg/Recorder/Recorder.ts

@@ -30,7 +30,7 @@ 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 type { SkPaint, BaseRecorder } from "../../skia/types";
 
 import { CommandType } from "./Core";
 import type { Command } from "./Core";
@@ -44,7 +44,7 @@ interface AnimationValues {
   animationValues: Set<SharedValue<unknown>>;
 }
 
-export class Recorder {
+export class Recorder implements BaseRecorder {
   commands: Command[] = [];
   cursors: Command[][] = [];
   animationValues: Set<SharedValue<unknown>> = new Set();

package/src/sksg/Recorder/Visitor.ts

@@ -5,11 +5,10 @@ import type {
   BoxShadowProps,
 } from "../../dom/types";
 import { NodeType } from "../../dom/types";
+import type { BaseRecorder } from "../../skia/types/Recorder";
 import type { Node } from "../Node";
 import { isImageFilter, isShader, sortNodeChildren } from "../Node";
 
-import type { Recorder } from "./Recorder";
-
 export const processPaint = ({
   opacity,
   color,
@@ -117,7 +116,10 @@ const processCTM = ({
   return null;
 };
 
-const pushColorFilters = (recorder: Recorder, colorFilters: Node<any>[]) => {
+const pushColorFilters = (
+  recorder: BaseRecorder,
+  colorFilters: Node<any>[]
+) => {
   colorFilters.forEach((colorFilter) => {
     if (colorFilter.children.length > 0) {
       pushColorFilters(recorder, colorFilter.children);
@@ -132,7 +134,7 @@ const pushColorFilters = (recorder: Recorder, colorFilters: Node<any>[]) => {
   });
 };
 
-const pushPathEffects = (recorder: Recorder, pathEffects: Node<any>[]) => {
+const pushPathEffects = (recorder: BaseRecorder, pathEffects: Node<any>[]) => {
   pathEffects.forEach((pathEffect) => {
     if (pathEffect.children.length > 0) {
       pushPathEffects(recorder, pathEffect.children);
@@ -147,7 +149,10 @@ const pushPathEffects = (recorder: Recorder, pathEffects: Node<any>[]) => {
   });
 };
 
-const pushImageFilters = (recorder: Recorder, imageFilters: Node<any>[]) => {
+const pushImageFilters = (
+  recorder: BaseRecorder,
+  imageFilters: Node<any>[]
+) => {
   imageFilters.forEach((imageFilter) => {
     if (imageFilter.children.length > 0) {
       pushImageFilters(recorder, imageFilter.children);
@@ -166,7 +171,7 @@ const pushImageFilters = (recorder: Recorder, imageFilters: Node<any>[]) => {
   });
 };
 
-const pushShaders = (recorder: Recorder, shaders: Node<any>[]) => {
+const pushShaders = (recorder: BaseRecorder, shaders: Node<any>[]) => {
   shaders.forEach((shader) => {
     if (shader.children.length > 0) {
       pushShaders(recorder, shader.children);
@@ -175,13 +180,13 @@ const pushShaders = (recorder: Recorder, shaders: Node<any>[]) => {
   });
 };
 
-const pushMaskFilters = (recorder: Recorder, maskFilters: Node<any>[]) => {
+const pushMaskFilters = (recorder: BaseRecorder, maskFilters: Node<any>[]) => {
   if (maskFilters.length > 0) {
     recorder.pushBlurMaskFilter(maskFilters[maskFilters.length - 1].props);
   }
 };
 
-const pushPaints = (recorder: Recorder, paints: Node<any>[]) => {
+const pushPaints = (recorder: BaseRecorder, paints: Node<any>[]) => {
   paints.forEach((paint) => {
     recorder.savePaint(paint.props);
     const { colorFilters, maskFilters, shaders, imageFilters, pathEffects } =
@@ -195,7 +200,7 @@ const pushPaints = (recorder: Recorder, paints: Node<any>[]) => {
   });
 };
 
-const visitNode = (recorder: Recorder, node: Node<any>) => {
+const visitNode = (recorder: BaseRecorder, node: Node<any>) => {
   if (node.type === NodeType.Group) {
     recorder.saveGroup();
   }
@@ -252,10 +257,10 @@ const visitNode = (recorder: Recorder, node: Node<any>) => {
       recorder.drawPaint();
       break;
     case NodeType.Image:
-      recorder.drawImage(node.props);
+      recorder.drawImage(props);
       break;
     case NodeType.Circle:
-      recorder.drawCircle(node.props);
+      recorder.drawCircle(props);
       break;
     case NodeType.Points:
       recorder.drawPoints(props);
@@ -323,7 +328,7 @@ const visitNode = (recorder: Recorder, node: Node<any>) => {
   }
 };
 
-export const visit = (recorder: Recorder, root: Node[]) => {
+export const visit = (recorder: BaseRecorder, root: Node[]) => {
   root.forEach((node) => {
     visitNode(recorder, node);
   });