Merge branch 'main' into matrix4

wcandillon · web-flow · commit a34e956cc6ba · 2023-12-11T22:23:33.000+01:00
diff --git a/docs/docs/shapes/pictures.md b/docs/docs/shapes/pictures.md
@@ -11,7 +11,54 @@ A Picture renders a previously recorded list of drawing operations on the canvas
 | :------ | :---------- | :---------------- |
 | picture | `SkPicture` | Picture to render |
 
-### Example
+
+## Hello World
+
+```tsx twoslash
+import React, { useMemo } from "react";
+import {
+  createPicture,
+  Canvas,
+  Picture,
+  Skia,
+  Group,
+  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 r = 0.33 * size;
+      const paint = Skia.Paint();
+      paint.setBlendMode(BlendMode.Multiply);
+
+      paint.setColor(Skia.Color("cyan"));
+      canvas.drawCircle(r, r, r, paint);
+
+      paint.setColor(Skia.Color("magenta"));
+      canvas.drawCircle(size - r, r, r, paint);
+
+      paint.setColor(Skia.Color("yellow"));
+      canvas.drawCircle(size / 2, size - r, r, paint);
+    }
+  ), []);
+  return (
+    <Canvas style={{ flex: 1 }}>
+      <Picture picture={picture} />
+    </Canvas>
+  );
+};
+```
+
+## Serialization
+
+You can serialize a picture to a byte array.
+Serialized pictures are only compatible with the version of Skia it was created with.
+You can use serialized pictures with the [Skia debugger](https://skia.org/docs/dev/tools/debugger/).
 
 ```tsx twoslash
 import React, { useMemo } from "react";
@@ -26,7 +73,7 @@ import {
 export const PictureExample = () => {
   // Create picture
   const picture = useMemo(() => createPicture(
-    { x: 0, y: 0, width: 100, height: 100 },
+    { width: 100, height: 100 },
     (canvas) => {
       const paint = Skia.Paint();
       paint.setColor(Skia.Color("pink"));
diff --git a/package/src/__tests__/snapshots/pictures/hello-world.png b/package/src/__tests__/snapshots/pictures/hello-world.png
diff --git a/package/src/__tests__/snapshots/pictures/simple-picture.png b/package/src/__tests__/snapshots/pictures/simple-picture.png
diff --git a/package/src/animation/spring/runSpring.ts b/package/src/animation/spring/runSpring.ts
@@ -10,6 +10,9 @@ import { Spring } from "./Spring";
 import { createSpringEasing } from "./functions/spring";
 
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new animation on an existing value that will be driven by
  * an animation value. The value will be run from / to the value in
  * params and modified by the provided easing curve for the length of
diff --git a/package/src/animation/spring/useSpring.ts b/package/src/animation/spring/useSpring.ts
@@ -10,6 +10,9 @@ import { Spring } from "./Spring";
 import { createSpringEasing } from "./functions/spring";
 
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creats a spring based animation value that will run whenever
  * the animation parameters change.
  * @param toOrParams
diff --git a/package/src/animation/timing/runTiming.ts b/package/src/animation/timing/runTiming.ts
@@ -8,6 +8,9 @@ import type {
 import { getResolvedParams } from "./functions";
 import { createTiming } from "./createTiming";
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new animation on an existing value that will be driven by
  * an animation value. The value will be run from / to the value in
  * params and modified by the provided easing curve for the length of
diff --git a/package/src/animation/timing/useLoop.ts b/package/src/animation/timing/useLoop.ts
@@ -3,6 +3,9 @@ import type { TimingConfig } from "../types";
 import { useTiming } from "./useTiming";
 
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Configures a looped timing value. The value will go back and forth
  * between 0 and 1 and back.
  * @param config Timing configuration for easing and duration
diff --git a/package/src/animation/timing/useTiming.ts b/package/src/animation/timing/useTiming.ts
@@ -12,6 +12,9 @@ import { getResolvedParams } from "./functions";
 import { createTiming } from "./createTiming";
 
 /**
+ * @deprecated Use Reanimated 3 for animations:
+ * https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creats an animation value that will run whenever
  * the animation parameters change. The animation start immediately.
  * @param toOrParams
diff --git a/package/src/dom/nodes/JsiSkDOM.ts b/package/src/dom/nodes/JsiSkDOM.ts
@@ -173,6 +173,10 @@ export class JsiSkDOM implements SkDOM {
   }
 
   CustomDrawing(props: CustomDrawingNodeProps) {
+    console.warn(
+      // eslint-disable-next-line max-len
+      "The <Drawing /> component is deprecated and will be removed in the next release. For custom drawings, please sure the <Picture /> component: https://shopify.github.io/react-native-skia/docs/shapes/pictures/"
+    );
     return NATIVE_DOM
       ? global.SkiaDomApi.CustomDrawingNode(props ?? {})
       : new CustomDrawingNode(this.ctx, props);
diff --git a/package/src/renderer/__tests__/e2e/Picture.spec.tsx b/package/src/renderer/__tests__/e2e/Picture.spec.tsx
@@ -0,0 +1,50 @@
+import { importSkia, 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))!;
+    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 { 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();
+        paint.setBlendMode(ctx.BlendMode);
+        paint.setColor(Sk.Color("cyan"));
+        canvas2.drawCircle(r, r, r, paint);
+        paint.setColor(Sk.Color("magenta"));
+        canvas2.drawCircle(size - r, r, r, paint);
+        paint.setColor(Sk.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");
+  });
+});
diff --git a/package/src/renderer/components/Drawing.tsx b/package/src/renderer/components/Drawing.tsx
@@ -2,6 +2,11 @@ import React from "react";
 
 import type { CustomDrawingNodeProps } from "../../dom/types";
 
+/**
+ * @deprecated If you are looking to use the Skia imperative API, you can use:
+ * The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
+ * The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures
+ */
 export const Drawing = (props: CustomDrawingNodeProps) => {
   return <skDrawing {...props} />;
 };
diff --git a/package/src/skia/core/Picture.ts b/package/src/skia/core/Picture.ts
@@ -1,15 +1,20 @@
 import { Skia } from "../Skia";
-import type { SkCanvas, SkRect } from "../types";
+import { isRect, type SkCanvas, type SkRect, type SkSize } from "../types";
 
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
  * @param rect Picture bounds
  * @param cb Callback for drawing to the canvas
  * @returns SkPicture
  */
-export const createPicture = (rect: SkRect, cb: (canvas: SkCanvas) => void) => {
+export const createPicture = (
+  rect: SkRect | SkSize,
+  cb: (canvas: SkCanvas) => void
+) => {
   const recorder = Skia.PictureRecorder();
-  const canvas = recorder.beginRecording(rect);
+  const canvas = recorder.beginRecording(
+    isRect(rect) ? rect : Skia.XYWHRect(0, 0, rect.width, rect.height)
+  );
   cb(canvas);
   return recorder.finishRecordingAsPicture();
 };
diff --git a/package/src/skia/types/Rect.ts b/package/src/skia/types/Rect.ts
@@ -4,3 +4,16 @@ export interface SkRect {
   readonly width: number;
   readonly height: number;
 }
+
+export const isRect = (def: unknown): def is SkRect => {
+  if (typeof def === "object" && def !== null) {
+    const rect = def as SkRect;
+    return (
+      typeof rect.x === "number" &&
+      typeof rect.y === "number" &&
+      typeof rect.width === "number" &&
+      typeof rect.height === "number"
+    );
+  }
+  return false;
+};
diff --git a/package/src/values/api.ts b/package/src/values/api.ts
@@ -1,8 +1,61 @@
-import type { ISkiaValueApi } from "./types";
+import type {
+  AnimationState,
+  ISkiaValueApi,
+  SkiaAnimation,
+  SkiaClockValue,
+  SkiaMutableValue,
+  SkiaValue,
+} from "./types";
 
 declare global {
   var SkiaValueApi: ISkiaValueApi;
 }
 
 const { SkiaValueApi } = global;
-export const ValueApi = SkiaValueApi;
+
+const deprecatedWarning = () => {
+  console.warn(
+    `Skia values are deprecated and will be removed in the next Skia release.
+Please use Reanimated instead: https://shopify.github.io/react-native-skia/docs/animations/animations`
+  );
+};
+
+export const ValueApi = {
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createValue<T>(initialValue: T): SkiaMutableValue<T> {
+    deprecatedWarning();
+    return SkiaValueApi.createValue(initialValue);
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createComputedValue<R>(
+    cb: () => R,
+    values: SkiaValue<unknown>[]
+  ): SkiaValue<R> {
+    deprecatedWarning();
+    return SkiaValueApi.createComputedValue(cb, values);
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createClockValue(): SkiaClockValue {
+    deprecatedWarning();
+    return SkiaValueApi.createClockValue();
+  },
+  /**
+   * @deprecated Use Reanimated 3
+   * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+   */
+  createAnimation<S extends AnimationState = AnimationState>(
+    cb: (t: number, state: S | undefined) => S
+  ): SkiaAnimation {
+    deprecatedWarning();
+    return SkiaValueApi.createAnimation(cb);
+  },
+};
diff --git a/package/src/values/hooks/useClockValue.ts b/package/src/values/hooks/useClockValue.ts
@@ -3,6 +3,9 @@ import { useEffect, useMemo } from "react";
 import { ValueApi } from "../api";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * @returns A new value that will be updated on every frame redraw with the
  * number of milliseconds elapsed since the value was started.
  * The clock is created in the stopped state.
diff --git a/package/src/values/hooks/useComputedValue.ts b/package/src/values/hooks/useComputedValue.ts
@@ -4,6 +4,9 @@ import { ValueApi } from "../api";
 import { isValue } from "../../renderer/processors/Animations";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new computed value - a value that will calculate its value depending
  * on other values.
  * @param cb Callback to calculate new value
diff --git a/package/src/values/hooks/useValue.ts b/package/src/values/hooks/useValue.ts
@@ -4,6 +4,9 @@ import { ValueApi } from "../api";
 import type { SkiaMutableValue } from "../types";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Creates a new value that holds some data.
  * @param v Value to hold
  * @returns A Value of type of v
diff --git a/package/src/values/hooks/useValueEffect.ts b/package/src/values/hooks/useValueEffect.ts
@@ -3,6 +3,9 @@ import { useEffect } from "react";
 import type { SkiaValue } from "../types";
 
 /**
+ * @deprecated Use Reanimated 3
+ * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
+ *
  * Sets up an effect that will be run whenever the value changes
  * @param value Value to subscribe to changes on
  * @param cb Callback to run when value changes
diff --git a/package/src/values/types.ts b/package/src/values/types.ts
@@ -48,26 +48,26 @@ export interface ISkiaValueApi {
    * Creates a new value that holds the initial value and that
    * can be changed.
    */
-  createValue: <T>(initialValue: T) => SkiaMutableValue<T>;
+  createValue<T>(initialValue: T): SkiaMutableValue<T>;
   /**
    * Creates a computed value. This is a calculated value that returns the result of
    * a function that is called with the values of the dependencies.
    */
-  createComputedValue: <R>(
+  createComputedValue<R>(
     cb: () => R,
     values: Array<SkiaValue<unknown>>
-  ) => SkiaValue<R>;
+  ): SkiaValue<R>;
   /**
    * Creates a clock value where the value is the number of milliseconds elapsed
    * since the clock was created
    */
-  createClockValue: () => SkiaClockValue;
+  createClockValue(): SkiaClockValue;
   /**
    * Creates an animation that is driven from a clock and updated every frame.
    * @param cb Callback to calculate next value from time.
    * @returns An animation object that can control a value.
    */
-  createAnimation: <S extends AnimationState = AnimationState>(
+  createAnimation<S extends AnimationState = AnimationState>(
     cb: (t: number, state: S | undefined) => S
-  ) => SkiaAnimation;
+  ): SkiaAnimation;
 }
diff --git a/package/src/views/SkiaView.tsx b/package/src/views/SkiaView.tsx
@@ -11,9 +11,20 @@ export const SkiaViewNativeId = { current: 1000 };
 
 const NativeSkiaView = SkiaDrawViewNativeComponent;
 
+/**
+ * @deprecated If you are looking to use the Skia imperative API, you can use:
+ * The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
+ * The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures
+ */
 export class SkiaView extends React.Component<SkiaDrawViewProps> {
   constructor(props: SkiaDrawViewProps) {
     super(props);
+    console.warn(
+      `The SkiaView component is deprecated and will be removed in the next release.
+If you are looking to use the Skia imperative API, you can use:
+* The picture API: https://shopify.github.io/react-native-skia/docs/shapes/pictures/
+* The offscreen API: https://shopify.github.io/react-native-skia/docs/animations/textures`
+    );
     this._nativeId = SkiaViewNativeId.current++;
     const { onDraw, onSize } = props;
     if (onDraw) {
