@shopify/react-native-skia 0.1.158 → 0.1.160

package/cpp/rnskia/RNSkPictureView.h

@@ -76,10 +76,6 @@ private:
       canvas->scale(pd, pd);
 
       canvas->drawPicture(_picture->getObject());
-
-      // Restore and flush canvas
-      canvas->restore();
-      canvas->flush();
     });
   }
 
@@ -101,13 +97,17 @@ public:
 
   void setJsiProperties(
       std::unordered_map<std::string, RNJsi::JsiValueWrapper> &props) override {
+
+    RNSkView::setJsiProperties(props);
+
     for (auto &prop : props) {
       if (prop.first == "picture") {
         if (prop.second.isUndefinedOrNull()) {
           // Clear picture
           std::static_pointer_cast<RNSkPictureRenderer>(getRenderer())
               ->setPicture(nullptr);
-          return;
+          requestRedraw();
+          continue;
         } else if (prop.second.getType() !=
                    RNJsi::JsiWrapperValueType::HostObject) {
           // We expect a function for the picture custom property
@@ -121,9 +121,6 @@ public:
 
         // Request redraw
         requestRedraw();
-
-      } else {
-        RNSkView::setJsiProperties(props);
       }
     }
   }

package/cpp/rnskia/RNSkView.h

@@ -6,11 +6,12 @@
 #include <unordered_map>
 #include <vector>
 
-#include <RNSkPlatformContext.h>
-
 #include <JsiValueWrapper.h>
+#include <RNSkPlatformContext.h>
+#include <RNSkValue.h>
 
 #include <JsiSkImage.h>
+#include <JsiSkPoint.h>
 #include <JsiSkRect.h>
 
 #pragma clang diagnostic push
@@ -155,7 +156,13 @@ public:
   /**
    Destructor
    */
-  virtual ~RNSkView() { endDrawingLoop(); }
+  virtual ~RNSkView() {
+    endDrawingLoop();
+    if (_onSizeUnsubscribe != nullptr) {
+      _onSizeUnsubscribe();
+      _onSizeUnsubscribe = nullptr;
+    }
+  }
 
   /**
    Sets custom properties. Custom properties are properties that are set
@@ -163,8 +170,37 @@ public:
    */
   virtual void setJsiProperties(
       std::unordered_map<std::string, RNJsi::JsiValueWrapper> &props) {
-    throw std::runtime_error(
-        "The base Skia View does not support any custom properties.");
+
+    for (auto &prop : props) {
+      if (prop.first == "onSize") {
+        // Start by removing any subscribers to the current onSize
+        if (_onSizeUnsubscribe != nullptr) {
+          _onSizeUnsubscribe();
+          _onSizeUnsubscribe = nullptr;
+        }
+        if (prop.second.isUndefinedOrNull()) {
+          // Clear touchCallback
+          _onSize = nullptr;
+        } else if (prop.second.getType() !=
+                   RNJsi::JsiWrapperValueType::HostObject) {
+          // We expect a function for the draw callback custom property
+          throw std::runtime_error(
+              "Expected a Skia mutable value for the onSize property.");
+        }
+        // Save onSize
+        _onSize =
+            std::dynamic_pointer_cast<RNSkValue>(prop.second.getAsHostObject());
+
+        // Add listener
+        _onSizeUnsubscribe =
+            _onSize->addListener([weakSelf = weak_from_this()](jsi::Runtime &) {
+              auto self = weakSelf.lock();
+              if (self) {
+                self->requestRedraw();
+              }
+            });
+      }
+    }
   }
 
   /**
@@ -272,6 +308,73 @@ private:
         });
   }
 
+  void updateOnSize() {
+    if (_onSize != nullptr) {
+      auto width = _canvasProvider->getScaledWidth() /
+                   _platformContext->getPixelDensity();
+      auto height = _canvasProvider->getScaledHeight() /
+                    _platformContext->getPixelDensity();
+
+      _platformContext->runOnJavascriptThread(
+          [width, height, weakSelf = weak_from_this()]() {
+            auto self = weakSelf.lock();
+            if (self) {
+              auto runtime = self->_platformContext->getJsRuntime();
+              auto onSize = self->_onSize->getCurrent(*runtime);
+              if (!onSize.isObject()) {
+                throw jsi::JSError(
+                    *runtime,
+                    "Expected onSize property to be a mutable Skia value.");
+                return;
+              }
+              auto onSizeObj = onSize.asObject(*runtime);
+
+              // Is this a host SkSize object?
+              if (onSizeObj.isHostObject(*runtime)) {
+                auto point = std::dynamic_pointer_cast<JsiSkPoint>(
+                    onSizeObj.asHostObject(*runtime));
+                if (point == nullptr) {
+                  throw jsi::JSError(*runtime,
+                                     "Expected onSize property to be a mutable "
+                                     "Skia value of type SkSize.");
+                  return;
+                }
+
+                auto w = point->getObject()->x();
+                auto h = point->getObject()->y();
+                if (w != width || h != height) {
+                  auto nextSize =
+                      std::make_shared<SkPoint>(SkPoint::Make(width, height));
+                  point->setObject(nextSize);
+                  self->_onSize->set_current(*runtime, onSize);
+                }
+
+              } else {
+                auto wVal = onSizeObj.getProperty(*runtime, "width");
+                auto hVal = onSizeObj.getProperty(*runtime, "height");
+
+                if (!wVal.isNumber() || !hVal.isNumber()) {
+                  throw jsi::JSError(*runtime,
+                                     "Expected onSize property to be a mutable "
+                                     "Skia value of type SkSize.");
+                  return;
+                }
+
+                auto w = wVal.asNumber();
+                auto h = hVal.asNumber();
+
+                if (w != width || h != height) {
+                  // Update
+                  onSizeObj.setProperty(*runtime, "width", width);
+                  onSizeObj.setProperty(*runtime, "height", height);
+                  self->_onSize->set_current(*runtime, onSize);
+                }
+              }
+            }
+          });
+    }
+  }
+
   /**
     Draw loop callback
    */
@@ -280,6 +383,9 @@ private:
         _drawingMode == RNSkDrawingMode::Continuous) {
       _redrawRequestCounter = 0;
 
+      // Update size if needed
+      updateOnSize();
+
       if (!_renderer->tryRender(_canvasProvider)) {
         // The renderer could not render cause it was busy, just schedule
         // redrawing on the next frame.
@@ -292,6 +398,8 @@ private:
   std::shared_ptr<RNSkCanvasProvider> _canvasProvider;
   std::shared_ptr<RNSkRenderer> _renderer;
 
+  std::shared_ptr<RNSkValue> _onSize;
+  std::function<void()> _onSizeUnsubscribe;
   RNSkDrawingMode _drawingMode;
   size_t _nativeId;
 

package/cpp/rnskia/dom/JsiDomApi.h

@@ -0,0 +1,167 @@
+#pragma once
+
+/* Enable output of dom trees and paint contexts */
+#define SKIA_DOM_DEBUG 0
+
+#include <memory>
+
+#include "JsiHostObject.h"
+
+#include "base/JsiDependencyManager.h"
+
+#include "nodes/JsiCircleNode.h"
+#include "nodes/JsiDiffRectNode.h"
+#include "nodes/JsiFillNode.h"
+#include "nodes/JsiGroupNode.h"
+#include "nodes/JsiImageNode.h"
+#include "nodes/JsiLineNode.h"
+#include "nodes/JsiOvalNode.h"
+#include "nodes/JsiPatchNode.h"
+#include "nodes/JsiPathNode.h"
+#include "nodes/JsiPointsNode.h"
+#include "nodes/JsiRRectNode.h"
+#include "nodes/JsiRectNode.h"
+
+#include "nodes/JsiBlurMaskNode.h"
+#include "nodes/JsiImageSvgNode.h"
+#include "nodes/JsiPictureNode.h"
+#include "nodes/JsiVerticesNode.h"
+
+#include "nodes/JsiColorFilterNodes.h"
+#include "nodes/JsiImageFilterNodes.h"
+#include "nodes/JsiPathEffectNodes.h"
+#include "nodes/JsiShaderNodes.h"
+
+#include "nodes/JsiPaintNode.h"
+
+#include "nodes/JsiBackdropFilterNode.h"
+#include "nodes/JsiBlendNode.h"
+#include "nodes/JsiBoxNode.h"
+#include "nodes/JsiBoxShadowNode.h"
+
+#include "nodes/JsiCustomDrawingNode.h"
+
+#include "nodes/JsiGlyphsNode.h"
+#include "nodes/JsiTextBlobNode.h"
+#include "nodes/JsiTextNode.h"
+#include "nodes/JsiTextPathNode.h"
+
+#include "nodes/JsiLayerNode.h"
+
+namespace RNSkia {
+
+namespace jsi = facebook::jsi;
+
+class JsiDomApi : public JsiHostObject {
+public:
+  explicit JsiDomApi(std::shared_ptr<RNSkPlatformContext> context)
+      : JsiHostObject() {
+    installFunction("DependencyManager",
+                    JsiDependencyManager::createCtor(context));
+
+    // Shapes
+    installFunction("RectNode", JsiRectNode::createCtor(context));
+    installFunction("RRectNode", JsiRRectNode::createCtor(context));
+    installFunction("CircleNode", JsiCircleNode::createCtor(context));
+    installFunction("PathNode", JsiPathNode::createCtor(context));
+    installFunction("LineNode", JsiLineNode::createCtor(context));
+    installFunction("ImageNode", JsiImageNode::createCtor(context));
+    installFunction("OvalNode", JsiOvalNode::createCtor(context));
+    installFunction("PatchNode", JsiPatchNode::createCtor(context));
+    installFunction("PointsNode", JsiPointsNode::createCtor(context));
+    installFunction("DiffRectNode", JsiDiffRectNode::createCtor(context));
+
+    installFunction("FillNode", JsiFillNode::createCtor(context));
+
+    installFunction("GroupNode", JsiGroupNode::createCtor(context));
+
+    installFunction("PaintNode", JsiPaintNode::createCtor(context));
+
+    installFunction("BlurMaskFilterNode", JsiBlurMaskNode::createCtor(context));
+
+    installFunction("PictureNode", JsiPictureNode::createCtor(context));
+    installFunction("ImageSVGNode", JsiImageSvgNode::createCtor(context));
+
+    installFunction("VerticesNode", JsiVerticesNode::createCtor(context));
+
+    // Path effects
+    installFunction("DashPathEffectNode",
+                    JsiDashPathEffectNode::createCtor(context));
+    installFunction("DiscretePathEffectNode",
+                    JsiDiscretePathEffectNode::createCtor(context));
+    installFunction("CornerPathEffectNode",
+                    JsiCornerPathEffectNode::createCtor(context));
+    installFunction("Path1DPathEffectNode",
+                    JsiPath1DPathEffectNode::createCtor(context));
+    installFunction("Path2DPathEffectNode",
+                    JsiPath2DPathEffectNode::createCtor(context));
+    installFunction("Line2DPathEffectNode",
+                    JsiLine2DPathEffectNode::createCtor(context));
+    installFunction("SumPathEffectNode",
+                    JsiSumPathEffectNode::createCtor(context));
+
+    // Image filters
+    installFunction("DashPathEffectNode",
+                    JsiBlendImageFilterNode::createCtor(context));
+    installFunction("DropShadowImageFilterNode",
+                    JsiDropShadowImageFilterNode::createCtor(context));
+    installFunction("DisplacementMapImageFilterNode",
+                    JsiDisplacementMapImageFilterNode::createCtor(context));
+    installFunction("BlurImageFilterNode",
+                    JsiBlurImageFilterNode::createCtor(context));
+    installFunction("OffsetImageFilterNode",
+                    JsiOffsetImageFilterNode::createCtor(context));
+    installFunction("MorphologyImageFilterNode",
+                    JsiMorphologyImageFilterNode::createCtor(context));
+    installFunction("RuntimeShaderImageFilterNode",
+                    JsiRuntimeShaderImageFilterNode::createCtor(context));
+
+    // Color Filters
+    installFunction("MatrixColorFilterNode",
+                    JsiMatrixColorFilterNode::createCtor(context));
+    installFunction("BlendColorFilterNode",
+                    JsiBlendColorFilterNode::createCtor(context));
+    installFunction("LinearToSRGBGammaColorFilterNode",
+                    JsiLinearToSRGBGammaColorFilterNode::createCtor(context));
+    installFunction("SRGBToLinearGammaColorFilterNode",
+                    JsiSRGBToLinearGammaColorFilterNode::createCtor(context));
+    installFunction("LumaColorFilterNode",
+                    JsiLumaColorFilterNode::createCtor(context));
+    installFunction("LerpColorFilterNode",
+                    JsiLerpColorFilterNode::createCtor(context));
+
+    // Shaders
+    installFunction("ShaderNode", JsiShaderNode::createCtor(context));
+    installFunction("ImageShaderNode", JsiImageShaderNode::createCtor(context));
+    installFunction("ColorShaderNode", JsiColorShaderNode::createCtor(context));
+    installFunction("TurbulenceNode", JsiTurbulenceNode::createCtor(context));
+    installFunction("FractalNoiseNode",
+                    JsiFractalNoiseNode::createCtor(context));
+    installFunction("LinearGradientNode",
+                    JsiLinearGradientNode::createCtor(context));
+    installFunction("RadialGradientNode",
+                    JsiRadialGradientNode::createCtor(context));
+    installFunction("SweepGradientNode",
+                    JsiSweepGradientNode::createCtor(context));
+    installFunction("TwoPointConicalGradientNode",
+                    JsiTwoPointConicalGradientNode::createCtor(context));
+
+    installFunction("BackdropFilterNode",
+                    JsiBackdropFilterNode::createCtor(context));
+    installFunction("BlendNode", JsiBlendNode::createCtor(context));
+    installFunction("BoxNode", JsiBoxNode::createCtor(context));
+    installFunction("BoxShadowNode", JsiBoxShadowNode::createCtor(context));
+
+    installFunction("CustomDrawingNode",
+                    JsiCustomDrawingNode::createCtor(context));
+
+    installFunction("GlyphsNode", JsiGlyphsNode::createCtor(context));
+    installFunction("TextNode", JsiTextNode::createCtor(context));
+    installFunction("TextPathNode", JsiTextPathNode::createCtor(context));
+    installFunction("TextBlobNode", JsiTextBlobNode::createCtor(context));
+
+    installFunction("LayerNode", JsiLayerNode::createCtor(context));
+  }
+};
+
+} // namespace RNSkia

package/cpp/rnskia/dom/base/BaseNodeProp.h

@@ -0,0 +1,72 @@
+#pragma once
+
+#include "DrawingContext.h"
+#include "JsiValue.h"
+
+#include <string>
+
+namespace RNSkia {
+
+class NodeProp;
+
+using namespace RNJsi; // NOLINT
+
+using ReadPropFunc =
+    std::function<jsi::Value(jsi::Runtime &, PropId, NodeProp *prop)>;
+
+/**
+ Base class for Dom Node Properties
+ */
+class BaseNodeProp {
+public:
+  virtual ~BaseNodeProp() {}
+
+  /**
+   Use to check if the value represented by this property has a usable
+   (non-null/undefined) value or not.
+   */
+  virtual bool isSet() = 0;
+
+  /**
+   True if the property has changed since we last visited it
+   */
+  virtual bool isChanged() = 0;
+
+  /**
+   Updates any pending values that has happened from other threads, sets flags
+   for changed.
+   */
+  virtual void updatePendingChanges() = 0;
+
+  /*
+   Marks property flags for changed as resolved
+   */
+  virtual void markAsResolved() = 0;
+
+  /**
+   Override to read the value represented by this property from the Javascript
+   property object
+   */
+  virtual void readValueFromJs(jsi::Runtime &runtime,
+                               const ReadPropFunc &read) = 0;
+
+  /**
+   Returns the name (or names) in a property
+   */
+  virtual std::string getName() = 0;
+
+  /**
+   Sets the property as required
+   */
+  void require() { _isRequired = true; }
+
+  /**
+   Returns true for required props
+   */
+  bool isRequired() { return _isRequired; }
+
+private:
+  bool _isRequired = false;
+};
+
+} // namespace RNSkia

package/cpp/rnskia/dom/base/DerivedNodeProp.h

@@ -0,0 +1,187 @@
+#pragma once
+
+#include "BaseNodeProp.h"
+#include "JsiValue.h"
+
+#include <memory>
+#include <string>
+#include <utility>
+#include <vector>
+
+namespace RNSkia {
+
+/**
+ Class for composing multiple properties into a derived property value
+ */
+class BaseDerivedProp : public BaseNodeProp {
+public:
+  BaseDerivedProp() : BaseNodeProp() {}
+
+  /**
+   Starts the process of updating and reading props
+   */
+  void updatePendingChanges() override {
+    auto changed = false;
+    for (auto &prop : _properties) {
+      prop->updatePendingChanges();
+      if (prop->isChanged()) {
+        changed = true;
+      }
+    }
+
+    // We only need to update the derived value when any of the derived
+    // properties have changed.
+    if (changed) {
+      updateDerivedValue();
+    }
+  }
+
+  /*
+   Marks properties as no longer changed
+   */
+  void markAsResolved() override {
+    for (auto &prop : _properties) {
+      prop->markAsResolved();
+    }
+
+    _isChanged = false;
+  }
+
+  /**
+   Returns the changed state of the prop
+   */
+  bool isChanged() override { return _isChanged; }
+
+  /**
+   Delegate read value to child nodes
+   */
+  void readValueFromJs(jsi::Runtime &runtime,
+                       const ReadPropFunc &read) override {
+    for (auto &prop : _properties) {
+      prop->readValueFromJs(runtime, read);
+    }
+  }
+
+  /**
+   Override to calculate the derived value from child properties
+   */
+  virtual void updateDerivedValue() = 0;
+
+  /**
+   Adds a property to the derived property child props.
+   */
+  template <typename P = BaseNodeProp> P *addProperty(std::shared_ptr<P> prop) {
+    _properties.push_back(prop);
+    return prop.get();
+  }
+
+  /*
+   Return name of properties in derived prop as a comma separated list
+   */
+  std::string getName() override {
+    std::string v = "";
+    for (size_t i = 0; i < _properties.size(); ++i) {
+      v += _properties[i]->getName() + (i < _properties.size() - 1 ? ", " : "");
+    }
+    return v;
+  }
+
+  /**
+   Returns true if one or more of the child props has values
+   */
+  bool isSet() override {
+    for (auto &prop : _properties) {
+      if (prop->isSet()) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+protected:
+  void setIsChanged(bool isChanged) { _isChanged = isChanged; }
+
+private:
+  std::vector<std::shared_ptr<BaseNodeProp>> _properties;
+  std::atomic<bool> _isChanged = {false};
+};
+
+/**
+ Class for composing multiple properties into a derived property value
+ */
+template <typename T> class DerivedProp : public BaseDerivedProp {
+public:
+  DerivedProp() : BaseDerivedProp() {}
+
+  /**
+  Returns the derived value
+   */
+  std::shared_ptr<T> getDerivedValue() { return _derivedValue; }
+
+  /**
+   Returns true if is optional and one of the child props has a value, or all
+   props if optional is false.
+   */
+  bool isSet() override { return _derivedValue != nullptr; };
+
+protected:
+  /**
+   Set derived value from sub classes
+   */
+  void setDerivedValue(std::shared_ptr<T> value) {
+    setIsChanged(_derivedValue != value);
+    _derivedValue = value;
+  }
+
+  /**
+   Set derived value from sub classes
+   */
+  void setDerivedValue(const T &&value) {
+    setIsChanged(true);
+    _derivedValue = std::make_shared<T>(std::move(value));
+  }
+
+private:
+  std::shared_ptr<T> _derivedValue;
+};
+
+/**
+ Class for composing multiple properties into a derived property value
+ */
+template <typename T> class DerivedSkProp : public BaseDerivedProp {
+public:
+  DerivedSkProp() : BaseDerivedProp() {}
+
+  /**
+  Returns the derived value
+   */
+  sk_sp<T> getDerivedValue() { return _derivedValue; }
+
+  /**
+   Returns true if is optional and one of the child props has a value, or all
+   props if optional is false.
+   */
+  bool isSet() override { return _derivedValue != nullptr; };
+
+protected:
+  /**
+   Set derived value from sub classes
+   */
+  void setDerivedValue(sk_sp<T> value) {
+    setIsChanged(_derivedValue != value);
+    _derivedValue = value;
+  }
+
+  /**
+   Set derived value from sub classes
+   */
+  void setDerivedValue(const T &&value) {
+    setIsChanged(true);
+    _derivedValue = sk_make_sp<T>(std::move(value));
+  }
+
+private:
+  sk_sp<T> _derivedValue;
+};
+
+} // namespace RNSkia