@shopify/react-native-skia 0.1.233 → 0.1.236

package/src/skia/web/JsiSkPath.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit, Path } from "canvaskit-wasm";
+import type { CanvasKit, Matrix3x3, Path } from "canvaskit-wasm";
 
 import { PathVerb } from "../types";
 import type {
@@ -11,6 +11,7 @@ import type {
   SkRect,
   InputRRect,
   StrokeOpts,
+  InputMatrix,
 } from "../types";
 
 import { getEnum, HostObject, optEnum } from "./Host";
@@ -339,8 +340,27 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     return result === null ? result : this;
   }
 
-  transform(m3: SkMatrix) {
-    this.ref.transform(Array.isArray(m3) ? m3 : JsiSkMatrix.fromValue(m3));
+  transform(m: InputMatrix) {
+    let matrix =
+      m instanceof JsiSkMatrix
+        ? Array.from(JsiSkMatrix.fromValue<Matrix3x3>(m))
+        : (m as Exclude<InputMatrix, SkMatrix>);
+    if (matrix.length === 16) {
+      matrix = [
+        matrix[0],
+        matrix[1],
+        matrix[3],
+        matrix[4],
+        matrix[5],
+        matrix[7],
+        matrix[12],
+        matrix[13],
+        matrix[15],
+      ];
+    } else if (matrix.length !== 9) {
+      throw new Error(`Invalid matrix length: ${matrix.length}`);
+    }
+    this.ref.transform(matrix);
     return this;
   }
 

package/src/views/SkiaJSDomView.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 SkiaJSDomView 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.");
+  }
+};

package/src/views/SkiaJSDomView.web.tsx

@@ -0,0 +1 @@
+export { SkiaDomView as SkiaJSDomView } from "./SkiaDomView";

package/android/cpp/jni/include/JniSkiaDrawView.h

@@ -1,90 +0,0 @@
-#pragma once
-
-#include <memory>
-#include <string>
-
-#include <fbjni/fbjni.h>
-#include <jni.h>
-#include <jsi/jsi.h>
-
-#include <JniSkiaBaseView.h>
-#include <JniSkiaManager.h>
-#include <RNSkAndroidView.h>
-#include <RNSkJsView.h>
-
-#include <android/native_window.h>
-#include <android/native_window_jni.h>
-#include <fbjni/detail/Hybrid.h>
-
-namespace RNSkia {
-namespace jsi = facebook::jsi;
-namespace jni = facebook::jni;
-
-class JniSkiaDrawView : public jni::HybridClass<JniSkiaDrawView>,
-                        public JniSkiaBaseView {
-public:
-  static auto constexpr kJavaDescriptor =
-      "Lcom/shopify/reactnative/skia/SkiaDrawView;";
-
-  static jni::local_ref<jhybriddata>
-  initHybrid(jni::alias_ref<jhybridobject> jThis,
-             jni::alias_ref<JniSkiaManager::javaobject> skiaManager) {
-    return makeCxxInstance(jThis, skiaManager);
-  }
-
-  static void 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),
-         makeNativeMethod("registerView", JniSkiaDrawView::registerView),
-         makeNativeMethod("unregisterView", JniSkiaDrawView::unregisterView)});
-  }
-
-protected:
-  void updateTouchPoints(jni::JArrayDouble touches) override {
-    JniSkiaBaseView::updateTouchPoints(touches);
-  }
-
-  void surfaceAvailable(jobject surface, int width, int height) override {
-    JniSkiaBaseView::surfaceAvailable(surface, width, height);
-  }
-
-  void surfaceSizeChanged(int width, int height) override {
-    JniSkiaBaseView::surfaceSizeChanged(width, height);
-  }
-
-  void surfaceDestroyed() override { JniSkiaBaseView::surfaceDestroyed(); }
-
-  void setMode(std::string mode) override { JniSkiaBaseView::setMode(mode); }
-
-  void setDebugMode(bool show) override { JniSkiaBaseView::setDebugMode(show); }
-
-  void registerView(int nativeId) override {
-    JniSkiaBaseView::registerView(nativeId);
-  }
-
-  void unregisterView() override { JniSkiaBaseView::unregisterView(); }
-
-private:
-  friend HybridBase;
-
-  explicit JniSkiaDrawView(
-      jni::alias_ref<jhybridobject> jThis,
-      jni::alias_ref<JniSkiaManager::javaobject> skiaManager)
-      : JniSkiaBaseView(skiaManager,
-                        std::make_shared<RNSkAndroidView<RNSkia::RNSkJsView>>(
-                            skiaManager->cthis()->getPlatformContext())) {}
-
-  jni::global_ref<javaobject> javaPart_;
-};
-
-} // namespace RNSkia

