@shopify/react-native-skia 2.3.14 → 2.4.1

package/lib/typescript/src/sksg/Recorder/Recorder.d.ts

@@ -1,6 +1,6 @@
 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, SkottieProps } 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, SkottieProps, DrawingNodeProps } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer";
 import type { SkPaint, BaseRecorder } from "../../skia/types";
 import type { Command } from "./Core";
@@ -19,7 +19,7 @@ export declare class Recorder implements BaseRecorder {
     getRecording(): Recording & AnimationValues;
     private processProps;
     private add;
-    saveGroup(): void;
+    saveGroup(props?: AnimatedProps<Pick<DrawingNodeProps, "zIndex">>): void;
     restoreGroup(): void;
     savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void;
     restorePaint(): void;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.3.14",
+  "version": "2.4.1",
   "skia": {
     "version": "m142",
     "checksums": {

package/src/dom/types/Common.ts

@@ -89,4 +89,6 @@ export interface PaintProps extends ChildrenProps {
   dither?: boolean;
 }
 
-export interface GroupProps extends PaintProps, CTMProps {}
+export interface GroupProps extends PaintProps, CTMProps {
+  zIndex?: number;
+}

package/src/skia/types/Recorder.ts

@@ -27,13 +27,14 @@ import type {
   TextPathProps,
   VerticesProps,
   SkottieProps,
+  DrawingNodeProps,
 } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer/processors/Animations/Animations";
 
 import type { SkPicture } from "./Picture";
 
 export interface BaseRecorder {
-  saveGroup(): void;
+  saveGroup(props?: AnimatedProps<Pick<DrawingNodeProps, "zIndex">>): void;
   restoreGroup(): void;
   savePaint(props: AnimatedProps<PaintProps>, standalone: boolean): void;
   restorePaint(): void;

package/src/sksg/Recorder/Core.ts

@@ -24,48 +24,6 @@ import type {
   SkottieProps,
 } from "../../dom/types";
 
-// export enum CommandType {
-//   // Context
-//   Group = "Group",
-//   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
   Group,
@@ -135,7 +93,8 @@ export const isCommand = <T extends CommandType>(
   return command.type === type;
 };
 
-interface GroupCommand extends Command<CommandType.Group> {
+export interface GroupCommand extends Command<CommandType.Group> {
+  props?: Pick<DrawingNodeProps, "zIndex">;
   children: Command[];
 }
 

package/src/sksg/Recorder/Debug.ts

@@ -0,0 +1,87 @@
+import { CommandType, isGroup } from "./Core";
+import type { Command } from "./Core";
+
+const CommandTypeNames: Record<CommandType, string> = {
+  [CommandType.Group]: "Group",
+  [CommandType.SavePaint]: "SavePaint",
+  [CommandType.RestorePaint]: "RestorePaint",
+  [CommandType.SaveCTM]: "SaveCTM",
+  [CommandType.RestoreCTM]: "RestoreCTM",
+  [CommandType.PushColorFilter]: "PushColorFilter",
+  [CommandType.PushBlurMaskFilter]: "PushBlurMaskFilter",
+  [CommandType.PushImageFilter]: "PushImageFilter",
+  [CommandType.PushPathEffect]: "PushPathEffect",
+  [CommandType.PushShader]: "PushShader",
+  [CommandType.ComposeColorFilter]: "ComposeColorFilter",
+  [CommandType.ComposeImageFilter]: "ComposeImageFilter",
+  [CommandType.ComposePathEffect]: "ComposePathEffect",
+  [CommandType.MaterializePaint]: "MaterializePaint",
+  [CommandType.SaveBackdropFilter]: "SaveBackdropFilter",
+  [CommandType.SaveLayer]: "SaveLayer",
+  [CommandType.RestorePaintDeclaration]: "RestorePaintDeclaration",
+  [CommandType.DrawBox]: "DrawBox",
+  [CommandType.DrawImage]: "DrawImage",
+  [CommandType.DrawCircle]: "DrawCircle",
+  [CommandType.DrawPaint]: "DrawPaint",
+  [CommandType.DrawPoints]: "DrawPoints",
+  [CommandType.DrawPath]: "DrawPath",
+  [CommandType.DrawRect]: "DrawRect",
+  [CommandType.DrawRRect]: "DrawRRect",
+  [CommandType.DrawOval]: "DrawOval",
+  [CommandType.DrawLine]: "DrawLine",
+  [CommandType.DrawPatch]: "DrawPatch",
+  [CommandType.DrawVertices]: "DrawVertices",
+  [CommandType.DrawDiffRect]: "DrawDiffRect",
+  [CommandType.DrawText]: "DrawText",
+  [CommandType.DrawTextPath]: "DrawTextPath",
+  [CommandType.DrawTextBlob]: "DrawTextBlob",
+  [CommandType.DrawGlyphs]: "DrawGlyphs",
+  [CommandType.DrawPicture]: "DrawPicture",
+  [CommandType.DrawImageSVG]: "DrawImageSVG",
+  [CommandType.DrawParagraph]: "DrawParagraph",
+  [CommandType.DrawAtlas]: "DrawAtlas",
+  [CommandType.DrawSkottie]: "DrawSkottie",
+};
+
+const serializeProps = (props: unknown): string => {
+  try {
+    return JSON.stringify(props, (key, value) => {
+      if (key === "children") {
+        return undefined;
+      }
+      if (typeof value === "bigint") {
+        return value.toString();
+      }
+      return value;
+    });
+  } catch (e) {
+    return `"Error serializing props: ${e}"`;
+  }
+};
+
+export const debugTree = (commands: Command[], indent = 0): string => {
+  let result = "[\n";
+  const prefix = " ".repeat(indent + 2);
+
+  commands.forEach((cmd, index) => {
+    const type = CommandTypeNames[cmd.type] || "Unknown";
+    result += `${prefix}{ "type": "${type}"`;
+
+    if ("props" in cmd) {
+      result += `, "props": ${serializeProps(cmd.props)}`;
+    }
+
+    if (isGroup(cmd)) {
+      result += `, "children": ${debugTree(cmd.children, indent + 2)}`;
+    }
+
+    result += " }";
+    if (index < commands.length - 1) {
+      result += ",";
+    }
+    result += "\n";
+  });
+
+  result += " ".repeat(indent) + "]";
+  return result;
+};

package/src/sksg/Recorder/Player.ts

@@ -1,3 +1,5 @@
+import type { DrawingNodeProps } from "../../dom/types";
+
 import {
   drawCircle,
   drawImage,
@@ -47,13 +49,66 @@ import {
   isGroup,
   materializeCommand,
 } from "./Core";
-import type { Command } from "./Core";
+import type { Command, GroupCommand } from "./Core";
 import type { DrawingContext } from "./DrawingContext";
 
-function play(ctx: DrawingContext, _command: Command) {
+type PendingGroup = {
+  command: GroupCommand;
+  zIndex: number;
+  order: number;
+};
+
+const getZIndex = (command: GroupCommand) => {
+  "worklet";
+  const materialized = materializeCommand(command);
+  const { zIndex } = (materialized.props ?? {}) as DrawingNodeProps;
+  if (typeof zIndex !== "number" || Number.isNaN(zIndex)) {
+    return 0;
+  }
+  return zIndex;
+};
+
+const flushPendingGroups = (
+  ctx: DrawingContext,
+  pendingGroups: PendingGroup[]
+) => {
   "worklet";
+  if (pendingGroups.length === 0) {
+    return;
+  }
+  pendingGroups
+    .sort((a, b) =>
+      a.zIndex === b.zIndex ? a.order - b.order : a.zIndex - b.zIndex
+    )
+    .forEach(({ command }) => {
+      play(ctx, command);
+    });
+  pendingGroups.length = 0;
+};
+
+const play = (ctx: DrawingContext, _command: Command) => {
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const playGroup = (ctx: DrawingContext, group: GroupCommand) => {
+    "worklet";
+    const pending: PendingGroup[] = [];
+    group.children.forEach((child) => {
+      if (isGroup(child)) {
+        pending.push({
+          command: child,
+          zIndex: getZIndex(child),
+          order: pending.length,
+        });
+        return;
+      }
+      flushPendingGroups(ctx, pending);
+      play(ctx, child);
+    });
+    flushPendingGroups(ctx, pending);
+  };
+
+  ("worklet");
   if (isGroup(_command)) {
-    _command.children.forEach((child) => play(ctx, child));
+    playGroup(ctx, _command);
     return;
   }
   const command = materializeCommand(_command);
@@ -166,11 +221,11 @@ function play(ctx: DrawingContext, _command: Command) {
       ctx.paints.pop();
     });
   }
-}
-
-export const replay = (ctx: DrawingContext, commands: Command[]) => {
+};
+export function replay(ctx: DrawingContext, commands: Command[]) {
   "worklet";
+  //console.log(debugTree(commands));
   commands.forEach((command) => {
     play(ctx, command);
   });
-};
+}

package/src/sksg/Recorder/ReanimatedRecorder.ts

@@ -28,6 +28,7 @@ import type {
   ParagraphProps,
   AtlasProps,
   SkottieProps,
+  DrawingNodeProps,
 } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer";
 import { isSharedValue } from "../utils";
@@ -71,8 +72,13 @@ export class ReanimatedRecorder implements BaseRecorder {
     return Array.from(this.values);
   }
 
-  saveGroup(): void {
-    this.recorder.saveGroup();
+  saveGroup(props?: AnimatedProps<Pick<DrawingNodeProps, "zIndex">>): void {
+    if (props) {
+      this.processAnimationValues(props);
+      this.recorder.saveGroup(props);
+    } else {
+      this.recorder.saveGroup();
+    }
   }
 
   restoreGroup(): void {

package/src/sksg/Recorder/Recorder.ts

@@ -27,6 +27,7 @@ import type {
   BoxProps,
   BoxShadowProps,
   SkottieProps,
+  DrawingNodeProps,
 } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer";
 import { isSharedValue } from "../utils";
@@ -93,9 +94,13 @@ export class Recorder implements BaseRecorder {
     this.cursors[this.cursors.length - 1].push(command);
   }
 
-  saveGroup() {
+  saveGroup(props?: AnimatedProps<Pick<DrawingNodeProps, "zIndex">>) {
     const children: Command[] = [];
-    this.add({ type: CommandType.Group, children });
+    const group: Command = { type: CommandType.Group, children };
+    if (props) {
+      group.props = props;
+    }
+    this.add(group);
     this.cursors.push(children);
   }
 

package/src/sksg/Recorder/Visitor.ts

@@ -8,6 +8,7 @@ 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 { AnimatedProps } from "../../renderer";
 
 export const processPaint = ({
   opacity,
@@ -200,11 +201,24 @@ const pushPaints = (recorder: BaseRecorder, paints: Node<any>[]) => {
   });
 };
 
-const visitNode = (recorder: BaseRecorder, node: Node<any>) => {
-  if (node.type === NodeType.Group) {
-    recorder.saveGroup();
+type StackingContextProps = Pick<DrawingNodeProps, "zIndex">;
+
+const getStackingContextProps = (
+  props: AnimatedProps<DrawingNodeProps>
+): AnimatedProps<StackingContextProps> | undefined => {
+  const { zIndex } = props;
+  if (zIndex === undefined) {
+    return undefined;
   }
+  return { zIndex };
+};
+
+const visitNode = (recorder: BaseRecorder, node: Node<any>) => {
   const { props } = node;
+  const stackingContextProps = getStackingContextProps(
+    props as AnimatedProps<DrawingNodeProps>
+  );
+  recorder.saveGroup(stackingContextProps);
   const {
     colorFilters,
     maskFilters,
@@ -326,9 +340,7 @@ const visitNode = (recorder: BaseRecorder, node: Node<any>) => {
   if (shouldRestore) {
     recorder.restoreCTM();
   }
-  if (node.type === NodeType.Group) {
-    recorder.restoreGroup();
-  }
+  recorder.restoreGroup();
 };
 
 export const visit = (recorder: BaseRecorder, root: Node[]) => {

package/src/views/SkiaPictureView.tsx

@@ -83,7 +83,13 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   }
 
   render() {
-    const { mode, debug = false, opaque = false, coldStart = false, ...viewProps } = this.props;
+    const {
+      mode,
+      debug = false,
+      opaque = false,
+      coldStart = false,
+      ...viewProps
+    } = this.props;
     return (
       <NativeSkiaPictureView
         collapsable={false}