chore(🐎): add support for nested display lists in the reconciller (#2882

)
Shopify · Jan 10, 2025 · 5c1f6dc · 5c1f6dc
1 parent 8b14242
commit 5c1f6dc
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 4 deletions.
diff --git a/packages/skia/src/sksg/Container.ts b/packages/skia/src/sksg/Container.ts
@@ -17,7 +17,6 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   // const start = performance.now();
 
   const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
-  //console.log(recording.commands);
   replay(ctx, recording.commands);
   const picture = rec.finishRecordingAsPicture();
   //const end = performance.now();
@@ -42,7 +41,7 @@ export abstract class Container {
       this.recording.paintPool,
       canvas
     );
-    //console.log(this._recording);
+    //console.log(this.recording.commands);
     replay(ctx, this.recording.commands);
   }
 

diff --git a/packages/skia/src/sksg/Recorder/Core.ts b/packages/skia/src/sksg/Recorder/Core.ts
@@ -68,6 +68,7 @@ import type {
 // }
 export enum CommandType {
   // Context
+  Group,
   SavePaint,
   RestorePaint,
   SaveCTM,
@@ -133,6 +134,15 @@ export const isCommand = <T extends CommandType>(
   return command.type === type;
 };
 
+interface GroupCommand extends Command<CommandType.Group> {
+  children: Command[];
+}
+
+export const isGroup = (command: Command): command is GroupCommand => {
+  "worklet";
+  return command.type === CommandType.Group;
+};
+
 interface Props {
   [CommandType.DrawImage]: ImageProps;
   [CommandType.DrawCircle]: CircleProps;

diff --git a/packages/skia/src/sksg/Recorder/Player.ts b/packages/skia/src/sksg/Recorder/Player.ts
@@ -43,14 +43,18 @@ import {
   CommandType,
   isCommand,
   isDrawCommand,
+  isGroup,
   materializeProps,
   type Command,
 } from "./Core";
 import type { DrawingContext } from "./DrawingContext";
 
 const play = (ctx: DrawingContext, command: Command) => {
   "worklet";
-
+  if (isGroup(command)) {
+    command.children.forEach((child) => play(ctx, child));
+    return;
+  }
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   materializeProps(command as any);
   if (isCommand(command, CommandType.SaveBackdropFilter)) {

diff --git a/packages/skia/src/sksg/Recorder/Recorder.ts b/packages/skia/src/sksg/Recorder/Recorder.ts
@@ -46,8 +46,13 @@ interface AnimationValues {
 
 export class Recorder {
   commands: Command[] = [];
+  cursors: Command[][] = [];
   animationValues: Set<SharedValue<unknown>> = new Set();
 
+  constructor() {
+    this.cursors.push(this.commands);
+  }
+
   getRecording(): Recording & AnimationValues {
     return {
       commands: this.commands,
@@ -85,7 +90,17 @@ export class Recorder {
         command.animatedProps = animatedProps;
       }
     }
-    this.commands.push(command);
+    this.cursors[this.cursors.length - 1].push(command);
+  }
+
+  saveGroup() {
+    const children: Command[] = [];
+    this.add({ type: CommandType.Group, children });
+    this.cursors.push(children);
+  }
+
+  restoreGroup() {
+    this.cursors.pop();
   }
 
   savePaint(props: AnimatedProps<PaintProps>) {

diff --git a/packages/skia/src/sksg/Recorder/Visitor.ts b/packages/skia/src/sksg/Recorder/Visitor.ts
@@ -196,6 +196,9 @@ const pushPaints = (recorder: Recorder, paints: Node<any>[]) => {
 };
 
 const visitNode = (recorder: Recorder, node: Node<any>) => {
+  if (node.type === NodeType.Group) {
+    recorder.saveGroup();
+  }
   const { props } = node;
   const {
     colorFilters,
@@ -315,6 +318,9 @@ const visitNode = (recorder: Recorder, node: Node<any>) => {
   if (shouldRestore) {
     recorder.restoreCTM();
   }
+  if (node.type === NodeType.Group) {
+    recorder.restoreGroup();
+  }
 };
 
 export const visit = (recorder: Recorder, root: Node[]) => {