@shopify/react-native-skia 0.0.135

package/cpp/rnskia/RNSkDrawView.cpp

@@ -0,0 +1,291 @@
+//
+// 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>()),
+      _jsTimingInfo("SKIA/JS"),
+      _gpuTimingInfo("SKIA/GPU")
+      {}
+
+RNSkDrawView::~RNSkDrawView() {
+  endDrawingLoop();
+}
+
+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();
+  
+  // Create draw drawCallback wrapper
+  _drawCallback = std::make_shared<RNSkDrawCallback>(
+      [weakSelf = weak_from_this(),
+       callback = std::move(callback)](std::shared_ptr<JsiSkCanvas> canvas,
+                                       int width,
+                                       int height,
+                                       double timestamp,
+                                       std::shared_ptr<RNSkPlatformContext> context) {
+
+       auto self = weakSelf.lock();
+       if(self) {
+         auto runtime = context->getJsRuntime();
+                           
+         // Update info parameter
+         self->_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, self->_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
+         self->_infoObject->endDrawOperation();
+                           
+        // Draw debug overlays
+        if (self->_showDebugOverlay) {
+
+          // Display average rendering timer
+          auto jsAvg = self->_jsTimingInfo.getAverage();
+          //auto jsFps = _jsTimingInfo.getFps();
+          
+          auto gpuAvg = self->_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);
+          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(getScaledWidth(), getScaledHeight());
+  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, getScaledWidth(), getScaledHeight(), 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() {
+  // 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(getScaledWidth(), getScaledHeight(), &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, getScaledWidth(), getScaledHeight(), 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;
+    _platformContext->runOnRenderThread([weakSelf = weak_from_this(), p = std::move(p), gpuLock]() {
+      auto self = weakSelf.lock();
+      if (self) {
+        // Draw the picture recorded on the real GPU canvas
+        self->_gpuTimingInfo.beginTiming();
+        self->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 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,
+    [weakSelf = weak_from_this()](bool invalidated) {
+    auto self = weakSelf.lock();
+    if(self) {
+      self->drawLoopCallback(invalidated);
+    }
+  });
+}
+
+void RNSkDrawView::drawLoopCallback(bool invalidated) {
+  if(_redrawRequestCounter > 0 || _drawingMode == RNSkDrawingMode::Continuous) {
+      _redrawRequestCounter = 0;
+      
+    // We render on the javascript thread.
+    if(_jsDrawingLock->try_lock()) {
+      _platformContext->runOnJavascriptThread([weakSelf = weak_from_this()](){
+        auto self = weakSelf.lock();
+        if(self) {
+          self->performDraw();
+        }
+      });
+    } else {
+#ifdef DEBUG
+      _jsTimingInfo.markSkipped();
+#endif
+      requestRedraw();
+    }
+  }
+}
+
+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,212 @@
+#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
+
+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 std::enable_shared_from_this<RNSkDrawView> {
+public:
+  /**
+   * Constructor
+   */
+  RNSkDrawView(std::shared_ptr<RNSkPlatformContext> context);
+
+  /**
+   Destructor
+   */
+  virtual ~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:
+  /**
+   Returns the scaled width of the view
+   */
+  virtual float getScaledWidth() = 0;
+  
+  /**
+   Returns the scaled height of the view
+   */
+  virtual float getScaledHeight() = 0;
+  
+  /**
+   Override to render picture to GPU
+   */
+  virtual void drawPicture(const sk_sp<SkPicture> picture) = 0;
+  
+  /**
+   * @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;  
+  
+  /**
+   Redraw queue counter
+   */
+  std::atomic<int> _redrawRequestCounter = { 1 };
+  
+  /**
+   * Native id
+   */
+  size_t _nativeId;
+  
+};
+
+} // namespace RNSkia

package/cpp/rnskia/RNSkInfoParameter.h

@@ -0,0 +1,102 @@
+#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;
+  size_t id;
+  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);
+        touchObj.setProperty(runtime, "id", (double)t.id);
+        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