@shopify/react-native-skia 0.1.151 → 0.1.153

package/android/src/main/java/com/shopify/reactnative/skia/SkiaPictureViewManager.java

@@ -0,0 +1,64 @@
+package com.shopify.reactnative.skia;
+
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.uimanager.BaseViewManager;
+import com.facebook.react.uimanager.LayoutShadowNode;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import java.util.HashMap;
+
+public class SkiaPictureViewManager extends BaseViewManager<SkiaPictureView, LayoutShadowNode> {
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "SkiaPictureView";
+    }
+
+    @Override
+    public LayoutShadowNode createShadowNodeInstance() {
+        return new LayoutShadowNode();
+    }
+
+    @Override
+    public Class<? extends LayoutShadowNode> getShadowNodeClass() {
+        return LayoutShadowNode.class;
+    }
+
+    @Override
+    public void updateExtraData(SkiaPictureView root, Object extraData) {
+    }
+
+    @Override
+    public void setNativeId(@NonNull SkiaPictureView view, @Nullable String nativeId) {
+        super.setNativeId(view, nativeId);
+        int nativeIdResolved = Integer.parseInt(nativeId);
+        view.registerView(nativeIdResolved);
+    }
+
+    @ReactProp(name = "mode")
+    public void setMode(SkiaPictureView view, String mode) {
+        view.setMode(mode);
+    }
+
+    @ReactProp(name = "debug")
+    public void setDebug(SkiaPictureView view, boolean show) {
+        view.setDebugMode(show);
+    }
+
+    @Override
+    public void onDropViewInstance(@NonNull SkiaPictureView view) {
+        super.onDropViewInstance(view);
+        view.unregisterView();
+    }
+
+    @NonNull
+    @Override
+    protected SkiaPictureView createViewInstance(@NonNull ThemedReactContext reactContext) {
+        return new SkiaPictureView(reactContext);
+    }
+}

package/cpp/jsi/JsiValueWrapper.h

@@ -18,6 +18,7 @@ enum JsiWrapperValueType
     Object,
     Function,
     Array,
+    HostObject,
     Unknown
 };
 
@@ -64,6 +65,10 @@ public:
         _type = JsiWrapperValueType::Array;
         _arrayValue = std::make_shared<jsi::Array>(_objectValue->asArray(runtime));
         _objectValue = nullptr;
+      } else if (_objectValue->isHostObject(runtime)) {
+        _type = JsiWrapperValueType::HostObject;
+        _hostObjectValue = _objectValue->asHostObject(runtime);
+        _objectValue = nullptr;
       }
     } else {
       throw std::runtime_error("Could not store jsi::Value of provided type");
@@ -110,6 +115,11 @@ public:
     return _objectValue;
   }
   
+  std::shared_ptr<jsi::HostObject> getAsHostObject() {
+    assert(_type == JsiWrapperValueType::HostObject);
+    return _hostObjectValue;
+  }
+  
   JsiWrapperValueType getType() { return _type; }
 
 private:
@@ -121,6 +131,7 @@ private:
     std::shared_ptr<jsi::Object> _objectValue;
     std::shared_ptr<jsi::Function> _functionValue;
     std::shared_ptr<jsi::Array> _arrayValue;
+    std::shared_ptr<jsi::HostObject> _hostObjectValue;
 
     JsiWrapperValueType _type;
 };

package/cpp/rnskia/RNSkInfoParameter.h

@@ -9,6 +9,7 @@
 #include <jsi/jsi.h>
 
 #include <JsiHostObject.h>
