@shopify/react-native-skia 0.1.151 → 0.1.152

package/src/views/SkiaBaseWebView.tsx

@@ -0,0 +1,177 @@
+/* global HTMLCanvasElement */
+import React from "react";
+import type { PointerEvent } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import { PixelRatio, View } from "react-native";
+
+import type { SkRect, SkCanvas } from "../skia/types";
+import type { SkiaValue } from "../values";
+import { JsiSkSurface } from "../skia/web/JsiSkSurface";
+
+import type { DrawMode, SkiaBaseViewProps, TouchInfo } from "./types";
+import { TouchType } from "./types";
+
+const pd = PixelRatio.get();
+
+export abstract class SkiaBaseWebView<
+  TProps extends SkiaBaseViewProps
+> extends React.Component<TProps> {
+  constructor(props: TProps) {
+    super(props);
+    this._mode = props.mode ?? "default";
+  }
+
+  private _surface: JsiSkSurface | null = null;
+  private _unsubscriptions: Array<() => void> = [];
+  private _touches: Array<TouchInfo> = [];
+  private _canvas: SkCanvas | null = null;
+  private _canvasRef = React.createRef<HTMLCanvasElement>();
+  private _mode: DrawMode;
+  private _redrawRequests = 0;
+  private requestId = 0;
+
+  protected width = 0;
+  protected height = 0;
+
+  private unsubscribeAll() {
+    this._unsubscriptions.forEach((u) => u());
+    this._unsubscriptions = [];
+  }
+
+  private onLayout(evt: LayoutChangeEvent) {
+    const { CanvasKit } = global;
+    const { width, height } = evt.nativeEvent.layout;
+    this.width = width;
+    this.height = height;
+    // Reset canvas / surface on layout change
+    if (this._canvasRef.current) {
+      const canvas = this._canvasRef.current;
+      canvas.width = canvas.clientWidth * pd;
+      canvas.height = canvas.clientHeight * pd;
+      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
+      if (!surface) {
+        throw new Error("Could not create surface");
+      }
+      this._surface = new JsiSkSurface(CanvasKit, surface);
+      this._canvas = this._surface.getCanvas();
+      this.redraw();
+    }
+  }
+
+  componentDidMount() {
+    // Start render loop
+    this.tick();
+  }
+
+  componentDidUpdate() {
+    this.redraw();
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeAll();
+    cancelAnimationFrame(this.requestId);
+  }
+
+  /**
+   * 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) {
+    return this._surface?.makeImageSnapshot(rect);
+  }
+
+  /**
+   * Override to render
+   */
+  protected abstract renderInCanvas(
+    canvas: SkCanvas,
+    touches: TouchInfo[]
+  ): void;
+
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+  private tick() {
+    if (this._mode === "continuous" || this._redrawRequests > 0) {
+      this._redrawRequests = 0;
+      if (this._canvas) {
+        const touches = [...this._touches];
+        this._touches = [];
+        this.renderInCanvas(this._canvas!, touches);
+        this._surface?.ref.flush();
+      }
+    }
+    this.requestId = requestAnimationFrame(this.tick.bind(this));
+  }
+
+  public redraw() {
+    this._redrawRequests++;
+  }
+
+  /**
+   * Updates the drawing mode for the skia view. This is the same
+   * as declaratively setting the mode property on the SkiaView.
+   * There are two drawing modes, "continuous" and "default",
+   * where the continuous mode will continuously redraw the view and
+   * the default mode will only redraw when any of the regular react
+   * properties are changed like size and margins.
+   * @param mode Drawing mode to use.
+   */
+  public setDrawMode(mode: DrawMode) {
+    this._mode = mode;
+    this.tick();
+  }
+
+  /**
+   * Registers one or move values as a dependant value of the Skia View. The view will
+   * The view will redraw itself when any of the values change.
+   * @param values Values to register
+   */
+  public registerValues(_values: SkiaValue<unknown>[]) {
+    // Unsubscribe from dependency values
+    this.unsubscribeAll();
+    // Register redraw dependencies on values
+    _values.forEach((v) => {
+      this._unsubscriptions.push(
+        v.addListener(() => {
+          this.redraw();
+        })
+      );
+    });
+  }
+
+  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {
+    this._touches.push({
+      id: evt.pointerId,
+      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,
+      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,
+      force: evt.pressure,
+      type: touchType,
+      timestamp: Date.now(),
+    });
+    this.redraw();
+  }
+
+  createTouchHandler(touchType: TouchType) {
+    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);
+  }
+
+  render() {
+    const { mode, debug = false, ...viewProps } = this.props;
+    return (
+      <View {...viewProps} onLayout={this.onLayout.bind(this)}>
+        <canvas
+          ref={this._canvasRef}
+          style={{ display: "flex", flex: 1 }}
+          onPointerDown={this.createTouchHandler(TouchType.Start)}
+          onPointerMove={this.createTouchHandler(TouchType.Active)}
+          onPointerUp={this.createTouchHandler(TouchType.End)}
+          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}
+          onPointerLeave={this.createTouchHandler(TouchType.End)}
+          onPointerOut={this.createTouchHandler(TouchType.End)}
+        />
+      </View>
+    );
+  }
+}

