Refine deprecations

Author: wcandillon

docs/docs/shapes/pictures.md

@@ -25,13 +25,11 @@ import {
   BlendMode
 } from "@shopify/react-native-skia";
 
-const size = 256;
-
 export const HelloWorld = () => {
   // Create a picture
   const picture = useMemo(() => createPicture(
-    { width: size, height: size },
     (canvas) => {
+      const size = 256;
       const r = 0.33 * size;
       const paint = Skia.Paint();
       paint.setBlendMode(BlendMode.Multiply);
@@ -73,7 +71,6 @@ import {
 export const PictureExample = () => {
   // Create picture
   const picture = useMemo(() => createPicture(
-    { width: 100, height: 100 },
     (canvas) => {
       const paint = Skia.Paint();
       paint.setColor(Skia.Color("pink"));
@@ -82,7 +79,8 @@ export const PictureExample = () => {
       const circlePaint = Skia.Paint();
       circlePaint.setColor(Skia.Color("orange"));
       canvas.drawCircle(50, 50, 50, circlePaint);
-    }
+    },
+    { width: 100, height: 100 },
   ), []);
 
   // Serialize the picture

example/src/Examples/API/Touch.tsx

@@ -38,11 +38,11 @@ paint.setColor(Skia.Color("cyan"));
 paint.setStyle(PaintStyle.Stroke);
 paint.setStrokeWidth(10);
 
-const drawTouches = (touches: TouchData[], size: SkSize, colors: string[]) => {
+const drawTouches = (touches: TouchData[], colors: string[]) => {
   "worklet";
   const recorder = Skia.PictureRecorder();
   const canvas = recorder.beginRecording(
-    Skia.XYWHRect(0, 0, size.width, size.height)
+    Skia.XYWHRect(0, 0, 2_000_000, 2_000_000)
   );
   touches.forEach((touch) => {
     const p = paint.copy();
@@ -54,16 +54,15 @@ const drawTouches = (touches: TouchData[], size: SkSize, colors: string[]) => {
 
 export const Touch = () => {
   const picture = useSharedValue<SkPicture>(emptyPicture);
-  const size = useSharedValue({ width: 0, height: 0 });
   const colors = useSharedValue<string[]>([]);
   const gesture = Gesture.Native()
     .onTouchesDown((event) => {
       const start = Math.round(Math.random() * 4);
       colors.value = Colors.slice(start, start + event.allTouches.length);
-      picture.value = drawTouches(event.allTouches, size.value, colors.value);
+      picture.value = drawTouches(event.allTouches, colors.value);
     })
     .onTouchesMove((event) => {
-      picture.value = drawTouches(event.allTouches, size.value, colors.value);
+      picture.value = drawTouches(event.allTouches, colors.value);
     })
     .onTouchesUp(() => {
       picture.value = emptyPicture;
@@ -72,7 +71,7 @@ export const Touch = () => {
     <View style={styles.container}>
       <Title>Touch handling</Title>
       <View style={{ flex: 1 }}>
-        <Canvas style={styles.container} onSize={size}>
+        <Canvas style={styles.container}>
           <Fill color="white" />
           <Group style="stroke" strokeWidth={8}>
             <Picture picture={picture} />

package/cpp/api/JsiSkPictureRecorder.h

@@ -27,9 +27,16 @@ class JsiSkPictureRecorder
             context, std::make_shared<SkPictureRecorder>()) {}
 
   JSI_HOST_FUNCTION(beginRecording) {
-    auto rect = JsiSkRect::fromValue(runtime, arguments[0]);
-    SkRTreeFactory factory;
-    auto canvas = getObject()->beginRecording(*rect, &factory);
+    SkCanvas *canvas;
+    if (count > 0) {
+      auto rect = JsiSkRect::fromValue(runtime, arguments[0]);
+      SkRTreeFactory factory;
+      canvas = getObject()->beginRecording(*rect, &factory);
+    } else {
+      SkISize size = SkISize::Make(2'000'000, 2'000'000);
+      SkRect rect = SkRect::Make(size);
+      canvas = getObject()->beginRecording(rect, nullptr);
+    }
     return jsi::Object::createFromHostObject(
         runtime, std::make_shared<JsiSkCanvas>(getContext(), canvas));
   }

package/src/renderer/Canvas.tsx

@@ -14,7 +14,7 @@ import type {
   FunctionComponent,
 } from "react";
 
-import { SkiaDomView, SkiaView } from "../views";
+import { SkiaDomView, SkiaPictureView } from "../views";
 import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
 import type { SkiaValue } from "../values/types";
@@ -109,19 +109,23 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
         />
       );
     } else {
+      // This is for debugging
+      const recorder = Skia.PictureRecorder();
+      const canvas = recorder.beginRecording(
+        Skia.XYWHRect(0, 0, 2_000_000, 2_000_000)
+      );
+      const ctx = new JsiDrawingContext(Skia, canvas);
+      root.dom.render(ctx);
+      const picture = recorder.finishRecordingAsPicture();
       return (
-        <SkiaView
+        <SkiaPictureView
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           style={style}
           mode={mode}
           debug={debug}
+          picture={picture}
           onSize={onSize}
-          onDraw={(canvas, info) => {
-            onTouch && onTouch(info.touches);
-            const ctx = new JsiDrawingContext(Skia, canvas);
-            root.dom.render(ctx);
-          }}
           {...props}
         />
       );

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

@@ -17,7 +17,7 @@ const CheckPicture = ({}: EmptyProps) => {
   }, [Skia]);
   const picture = useMemo(
     () =>
-      createPicture(Skia.XYWHRect(0, 0, r * 2, r * 2), (canvas) => {
+      createPicture((canvas) => {
         const paint = Skia.Paint();
         paint.setColor(Skia.Color(color));
         canvas.drawCircle(r, r, r, paint);
@@ -45,11 +45,11 @@ const CheckPicture2 = ({}: EmptyProps) => {
   }, [Skia]);
   const picture = useMemo(
     () =>
-      createPicture(Skia.XYWHRect(0, 0, r * 2, r * 2), (canvas) => {
+      createPicture((canvas) => {
         const paint = Skia.Paint();
         paint.setColor(Skia.Color(color));
         canvas.drawCircle(r, r, r, paint);
-      }),
+      }, Skia.XYWHRect(0, 0, r * 2, r * 2)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );

package/src/skia/core/Picture.ts

@@ -8,12 +8,17 @@ import { isRect, type SkCanvas, type SkRect, type SkSize } from "../types";
  * @returns SkPicture
  */
 export const createPicture = (
-  rect: SkRect | SkSize,
-  cb: (canvas: SkCanvas) => void
+  cb: (canvas: SkCanvas) => void,
+  rect?: SkRect | SkSize
 ) => {
   const recorder = Skia.PictureRecorder();
   const canvas = recorder.beginRecording(
-    isRect(rect) ? rect : Skia.XYWHRect(0, 0, rect.width, rect.height)
+    // eslint-disable-next-line no-nested-ternary
+    rect
+      ? isRect(rect)
+        ? rect
+        : Skia.XYWHRect(0, 0, rect.width, rect.height)
+      : undefined
   );
   cb(canvas);
   return recorder.finishRecordingAsPicture();

package/src/skia/types/Picture/PictureRecorder.ts

@@ -9,7 +9,7 @@ export interface SkPictureRecorder {
    *
    * @param bounds - a rect to cull the results.
    */
-  beginRecording(bounds: SkRect): SkCanvas;
+  beginRecording(bounds?: SkRect): SkCanvas;
 
   /**
    * Returns the captured draw commands as a picture and invalidates the canvas returned earlier.

package/src/skia/web/JsiSkPictureRecorder.ts

@@ -20,10 +20,14 @@ export class JsiSkPictureRecorder
     this.ref.delete();
   };
 
-  beginRecording(bounds: SkRect) {
+  beginRecording(bounds?: SkRect) {
     return new JsiSkCanvas(
       this.CanvasKit,
-      this.ref.beginRecording(JsiSkRect.fromValue(this.CanvasKit, bounds))
+      this.ref.beginRecording(
+        bounds
+          ? JsiSkRect.fromValue(this.CanvasKit, bounds)
+          : Float32Array.of(0, 0, 2_000_000, 2_000_000)
+      )
     );
   }
 

package/src/values/api.ts

@@ -26,7 +26,6 @@ export const ValueApi = {
    * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
    */
   createValue<T>(initialValue: T): SkiaMutableValue<T> {
-    deprecatedWarning();
     return SkiaValueApi.createValue(initialValue);
   },
   /**