@shopify/react-native-skia 0.1.158 → 0.1.160

package/cpp/jsi/JsiValue.h

@@ -0,0 +1,222 @@
+#pragma once
+
+#include <jsi/jsi.h>
+
+#include <memory>
+#include <string>
+#include <unordered_map>
+#include <utility>
+#include <vector>
+
+namespace RNJsi {
+
+namespace jsi = facebook::jsi;
+
+enum struct PropType {
+  Undefined = 1,
+  Null = 2,
+  Bool = 4,
+  Number = 8,
+  String = 16,
+  Object = 32,
+  HostObject = 64,
+  HostFunction = 128,
+  Array = 256
+};
+
+using PropId = const char *;
+
+class JsiPropId {
+public:
+  static const char *get(const std::string &name) { return _get(name); }
+
+  static const char *get(const std::string &&name) {
+    return _get(std::move(name));
+  }
+
+private:
+  static const char *_get(const std::string &name) {
+    if (_impls().count(name) == 0) {
+      // Alloc string
+      char *impl = new char[name.size() + 1];
+      strncpy(impl, name.c_str(), name.size() + 1);
+      _impls().emplace(name, impl);
+    }
+    return _impls().at(name);
+  }
+
+  static std::unordered_map<std::string, PropId> &_impls() {
+    static std::unordered_map<std::string, PropId> impls;
+    return impls;
+  }
+};
+
+/**
+ This is a class that deep copies values from JS to C++.
+ */
+class JsiValue {
+public:
+  /**
+   Default constructor for an empty JsiValue
+   */
+  JsiValue();
+
+  /**
+   Constructs an instance of the JsiValue object with a current value
+   */
+  JsiValue(jsi::Runtime &runtime, const jsi::Value &value);
+
+  /**
+   Updates the current value from the Javascript value. This function will
+   perform a deep copy of the javascript value.
+   */
+  void setCurrent(jsi::Runtime &runtime, const jsi::Value &value);
+
+  /**
+   Returns the type of value contained in this JsiValue
+   */
+  PropType getType() const { return _type; }
+
+  /**
+   Returns true if the value is undefined or null.
+   */
+  bool isUndefinedOrNull() const { return isUndefined() || isNull(); }
+
+  /**
+   Returns true if the value is undefined.
+   */
+  bool isUndefined() const { return _type == PropType::Undefined; }
+
+  /**
+   Returns true if the value is null.
+   */
+  bool isNull() const { return _type == PropType::Null; }
+
+  /**
+   Returns the bool value. Requires that the underlying type is bool
+   */
+  bool getAsBool() const;
+
+  /**
+   Returns the numeric value. Requires that the underlying type is number
+   */
+  double getAsNumber() const;
+
+  /**
+   Returns the string value. Requires that the underlying type is string
+   */
+  const std::string &getAsString() const;
+
+  /**
+   Returns the array value. Requires that the underlying type is array
+   */
+  const std::vector<JsiValue> &getAsArray() const;
+
+  /**
+   Returns an inner value by name. Requires that the underlying type is Object
+   */
+  const JsiValue &getValue(PropId name) const;
+
+  /**
+   Returns true if the underlying type is Object and the property name exists.
+   */
+  bool hasValue(PropId name) const;
+
+  /**
+   Returns the names of the properties stored in this value
+   */
+  std::vector<PropId> getKeys() const;
+
+  /**
+   Returns the host object value. Requires that the underlying type is Host
+   Object
+   */
+  std::shared_ptr<jsi::HostObject> getAsHostObject() const;
+
+  /**
+   Returns a dynamic cast of the host object value. Requires that the underlying
+   type is Host Object
+   */
+  template <typename T> std::shared_ptr<T> getAs() const {
+    if (_type != PropType::HostObject) {
+      throw std::runtime_error("Expected type host object, got " +
+                               getTypeAsString(_type));
+    }
+    return std::dynamic_pointer_cast<T>(_hostObject);
+  }
+
+  /**
+   Returns the host function. Requires that the type is HostFunction
+   */
+  jsi::HostFunctionType getAsHostFunction() const;
+
+  /**
+   Returns a callable HostFunction representing the undderlying js function.
+   Requires that the type is Function
+   */
+  const jsi::HostFunctionType getAsFunction() const;
+
+  /**
+   Returns a string representation of the value
+   */
+  std::string asString() const;
+
+  /**
+   Converts the underlying value back to a JS value
+   */
+  jsi::Value getAsJsiValue(jsi::Runtime &runtime) const;
+
+  /**
+   Returns a string representing the type.
+   */
+  static std::string getTypeAsString(PropType type);
+
+  /**
+   Implements the equals operator
+   */
+  bool operator==(const JsiValue &other) const;
+
+  /**
+   Implements the inequals operator
+   */
+  bool operator!=(const JsiValue &other) const;
+
+protected:
+  const std::unordered_map<PropId, JsiValue> &getProps() const {
+    return _props;
+  }
+
+  bool boolValue() const { return _boolValue; }
+  double numberValue() const { return _numberValue; }
+  std::string stringValue() const { return _stringValue; }
+  std::shared_ptr<jsi::HostObject> hostObject() const { return _hostObject; }
+  jsi::HostFunctionType hostFunction() const { return _hostFunction; }
+  std::vector<JsiValue> array() const { return _array; }
+  std::unordered_map<PropId, JsiValue> props() const { return _props; }
+  const std::vector<PropId> &keysCache() const { return _keysCache; }
+
+private:
+  void setObject(jsi::Runtime &runtime, const jsi::Value &value);
+  jsi::Object getObject(jsi::Runtime &runtime) const;
+
+  void setFunction(jsi::Runtime &runtime, const jsi::Value &value);
+  jsi::Object getHostFunction(jsi::Runtime &runtime) const;
+
+  void setArray(jsi::Runtime &runtime, const jsi::Object &obj);
+  jsi::Array getArray(jsi::Runtime &runtime) const;
+
+  void setHostObject(jsi::Runtime &runtime, const jsi::Object &obj);
+  jsi::Object getHostObject(jsi::Runtime &runtime) const;
+
+  PropType _type = PropType::Undefined;
+  bool _boolValue;
+  double _numberValue;
+  std::string _stringValue = "";
+  std::shared_ptr<jsi::HostObject> _hostObject;
+  jsi::HostFunctionType _hostFunction;
+  std::vector<JsiValue> _array;
+  std::unordered_map<PropId, JsiValue> _props;
+  std::vector<PropId> _keysCache;
+};
+
+} // namespace RNJsi