package/src/views/SkiaPictureView.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { requireNativeComponent } from "react-native";
+
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+
+import { SkiaViewApi } from "./api";
+import type { NativeSkiaViewProps, SkiaPictureViewProps } from "./types";
+
+let SkiaViewNativeId = 1000;
+
+const NativeSkiaPictureView =
+  requireNativeComponent<NativeSkiaViewProps>("SkiaPictureView");
+
+export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
+  constructor(props: SkiaPictureViewProps) {
+    super(props);
+    this._nativeId = SkiaViewNativeId++;
+    const { picture } = props;
+    if (picture) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
+    }
+  }
+
+  private _nativeId: number;
+
+  public get nativeId() {
+    return this._nativeId;
+  }
+
+  componentDidUpdate(prevProps: SkiaPictureViewProps) {
+    const { picture } = this.props;
+    if (picture !== prevProps.picture) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
+    }
+  }
+
+  /**
+   * 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();
+    SkiaViewApi.requestRedraw(this._nativeId);
+  }
+
+  /**
+   * Registers one or move values as a dependant value of the Skia View. The view will
+   * The view will redraw itself when any of the values change.
+   * @param values Values to register
+   */
+  public registerValues(values: SkiaValue<unknown>[]): () => void {
+    assertSkiaViewApi();
+    return SkiaViewApi.registerValuesInView(this._nativeId, values);
+  }
+
+  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.registerValuesInView === null ||
+    SkiaViewApi.requestRedraw === null ||
+    SkiaViewApi.makeImageSnapshot === null
+  ) {
+    throw Error("Skia View Api was not found.");
+  }
+};

package/src/views/SkiaPictureView.web.tsx

@@ -0,0 +1,23 @@
+import { PixelRatio } from "react-native";
+
+import type { SkCanvas } from "../skia/types";
+
+import type { SkiaPictureViewProps } from "./types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+
+const pd = PixelRatio.get();
+
+export class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {
+  constructor(props: SkiaPictureViewProps) {
+    super(props);
+  }
+
+  protected renderInCanvas(canvas: SkCanvas): void {
+    if (this.props.picture) {
+      canvas.save();
+      canvas.scale(pd, pd);
+      canvas.drawPicture(this.props.picture);
+      canvas.restore();
+    }
+  }
+}

package/src/views/SkiaView.tsx

@@ -5,16 +5,15 @@ import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 
 import { SkiaViewApi } from "./api";
-import type { NativeSkiaViewProps, SkiaViewProps } from "./types";
+import type { NativeSkiaViewProps, SkiaDrawViewProps } from "./types";
 
 let SkiaViewNativeId = 1000;
 
-const NativeSkiaView = requireNativeComponent<NativeSkiaViewProps>(
-  "ReactNativeSkiaView"
-);
+const NativeSkiaView =
+  requireNativeComponent<NativeSkiaViewProps>("SkiaDrawView");
 
