@shopify/react-native-skia 2.1.1 → 2.2.1

package/src/renderer/__tests__/setup.tsx

@@ -174,6 +174,7 @@ export const importSkia = (): typeof SkiaExports => {
   const skia = require("../../skia");
   const renderer = require("../../renderer");
   const offscreen = require("../Offscreen");
+  const nodes = require("../../dom/nodes");
   // TODO: to remove
   const animation = require("../../animation");
   return {
@@ -181,6 +182,7 @@ export const importSkia = (): typeof SkiaExports => {
     ...renderer,
     ...animation,
     ...offscreen,
+    ...nodes,
   };
 };
 

package/src/renderer/components/ImageFilter.tsx

@@ -5,4 +5,4 @@ import type { SkiaProps } from "../processors";
 
 export const ImageFilter = (props: SkiaProps<ImageFilterProps>) => {
   return <skImageFilter {...props} />;
-};
+};

package/src/skia/types/Matrix4.ts

@@ -354,6 +354,22 @@ export const convertToColumnMajor = (rowMajorMatrix: Matrix4) => {
   return colMajorMatrix as unknown as Matrix4;
 };
 
+/**
+ * @worklet
+ */
+export const convertToColumnMajor3 = (rowMajorMatrix: Matrix3 | number[]) => {
+  "worklet";
+
+  const colMajorMatrix = new Array<number>(9);
+  const size = 3;
+  for (let row = 0; row < size; row++) {
+    for (let col = 0; col < size; col++) {
+      colMajorMatrix[col * size + row] = rowMajorMatrix[row * size + col];
+    }
+  }
+  return colMajorMatrix as unknown as Matrix3;
+};
+
 /**
  * @worklet
  */

package/src/sksg/Container.ts

@@ -1,5 +1,7 @@
+import type { SharedValue } from "react-native-reanimated";
+
 import Rea from "../external/reanimated/ReanimatedProxy";
-import type { Skia, SkCanvas } from "../skia/types";
+import type { Skia, SkCanvas, SkSize } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 import type { JsiRecorder } from "../skia/types/Recorder";
 
@@ -13,9 +15,22 @@ import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 
 import "../views/api";
 
-const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
+const drawOnscreen = (
+  Skia: Skia,
+  nativeId: number,
+  recording: Recording,
+  onSize?: SharedValue<SkSize>
+) => {
   "worklet";
-
+  if (onSize) {
+    const size = SkiaViewApi.size(nativeId);
+    if (
+      size.width !== onSize.value.width ||
+      size.height !== onSize.value.height
+    ) {
+      onSize.value = size;
+    }
+  }
   const rec = Skia.PictureRecorder();
   const canvas = rec.beginRecording();
   //const start = performance.now();
@@ -28,11 +43,23 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
 };
 