package/cpp/jsi/JsiValueWrapper.h

@@ -29,10 +29,10 @@ enum JsiWrapperValueType {
 class JsiValueWrapper {
 public:
   explicit JsiValueWrapper(jsi::Runtime &runtime)
-      : _type(JsiWrapperValueType::NonInitialized) {}
+      : _type(JsiWrapperValueType::Undefined) {}
 
   JsiValueWrapper(jsi::Runtime &runtime, const jsi::Value &value)
-      : _type(JsiWrapperValueType::NonInitialized) {
+      : JsiValueWrapper(runtime) {
     setCurrent(runtime, value);
   }
 
@@ -78,11 +78,19 @@ public:
     _valueHolder->setProperty(runtime, "current", value);
   }
 
-  bool isUndefinedOrNull() {
-    return _type == JsiWrapperValueType::Undefined ||
-           _type == JsiWrapperValueType::Null;
+  jsi::Value getCurrent(jsi::Runtime &runtime) {
+    if (_valueHolder == nullptr) {
+      return jsi::Value::undefined();
+    }
+    return _valueHolder->getProperty(runtime, "current");
   }
 
+  bool isUndefinedOrNull() { return isUndefined() || isNull(); }
+
+  bool isUndefined() { return _type == JsiWrapperValueType::Undefined; }
+
+  bool isNull() { return _type == JsiWrapperValueType::Null; }
+
   bool getAsBool() {
     assert(_type == JsiWrapperValueType::Bool);
     return _boolValue;
@@ -120,6 +128,26 @@ public:
 
   JsiWrapperValueType getType() { return _type; }
 
+  bool equals(jsi::Runtime &runtime, const jsi::Value &value) {
+    if (value.isNumber() && _type == JsiWrapperValueType::Number) {
+      return _numberValue == value.asNumber();
+    } else if (value.isBool() && _type == JsiWrapperValueType::Bool) {
+      return _boolValue == value.getBool();
+    } else if (value.isUndefined()) {
+      return _type == JsiWrapperValueType::Undefined;
+    } else if (value.isNull()) {
+      return _type == JsiWrapperValueType::Null;
+    } else if (value.isString()) {
+      auto current = getCurrent(runtime);
+      if (current.isString()) {
+        return jsi::String::strictEquals(runtime, value.asString(runtime),
+                                         current.asString(runtime));
+      }
+      return false;
+    }
+    return false;
+  }
+
 private:
   std::shared_ptr<jsi::Object> _valueHolder;
 

package/cpp/rnskia/RNSkDomView.cpp

@@ -0,0 +1,222 @@
+#include "RNSkDomView.h"
+#include "DrawingContext.h"
+
+#include <chrono>
+#include <utility>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include <SkFont.h>
+
+#pragma clang diagnostic pop
+
+namespace RNSkia {
+
+RNSkDomRenderer::RNSkDomRenderer(std::function<void()> requestRedraw,
+                                 std::shared_ptr<RNSkPlatformContext> context)
+    : RNSkRenderer(requestRedraw), _platformContext(std::move(context)),
+      _renderLock(std::make_shared<std::timed_mutex>()),
+      _touchCallbackLock(std::make_shared<std::timed_mutex>()),
+      _renderTimingInfo("SKIA/RENDER") {}
+
+RNSkDomRenderer::~RNSkDomRenderer() {
+  if (_root != nullptr) {
+    _root->dispose();
+    _root = nullptr;
+  }
+}
+
+bool RNSkDomRenderer::tryRender(
+    std::shared_ptr<RNSkCanvasProvider> canvasProvider) {
+  // If we have touches we need to call the touch callback as well
+  if (_currentTouches.size() > 0) {
+    callOnTouch();
+  }
+
+  // We render on the main thread
+  if (_renderLock->try_lock()) {
+    // If we have a Dom Node we can render directly on the main thread
+    if (_root != nullptr) {
+      canvasProvider->renderToCanvas(std::bind(
+          &RNSkDomRenderer::renderCanvas, this, std::placeholders::_1,
+          canvasProvider->getScaledWidth(), canvasProvider->getScaledHeight()));
+    }
+
+    _renderLock->unlock();
+    return true;
+  } else {
+    return false;
+  }
+}
+
+void RNSkDomRenderer::renderImmediate(
+    std::shared_ptr<RNSkCanvasProvider> canvasProvider) {
+  auto prevDebugOverlay = getShowDebugOverlays();
+  setShowDebugOverlays(false);
+  canvasProvider->renderToCanvas(std::bind(
+      &RNSkDomRenderer::renderCanvas, this, std::placeholders::_1,
+      canvasProvider->getScaledWidth(), canvasProvider->getScaledHeight()));
+  setShowDebugOverlays(prevDebugOverlay);
+}
+
+void RNSkDomRenderer::setRoot(std::shared_ptr<JsiDomRenderNode> node) {
+  std::lock_guard<std::mutex> lock(_rootLock);
+  if (_root != nullptr) {
+    _root->dispose();
+    _root = nullptr;
+  }
+  _root = node;
+}
+
+void RNSkDomRenderer::setOnTouchCallback(
+    std::shared_ptr<jsi::Function> onTouchCallback) {
+  _touchCallback = onTouchCallback;
+}
+
+void RNSkDomRenderer::renderCanvas(SkCanvas *canvas, float scaledWidth,
+                                   float scaledHeight) {
+  _renderTimingInfo.beginTiming();
+
+  auto pd = _platformContext->getPixelDensity();
+
+  canvas->save();
+  canvas->scale(pd, pd);
+
+  if (_drawingContext == nullptr) {
+    auto paint = std::make_shared<SkPaint>();
+    paint->setAntiAlias(true);
+    _drawingContext =
+        std::make_shared<DrawingContext>(paint, 1.0f);
+
+    _drawingContext->setRequestRedraw([weakSelf = weak_from_this()]() {
+      auto self = weakSelf.lock();
+      if (self) {
+        self->_requestRedraw();
+      }
+    });
+  }
+
+  _drawingContext->setScaledWidth(scaledWidth);
+  _drawingContext->setScaledHeight(scaledHeight);
+
+  // Update canvas before drawing
+  _drawingContext->setCanvas(canvas);
+
+  try {
+    // Ask the root node to render to the provided canvas
+    std::lock_guard<std::mutex> lock(_rootLock);
+    if (_root != nullptr) {
+      _root->commitPendingChanges();
+      _root->render(_drawingContext.get());
+      _root->resetPendingChanges();
+    }
+  } catch (std::runtime_error err) {
+    _platformContext->raiseError(err);
+  } catch (jsi::JSError err) {
+    _platformContext->raiseError(err);
+  } catch (...) {
+    _platformContext->raiseError(
+        std::runtime_error("Error rendering the Skia view."));
+  }
+
+  renderDebugOverlays(canvas);
+
+  canvas->restore();
+
+  _renderTimingInfo.stopTiming();
+}
+
+void RNSkDomRenderer::updateTouches(std::vector<RNSkTouchInfo> &touches) {
+  std::lock_guard<std::mutex> lock(_touchMutex);
+  // Add timestamp
+  auto ms = std::chrono::duration_cast<std::chrono::milliseconds>(
+                std::chrono::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));
+}
+
+void RNSkDomRenderer::callOnTouch() {
+
+  if (_touchCallback == nullptr) {
+    return;
+  }
+
+  if (_touchCallbackLock->try_lock()) {
+
+    {
+      std::lock_guard<std::mutex> lock(_touchMutex);
+      _touchesCache.clear();
+      _touchesCache.reserve(_currentTouches.size());
+      for (size_t i = 0; i < _currentTouches.size(); ++i) {
+        _touchesCache.push_back(_currentTouches.at(i));
+      }
+      _currentTouches.clear();
+    }
+
+    // We have an onDraw method - use it to render since we don't have a
+    // DOM-node yet.
+    _platformContext->runOnJavascriptThread([weakSelf = weak_from_this()]() {
+      auto self = weakSelf.lock();
+      if (self) {
+        jsi::Runtime &runtime = *self->_platformContext->getJsRuntime();
+        // Set up touches
+        auto size = self->_touchesCache.size();
+        auto ops = jsi::Array(runtime, size);
+        for (size_t i = 0; i < size; i++) {
+          auto cur = self->_touchesCache.at(i);
+          auto curSize = cur.size();
+          auto touches = jsi::Array(runtime, curSize);
+          for (size_t n = 0; n < curSize; 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", static_cast<double>(t.type));
+            touchObj.setProperty(runtime, "timestamp",
+                                 static_cast<double>(t.timestamp) / 1000.0);
+            touchObj.setProperty(runtime, "id", static_cast<double>(t.id));
+            touches.setValueAtIndex(runtime, n, touchObj);
+          }
+          ops.setValueAtIndex(runtime, i, touches);
+        }
+        // Call on touch callback
+        self->_touchCallback->call(runtime, ops, 1);
+      }
+      self->_touchCallbackLock->unlock();
+    });
+  } else {
+    // We'll try next time - schedule a new redraw
+    _requestRedraw();
+  }
+}
+
+void RNSkDomRenderer::renderDebugOverlays(SkCanvas *canvas) {
+  if (!getShowDebugOverlays()) {
+    return;
+  }
+  auto renderAvg = _renderTimingInfo.getAverage();
+  auto fps = _renderTimingInfo.getFps();
+
+  // Build string
+  std::ostringstream stream;
+  stream << "render: " << renderAvg << "ms"
+         << " fps: " << fps;
+
+  std::string debugString = stream.str();
+
+  // Set up debug font/paints
+  auto font = SkFont();
+  font.setSize(14);
+  auto paint = SkPaint();
+  paint.setColor(SkColors::kRed);
+  canvas->drawSimpleText(debugString.c_str(), debugString.size(),
+                         SkTextEncoding::kUTF8, 8, 18, font, paint);
+}
+
+} // namespace RNSkia

package/cpp/rnskia/RNSkDomView.h

@@ -0,0 +1,140 @@
+#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 "JsiDomRenderNode.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 RNSkDomRenderer : public RNSkRenderer,
+                        public std::enable_shared_from_this<RNSkDomRenderer> {
+public:
+  RNSkDomRenderer(std::function<void()> requestRedraw,
+                  std::shared_ptr<RNSkPlatformContext> context);
+
+  ~RNSkDomRenderer();
+
+  bool tryRender(std::shared_ptr<RNSkCanvasProvider> canvasProvider) override;
+
+  void
+  renderImmediate(std::shared_ptr<RNSkCanvasProvider> canvasProvider) override;
+
+  void setRoot(std::shared_ptr<JsiDomRenderNode> node);
+
+  void setOnTouchCallback(std::shared_ptr<jsi::Function> onTouchCallback);
+
+  void updateTouches(std::vector<RNSkTouchInfo> &touches);
+
+private:
+  void callOnTouch();
+  void renderCanvas(SkCanvas *canvas, float scaledWidth, float scaledHeight);
+  void renderDebugOverlays(SkCanvas *canvas);
+
+  std::shared_ptr<RNSkPlatformContext> _platformContext;
+  std::shared_ptr<jsi::Function> _touchCallback;
+
+  std::shared_ptr<std::timed_mutex> _renderLock;
+  std::shared_ptr<std::timed_mutex> _touchCallbackLock;
+
+  std::shared_ptr<JsiDomRenderNode> _root;
+  std::shared_ptr<DrawingContext> _drawingContext;
+
+  RNSkTimingInfo _renderTimingInfo;
+
+  std::mutex _touchMutex;
+  std::vector<std::vector<RNSkTouchInfo>> _currentTouches;
+  std::vector<std::vector<RNSkTouchInfo>> _touchesCache;
+  std::mutex _rootLock;
+};
+
+class RNSkDomView : public RNSkView {
+public:
+  /**
+   * Constructor
+   */
+  RNSkDomView(std::shared_ptr<RNSkPlatformContext> context,
+              std::shared_ptr<RNSkCanvasProvider> canvasProvider)
+      : RNSkView(context, canvasProvider,
+                 std::make_shared<RNSkDomRenderer>(
+                     std::bind(&RNSkView::requestRedraw, this), context)) {}
+
+  void updateTouchState(std::vector<RNSkTouchInfo> &touches) override {
+    std::static_pointer_cast<RNSkDomRenderer>(getRenderer())
+        ->updateTouches(touches);
+    RNSkView::updateTouchState(touches);
+  }
+
+  void setJsiProperties(
+      std::unordered_map<std::string, JsiValueWrapper> &props) override {
+
+    RNSkView::setJsiProperties(props);
+
+    for (auto &prop : props) {
+      if (prop.first == "onTouch") {
+        if (prop.second.isUndefinedOrNull()) {
+          // Clear touchCallback
+          std::static_pointer_cast<RNSkDomRenderer>(getRenderer())
+              ->setOnTouchCallback(nullptr);
+          requestRedraw();
+          continue;
+
+        } 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 onTouch property.");
+        }
+
+        // Save callback
+        std::static_pointer_cast<RNSkDomRenderer>(getRenderer())
+            ->setOnTouchCallback(prop.second.getAsFunction());
+
+        // Request redraw
+        requestRedraw();
+
+      } else if (prop.first == "root") {
+        // Save root
+        if (prop.second.isUndefined() || prop.second.isNull()) {
+          std::static_pointer_cast<RNSkDomRenderer>(getRenderer())
+              ->setRoot(nullptr);
+        } else {
+          std::static_pointer_cast<RNSkDomRenderer>(getRenderer())
+              ->setRoot(std::dynamic_pointer_cast<JsiDomRenderNode>(
+                  prop.second.getAsHostObject()));
+        }
+
+        // Request redraw
+        requestRedraw();
+      }
+    }
+  }
+};
+} // namespace RNSkia

package/cpp/rnskia/RNSkJsView.cpp

@@ -202,10 +202,6 @@ void RNSkJsRenderer::drawInJsiCanvas(std::shared_ptr<JsiSkCanvas> jsiCanvas,
 
     // Call draw function.
     callJsDrawCallback(jsiCanvas, width / pd, height / pd, time);
-
-    // Restore and flush canvas
-    skCanvas->restore();
-    skCanvas->flush();
   }
 }
 

