@shopify/react-native-skia 0.1.115

package/cpp/rnskia/RNSkDrawView.cpp

@@ -0,0 +1,333 @@
+//
+// Created by Christian Falch on 23/08/2021.
+//
+
+#include "RNSkDrawView.h"
+
+#include <chrono>
+#include <functional>
+#include <sstream>
+#include <string>
+#include <memory>
+#include <vector>
+#include <utility>
+
+#include <JsiSkCanvas.h>
+#include <RNSkLog.h>
+#include <RNSkPlatformContext.h>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include <SkBBHFactory.h>
+#include <SkCanvas.h>
+#include <SkFont.h>
+#include <SkFontTypes.h>
+#include <SkGraphics.h>
+#include <SkPaint.h>
+#include <SkPictureRecorder.h>
+#include <SkSurface.h>
+#include <SkRect.h>
+
+#pragma clang diagnostic pop
+
+namespace RNSkia {
+
+using namespace std::chrono;
+
+RNSkDrawView::RNSkDrawView(std::shared_ptr<RNSkPlatformContext> context)
+    : _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>())
+      {}
+
+RNSkDrawView::~RNSkDrawView() {
+#if LOG_ALL_DRAWING
+  RNSkLogger::logToConsole("RNSkDrawView::~RNSkDrawView - %i", getNativeId());
+#endif
+  
+  _isInvalidated = true;
+  
+  endDrawingLoop();
+  
+  // Wait for the drawing locks
+  if(!_jsDrawingLock->try_lock_for(1250ms)) {
+    RNSkLogger::logToConsole("Warning: JS drawing is still locked for native view with id %i", _nativeId);
+  }
+  
+  if(!_gpuDrawingLock->try_lock_for(1250ms)) {
+    RNSkLogger::logToConsole("Warning: SKIA drawing is still locked for native view with id %i", _nativeId);
+  }
+  
+  onInvalidated();
+
+  _jsDrawingLock = nullptr;
+  _gpuDrawingLock = nullptr;
+}
+
+void RNSkDrawView::setNativeId(size_t nativeId) {
+  _nativeId = nativeId;
+  beginDrawingLoop();
+}
+
+void RNSkDrawView::setDrawCallback(std::shared_ptr<jsi::Function> callback) {
+
+  if (callback == nullptr) {
+    _drawCallback = nullptr;
+    // We can just reset everything - this is a signal that we're done.
+    endDrawingLoop();
+    return;
+  }
+  
+  // Reset timing info
+  _jsTimingInfo.reset();
+  _gpuTimingInfo.reset();
+  _vsyncTimingInfo.reset();
+  
+  // Set up debug font/paints
+  auto font = SkFont();
+  font.setSize(14);
+  auto paint = SkPaint();
+  paint.setColor(SkColors::kRed);
+  
+  // Create draw drawCallback wrapper
+  _drawCallback = std::make_shared<RNSkDrawCallback>(
+      [this, paint = std::move(paint), font = std::move(font), callback = std::move(callback)](std::shared_ptr<JsiSkCanvas> canvas, int width,
+                                    int height, double timestamp,
+                                    std::shared_ptr<RNSkPlatformContext> context) {
+
+       auto runtime = context->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, canvas);
+       args[1] = jsi::Object::createFromHostObject(*runtime, _infoObject);
+
+       // To be able to call the drawing function we'll wrap it once again
+       callback->call(*runtime,
+                      static_cast<const jsi::Value *>(args.data()),
+                      (size_t)2);
+       
+       // Reset touches
+       _infoObject->endDrawOperation();
+                         
+      // Draw debug overlays
+      if (_showDebugOverlay) {
+
+        // Display average rendering timer
+        auto jsAvg = _jsTimingInfo.getAverage();
+        //auto jsFps = _jsTimingInfo.getFps();
+        
+        auto gpuAvg = _gpuTimingInfo.getAverage();
+        //auto gpuFps = _gpuTimingInfo.getFps();
+        
+        auto total = jsAvg + gpuAvg;
+        
+        //auto vsyncFps = _vsyncTimingInfo.getFps();
+                                                      
+        // Build string
+        std::ostringstream stream;
+        stream << "js: " << jsAvg << "ms gpu: " << gpuAvg << "ms " << " total: " << total << "ms";
+//        stream << "js:" << jsAvg << "ms/" << jsFps << "fps " << "gpu:" << gpuAvg << "ms/" <<
+//          gpuFps << "fps" << " total:" << total << "ms/" << vsyncFps << "fps";
+        
+        std::string debugString = stream.str();
+        
+        canvas->getCanvas()->drawSimpleText(
+         debugString.c_str(), debugString.size(), SkTextEncoding::kUTF8, 8,
+         18, font, paint);
+      }
+    });
+
+  // Request redraw
+  requestRedraw();
+}
+
+void RNSkDrawView::drawInCanvas(std::shared_ptr<JsiSkCanvas> canvas,
+                                int width,
+                                int height,
+                                double time) {
+  
+  // Call the draw drawCallback and perform js based drawing
+  auto skCanvas = canvas->getCanvas();
+  if (_drawCallback != nullptr && skCanvas != nullptr) {
+    // Make sure to scale correctly
+    auto pd = _platformContext->getPixelDensity();
+    skCanvas->save();
+    skCanvas->scale(pd, pd);
+    
+    // Call draw function.
+    (*_drawCallback)(canvas, width / pd, height / pd, time, _platformContext);
+    
+    // Restore and flush canvas
+    skCanvas->restore();
+    skCanvas->flush();
+  }
+}
+
+sk_sp<SkImage> RNSkDrawView::makeImageSnapshot(std::shared_ptr<SkRect> bounds) {
+  // Assert width/height
+  auto surface = SkSurface::MakeRasterN32Premul(getWidth(), getHeight());
+  auto canvas = surface->getCanvas();
+  auto jsiCanvas = std::make_shared<JsiSkCanvas>(_platformContext);
+  jsiCanvas->setCanvas(canvas);
+  
+  milliseconds ms = duration_cast<milliseconds>(
+      system_clock::now().time_since_epoch());
+  
+  drawInCanvas(jsiCanvas, getWidth(), getHeight(), ms.count() / 1000);
+  
+  if(bounds != nullptr) {
+    SkIRect b = SkIRect::MakeXYWH(bounds->x(), bounds->y(), bounds->width(), bounds->height());
+    return surface->makeImageSnapshot(b);
+  } else {
+    return surface->makeImageSnapshot();
+  }
+}
+
+void RNSkDrawView::updateTouchState(std::vector<RNSkTouchPoint>&& points) {
+  _infoObject->updateTouches(std::move(points));
+  requestRedraw();
+}
+
+void RNSkDrawView::performDraw() {
+#if LOG_ALL_DRAWING
+  RNSkLogger::logToConsole("RNSkDrawView::performDraw - %i", getNativeId());
+#endif
+  
+  // 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(getWidth(), getHeight(), &factory);
+  _jsiCanvas->setCanvas(canvas);
+  
+  // Get current milliseconds
+  milliseconds ms = duration_cast<milliseconds>(
+          system_clock::now().time_since_epoch());
+  
+  try {
+    // Perform the javascript drawing
+    drawInCanvas(_jsiCanvas, getWidth(), getHeight(), ms.count() / 1000.0);
+  } catch(...) {
+    _jsTimingInfo.stopTiming();
+    _jsDrawingLock->unlock();
+    throw;
+  }
+  
+  // Finish drawing operations
+  auto p = recorder.finishRecordingAsPicture();
+  
+  // 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;
+    getPlatformContext()->runOnRenderThread([this, p = std::move(p), gpuLock]() {
+      
+      if(isInvalidated()) {
+        gpuLock->unlock();
+        return;
+      }
+      
+      _gpuTimingInfo.beginTiming();
+
+      // Draw the picture recorded on the real GPU canvas
+      if(_nativeDrawFunc != nullptr) {
+#if LOG_ALL_DRAWING
+          RNSkLogger::logToConsole("RNSkDrawView::drawFrame - %i", getNativeId());
+#endif
+        _nativeDrawFunc(p);
+      } else {
+#if LOG_ALL_DRAWING
+          RNSkLogger::logToConsole("RNSkDrawView::drawFrame - %i SKIPPING, draw func is null", getNativeId());
+#endif
+      }
+
+      _gpuTimingInfo.stopTiming();
+
+      // Unlock GPU drawing
+      gpuLock->unlock();
+    });
+  } else {
+#ifdef DEBUG
+    static size_t framesSkipped = 0;
+    printf("SKIA/GPU: Skipped frames: %lu\n", ++framesSkipped);
+#endif
+    requestRedraw();
+  }
+  
+  // Unlock JS drawing
+  _jsDrawingLock->unlock();
+}
+
+void RNSkDrawView::requestRedraw() {
+  _redrawRequestCounter++;
+}
+
+void RNSkDrawView::beginDrawingLoop() {
+  if (_drawingLoopId != 0 || _nativeId == 0) {
+    return;
+  }
+  
+  // Set to zero to avoid calling beginDrawLoop before we return
+  _drawingLoopId = _platformContext->beginDrawLoop(
+    _nativeId, std::bind(&RNSkDrawView::drawLoopCallback, this, std::placeholders::_1));
+}
+
+void RNSkDrawView::drawLoopCallback(bool invalidated) {
+  if(invalidated) {
+    _isInvalidated = true;
+    onInvalidated();
+#if LOG_ALL_DRAWING
+  RNSkLogger::logToConsole("RNSkDrawView::onInvalidated - %i", getNativeId());
+#endif
+    return;
+  }
+  
+  if(_redrawRequestCounter > 0 || _drawingMode == RNSkDrawingMode::Continuous) {
+      _redrawRequestCounter = 0;
+      
+    _vsyncTimingInfo.beginTiming();
+    
+    // We render on the javascript thread.
+    if(_jsDrawingLock->try_lock()) {
+      _platformContext->runOnJavascriptThread(std::bind(&RNSkDrawView::performDraw, this));
+    } else {
+#ifdef DEBUG
+      static size_t framesSkipped = 0;
+      printf("SKIA/JS: Skipped frames: %lu\n", ++framesSkipped);
+#endif
+      requestRedraw();
+    }
+    
+    _vsyncTimingInfo.stopTiming();
+  }
+}
+
+void RNSkDrawView::endDrawingLoop() {
+  if(_drawingLoopId != 0) {
+    _drawingLoopId = 0;
+    _platformContext->endDrawLoop(_nativeId);
+  }
+}
+
+void RNSkDrawView::setDrawingMode(RNSkDrawingMode mode) {
+  if(mode == _drawingMode || _nativeId == 0) {
+    return;
+  }
+  _drawingMode = mode;
+}
+
+} // namespace RNSkia