-export class SkiaView extends React.Component<SkiaViewProps> {
-  constructor(props: SkiaViewProps) {
+export class SkiaView extends React.Component<SkiaDrawViewProps> {
+  constructor(props: SkiaDrawViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId++;
     const { onDraw } = props;
@@ -30,7 +29,7 @@ export class SkiaView extends React.Component<SkiaViewProps> {
     return this._nativeId;
   }
 
-  componentDidUpdate(prevProps: SkiaViewProps) {
+  componentDidUpdate(prevProps: SkiaDrawViewProps) {
     const { onDraw } = this.props;
     if (onDraw !== prevProps.onDraw) {
       assertSkiaViewApi();

package/src/views/SkiaView.web.tsx

@@ -1,178 +1,29 @@
-/* global HTMLCanvasElement */
-import React from "react";
-import type { PointerEvent } from "react";
-import type { LayoutChangeEvent } from "react-native";
-import { PixelRatio, View } from "react-native";
+import { PixelRatio } from "react-native";
 
-import type { SkRect, SkCanvas } from "../skia/types";
-import type { SkiaValue } from "../values";
-import { JsiSkSurface } from "../skia/web/JsiSkSurface";
+import type { SkCanvas } from "../skia/types";
 
-import type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from "./types";
-import { TouchType } from "./types";
+import type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from "./types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
 
 const pd = PixelRatio.get();
 
-export class SkiaView extends React.Component<SkiaViewProps> {
-  constructor(props: SkiaViewProps) {
+export class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {
+  constructor(props: SkiaDrawViewProps) {
     super(props);
-    this._mode = props.mode ?? "default";
   }
 
-  private _surface: JsiSkSurface | null = null;
-  private _unsubscriptions: Array<() => void> = [];
-  private _touches: Array<TouchInfo> = [];
-  private _canvas: SkCanvas | null = null;
-  private _canvasRef = React.createRef<HTMLCanvasElement>();
-  private _mode: DrawMode;
-  private _redrawRequests = 0;
-  private width = 0;
-  private height = 0;
-  private requestId = 0;
-
-  private unsubscribeAll() {
-    this._unsubscriptions.forEach((u) => u());
-    this._unsubscriptions = [];
-  }
-
-  private onLayout(evt: LayoutChangeEvent) {
-    const { CanvasKit } = global;
-    const { width, height } = evt.nativeEvent.layout;
-    this.width = width;
-    this.height = height;
-    // Reset canvas / surface on layout change
-    if (this._canvasRef.current) {
-      const canvas = this._canvasRef.current;
-      canvas.width = canvas.clientWidth * pd;
-      canvas.height = canvas.clientHeight * pd;
-      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
-      if (!surface) {
-        throw new Error("Could not create surface");
-      }
-      this._surface = new JsiSkSurface(CanvasKit, surface);
-      this._canvas = this._surface.getCanvas();
-      this.redraw();
-    }
-  }
-
-  componentDidMount() {
-    // Start render loop
-    this.tick();
-  }
-
-  componentDidUpdate() {
-    this.redraw();
-  }
-
-  componentWillUnmount() {
-    this.unsubscribeAll();
-    cancelAnimationFrame(this.requestId);
-  }
-
-  /**
-   * 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) {
-    return this._surface?.makeImageSnapshot(rect);
-  }
-
-  /**
-   * Sends a redraw request to the native SkiaView.
-   */
-  private tick() {
-    if (this._mode === "continuous" || this._redrawRequests > 0) {
-      this._redrawRequests = 0;
-      if (this._canvas && this.props.onDraw) {
-        const touches = [...this._touches];
-        this._touches = [];
-        const info: DrawingInfo = {
-          height: this.height,
-          width: this.width,
-          timestamp: Date.now(),
-          touches: touches.map((t) => [t]),
-        };
-        if (this.props.onDraw) {
-          const canvas = this._canvas!;
-          canvas.save();
-          canvas.scale(pd, pd);
-          this.props.onDraw(canvas, info);
-          canvas.restore();
-        }
-        this._surface?.ref.flush();
-      }
+  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {
+    if (this.props.onDraw) {
+      const info: DrawingInfo = {
+        height: this.height,
+        width: this.width,
+        timestamp: Date.now(),
+        touches: touches.map((t) => [t]),
+      };
+      canvas.save();
+      canvas.scale(pd, pd);
+      this.props.onDraw(canvas, info);
+      canvas.restore();
     }
-    this.requestId = requestAnimationFrame(this.tick.bind(this));
-  }
-
-  public redraw() {
-    this._redrawRequests++;
-  }
-
-  /**
-   * Updates the drawing mode for the skia view. This is the same
-   * as declaratively setting the mode property on the SkiaView.
-   * There are two drawing modes, "continuous" and "default",
-   * where the continuous mode will continuously redraw the view and
-   * the default mode will only redraw when any of the regular react
-   * properties are changed like size and margins.
-   * @param mode Drawing mode to use.
-   */
-  public setDrawMode(mode: DrawMode) {
-    this._mode = mode;
-    this.tick();
-  }
-
-  /**
-   * Registers one or move values as a dependant value of the Skia View. The view will
-   * The view will redraw itself when any of the values change.
-   * @param values Values to register
-   */
-  public registerValues(_values: SkiaValue<unknown>[]) {
-    // Unsubscribe from dependency values
-    this.unsubscribeAll();
-    // Register redraw dependencies on values
-    _values.forEach((v) => {
-      this._unsubscriptions.push(
-        v.addListener(() => {
-          this.redraw();
-        })
-      );
-    });
-  }
-
-  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {
-    this._touches.push({
-      id: evt.pointerId,
-      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,
-      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,
-      force: evt.pressure,
-      type: touchType,
-      timestamp: Date.now(),
-    });
-    this.redraw();
-  }
-
-  createTouchHandler(touchType: TouchType) {
-    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);
-  }
-
-  render() {
-    const { mode, debug = false, ...viewProps } = this.props;
-    return (
-      <View {...viewProps} onLayout={this.onLayout.bind(this)}>
-        <canvas
-          ref={this._canvasRef}
-          style={{ display: "flex", flex: 1 }}
-          onPointerDown={this.createTouchHandler(TouchType.Start)}
-          onPointerMove={this.createTouchHandler(TouchType.Active)}
-          onPointerUp={this.createTouchHandler(TouchType.End)}
-          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}
-          onPointerLeave={this.createTouchHandler(TouchType.End)}
-          onPointerOut={this.createTouchHandler(TouchType.End)}
-        />
-      </View>
-    );
   }
 }

package/src/views/index.ts

@@ -1,4 +1,5 @@
 export * from "./SkiaView";
+export * from "./SkiaPictureView";
 export * from "./types";
 export * from "./useDrawCallback";
 export * from "./useTouchHandler";

package/src/views/types.ts

@@ -1,6 +1,6 @@
 import type { ViewProps } from "react-native";
 
-import type { SkCanvas, SkImage, SkRect } from "../skia/types";
+import type { SkCanvas, SkImage, SkPicture, SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 
 export type DrawMode = "continuous" | "default";
@@ -72,7 +72,7 @@ export interface ISkiaViewApi {
   makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
 
-export interface SkiaViewProps extends ViewProps {
+export interface SkiaBaseViewProps extends ViewProps {
   /**
    * Sets the drawing mode for the skia view. There are two drawing
    * modes, "continuous" and "default", where the continuous mode will
@@ -86,6 +86,9 @@ export interface SkiaViewProps extends ViewProps {
    * average time it takes to render.
    */
   debug?: boolean;
+}
+
+export interface SkiaDrawViewProps extends SkiaBaseViewProps {
   /**
    * Draw callback. Will be called whenever the view is invalidated and
    * needs to redraw. This is either caused by a change in a react
@@ -95,3 +98,7 @@ export interface SkiaViewProps extends ViewProps {
    */
   onDraw?: RNSkiaDrawCallback;
 }
+
+export interface SkiaPictureViewProps extends SkiaBaseViewProps {
+  picture?: SkPicture;
+}

package/android/cpp/jni/JniSkiaDrawView.cpp

@@ -1,113 +0,0 @@
-#include "JniSkiaDrawView.h"
-#include "RNSkLog.h"
-
-#include <memory>
-#include <string>
-#include <utility>
-#include <vector>
-
-#include <GLES2/gl2.h>
-#include <EGL/eglplatform.h>
-#include <android/native_window.h>
-#include <android/native_window_jni.h>
-
-#include <SkCanvas.h>
-#include <SkImageInfo.h>
-#include <SkSurface.h>
-#include <gpu/GrDirectContext.h>
-#include <gpu/GrBackendSurface.h>
-#include <gpu/gl/GrGLInterface.h>
-#include <gpu/gl/GrGLTypes.h>
-#include <gpu/GrTypes.h>
-#include <RNSkInfoParameter.h>
-
-namespace RNSkia
-{
-    using namespace facebook;
-    using namespace jni;
-
-    using TSelf = local_ref<HybridClass<JniSkiaDrawView>::jhybriddata>;
-
-    /**** DTOR ***/
-    JniSkiaDrawView::~JniSkiaDrawView()
-    {
-    }
-
-    /**** JNI ****/
-
-    TSelf JniSkiaDrawView::initHybrid(
-            alias_ref<HybridClass::jhybridobject> jThis,
-            JavaSkiaManager skiaManager)
-    {
-        return makeCxxInstance(jThis, skiaManager);
-    }
-
-    void JniSkiaDrawView::registerNatives()
-    {
-        registerHybrid({makeNativeMethod("initHybrid", JniSkiaDrawView::initHybrid),
-                        makeNativeMethod("surfaceAvailable", JniSkiaDrawView::surfaceAvailable),
-                        makeNativeMethod("surfaceDestroyed", JniSkiaDrawView::surfaceDestroyed),
-                        makeNativeMethod("surfaceSizeChanged", JniSkiaDrawView::surfaceSizeChanged),
-                        makeNativeMethod("setMode", JniSkiaDrawView::setMode),
-                        makeNativeMethod("setDebugMode", JniSkiaDrawView::setDebugMode),
-                        makeNativeMethod("updateTouchPoints", JniSkiaDrawView::updateTouchPoints)});
-    }
-
-    void JniSkiaDrawView::setMode(std::string mode)
-    {
-        if (mode.compare("continuous") == 0)
-        {
-            _drawView->setDrawingMode(RNSkDrawingMode::Continuous);
-        }
-        else
-        {
-            _drawView->setDrawingMode(RNSkDrawingMode::Default);
-        }
-    }
-
-    void JniSkiaDrawView::setDebugMode(bool show)
-    {
-        _drawView->setShowDebugOverlays(show);
-    }
-
-    void JniSkiaDrawView::updateTouchPoints(jni::JArrayDouble touches)
-    {
-        // Create touch points
-        std::vector<RNSkia::RNSkTouchPoint> points;
-        auto pin = touches.pin();
-        auto scale = _drawView->getPixelDensity();
-        points.reserve(pin.size() / 5);
-        for (size_t i = 0; i < pin.size(); i += 5)
-        {
-            RNSkTouchPoint point;
-            point.x = pin[i] / scale;
-            point.y = pin[i + 1] / scale;
-            point.force = pin[i + 2];
-            point.type = (RNSkia::RNSkTouchType)pin[i + 3];
-            point.id = pin[i + 4];
-            points.push_back(point);
-        }
-        _drawView->updateTouchState(std::move(points));
-    }
-
-    void JniSkiaDrawView::surfaceAvailable(jobject surface, int width, int height)
-    {
-        _drawView->surfaceAvailable(ANativeWindow_fromSurface(Environment::current(), surface), width, height);
-    }
-
-    void JniSkiaDrawView::surfaceSizeChanged(int width, int height)
-    {
-        _drawView->surfaceSizeChanged(width, height);
-    }
-
-    void JniSkiaDrawView::surfaceDestroyed()
-    {
-        _drawView->surfaceDestroyed();
-    }
-
-    void JniSkiaDrawView::releaseSurface() {
-        jni::ThreadScope ts;
-        static auto method = javaPart_->getClass()->getMethod<void(void)>("releaseSurface");
-        method(javaPart_.get());
-    }
-} // namespace RNSkia