package/cpp/rnskia/RNSkJsView.cpp

@@ -1,236 +0,0 @@
-#include <utility>
-
-#include "RNSkJsView.h"
-
-namespace RNSkia {
-
-RNSkJsRenderer::RNSkJsRenderer(std::function<void()> requestRedraw,
-                               std::shared_ptr<RNSkPlatformContext> context)
-    : RNSkRenderer(requestRedraw),
-      _jsiCanvas(std::make_shared<JsiSkCanvas>(context)),
-      _platformContext(context),
-      _infoObject(std::make_shared<RNSkInfoObject>()),
-      _jsDrawingLock(std::make_shared<std::timed_mutex>()),
-      _gpuDrawingLock(std::make_shared<std::timed_mutex>()),
-      _jsTimingInfo("SKIA/JS"), _gpuTimingInfo("SKIA/GPU") {}
-
-bool RNSkJsRenderer::tryRender(
-    std::shared_ptr<RNSkCanvasProvider> canvasProvider) {
-  // We render on the javascript thread.
-  if (_jsDrawingLock->try_lock()) {
-    _platformContext->runOnJavascriptThread(
-        [weakSelf = weak_from_this(), canvasProvider]() {
-          auto self = weakSelf.lock();
-          if (self) {
-            self->performDraw(canvasProvider);
-          }
-        });
-    return true;
-  } else {
-#ifdef DEBUG
-    _jsTimingInfo.markSkipped();
-#endif
-    return false;
-  }
-}
-
-void RNSkJsRenderer::renderImmediate(
-    std::shared_ptr<RNSkCanvasProvider> canvasProvider) {
-  // Get start time to be able to calculate animations etc.
-  std::chrono::milliseconds ms =
-      std::chrono::duration_cast<std::chrono::milliseconds>(
-          std::chrono::system_clock::now().time_since_epoch());
-
-  std::condition_variable cv;
-  std::mutex m;
-  std::unique_lock<std::mutex> lock(m);
-
-  // We need to render on the javascript thread but block
-  // until we're done rendering. Render immediate is used
-  // to make images from the canvas.
-  _platformContext->runOnJavascriptThread([canvasProvider, ms, &cv, &m,
-                                           weakSelf = weak_from_this()]() {
-    // Lock
-    std::unique_lock<std::mutex> lock(m);
-
-    auto self = weakSelf.lock();
-    if (self) {
-      canvasProvider->renderToCanvas([self, ms,
-                                      canvasProvider](SkCanvas *canvas) {
-        // Create jsi canvas
-        auto jsiCanvas = std::make_shared<JsiSkCanvas>(self->_platformContext);
-        jsiCanvas->setCanvas(canvas);
-
-        self->drawInJsiCanvas(
-            std::move(jsiCanvas), canvasProvider->getScaledWidth(),
-            canvasProvider->getScaledHeight(), ms.count() / 1000);
-      });
-    }
-
-    cv.notify_one();
-  });
-
-  cv.wait(lock);
-}
-
-void RNSkJsRenderer::setDrawCallback(
-    std::shared_ptr<jsi::Function> drawCallback) {
-  _drawCallback = drawCallback;
-}
-
-std::shared_ptr<RNSkInfoObject> RNSkJsRenderer::getInfoObject() {
-  return _infoObject;
-}
-
-void RNSkJsRenderer::performDraw(
-    std::shared_ptr<RNSkCanvasProvider> canvasProvider) {
-  // Start timing
-  _jsTimingInfo.beginTiming();
-
-  // Record the drawing operations on the JS thread so that we can
-  // move the actual drawing onto the render thread later
-  SkPictureRecorder recorder;
-  SkRTreeFactory factory;
-  SkCanvas *canvas =
-      recorder.beginRecording(canvasProvider->getScaledWidth(),
-                              canvasProvider->getScaledHeight(), &factory);
-
-  _jsiCanvas->setCanvas(canvas);
-
-  // Get current milliseconds
-  std::chrono::milliseconds ms =
-      std::chrono::duration_cast<std::chrono::milliseconds>(
-          std::chrono::system_clock::now().time_since_epoch());
-
-  try {
-    // Perform the javascript drawing
-    drawInJsiCanvas(_jsiCanvas, canvasProvider->getScaledWidth(),
-                    canvasProvider->getScaledHeight(), ms.count() / 1000.0);
-
-  } catch (...) {
-    _jsTimingInfo.stopTiming();
-    _jsDrawingLock->unlock();
-    throw;
-  }
-
-  // Finish drawing operations
-  auto p = recorder.finishRecordingAsPicture();
-
-  _jsiCanvas->setCanvas(nullptr);
-
-  // Calculate duration
-  _jsTimingInfo.stopTiming();
-
-  if (_gpuDrawingLock->try_lock()) {
-
-    // Post drawing message to the main thread where the picture recorded
-    // will be sent to the GPU/backend for rendering to screen.
-    // TODO: Which thread should we render on? I think it should be main thread!
-    auto gpuLock = _gpuDrawingLock;
-    _platformContext->runOnMainThread([weakSelf = weak_from_this(),
-                                       p = std::move(p), gpuLock,
-                                       canvasProvider]() {
-      auto self = weakSelf.lock();
-      if (self) {
-        // Draw the picture recorded on the real GPU canvas
-        self->_gpuTimingInfo.beginTiming();
-
-        canvasProvider->renderToCanvas(
-            [p = std::move(p)](SkCanvas *canvas) { canvas->drawPicture(p); });
-
-        self->_gpuTimingInfo.stopTiming();
-      }
-      // Unlock GPU drawing
-      gpuLock->unlock();
-    });
-  } else {
-#ifdef DEBUG
-    _gpuTimingInfo.markSkipped();
-#endif
-    // Request a new redraw since the last frame was skipped.
-    _requestRedraw();
-  }
-
-  // Unlock JS drawing
-  _jsDrawingLock->unlock();
-}
-
-void RNSkJsRenderer::callJsDrawCallback(std::shared_ptr<JsiSkCanvas> jsiCanvas,
-                                        int width, int height,
-                                        double timestamp) {
-
-  if (_drawCallback == nullptr) {
-    return;
-  }
-
-  // Reset timing info
-  _jsTimingInfo.reset();
-  _gpuTimingInfo.reset();
-
-  auto runtime = _platformContext->getJsRuntime();
-
-  // Update info parameter
-  _infoObject->beginDrawOperation(width, height, timestamp);
-
-  // Set up arguments array
-  std::vector<jsi::Value> args(2);
-  args[0] = jsi::Object::createFromHostObject(*runtime, jsiCanvas);
-  args[1] = jsi::Object::createFromHostObject(*runtime, _infoObject);
-
-  // To be able to call the drawing function we'll wrap it once again
-  _drawCallback->call(*runtime, static_cast<const jsi::Value *>(args.data()),
-                      static_cast<size_t>(2));
-
-  // Reset touches
-  _infoObject->endDrawOperation();
-
-  // Draw debug overlays
-  if (getShowDebugOverlays()) {
-
-    // Display average rendering timer
-    auto jsAvg = _jsTimingInfo.getAverage();
-    // auto jsFps = _jsTimingInfo.getFps();
-
-    auto gpuAvg = _gpuTimingInfo.getAverage();
-    // auto gpuFps = _gpuTimingInfo.getFps();
-
-    auto total = jsAvg + gpuAvg;
-
-    // Build string
-    std::ostringstream stream;
-    stream << "js: " << jsAvg << "ms gpu: " << gpuAvg << "ms "
-           << " total: " << total << "ms";
-
-    std::string debugString = stream.str();
-
-    // Set up debug font/paints
-    auto font = SkFont();
-    font.setSize(14);
-    auto paint = SkPaint();
-    paint.setColor(SkColors::kRed);
-    jsiCanvas->getCanvas()->drawSimpleText(
-        debugString.c_str(), debugString.size(), SkTextEncoding::kUTF8, 8, 18,
-        font, paint);
-  }
-}
-
-void RNSkJsRenderer::drawInJsiCanvas(std::shared_ptr<JsiSkCanvas> jsiCanvas,
-                                     int width, int height, double time) {
-
-  // Call the draw drawCallback and perform js based drawing
-  auto skCanvas = jsiCanvas->getCanvas();
-  if (_drawCallback != nullptr && skCanvas != nullptr) {
-    // Make sure to scale correctly
-    auto pd = _platformContext->getPixelDensity();
-    skCanvas->clear(SK_ColorTRANSPARENT);
-    skCanvas->save();
-    skCanvas->scale(pd, pd);
-
-    // Call draw function.
-    callJsDrawCallback(jsiCanvas, width / pd, height / pd, time);
-
-    skCanvas->restore();
-  }
-}
-
-} // namespace RNSkia