-const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
+const nativeDrawOnscreen = (
+  nativeId: number,
+  recorder: JsiRecorder,
+  onSize?: SharedValue<SkSize>
+) => {
   "worklet";
 
   //const start = performance.now();
-
+  if (onSize) {
+    const size = SkiaViewApi.size(nativeId);
+    if (
+      size.width !== onSize.value.width ||
+      size.height !== onSize.value.height
+    ) {
+      onSize.value = size;
+    }
+  }
   const picture = recorder.play();
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
@@ -44,7 +71,7 @@ export abstract class Container {
   protected recording: Recording | null = null;
   protected unmounted = false;
 
-  constructor(protected Skia: Skia, protected nativeId: number) {}
+  constructor(protected Skia: Skia) {}
 
   get root() {
     return this._root;
@@ -78,8 +105,12 @@ export abstract class Container {
 }
 
 class StaticContainer extends Container {
-  constructor(Skia: Skia, nativeId: number) {
-    super(Skia, nativeId);
+  constructor(
+    Skia: Skia,
+    private nativeId: number,
+    private onSize?: SharedValue<SkSize>
+  ) {
+    super(Skia);
   }
 
   redraw() {
@@ -88,6 +119,15 @@ class StaticContainer extends Container {
     this.recording = recorder.getRecording();
     const isOnScreen = this.nativeId !== -1;
     if (isOnScreen) {
+      if (this.onSize) {
+        const size = SkiaViewApi.size(this.nativeId);
+        if (
+          size.width !== this.onSize.value.width ||
+          size.height !== this.onSize.value.height
+        ) {
+          this.onSize.value = size;
+        }
+      }
       const rec = this.Skia.PictureRecorder();
       const canvas = rec.beginRecording();
       this.drawOnCanvas(canvas);
@@ -100,8 +140,12 @@ class StaticContainer extends Container {
 class ReanimatedContainer extends Container {
   private mapperId: number | null = null;
 
-  constructor(Skia: Skia, nativeId: number) {
-    super(Skia, nativeId);
+  constructor(
+    Skia: Skia,
+    private nativeId: number,
+    private onSize?: SharedValue<SkSize>
+  ) {
+    super(Skia);
   }
 
   redraw() {
@@ -128,7 +172,7 @@ class ReanimatedContainer extends Container {
     }
     Rea.runOnUI(() => {
       "worklet";
-      drawOnscreen(Skia, nativeId, recording!);
+      drawOnscreen(Skia, nativeId, recording!, this.onSize);
     })();
   }
 }
@@ -136,8 +180,12 @@ class ReanimatedContainer extends Container {
 class NativeReanimatedContainer extends Container {
   private mapperId: number | null = null;
 
-  constructor(Skia: Skia, nativeId: number) {
-    super(Skia, nativeId);
+  constructor(
+    Skia: Skia,
+    private nativeId: number,
+    private onSize?: SharedValue<SkSize>
+  ) {
+    super(Skia);
   }
 
   redraw() {
@@ -152,27 +200,32 @@ class NativeReanimatedContainer extends Container {
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
-    Rea.runOnUI(() => {
+    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
       "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder);
-    })();
+      nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
+    })(this.onSize);
     if (sharedValues.length > 0) {
+      const { onSize } = this;
       this.mapperId = Rea.startMapper(() => {
         "worklet";
         sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(nativeId, sharedRecorder);
+        nativeDrawOnscreen(nativeId, sharedRecorder, onSize);
       }, sharedValues);
     }
   }
 }
 
-export const createContainer = (Skia: Skia, nativeId: number) => {
+export const createContainer = (
+  Skia: Skia,
+  nativeId: number,
+  onSize?: SharedValue<SkSize>
+) => {
   const web = global.SkiaViewApi && global.SkiaViewApi.web;
   if (HAS_REANIMATED_3 && nativeId !== -1) {
     if (!web) {
-      return new NativeReanimatedContainer(Skia, nativeId);
+      return new NativeReanimatedContainer(Skia, nativeId, onSize);
     } else {
-      return new ReanimatedContainer(Skia, nativeId);
+      return new ReanimatedContainer(Skia, nativeId, onSize);
     }
   } else {
     return new StaticContainer(Skia, nativeId);

package/src/sksg/Reconciler.ts

@@ -1,13 +1,15 @@
 import type { ReactNode } from "react";
 import type { OpaqueRoot } from "react-reconciler";
+import type { SharedValue } from "react-native-reanimated";
 import ReactReconciler from "react-reconciler";
 
-import type { SkCanvas, Skia } from "../skia/types";
+import type { SkCanvas, Skia, SkSize } from "../skia/types";
 import { NodeType } from "../dom/types";
 
 import { debug, sksgHostConfig } from "./HostConfig";
 import type { Container } from "./Container";
 import { createContainer } from "./Container";
+
 import "./Elements";
 
 const skiaReconciler = ReactReconciler(sksgHostConfig);
@@ -22,8 +24,8 @@ export class SkiaSGRoot {
   private root: OpaqueRoot;
   private container: Container;
 
-  constructor(public Skia: Skia, nativeId = -1) {
-    this.container = createContainer(Skia, nativeId);
+  constructor(public Skia: Skia, nativeId = -1, onSize?: SharedValue<SkSize>) {
+    this.container = createContainer(Skia, nativeId, onSize);
     this.root = skiaReconciler.createContainer(
       this.container,
       0,

package/src/sksg/Recorder/Player.ts

@@ -67,14 +67,14 @@ function play(ctx: DrawingContext, _command: Command) {
     if (command.props.paint) {
       ctx.paints.push(command.props.paint);
     } else {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const { standalone } = command as any;
       ctx.savePaint();
-      setPaintProperties(
-        ctx.Skia,
-        ctx,
-        command.props,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (command as any).standalone
-      );
+      if (standalone) {
+        const freshPaint = ctx.Skia.Paint();
+        ctx.paint.assign(freshPaint);
+      }
+      setPaintProperties(ctx.Skia, ctx, command.props, standalone);
     }
   } else if (isCommand(command, CommandType.RestorePaint)) {
     ctx.restorePaint();

package/src/sksg/Recorder/commands/ImageFilters.ts

@@ -177,13 +177,10 @@ const declareRuntimeShaderImageFilter = (
   ctx.imageFilters.push(imgf);
 };
 
-const declareImageFilter = (
-  ctx: DrawingContext,
-  props: ImageFilterProps
-) => {
+const declareImageFilter = (ctx: DrawingContext, props: ImageFilterProps) => {
   "worklet";
-  const { imageFilter } = props;
-  ctx.imageFilters.push(imageFilter);
+  const { filter } = props;
+  ctx.imageFilters.push(filter);
 };
 
 export const composeImageFilters = (ctx: DrawingContext) => {

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -4,6 +4,7 @@ import type { ViewProps } from "react-native";
 export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
+  colorSpace?: string;
 }
 
 // eslint-disable-next-line import/no-default-export

package/src/views/types.ts

@@ -15,6 +15,7 @@ export interface ISkiaViewApi {
   requestRedraw: (nativeId: number) => void;
   makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
   makeImageSnapshotAsync: (nativeId: number, rect?: SkRect) => Promise<SkImage>;
+  size: (nativeId: number) => SkSize;
 }
 
 export interface SkiaBaseViewProps extends ViewProps {