package/cpp/rnskia/RNSkJsView.h

@@ -89,13 +89,18 @@ public:
 
   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);
-          return;
+          requestRedraw();
+          continue;
+
         } else if (prop.second.getType() !=
                    RNJsi::JsiWrapperValueType::Function) {
           // We expect a function for the draw callback custom property
@@ -109,9 +114,6 @@ public:
 
         // Request redraw
         requestRedraw();
-
-      } else {
-        RNSkView::setJsiProperties(props);
       }
     }
   }

package/cpp/rnskia/RNSkManager.cpp

@@ -10,6 +10,8 @@
 #include <RNSkValueApi.h>
 #include <RNSkView.h>
 
+#include <JsiDomApi.h>
+
 namespace RNSkia {
 namespace jsi = facebook::jsi;
 
@@ -78,5 +80,10 @@ void RNSkManager::installBindings() {
   _jsRuntime->global().setProperty(
       *_jsRuntime, "SkiaValueApi",
       jsi::Object::createFromHostObject(*_jsRuntime, std::move(skiaValueApi)));
+
+  auto skiaDomApi = std::make_shared<JsiDomApi>(_platformContext);
+  _jsRuntime->global().setProperty(
+      *_jsRuntime, "SkiaDomApi",
+      jsi::Object::createFromHostObject(*_jsRuntime, std::move(skiaDomApi)));
 }
 } // namespace RNSkia