package/cpp/rnskia/RNSkDrawView.h

@@ -0,0 +1,242 @@
+#pragma once
+
+#include <functional>
+#include <memory>
+#include <mutex>
+#include <vector>
+#include <string>
+
+#include <jsi/jsi.h>
+
+#include <RNSkInfoParameter.h>
+#include <RNSkPlatformContext.h>
+#include <RNSkTimingInfo.h>
+#include <RNSkLog.h>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include <SkRefCnt.h>
+
+#pragma clang diagnostic pop
+
+#define LOG_ALL_DRAWING 0
+
+class SkPicture;
+class SkRect;
+class SkImage;
+
+namespace RNSkia {
+class JsiSkCanvas;
+using namespace facebook;
+using RNSkDrawCallback =
+    std::function<void(std::shared_ptr<JsiSkCanvas>, int, int, double,
+                       std::shared_ptr<RNSkPlatformContext>)>;
+
+enum RNSkDrawingMode { Default, Continuous };
+
+class RNSkDrawView {
+public:
+  /**
+   * Constructor
+   */
+  RNSkDrawView(std::shared_ptr<RNSkPlatformContext> context);
+
+  /**
+   Destructor
+   */
+  ~RNSkDrawView();
+
+  /**
+   * Repaints the Skia view using the underlying context and the drawcallback.
+   * This method schedules a draw request that will be run on the correct
+   * thread and js runtime.
+   */
+  void requestRedraw();
+  
+  /**
+   Calls the drawing callback on the javascript thread
+   */
+  void performDraw();
+
+  /**
+   * Installs the draw callback for the view
+   */
+  void setDrawCallback(std::shared_ptr<jsi::Function> callback);
+  
+  /**
+   Sets the native id of the view
+   */
+  void setNativeId(size_t nativeId);
+  
+  /**
+   Returns the native id
+   */
+  size_t getNativeId() { return _nativeId; }
+  
+  /**
+   Sets the drawing mode for the view
+   */
+  void setDrawingMode(RNSkDrawingMode mode);
+
+  /**
+   * Set to true to show the debug overlays on render
+   */
+  void setShowDebugOverlays(bool show) { _showDebugOverlay = show; }
+
+  /**
+    Update touch state with new touch points
+   */
+  void updateTouchState(std::vector<RNSkTouchPoint>&& points);
+  
+  /**
+   Draws the view's surface into an image
+   return an SkImage
+   */
+  sk_sp<SkImage> makeImageSnapshot(std::shared_ptr<SkRect> bounds);
+
+protected:
+  void setNativeDrawFunc(std::function<void(const sk_sp<SkPicture>)> drawFunc) {
+    if(!_gpuDrawingLock->try_lock_for(250ms)) {
+      RNSkLogger::logToConsole("Could not lock drawing when clearing drawing function - %i", _nativeId);
+    }
+    _nativeDrawFunc = drawFunc;
+    _gpuDrawingLock->unlock();
+  }
+  
+  /**
+   Returns the scaled width of the view
+   */
+  virtual int getWidth() { return -1; };
+  
+  /**
+   Returns the scaled height of the view
+   */
+  virtual int getHeight() { return -1; };
+  
+  /**
+   Returns true if the view is invalidated
+   */
+  volatile bool isInvalidated() { return _isInvalidated; }
+  
+  /**
+   Override to be notified on invalidation
+   */
+  virtual void onInvalidated() {}
+  
+  /**
+   * @return The platformcontext
+   */
+  std::shared_ptr<RNSkPlatformContext> getPlatformContext() {
+    return _platformContext;
+  }
+
+private:  
+  /**
+   Starts beginDrawCallback loop if the drawing mode is continuous
+   */
+  void beginDrawingLoop();
+
+  /**
+   Ends an ongoing beginDrawCallback loop for this view
+   */
+  void endDrawingLoop();
+  
+  /**
+    Draw loop callback
+   */
+  void drawLoopCallback(bool invalidated);
+  
+  /**
+   Draw in canvas
+   */
+  void drawInCanvas(std::shared_ptr<JsiSkCanvas> canvas,
+                    int width,
+                    int height,
+                    double time);
+  
+  /**
+   * Stores the draw drawCallback
+   */
+  std::shared_ptr<RNSkDrawCallback> _drawCallback;
+
+  /**
+   * Stores a pointer to the jsi wrapper for the canvas. The reason for
+   * storing this pointer and not recreate it is that it creates a set of
+   * functions that we don't want to recreate on each render
+   */
+  std::shared_ptr<JsiSkCanvas> _jsiCanvas;
+  
+  /**
+   * JS Drawing mutex
+   */
+  std::shared_ptr<std::timed_mutex> _jsDrawingLock;
+  
+  /**
+   * SKIA Drawing mutex
+   */
+  std::shared_ptr<std::timed_mutex> _gpuDrawingLock;
+
+  /**
+   * Pointer to the platform context
+   */
+  std::shared_ptr<RNSkPlatformContext> _platformContext;
+
+  /**
+   Drawing mode
+   */
+  RNSkDrawingMode _drawingMode;
+
+  /**
+   * Show debug overlays
+   */
+  bool _showDebugOverlay = false;
+
+  /**
+   * True if the drawing loop has been requested
+   */
+  size_t _drawingLoopId = 0;
+
+  /**
+   * Info object parameter
+   */
+  std::shared_ptr<RNSkInfoObject> _infoObject;
+
+  /**
+   Timing information for javascript drawing
+   */
+  RNSkTimingInfo _jsTimingInfo;
+  
+  /**
+   Timing information for GPU rendering
+   */
+  RNSkTimingInfo _gpuTimingInfo;
+  
+  /**
+   Measures vsync framerate
+   */
+  RNSkTimingInfo _vsyncTimingInfo;
+  
+  /**
+   Redraw queue counter
+   */
+  std::atomic<int> _redrawRequestCounter = { 1 };
+  
+  /**
+   * Native id
+   */
+  size_t _nativeId;
+  
+  /**
+   Invalidation flag
+   */
+  std::atomic<bool> _isInvalidated = { false };
+  
+  /**
+   Native draw handler
+   */
+  std::function<void(const sk_sp<SkPicture>)> _nativeDrawFunc;  
+  
+};
+
+} // namespace RNSkia

