Update tests

Author: wcandillon

fabricexample/src/Tests/Tests.tsx

@@ -6,7 +6,6 @@ import {
   Canvas,
   Skia,
   makeImageFromView,
-  Paragraph,
 } from "@shopify/react-native-skia";
 import React, { useEffect, useRef, useState } from "react";
 import { PixelRatio, Platform, Text, View } from "react-native";
@@ -48,21 +47,6 @@ export const Tests = ({ assets }: TestsProps) => {
               })
             )
           );
-        } else if (tree.paragraph) {
-          const paragraph = eval(
-            `(function Main(){return (${tree.paragraph})(this.Skia, this.ctx); })`
-          ).call({
-            Skia,
-            ctx: parseProps(tree.ctx, assets),
-          });
-          setDrawing(
-            <Paragraph
-              paragraph={paragraph}
-              width={tree.paragraphWidth}
-              x={0}
-              y={0}
-            />
-          );
         } else if (typeof tree.screen === "string") {
           const Screen = Screens[tree.screen];
           if (!Screen) {

package/src/__tests__/snapshots/pictures/simple-picture.png

@@ -1,50 +1,45 @@
-import { importSkia, surface } from "../setup";
+import { surface } from "../setup";
 import { checkImage } from "../../../__tests__/setup";
 import { BlendMode } from "../../../skia/types";
 
 describe("Pictures", () => {
   it("Should draw a simple picture", async () => {
-    const { Skia } = importSkia();
-    const str = await surface.eval((Sk) => {
-      const size = 256;
-      const surf = Sk.Surface.MakeOffscreen(size, size)!;
-      const canvas = surf.getCanvas();
-      const recorder = Sk.PictureRecorder();
-      const canvas2 = recorder.beginRecording(Sk.XYWHRect(0, 0, size, size));
-      canvas2.drawColor(Sk.Color("cyan"));
-      const picture = recorder.finishRecordingAsPicture();
-      canvas.drawPicture(picture);
-      return surf.makeImageSnapshot().encodeToBase64();
-    });
-    const image = Skia.Image.MakeImageFromEncoded(Skia.Data.fromBase64(str))!;
+    const image = await surface.drawOffscreen(
+      (Skia, canvas, { size }) => {
+        const recorder = Skia.PictureRecorder();
+        const canvas2 = recorder.beginRecording(
+          Skia.XYWHRect(0, 0, size, size)
+        );
+        canvas2.drawColor(Skia.Color("cyan"));
+        const picture = recorder.finishRecordingAsPicture();
+        canvas.drawPicture(picture);
+      },
+      { size: surface.width }
+    );
     checkImage(image, "snapshots/pictures/simple-picture.png");
   });
   it("Should draw the hello world example as picture", async () => {
-    const { Skia } = importSkia();
-    const str = await surface.eval(
-      (Sk, ctx) => {
+    const image = await surface.drawOffscreen(
+      (Skia, canvas, ctx) => {
         const { size } = ctx;
         const r = size * 0.33;
-        const surf = Sk.Surface.MakeOffscreen(size, size)!;
-        const canvas = surf.getCanvas();
-        const recorder = Sk.PictureRecorder();
-        const canvas2 = recorder.beginRecording(Sk.XYWHRect(0, 0, size, size));
-        const paint = Sk.Paint();
+        const recorder = Skia.PictureRecorder();
+        const canvas2 = recorder.beginRecording(
+          Skia.XYWHRect(0, 0, size, size)
+        );
+        const paint = Skia.Paint();
         paint.setBlendMode(ctx.BlendMode);
-        paint.setColor(Sk.Color("cyan"));
+        paint.setColor(Skia.Color("cyan"));
         canvas2.drawCircle(r, r, r, paint);
-        paint.setColor(Sk.Color("magenta"));
+        paint.setColor(Skia.Color("magenta"));
         canvas2.drawCircle(size - r, r, r, paint);
-        paint.setColor(Sk.Color("yellow"));
+        paint.setColor(Skia.Color("yellow"));
         canvas2.drawCircle(size / 2, size - r, r, paint);
         const picture = recorder.finishRecordingAsPicture();
         canvas.drawPicture(picture);
-        surf.flush();
-        return surf.makeImageSnapshot().encodeToBase64();
       },
       { BlendMode: BlendMode.Multiply, size: surface.width }
     );
-    const image = Skia.Image.MakeImageFromEncoded(Skia.Data.fromBase64(str))!;
     checkImage(image, "snapshots/pictures/hello-world.png");
   });
 });

package/src/renderer/__tests__/e2e/Picture.spec.tsx

@@ -12,6 +12,7 @@ import type { SkMatrix } from "./Matrix";
 import type { SkImageFilter } from "./ImageFilter";
 import type { SkVertices } from "./Vertices";
 import type { SkTextBlob } from "./TextBlob";
+import type { SkPicture } from "./Picture";
 
 export enum ClipOp {
   Difference,
@@ -486,6 +487,12 @@ export interface SkCanvas {
    */
   concat(m: SkMatrix | number[]): void;
 
+  /**
+   * Draws the given picture using the current clip, current matrix, and the provided paint.
+   * @param skp
+   */
+  drawPicture(skp: SkPicture): void;
+
   /** Read Image pixels
    *
    * @param srcX - x-axis upper left corner of the rectangle to read from