+#include <RNSkView.h>
 
 namespace RNSkia {
 
@@ -16,17 +17,6 @@ using namespace facebook;
 using namespace RNJsi;
 using namespace std::chrono;
 
-enum RNSkTouchType { Start, Active, End, Cancelled };
-
-using RNSkTouchPoint = struct {
-  double x;
-  double y;
-  double force;
-  RNSkTouchType type;
-  size_t id;
-  long timestamp;
-};
-
 class RNSkInfoObject : public JsiHostObject {
 public:
   JSI_PROPERTY_GET(width) { return _width; }
@@ -77,7 +67,7 @@ public:
 
   void endDrawOperation() { _touchesCache.clear(); }
 
-  void updateTouches(std::vector<RNSkTouchPoint>&& touches) {
+  void updateTouches(std::vector<RNSkTouchInfo>& touches) {
     std::lock_guard<std::mutex> lock(_mutex);
     // Add timestamp
     auto ms = std::chrono::duration_cast<milliseconds>(
@@ -95,8 +85,8 @@ private:
   int _width;
   int _height;
   double _timestamp;
-  std::vector<std::vector<RNSkTouchPoint>> _currentTouches;
-  std::vector<std::vector<RNSkTouchPoint>> _touchesCache;
+  std::vector<std::vector<RNSkTouchInfo>> _currentTouches;
+  std::vector<std::vector<RNSkTouchInfo>> _touchesCache;
   std::mutex _mutex;
 };
 } // namespace RNSkia

package/cpp/rnskia/RNSkJsView.cpp

@@ -0,0 +1,211 @@
+#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(std::move(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) {
+  milliseconds ms = duration_cast<milliseconds>(system_clock::now().time_since_epoch());
+  canvasProvider->renderToCanvas([&](SkCanvas* canvas) {
+    // Create jsi canvas
+    auto jsiCanvas = std::make_shared<JsiSkCanvas>(_platformContext);
+    jsiCanvas->setCanvas(canvas);
+    
+    drawInJsiCanvas(std::move(jsiCanvas),
+                    canvasProvider->getScaledWidth(),
+                    canvasProvider->getScaledHeight(),
+                    ms.count() / 1000);
+  });
+};
+
+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
+  milliseconds ms = duration_cast<milliseconds>(
+          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 render thread where the picture recorded
+    // will be sent to the GPU/backend for rendering to screen.
+    auto gpuLock = _gpuDrawingLock;
+    _platformContext->runOnRenderThread([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()),
+                      (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->save();
+    skCanvas->scale(pd, pd);
+    
+    // Call draw function.
+    callJsDrawCallback(jsiCanvas, width / pd, height / pd, time);
+    
+    // Restore and flush canvas
+    skCanvas->restore();
+    skCanvas->flush();
+  }
+}
+
+} // Namespace RNSkia

package/cpp/rnskia/RNSkJsView.h

@@ -0,0 +1,115 @@
+#pragma once
+
+#include <functional>
+#include <memory>
+#include <mutex>
+#include <vector>
+#include <string>
+
+#include <jsi/jsi.h>
+
+#include <JsiValueWrapper.h>
+#include <RNSkView.h>
+
+#include <RNSkInfoParameter.h>
+#include <RNSkPlatformContext.h>
+#include <RNSkTimingInfo.h>
+#include <RNSkLog.h>
+#include <JsiSkCanvas.h>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include <SkCanvas.h>
+#include <SkBBHFactory.h>
+#include <SkPictureRecorder.h>
+
+#pragma clang diagnostic pop
+
+class SkPicture;
+class SkRect;
+class SkImage;
+
+namespace RNSkia {
+class JsiSkCanvas;
+using namespace facebook;
+
+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, JsiValueWrapper> &props) override {
+    for(auto& prop: props) {
+      if(prop.first == "drawCallback") {
+        if(prop.second.isUndefinedOrNull()) {
+          // Clear drawcallback
+          std::static_pointer_cast<RNSkJsRenderer>(getRenderer())->setDrawCallback(nullptr);
+          return;
+        } else if (prop.second.getType() != 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();
+
+      } else {
+        RNSkView::setJsiProperties(props);
+      }
+    }
+  }
+};
+} // namespace RNSkia

package/cpp/rnskia/RNSkJsiViewApi.h

@@ -8,7 +8,7 @@
 
 #include <JsiHostObject.h>
 #include <JsiValueWrapper.h>
-#include <RNSkDrawView.h>
+#include <RNSkView.h>
 #include <RNSkPlatformContext.h>
 #include <RNSkValue.h>
 #include <jsi/jsi.h>
@@ -20,7 +20,7 @@ using RNSkViewInfo = struct RNSkViewInfo {
   RNSkViewInfo() {
     view = nullptr;
   }
-  std::shared_ptr<RNSkDrawView> view;
+  std::shared_ptr<RNSkView> view;
   std::unordered_map<std::string, JsiValueWrapper> props;
 };
 
@@ -243,7 +243,7 @@ public:
     // Unregister all views
     auto tempList = _viewInfos;
     for (const auto& info : tempList) {
-      unregisterSkiaDrawView(info.first);
+      unregisterSkiaView(info.first);
     }
     std::lock_guard<std::mutex> lock(_mutex);
     _viewInfos.clear();
@@ -254,7 +254,7 @@ public:
    * @param nativeId Id of view to register
    * @param view View to register
    */
-  void registerSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view) {
+  void registerSkiaView(size_t nativeId, std::shared_ptr<RNSkView> view) {
     auto info = getEnsuredViewInfo(nativeId);
     std::lock_guard<std::mutex> lock(_mutex);
     info->view = view;
@@ -267,7 +267,7 @@ public:
    * Unregisters a Skia draw view
    * @param nativeId View id
    */
-  void unregisterSkiaDrawView(size_t nativeId) {
+  void unregisterSkiaView(size_t nativeId) {
     if (_viewInfos.count(nativeId) == 0) {
       return;
     }
@@ -284,7 +284,7 @@ public:
    removed due to ex. a transition). The view can be set to a nullptr
    or a valid view, effectively toggling the view's availability.
    */
-  void setSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view) {
+  void setSkiaView(size_t nativeId, std::shared_ptr<RNSkView> view) {
     if (_viewInfos.find(nativeId) == _viewInfos.end()) {
       return;
     }

package/cpp/rnskia/RNSkManager.cpp

@@ -7,7 +7,7 @@
 
 #include <JsiSkApi.h>
 #include <RNSkJsiViewApi.h>
-#include <RNSkDrawView.h>
+#include <RNSkView.h>
 #include <RNSkValueApi.h>
 
 namespace RNSkia {
@@ -45,19 +45,19 @@ void RNSkManager::invalidate() {
   _platformContext->invalidate();
 }
 
-void RNSkManager::registerSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view) {
+void RNSkManager::registerSkiaView(size_t nativeId, std::shared_ptr<RNSkView> view) {
   if (!_isInvalidated && _viewApi != nullptr)
-    _viewApi->registerSkiaDrawView(nativeId, view);
+    _viewApi->registerSkiaView(nativeId, view);
 }
 
-void RNSkManager::unregisterSkiaDrawView(size_t nativeId) {
+void RNSkManager::unregisterSkiaView(size_t nativeId) {
   if (!_isInvalidated && _viewApi != nullptr)
-    _viewApi->unregisterSkiaDrawView(nativeId);
+    _viewApi->unregisterSkiaView(nativeId);
 }
 
-void RNSkManager::setSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view) {
+void RNSkManager::setSkiaView(size_t nativeId, std::shared_ptr<RNSkView> view) {
   if (!_isInvalidated && _viewApi != nullptr)
-    _viewApi->setSkiaDrawView(nativeId, view);
+    _viewApi->setSkiaView(nativeId, view);
 }
 
 void RNSkManager::installBindings() {

package/cpp/rnskia/RNSkManager.h

@@ -12,7 +12,7 @@ namespace facebook {
 }
 
 namespace RNSkia {
-class RNSkDrawView;
+class RNSkView;
 class RNSkJsiViewApi;
 using namespace facebook;
 
@@ -37,24 +37,24 @@ public:
   void invalidate();
 
   /**
-   * Registers a RNSkDrawView with the given native id
+   * Registers a RNSkView with the given native id
    * @param nativeId Native view id
    * @param view View to register
    */
-  void registerSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view);
+  void registerSkiaView(size_t nativeId, std::shared_ptr<RNSkView> view);
 
   /**
-   * Unregisters the RNSkDrawView from the list of registered views
+   * Unregisters the RNSkView from the list of registered views
    * @param nativeId Native view Id
    */
-  void unregisterSkiaDrawView(size_t nativeId);
+  void unregisterSkiaView(size_t nativeId);
   
   /**
    Sets the view pointed to by nativeId to the provided value.
    Used when we want to remove a view without unregistering it
    - this happens typically on iOS.
    */
-  void setSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view);
+  void setSkiaView(size_t nativeId, std::shared_ptr<RNSkView> view);
 
   /**
    * @return The platform context
@@ -66,7 +66,7 @@ public:
 private:
   /**
    * Installs the javascript methods for registering/unregistering draw
-   * callbacks for RNSkDrawViews. Called on installation of the parent native
+   * callbacks for RNSkViews. Called on installation of the parent native
    * module.
    */
   void installBindings();