package/cpp/rnskia/RNSkInfoParameter.h

@@ -0,0 +1,100 @@
+#pragma once
+
+#include <chrono>
+#include <memory>
+#include <mutex>
+#include <utility>
+#include <vector>
+
+#include <jsi/jsi.h>
+
+#include <JsiHostObject.h>
+
+namespace RNSkia {
+
+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;
+  long timestamp;
+};
+
+class RNSkInfoObject : public JsiHostObject {
+public:
+  JSI_PROPERTY_GET(width) { return _width; }
+  JSI_PROPERTY_GET(height) { return _height; }
+  JSI_PROPERTY_GET(timestamp) { return _timestamp; }
+
+  JSI_PROPERTY_GET(touches) {
+    auto ops = jsi::Array(runtime, _touchesCache.size());
+    for (size_t i = 0; i < _touchesCache.size(); i++) {
+      auto cur = _touchesCache.at(i);
+      auto touches = jsi::Array(runtime, cur.size());
+      for (size_t n = 0; n < cur.size(); n++) {
+        auto touchObj = jsi::Object(runtime);
+        auto t = cur.at(n);
+        touchObj.setProperty(runtime, "x", t.x);
+        touchObj.setProperty(runtime, "y", t.y);
+        touchObj.setProperty(runtime, "force", t.force);
+        touchObj.setProperty(runtime, "type", (double)t.type);
+        touchObj.setProperty(runtime, "timestamp", (double)t.timestamp / 1000.0);
+        touches.setValueAtIndex(runtime, n, touchObj);
+      }
+      ops.setValueAtIndex(runtime, i, touches);
+    }
+    return ops;
+  }
+
+  JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(RNSkInfoObject, width),
+                              JSI_EXPORT_PROP_GET(RNSkInfoObject, height),
+                              JSI_EXPORT_PROP_GET(RNSkInfoObject, timestamp),
+                              JSI_EXPORT_PROP_GET(RNSkInfoObject, touches))
+
+  void beginDrawOperation(int width, int height, double timestamp) {
+    _width = width;
+    _height = height;
+    _timestamp = timestamp;
+
+    // Copy touches so that we can continue to add/receive touch points while
+    // in the drawing callback.
+    std::lock_guard<std::mutex> lock(_mutex);
+    _touchesCache.clear();
+    _touchesCache.reserve(_currentTouches.size());
+    for (size_t i = 0; i < _currentTouches.size(); ++i) {
+      _touchesCache.push_back(_currentTouches.at(i));
+    }
+    _currentTouches.clear();
+  }
+
+  void endDrawOperation() { _touchesCache.clear(); }
+
+  void updateTouches(std::vector<RNSkTouchPoint>&& touches) {
+    std::lock_guard<std::mutex> lock(_mutex);
+    // Add timestamp
+    auto ms = std::chrono::duration_cast<milliseconds>(
+        system_clock::now().time_since_epoch()).count();
+    
+    for(size_t i=0; i<touches.size(); i++) {
+      touches.at(i).timestamp = ms;
+    }
+    _currentTouches.push_back(std::move(touches));
+  }
+
+  RNSkInfoObject() : JsiHostObject() {}
+
+private:
+  int _width;
+  int _height;
+  double _timestamp;
+  std::vector<std::vector<RNSkTouchPoint>> _currentTouches;
+  std::vector<std::vector<RNSkTouchPoint>> _touchesCache;
+  std::mutex _mutex;
+};
+} // namespace RNSkia