💚

Shopify · Jan 8, 2025 · 1622cbc · 1622cbc
1 parent f29f5b1
commit 1622cbc
Showing 1 changed file with 34 additions and 36 deletions.
diff --git a/packages/skia/src/sksg/Container.ts b/packages/skia/src/sksg/Container.ts
@@ -9,35 +9,53 @@ import { visit } from "./Recorder/Visitor";
 import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
 
-export interface Container {
-  drawOnCanvas(canvas: SkCanvas): void;
-  set root(root: Node[]);
-  redraw(): void;
-}
+const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
+  "worklet";
 
-class StaticContainer implements Container {
+  const rec = Skia.PictureRecorder();
+  const canvas = rec.beginRecording();
+  // 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();
+  //console.log("Recording time: ", end - start);
+  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+};
+
+export abstract class Container {
   public root: Node[] = [];
-  protected _recording: Recording | null = null;
+  protected recording: Recording | null = null;
 
-  constructor(private Skia: Skia, private nativeId: number) {}
+  constructor(protected Skia: Skia, protected nativeId: number) {}
 
   drawOnCanvas(canvas: SkCanvas) {
-    if (!this._recording) {
+    if (!this.recording) {
       throw new Error("No recording to draw");
     }
     const ctx = createDrawingContext(
       this.Skia,
-      this._recording.paintPool,
+      this.recording.paintPool,
       canvas
     );
     //console.log(this._recording);
-    replay(ctx, this._recording.commands);
+    replay(ctx, this.recording.commands);
+  }
+
+  abstract redraw(): void;
+}
+
+class StaticContainer extends Container {
+  constructor(Skia: Skia, nativeId: number) {
+    super(Skia, nativeId);
   }
 
   redraw() {
     const recorder = new Recorder();
     visit(recorder, this.root);
-    this._recording = recorder.getRecording();
+    this.recording = recorder.getRecording();
     const isOnScreen = this.nativeId !== -1;
     if (isOnScreen) {
       const rec = this.Skia.PictureRecorder();
@@ -49,28 +67,12 @@ class StaticContainer implements Container {
   }
 }
 
-const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
-  "worklet";
-
-  const rec = Skia.PictureRecorder();
-  const canvas = rec.beginRecording();
-  // 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();
-  //console.log("Recording time: ", end - start);
-  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-};
-
-class ReanimatedContainer implements Container {
-  protected recording: Recording | null = null;
+class ReanimatedContainer extends Container {
   private mapperId: number | null = null;
-  public root: Node[] = [];
 
-  constructor(private Skia: Skia, private nativeId: number) {}
+  constructor(Skia: Skia, nativeId: number) {
+    super(Skia, nativeId);
+  }
 
   redraw() {
     if (this.mapperId !== null) {
@@ -92,10 +94,6 @@ class ReanimatedContainer implements Container {
       }, Array.from(animationValues));
     }
   }
-
-  drawOnCanvas(_canvas: SkCanvas) {
-    // do nothing
-  }
 }
 
 export const createContainer = (Skia: Skia, nativeId: number) => {