package/cpp/rnskia/RNSkJsView.h

@@ -1,121 +0,0 @@
-#pragma once
-
-#include <functional>
-#include <memory>
-#include <mutex>
-#include <string>
-#include <unordered_map>
-#include <vector>
-
-#include <jsi/jsi.h>
-
-#include "JsiValueWrapper.h"
-#include "RNSkView.h"
-
-#include "JsiSkCanvas.h"
-#include "RNSkInfoParameter.h"
-#include "RNSkLog.h"
-#include "RNSkPlatformContext.h"
-#include "RNSkTimingInfo.h"
-
-#pragma clang diagnostic push
-#pragma clang diagnostic ignored "-Wdocumentation"
-
-#include "SkBBHFactory.h"
-#include "SkCanvas.h"
-#include "SkPictureRecorder.h"
-
-#pragma clang diagnostic pop
-
-class SkPicture;
-class SkRect;
-class SkImage;
-
-namespace RNSkia {
-class JsiSkCanvas;
-namespace jsi = facebook::jsi;
-
-class RNSkJsRenderer : public RNSkRenderer,
-                       public std::enable_shared_from_this<RNSkJsRenderer> {
-public:
-  RNSkJsRenderer(std::function<void()> requestRedraw,
-                 std::shared_ptr<RNSkPlatformContext> context);
-
-  bool tryRender(std::shared_ptr<RNSkCanvasProvider> canvasProvider) override;
-
-  void
-  renderImmediate(std::shared_ptr<RNSkCanvasProvider> canvasProvider) override;
-
-  void setDrawCallback(std::shared_ptr<jsi::Function> drawCallback);
-
-  std::shared_ptr<RNSkInfoObject> getInfoObject();
-
-private:
-  void performDraw(std::shared_ptr<RNSkCanvasProvider> canvasProvider);
-
-  void callJsDrawCallback(std::shared_ptr<JsiSkCanvas> jsiCanvas, int width,
-                          int height, double timestamp);
-
-  void drawInJsiCanvas(std::shared_ptr<JsiSkCanvas> jsiCanvas, int width,
-                       int height, double time);
-
-  std::shared_ptr<RNSkPlatformContext> _platformContext;
-  std::shared_ptr<jsi::Function> _drawCallback;
-  std::shared_ptr<JsiSkCanvas> _jsiCanvas;
-  std::shared_ptr<std::timed_mutex> _jsDrawingLock;
-  std::shared_ptr<std::timed_mutex> _gpuDrawingLock;
-  std::shared_ptr<RNSkInfoObject> _infoObject;
-  RNSkTimingInfo _jsTimingInfo;
-  RNSkTimingInfo _gpuTimingInfo;
-};
-
-class RNSkJsView : public RNSkView {
-public:
-  /**
-   * Constructor
-   */
-  RNSkJsView(std::shared_ptr<RNSkPlatformContext> context,
-             std::shared_ptr<RNSkCanvasProvider> canvasProvider)
-      : RNSkView(context, canvasProvider,
-                 std::make_shared<RNSkJsRenderer>(
-                     std::bind(&RNSkJsView::requestRedraw, this), context)) {}
-
-  void updateTouchState(std::vector<RNSkTouchInfo> &touches) override {
-    std::static_pointer_cast<RNSkJsRenderer>(getRenderer())
-        ->getInfoObject()
-        ->updateTouches(touches);
-    RNSkView::updateTouchState(touches);
-  }
-
-  void setJsiProperties(
-      std::unordered_map<std::string, RNJsi::JsiValueWrapper> &props) override {
-
-    RNSkView::setJsiProperties(props);
-
-    for (auto &prop : props) {
-      if (prop.first == "drawCallback") {
-        if (prop.second.isUndefinedOrNull()) {
-          // Clear drawcallback
-          std::static_pointer_cast<RNSkJsRenderer>(getRenderer())
-              ->setDrawCallback(nullptr);
-          requestRedraw();
-          continue;
-
-        } else if (prop.second.getType() !=
-                   RNJsi::JsiWrapperValueType::Function) {
-          // We expect a function for the draw callback custom property
-          throw std::runtime_error(
-              "Expected a function for the drawCallback custom property.");
-        }
-
-        // Save callback
-        std::static_pointer_cast<RNSkJsRenderer>(getRenderer())
-            ->setDrawCallback(prop.second.getAsFunction());
-
-        // Request redraw
-        requestRedraw();
-      }
-    }
-  }
-};
-} // namespace RNSkia