Merge pull request #2138 from Shopify/sg

Fix regression with shouldUseJSDomOnNative=true

Author: wcandillon

package/src/renderer/Canvas.tsx

@@ -15,9 +15,10 @@ import type {
 import type { LayoutChangeEvent } from "react-native";
 
 import { SkiaDomView } from "../views";
-import { SkiaDomView as SkiaDomViewWeb } from "../views/SkiaDomView.web";
 import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
+import { SkiaDomView2 } from "../views/SkiaDomView2";
+import { Platform } from "../Platform";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
@@ -90,7 +91,7 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       };
     }, [root]);
 
-    if (NATIVE_DOM) {
+    if (NATIVE_DOM || Platform.OS === "web") {
       return (
         <SkiaDomView
           ref={ref}
@@ -105,7 +106,8 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       );
     } else {
       return (
-        <SkiaDomViewWeb
+        <SkiaDomView2
+          Skia={Skia}
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           ref={ref as any}
           style={style}

package/src/views/SkiaDomView2.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import type { HostComponent } from "react-native";
+
+import type { Skia, SkRect } from "../skia/types";
+import { Platform } from "../Platform";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import { JsiDrawingContext } from "../dom/types";
+
+import { SkiaViewApi } from "./api";
+import type { SkiaPictureViewProps, SkiaDomViewProps } from "./types";
+import { SkiaViewNativeId } from "./SkiaViewNativeId";
+
+const NativeSkiaPictureView: HostComponent<SkiaPictureViewProps> =
+  Platform.OS !== "web"
+    ? SkiaPictureViewNativeComponent
+    : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (null as any);
+
+export class SkiaDomView2 extends React.Component<
+  SkiaDomViewProps & { Skia: Skia }
+> {
+  constructor(props: SkiaDomViewProps & { Skia: Skia }) {
+    super(props);
+    this._nativeId = SkiaViewNativeId.current++;
+    const { root, onTouch, onSize } = props;
+    if (root) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
+    }
+    if (onTouch) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+    if (onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+
+  private _nativeId: number;
+
+  public get nativeId() {
+    return this._nativeId;
+  }
+
+  componentDidUpdate(prevProps: SkiaDomViewProps & { Skia: Skia }) {
+    const { root, onTouch, onSize } = this.props;
+    if (root !== prevProps.root && root !== undefined) {
+      assertSkiaViewApi();
+      this.draw();
+    }
+    if (onTouch !== prevProps.onTouch) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+    if (onSize !== prevProps.onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+  public makeImageSnapshot(rect?: SkRect) {
+    assertSkiaViewApi();
+    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
+  }
+
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+  public redraw() {
+    assertSkiaViewApi();
+    this.draw();
+    //SkiaViewApi.requestRedraw(this._nativeId);
+  }
+
+  private draw() {
+    const { root, Skia } = this.props;
+    if (root !== undefined) {
+      assertSkiaViewApi();
+      const rec = Skia.PictureRecorder();
+      const canvas = rec.beginRecording();
+      const ctx = new JsiDrawingContext(Skia, canvas);
+      root.render(ctx);
+      const picture = rec.finishRecordingAsPicture();
+      SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
+    }
+  }
+
+  /**
+   * Clear up the dom node when unmounting to release resources.
+   */
+  componentWillUnmount(): void {
+    assertSkiaViewApi();
+    SkiaViewApi.setJsiProperty(this._nativeId, "picture", null);
+  }
+
+  render() {
+    const { mode, debug = false, ...viewProps } = this.props;
+    return (
+      <NativeSkiaPictureView
+        collapsable={false}
+        nativeID={`${this._nativeId}`}
+        mode={mode}
+        debug={debug}
+        {...viewProps}
+      />
+    );
+  }
+}
+
+const assertSkiaViewApi = () => {
+  if (
+    SkiaViewApi === null ||
+    SkiaViewApi.setJsiProperty === null ||
+    SkiaViewApi.callJsiMethod === null ||
+    SkiaViewApi.requestRedraw === null ||
+    SkiaViewApi.makeImageSnapshot === null
+  ) {
+    throw Error("Skia View Api was not found.");
+  }
+};