Merge pull request #2048 from Shopify/stagger-deprecation

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/Picture.tsx

@@ -10,7 +10,6 @@ import {
 
 // Create picture
 const picture = createPicture(
-  { x: 0, y: 0, width: 100, height: 100 },
   (canvas) => {
     const paint = Skia.Paint();
     paint.setColor(Skia.Color("pink"));
@@ -19,7 +18,8 @@ const picture = createPicture(
     const circlePaint = Skia.Paint();
     circlePaint.setColor(Skia.Color("orange"));
     canvas.drawCircle(50, 50, 50, circlePaint);
-  }
+  },
+  { x: 0, y: 0, width: 100, height: 100 }
 );
 
 export const PictureExample = () => {

example/src/Examples/API/PictureView.tsx

@@ -10,7 +10,7 @@ export const PictureViewExample = () => {
   // Create picture
   const picture = useMemo(
     () =>
-      createPicture({ x: 0, y: 0, width: 100, height: 100 }, (canvas) => {
+      createPicture((canvas) => {
         const paint = Skia.Paint();
         paint.setColor(Skia.Color("pink"));
         canvas.drawRect({ x: 0, y: 0, width: 100, height: 100 }, paint);

example/src/Examples/API/Touch.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import type { SkPicture, SkSize } from "@shopify/react-native-skia";
+import type { SkPicture } from "@shopify/react-native-skia";
 import {
   Group,
   Fill,
@@ -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 && !arguments[0].isUndefined()) {
+      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

@@ -4,7 +4,6 @@ import React, {
   useMemo,
   forwardRef,
   useRef,
-  useLayoutEffect,
 } from "react";
 import type {
   RefObject,
@@ -13,13 +12,13 @@ import type {
   ForwardedRef,
   FunctionComponent,
 } from "react";
+import type { LayoutChangeEvent } from "react-native";
 
-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";
 import { JsiDrawingContext } from "../dom/types";
-import { useValue } from "../values";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
@@ -33,34 +32,42 @@ export interface CanvasProps extends SkiaBaseViewProps {
   onTouch?: TouchHandler;
 }
 
-const useOnSizeEvent = (resultValue: SkiaBaseViewProps["onSize"]) => {
-  const onSize = useValue({
-    width: 0,
-    height: 0,
-  });
+const useOnSizeEvent = (
+  resultValue: SkiaBaseViewProps["onSize"],
+  onLayout?: (event: LayoutChangeEvent) => void
+) => {
+  return useCallback(
+    (event: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(event);
+      }
+      const { width, height } = event.nativeEvent.layout;
 
-  useLayoutEffect(() => {
-    if (!resultValue) {
-      return;
-    }
-    return onSize.addListener((newValue) => {
       if (isValue(resultValue)) {
-        resultValue.current = newValue;
-      } else {
-        resultValue.value = newValue;
+        resultValue.current = { width, height };
+      } else if (resultValue) {
+        resultValue.value = { width, height };
       }
-    });
-  }, [resultValue, onSize]);
-
-  return onSize;
+    },
+    [onLayout, resultValue]
+  );
 };
 
 export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
   (
-    { children, style, debug, mode, onTouch, onSize: _onSize, ...props },
+    {
+      children,
+      style,
+      debug,
+      mode,
+      onTouch,
+      onSize: _onSize,
+      onLayout: _onLayout,
+      ...props
+    },
     forwardedRef
   ) => {
-    const onSize = useOnSizeEvent(_onSize);
+    const onLayout = useOnSizeEvent(_onSize, _onLayout);
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const redraw = useCallback(() => {
@@ -102,26 +109,30 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
           style={style}
           root={root.dom}
           onTouch={onTouch}
-          onSize={onSize}
+          onLayout={onLayout}
           mode={mode}
           debug={debug}
           {...props}
         />
       );
     } 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}
-          onSize={onSize}
-          onDraw={(canvas, info) => {
-            onTouch && onTouch(info.touches);
-            const ctx = new JsiDrawingContext(Skia, canvas);
-            root.dom.render(ctx);
-          }}
+          picture={picture}
+          onLayout={onLayout}
           {...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/renderer/__tests__/examples/Breathe.spec.tsx

@@ -8,13 +8,16 @@ 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
 ) => {
+  "worklet";
   const recorder = Skia.PictureRecorder();
-  const canvas = recorder.beginRecording(
-    isRect(rect) ? rect : Skia.XYWHRect(0, 0, rect.width, rect.height)
-  );
+  let bounds: undefined | SkRect;
+  if (rect) {
+    bounds = isRect(rect) ? rect : Skia.XYWHRect(0, 0, rect.width, rect.height);
+  }
+  const canvas = recorder.beginRecording(bounds);
   cb(canvas);
   return recorder.finishRecordingAsPicture();
 };

package/src/skia/core/Picture.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.