@shopify/react-native-skia 0.1.120 → 0.1.123

package/cpp/rnskia/RNSkDrawView.h

@@ -20,8 +20,6 @@
 
 #pragma clang diagnostic pop
 
-#define LOG_ALL_DRAWING 0
-
 class SkPicture;
 class SkRect;
 class SkImage;
@@ -35,7 +33,7 @@ using RNSkDrawCallback =
 
 enum RNSkDrawingMode { Default, Continuous };
 
-class RNSkDrawView {
+class RNSkDrawView: public std::enable_shared_from_this<RNSkDrawView> {
 public:
   /**
    * Constructor
@@ -45,7 +43,7 @@ public:
   /**
    Destructor
    */
-  ~RNSkDrawView();
+  virtual ~RNSkDrawView();
 
   /**
    * Repaints the Skia view using the underlying context and the drawcallback.
@@ -96,14 +94,6 @@ public:
   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
    */
@@ -115,14 +105,9 @@ protected:
   virtual int getHeight() { return -1; };
   
   /**
-   Returns true if the view is invalidated
-   */
-  volatile bool isInvalidated() { return _isInvalidated; }
-  
-  /**
-   Override to be notified on invalidation
+   Override to render picture to GPU
    */
-  virtual void onInvalidated() {}
+  virtual void drawPicture(const sk_sp<SkPicture> picture) = 0;
   
   /**
    * @return The platformcontext
@@ -210,12 +195,7 @@ private:
   /**
    Timing information for GPU rendering
    */
-  RNSkTimingInfo _gpuTimingInfo;
-  
-  /**
-   Measures vsync framerate
-   */
-  RNSkTimingInfo _vsyncTimingInfo;
+  RNSkTimingInfo _gpuTimingInfo;  
   
   /**
    Redraw queue counter
@@ -227,16 +207,6 @@ private:
    */
   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/RNSkJsiViewApi.h

@@ -20,7 +20,7 @@ using CallbackInfo = struct CallbackInfo {
     view = nullptr;
   }
   std::shared_ptr<jsi::Function> drawCallback;
-  RNSkDrawView *view;
+  std::shared_ptr<RNSkDrawView> view;
 };
 
 class RNSkJsiViewApi : public JsiHostObject {
@@ -105,7 +105,7 @@ public:
     sk_sp<SkImage> image;
     auto info = getEnsuredCallbackInfo(nativeId);
     if (info->view != nullptr) {
-      if(count > 1 && !arguments[1].isUndefined() && arguments[1].isNull()) {
+      if(count > 1 && !arguments[1].isUndefined() && !arguments[1].isNull()) {
         auto rect = JsiSkRect::fromValue(runtime, arguments[1]);
         image = info->view->makeImageSnapshot(rect);
       } else {
@@ -226,7 +226,7 @@ public:
    * @param nativeId Id of view to register
    * @param view View to register
    */
-  void registerSkiaDrawView(size_t nativeId, RNSkDrawView *view) {
+  void registerSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view) {
     auto info = getEnsuredCallbackInfo(nativeId);
     info->view = view;
     if (info->drawCallback != nullptr) {
@@ -260,15 +260,18 @@ public:
    a valid view is set, the setDrawCallback method is called on the
    view (if a valid callback exists).
    */
-  void setSkiaDrawView(size_t nativeId, RNSkDrawView *view) {
+  void setSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view) {
     if (_callbackInfos.find(nativeId) == _callbackInfos.end()) {
       return;
     }
     auto info = getEnsuredCallbackInfo(nativeId);
-    info->view = view;
     if (view != nullptr && info->drawCallback != nullptr) {
+      info->view = view;
       info->view->setNativeId(nativeId);
       info->view->setDrawCallback(info->drawCallback);
+    } else if(view == nullptr && info->drawCallback != nullptr) {
+      info->view->setDrawCallback(nullptr);
+      info->view = view;
     }
   }
 

package/cpp/rnskia/RNSkManager.cpp

@@ -45,7 +45,7 @@ void RNSkManager::invalidate() {
   _platformContext->invalidate();
 }
 
-void RNSkManager::registerSkiaDrawView(size_t nativeId, RNSkDrawView *view) {
+void RNSkManager::registerSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view) {
   if (!_isInvalidated && _viewApi != nullptr)
     _viewApi->registerSkiaDrawView(nativeId, view);
 }
@@ -55,7 +55,7 @@ void RNSkManager::unregisterSkiaDrawView(size_t nativeId) {
     _viewApi->unregisterSkiaDrawView(nativeId);
 }
 
-void RNSkManager::setSkiaDrawView(size_t nativeId, RNSkDrawView *view) {
+void RNSkManager::setSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view) {
   if (!_isInvalidated && _viewApi != nullptr)
     _viewApi->setSkiaDrawView(nativeId, view);
 }

package/cpp/rnskia/RNSkManager.h

@@ -41,7 +41,7 @@ public:
    * @param nativeId Native view id
    * @param view View to register
    */
-  void registerSkiaDrawView(size_t nativeId, RNSkDrawView *view);
+  void registerSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view);
 
   /**
    * Unregisters the RNSkDrawView from the list of registered views
@@ -54,7 +54,7 @@ public:
    Used when we want to remove a view without unregistering it
    - this happens typically on iOS.
    */
-  void setSkiaDrawView(size_t nativeId, RNSkDrawView *view);
+  void setSkiaDrawView(size_t nativeId, std::shared_ptr<RNSkDrawView> view);
 
   /**
    * @return The platform context

package/cpp/rnskia/RNSkPlatformContext.h

@@ -43,7 +43,7 @@ public:
   /**
    * Destructor
    */
-  ~RNSkPlatformContext() {
+  virtual ~RNSkPlatformContext() {
     invalidate();
   }
   

package/cpp/rnskia/values/RNSkClockValue.h

@@ -8,7 +8,6 @@
 #include <algorithm>
 #include <functional>
 #include <chrono>
-#include <mutex>
 
 namespace RNSkia
 {
@@ -38,7 +37,7 @@ public:
     update(_runtime, static_cast<double>(0));
   }
   
-  ~RNSkClockValue() {
+  virtual ~RNSkClockValue() {
     stopClock();
   }
   
@@ -73,8 +72,12 @@ public:
     _start += timeSinceStop;
     
     _state = RNSkClockState::Running;
-    auto dispatch = std::bind(&RNSkClockValue::notifyUpdate, this, std::placeholders::_1);
-    getContext()->beginDrawLoop(_identifier, dispatch);
+    getContext()->beginDrawLoop(_identifier, [weakSelf = weak_from_this()](bool invalidated){
+      auto self = weakSelf.lock();
+      if(self) {
+        std::dynamic_pointer_cast<RNSkClockValue>(self)->notifyUpdate(invalidated);
+      }
+    });
   }
   
   virtual void stopClock() {
@@ -100,15 +103,20 @@ protected:
       return;
     }
     
-    // Avoid moving on if we are being called after the dtor was started
     // Ensure we call any updates from the draw loop on the javascript thread
     getContext()->runOnJavascriptThread(
-      [this]() {
-      if(_state == RNSkClockState::Running) {
-        auto now = std::chrono::high_resolution_clock::now();
-        auto deltaFromStart = std::chrono::duration_cast<std::chrono::milliseconds>(now - _start).count();
-        tick(_runtime, static_cast<double>(deltaFromStart));
-      }
+      // To ensure that this shared_ptr instance is not deallocated before we are done
+      // running the update lambda we pass a shared from this to the lambda scope.
+      [weakSelf = weak_from_this()]() {
+        auto self = weakSelf.lock();
+        if(self) {
+          auto selfClockValue = std::dynamic_pointer_cast<RNSkClockValue>(self);
+          if(selfClockValue->getState() == RNSkClockState::Running) {
+            auto now = std::chrono::high_resolution_clock::now();
+            auto deltaFromStart = std::chrono::duration_cast<std::chrono::milliseconds>(now - selfClockValue->_start).count();
+            selfClockValue->tick(selfClockValue->_runtime, static_cast<double>(deltaFromStart));
+          }
+        }
     });
   }
   

package/cpp/rnskia/values/RNSkDerivedValue.h

@@ -73,7 +73,7 @@ public:
     dependencyUpdated(runtime);
   }
   
-  ~RNSkDerivedValue() {
+  virtual ~RNSkDerivedValue() {
     // Unregister listeners
     for(const auto &unsubscribe: _unsubscribers) {
       unsubscribe();

package/cpp/rnskia/values/RNSkReadonlyValue.h

@@ -4,9 +4,7 @@
 #include <algorithm>
 #include <functional>
 #include <chrono>
-#include <mutex>
 #include <unordered_map>
-#include <utility>
 #include <memory>
 
 #include <jsi/jsi.h>
@@ -22,16 +20,15 @@ using namespace facebook;
  Implements a readonly Value that is updated every time the screen is redrawn. Its value will be the
  number of milliseconds since the animation value was started.
  */
-class RNSkReadonlyValue : public JsiSkHostObject
+class RNSkReadonlyValue : public JsiSkHostObject,
+                          public std::enable_shared_from_this<RNSkReadonlyValue>
 {
 public:
   RNSkReadonlyValue(std::shared_ptr<RNSkPlatformContext> platformContext)
       : JsiSkHostObject(platformContext),
     _propNameId(jsi::PropNameID::forUtf8(*platformContext->getJsRuntime(), "value")) {}
   
-  ~RNSkReadonlyValue() {
-    _invalidated = true;
-  }
+  virtual ~RNSkReadonlyValue() { }
 
   JSI_PROPERTY_GET(__typename__) {
     return jsi::String::createFromUtf8(runtime, "RNSkValue");
@@ -43,8 +40,7 @@ public:
   
   JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(RNSkReadonlyValue, __typename__),
                               JSI_EXPORT_PROP_GET(RNSkReadonlyValue, current))
-    
-  
+      
   JSI_HOST_FUNCTION(addListener) {
     if(!arguments[0].isObject() || !arguments[0].asObject(runtime).isFunction(runtime)) {
       jsi::detail::throwJSError(runtime, "Expected function as first parameter.");
@@ -52,8 +48,13 @@ public:
     }
     auto callback = std::make_shared<jsi::Function>(arguments[0].asObject(runtime).asFunction(runtime));
     
-    auto unsubscribe = addListener([this, callback = std::move(callback)](jsi::Runtime& runtime){
-      callback->call(runtime, get_current(runtime));
+    auto unsubscribe = addListener([weakSelf = weak_from_this(),
+                                    callback = std::move(callback)](jsi::Runtime& runtime){
+      auto self = weakSelf.lock();
+      if(self) {
+        auto selfReadonlyValue = std::dynamic_pointer_cast<RNSkReadonlyValue>(self);
+        callback->call(runtime, selfReadonlyValue->get_current(runtime));
+      }
     });
     
     return jsi::Function::createFromHostFunction(runtime,
@@ -76,9 +77,10 @@ public:
     std::lock_guard<std::mutex> lock(_mutex);
     auto listenerId = _listenerId++;
     _listeners.emplace(listenerId, cb);
-    return [this, listenerId]() {
-      if(!_invalidated) {
-        removeListener(listenerId);
+    return [weakSelf = weak_from_this(), listenerId]() {
+      auto self = weakSelf.lock();
+      if(self) {
+        self->removeListener(listenerId);
       }
     };
   }
@@ -128,8 +130,6 @@ protected:
     _listeners.erase(listenerId);
   }
 
-  std::atomic<bool> _invalidated = { false };
-
 private:
   jsi::PropNameID _propNameId;
   std::shared_ptr<jsi::Object> _valueHolder;

package/cpp/utils/RNSkTimingInfo.h

@@ -1,5 +1,6 @@
 #pragma once
 
+#include <RNSkLog.h>
 #include <chrono>
 
 #define NUMBER_OF_DURATION_SAMPLES 10
@@ -12,7 +13,7 @@ using ms = duration<float, std::milli>;
 
 class RNSkTimingInfo {
 public:
-  RNSkTimingInfo() {
+  RNSkTimingInfo(const std::string &name): _name(std::move(name)) {
     reset();
   }
 
@@ -25,6 +26,7 @@ public:
     _prevFpsTimer = -1;
     _frameCount = 0;
     _lastFrameCount = -1;
+    _didSkip = false;
   }
   
   void beginTiming() {
@@ -35,6 +37,14 @@ public:
     time_point<steady_clock> stop = high_resolution_clock::now();
     addLastDuration(duration_cast<milliseconds>(stop - _start).count());
     tick(stop);
+    if(_didSkip) {
+      _didSkip = false;
+      RNSkLogger::logToConsole("%s: Skipped frame. Previous frame time: %lldms", _name.c_str(), _lastDuration);
+    }
+  }
+
+  void markSkipped() {
+    _didSkip = true;
   }
 
   long getAverage() { return static_cast<long>(_average); }
@@ -86,6 +96,8 @@ private:
   long _prevFpsTimer;
   double _frameCount;
   double _lastFrameCount;
+  double _didSkip;
+  std::string _name;
 };
 
 } // namespace RNSkia

package/ios/RNSkia-iOS/RNSkDrawViewImpl.h

@@ -21,20 +21,18 @@
 class RNSkDrawViewImpl : public RNSkia::RNSkDrawView {
 public:
   RNSkDrawViewImpl(std::shared_ptr<RNSkia::RNSkPlatformContext> context);
+  ~RNSkDrawViewImpl();
   
-  void setSize(int width, int height);
+  CALayer* getLayer() { return _layer; }
   
-  CALayer* getLayer() { return _layer; };
+  void setSize(int width, int height);
 
 protected:
   int getWidth() override { return _width * _context->getPixelDensity(); };
-  int getHeight() override { return _height * _context->getPixelDensity(); };
-  void onInvalidated() override {
-    setNativeDrawFunc(nullptr);
-  };
+  int getHeight() override { return _height * _context->getPixelDensity(); };  
   
 private:
-  void drawFrame(const sk_sp<SkPicture> picture);
+  void drawPicture(const sk_sp<SkPicture> picture) override;
   bool createSkiaSurface();
 
   int _nativeId;

package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm

@@ -19,19 +19,34 @@ sk_sp<GrDirectContext> RNSkDrawViewImpl::_skContext = nullptr;
 
 RNSkDrawViewImpl::RNSkDrawViewImpl(std::shared_ptr<RNSkia::RNSkPlatformContext> context):
   _context(context), RNSkia::RNSkDrawView(context) {
-    
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wunguarded-availability-new"
-    _layer = [CAMetalLayer layer];
+  _layer = [CAMetalLayer layer];
 #pragma clang diagnostic pop
     
-    _layer.framebufferOnly = NO;
-    _layer.device = _device;
-    _layer.opaque = false;
-    _layer.contentsScale = _context->getPixelDensity();
-    _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
-    
-    setNativeDrawFunc(std::bind(&RNSkDrawViewImpl::drawFrame, this, std::placeholders::_1));
+  _layer.framebufferOnly = NO;
+  _layer.device = _device;
+  _layer.opaque = false;
+  _layer.contentsScale = _context->getPixelDensity();
+  _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
+}
+
+RNSkDrawViewImpl::~RNSkDrawViewImpl() {
+  if([[NSThread currentThread] isMainThread]) {
+    _layer = NULL;
+  } else {
+    __block auto tempLayer = _layer;
+    dispatch_async(dispatch_get_main_queue(), ^{
+      // By using the tempLayer variable in the block we capture it and it will be
+      // released after the block has finished. This way the CAMetalLayer dealloc will
+      // only be called on the main thread. Problem: this destructor might be called from
+      // releasing the RNSkDrawViewImpl from a thread capture (after dtor has started),
+      // which would cause the CAMetalLayer dealloc to be called on another thread which
+      // causes a crash.
+      // https://github.com/Shopify/react-native-skia/issues/398
+      tempLayer = tempLayer;
+    });
+  }
 }
 
 void RNSkDrawViewImpl::setSize(int width, int height) {
@@ -44,7 +59,7 @@ void RNSkDrawViewImpl::setSize(int width, int height) {
   requestRedraw();
 }
 
-void RNSkDrawViewImpl::drawFrame(const sk_sp<SkPicture> picture) {
+void RNSkDrawViewImpl::drawPicture(const sk_sp<SkPicture> picture) {
   if(_width == -1 && _height == -1) {
     return;
   }

package/ios/RNSkia-iOS/SkiaDrawView.mm

@@ -26,53 +26,59 @@
     _nativeId = 0;
     _debugMode = false;
     _drawingMode = RNSkia::RNSkDrawingMode::Default;
+    
     // Listen to notifications about module invalidation
+    __unsafe_unretained SkiaDrawView *weakSelf = self;
     auto nc = [NSNotificationCenter defaultCenter];
     [nc addObserverForName:RCTBridgeWillInvalidateModulesNotification
                     object:nil
                      queue:nil
                 usingBlock:^(NSNotification *notification){
       // Remove local variables
-      self->_manager = nullptr;                
+      if(weakSelf != nullptr) {
+        weakSelf->_manager = nullptr;
+      }
     }];
   }
   return self;
 }
 
-- (void)dealloc {
-  if(_manager != nullptr) {
-    _manager->unregisterSkiaDrawView(_nativeId);
-  }
-}
-
 #pragma mark Lifecycle
 
-- (void) willMoveToWindow:(UIWindow *)newWindow {
-  [super willMoveToWindow: newWindow];
-  
+- (void) willMoveToSuperview:(UIView *)newWindow {
   if (newWindow == NULL) {
     // Remove implementation view when the parent view is not set
     if(_impl != nullptr) {
+      [_impl->getLayer() removeFromSuperlayer];
+      
       if(_nativeId != 0 && _manager != nullptr) {
         _manager->setSkiaDrawView(_nativeId, nullptr);
       }
-      [_impl->getLayer() removeFromSuperlayer];
+      
       _impl = nullptr;
     }
   } else {
     // Create implementation view when the parent view is set
     if(_impl == nullptr && _manager != nullptr) {
       _impl = std::make_shared<RNSkDrawViewImpl>(_manager->getPlatformContext());
-      [self.layer addSublayer:_impl->getLayer()];
+      [self.layer addSublayer: _impl->getLayer()];
       if(_nativeId != 0) {
-        _manager->setSkiaDrawView(_nativeId, _impl.get());
+        _manager->setSkiaDrawView(_nativeId, _impl);
       }
       _impl->setDrawingMode(_drawingMode);
-      _impl->setShowDebugOverlays(_debugMode);      
+      _impl->setShowDebugOverlays(_debugMode);
     }
   }
 }
 
+- (void) dealloc {
+  auto nc = [NSNotificationCenter defaultCenter];
+  [nc removeObserver:self name:RCTBridgeWillInvalidateModulesNotification object:nil];
+  if(_manager != nullptr && _nativeId != 0) {
+    _manager->unregisterSkiaDrawView(_nativeId);
+  }
+}
+
 #pragma mark Layout
 
 - (void) layoutSubviews {
@@ -103,7 +109,7 @@
   _nativeId = nativeId;
   
   if(_impl != nullptr) {
-    _manager->registerSkiaDrawView(nativeId, _impl.get());
+    _manager->registerSkiaDrawView(nativeId, _impl);
   }
 }
 

package/lib/commonjs/renderer/Canvas.js

@@ -15,6 +15,8 @@ var _skia = require("../skia");
 
 var _useValue = require("../values/hooks/useValue");
 
+var _Paint = require("../skia/Paint/Paint");
+
 var _HostConfig = require("./HostConfig");
 
 var _processors = require("./processors");
@@ -109,9 +111,7 @@ const Canvas = /*#__PURE__*/(0, _react.forwardRef)((_ref, forwardedRef) => {
       };
     }
 
-    const paint = _skia.Skia.Paint();
-
-    paint.setAntiAlias(true);
+    const paint = (0, _Paint.SkiaPaint)();
     const ctx = {
       width,
       height,

package/lib/commonjs/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Canvas.tsx"],"names":["CanvasContext","React","createContext","useCanvasSize","canvas","Error","skiaReconciler","skHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","subscribe","useCanvasRef","defaultFontMgr","Skia","FontMgr","RefDefault","Canvas","forwardedRef","children","style","debug","mode","onTouch","fontMgr","canvasCtx","width","height","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","Container","DependencyManager","createContainer","onDraw","info","timestamp","touches","current","paint","Paint","setAntiAlias","ctx","opacity","center","draw","unsubscribe","refs","targetRef","useRef","useEffect","forEach"],"mappings":";;;;;;;AAAA;;AAiBA;;AAEA;;AAEA;;AAEA;;AAGA;;AAEA;;AACA;;AACA;;;;;;;;AAHA;AAKA,MAAMA,aAAa,gBAAGC,eAAMC,aAAN,CAGX,IAHW,CAAtB;;AAKO,MAAMC,aAAa,GAAG,MAAM;AACjC,QAAMC,MAAM,GAAG,uBAAWJ,aAAX,CAAf;;AACA,MAAI,CAACI,MAAL,EAAa;AACX,UAAM,IAAIC,KAAJ,CAAU,iCAAV,CAAN;AACD;;AACD,SAAOD,MAAP;AACD,CANM;;;AAQA,MAAME,cAAc,GAAG,8BAAgBC,wBAAhB,CAAvB;;AAEPD,cAAc,CAACE,kBAAf,CAAkC;AAChCC,EAAAA,UAAU,EAAE,CADoB;AAEhCC,EAAAA,OAAO,EAAE,OAFuB;AAGhCC,EAAAA,mBAAmB,EAAE;AAHW,CAAlC;;AAMA,MAAMC,MAAM,GAAG,CAACC,OAAD,EAAqBC,IAArB,EAAuCC,SAAvC,KAAgE;AAC7ET,EAAAA,cAAc,CAACU,eAAf,CAA+BH,OAA/B,EAAwCC,IAAxC,EAA8C,IAA9C,EAAoD,MAAM;AACxD,2BAAU,iBAAV;AAEAC,IAAAA,SAAS,CAACE,MAAV,CAAiBC,SAAjB;AACD,GAJD;AAKD,CAND;;AAQO,MAAMC,YAAY,GAAG,MAAM,mBAAiB,IAAjB,CAA3B;;;;AASP,MAAMC,cAAc,GAAGC,WAAKC,OAAL,CAAaC,UAAb,EAAvB;;AAEO,MAAMC,MAAM,gBAAG,uBACpB,OAAqDC,YAArD,KAAsE;AAAA,MAArE;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,KAAZ;AAAmBC,IAAAA,KAAnB;AAA0BC,IAAAA,IAA1B;AAAgCC,IAAAA,OAAhC;AAAyCC,IAAAA;AAAzC,GAAqE;AACpE,QAAMC,SAAS,GAAG,wBAAS;AAAEC,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAAT,CAAlB;AACA,QAAMC,QAAQ,GAAGhB,YAAY,EAA7B;AACA,QAAMiB,GAAG,GAAGC,eAAe,CAACZ,YAAD,EAAeU,QAAf,CAA3B;AACA,QAAM,CAACG,IAAD,EAAOC,OAAP,IAAkB,qBAAS,CAAT,CAAxB;AACA,QAAMC,MAAM,GAAG,wBAAY,MAAMD,OAAO,CAAEE,CAAD,IAAOA,CAAC,GAAG,CAAZ,CAAzB,EAAyC,EAAzC,CAAf;AAEA,QAAM1B,SAAS,GAAG,oBAChB,MAAM,IAAI2B,gBAAJ,CAAc,IAAIC,oCAAJ,CAAsBP,GAAtB,CAAd,EAA0CI,MAA1C,CADU,EAEhB,CAACA,MAAD,EAASJ,GAAT,CAFgB,CAAlB;AAKA,QAAMtB,IAAI,GAAG,oBACX,MAAMR,cAAc,CAACsC,eAAf,CAA+B7B,SAA/B,EAA0C,CAA1C,EAA6C,KAA7C,EAAoD,IAApD,CADK,EAEX,CAACA,SAAD,CAFW,CAAb,CAZoE,CAgBpE;;AACA,wBAAU,MAAM;AACdH,IAAAA,MAAM,eACJ,6BAAC,aAAD,CAAe,QAAf;AAAwB,MAAA,KAAK,EAAEoB;AAA/B,OACGN,QADH,CADI,EAIJZ,IAJI,EAKJC,SALI,CAAN;AAOD,GARD,EAQG,CAACW,QAAD,EAAWZ,IAAX,EAAiB0B,MAAjB,EAAyBzB,SAAzB,EAAoCiB,SAApC,CARH,EAjBoE,CA2BpE;;AACA,QAAMa,MAAM,GAAG,4BACb,CAACzC,MAAD,EAAS0C,IAAT,KAAkB;AAChB;AACA,UAAM;AAAEb,MAAAA,KAAF;AAASC,MAAAA,MAAT;AAAiBa,MAAAA;AAAjB,QAA+BD,IAArC;;AACA,QAAIhB,OAAJ,EAAa;AACXA,MAAAA,OAAO,CAACgB,IAAI,CAACE,OAAN,CAAP;AACD;;AACD,QACEf,KAAK,KAAKD,SAAS,CAACiB,OAAV,CAAkBhB,KAA5B,IACAC,MAAM,KAAKF,SAAS,CAACiB,OAAV,CAAkBf,MAF/B,EAGE;AACAF,MAAAA,SAAS,CAACiB,OAAV,GAAoB;AAAEhB,QAAAA,KAAF;AAASC,QAAAA;AAAT,OAApB;AACD;;AACD,UAAMgB,KAAK,GAAG7B,WAAK8B,KAAL,EAAd;;AACAD,IAAAA,KAAK,CAACE,YAAN,CAAmB,IAAnB;AACA,UAAMC,GAAG,GAAG;AACVpB,MAAAA,KADU;AAEVC,MAAAA,MAFU;AAGVa,MAAAA,SAHU;AAIV3C,MAAAA,MAJU;AAKV8C,MAAAA,KALU;AAMVI,MAAAA,OAAO,EAAE,CANC;AAOVlB,MAAAA,GAPU;AAQVmB,MAAAA,MAAM,EAAE,qBAAItB,KAAK,GAAG,CAAZ,EAAeC,MAAM,GAAG,CAAxB,CARE;AASVH,MAAAA,OAAO,EAAEA,OAAF,aAAEA,OAAF,cAAEA,OAAF,GAAaX;AATV,KAAZ;AAWAL,IAAAA,SAAS,CAACyC,IAAV,CAAeH,GAAf;AACD,GA3BY,EA4Bb,CAACf,IAAD,EAAOR,OAAP,CA5Ba,CAAf;AA+BA,wBAAU,MAAM;AACd,WAAO,MAAM;AACXf,MAAAA,SAAS,CAACE,MAAV,CAAiBwC,WAAjB;AACD,KAFD;AAGD,GAJD,EAIG,CAAC1C,SAAD,CAJH;AAMA,sBACE,6BAAC,eAAD;AACE,IAAA,GAAG,EAAEqB,GADP;AAEE,IAAA,KAAK,EAAET,KAFT;AAGE,IAAA,MAAM,EAAEkB,MAHV;AAIE,IAAA,IAAI,EAAEhB,IAJR;AAKE,IAAA,KAAK,EAAED;AALT,IADF;AASD,CA3EmB,CAAf;AA8EP;AACA;AACA;AACA;AACA;AACA;AACA;;;;AACA,MAAMS,eAAe,GAAG,YAEnB;AAAA,oCADAqB,IACA;AADAA,IAAAA,IACA;AAAA;;AACH,QAAMC,SAAS,GAAG1D,eAAM2D,MAAN,CAAgB,IAAhB,CAAlB;;AACA3D,iBAAM4D,SAAN,CAAgB,MAAM;AACpBH,IAAAA,IAAI,CAACI,OAAL,CAAc1B,GAAD,IAAS;AACpB,UAAIA,GAAJ,EAAS;AACP,YAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;AAC7BA,UAAAA,GAAG,CAACuB,SAAS,CAACV,OAAX,CAAH;AACD,SAFD,MAEO;AACLb,UAAAA,GAAG,CAACa,OAAJ,GAAcU,SAAS,CAACV,OAAxB;AACD;AACF;AACF,KARD;AASD,GAVD,EAUG,CAACS,IAAD,CAVH;;AAWA,SAAOC,SAAP;AACD,CAhBD","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useContext,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { Skia } from \"../skia\";\nimport type { FontMgr } from \"../skia/FontMgr/FontMgr\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport type { SkiaReadonlyValue } from \"../values/types\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { vec } from \"./processors\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\n\nconst CanvasContext = React.createContext<SkiaReadonlyValue<{\n  width: number;\n  height: number;\n}> | null>(null);\n\nexport const useCanvasSize = () => {\n  const canvas = useContext(CanvasContext);\n  if (!canvas) {\n    throw new Error(\"Canvas context is not available\");\n  }\n  return canvas;\n};\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n\n    container.depMgr.subscribe();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n  fontMgr?: FontMgr;\n}\n\nconst defaultFontMgr = Skia.FontMgr.RefDefault();\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {\n    const canvasCtx = useValue({ width: 0, height: 0 });\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(ref), redraw),\n      [redraw, ref]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasContext.Provider value={canvasCtx}>\n          {children}\n        </CanvasContext.Provider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.current.width ||\n          height !== canvasCtx.current.height\n        ) {\n          canvasCtx.current = { width, height };\n        }\n        const paint = Skia.Paint();\n        paint.setAntiAlias(true);\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: vec(width / 2, height / 2),\n          fontMgr: fontMgr ?? defaultFontMgr,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        container.depMgr.unsubscribe();\n      };\n    }, [container]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}
+{"version":3,"sources":["Canvas.tsx"],"names":["CanvasContext","React","createContext","useCanvasSize","canvas","Error","skiaReconciler","skHostConfig","injectIntoDevTools","bundleType","version","rendererPackageName","render","element","root","container","updateContainer","depMgr","subscribe","useCanvasRef","defaultFontMgr","Skia","FontMgr","RefDefault","Canvas","forwardedRef","children","style","debug","mode","onTouch","fontMgr","canvasCtx","width","height","innerRef","ref","useCombinedRefs","tick","setTick","redraw","t","Container","DependencyManager","createContainer","onDraw","info","timestamp","touches","current","paint","ctx","opacity","center","draw","unsubscribe","refs","targetRef","useRef","useEffect","forEach"],"mappings":"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","sourcesContent":["import React, {\n  useEffect,\n  useState,\n  useCallback,\n  useMemo,\n  useContext,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  ComponentProps,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport { SkiaView, useDrawCallback } from \"../views\";\nimport type { TouchHandler } from \"../views\";\nimport { Skia } from \"../skia\";\nimport type { FontMgr } from \"../skia/FontMgr/FontMgr\";\nimport { useValue } from \"../values/hooks/useValue\";\nimport type { SkiaReadonlyValue } from \"../values/types\";\nimport { SkiaPaint } from \"../skia/Paint/Paint\";\n\nimport { debug as hostDebug, skHostConfig } from \"./HostConfig\";\n// import { debugTree } from \"./nodes\";\nimport { vec } from \"./processors\";\nimport { Container } from \"./nodes\";\nimport { DependencyManager } from \"./DependencyManager\";\n\nconst CanvasContext = React.createContext<SkiaReadonlyValue<{\n  width: number;\n  height: number;\n}> | null>(null);\n\nexport const useCanvasSize = () => {\n  const canvas = useContext(CanvasContext);\n  if (!canvas) {\n    throw new Error(\"Canvas context is not available\");\n  }\n  return canvas;\n};\n\nexport const skiaReconciler = ReactReconciler(skHostConfig);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nconst render = (element: ReactNode, root: OpaqueRoot, container: Container) => {\n  skiaReconciler.updateContainer(element, root, null, () => {\n    hostDebug(\"updateContainer\");\n\n    container.depMgr.subscribe();\n  });\n};\n\nexport const useCanvasRef = () => useRef<SkiaView>(null);\n\nexport interface CanvasProps extends ComponentProps<typeof SkiaView> {\n  ref?: RefObject<SkiaView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n  fontMgr?: FontMgr;\n}\n\nconst defaultFontMgr = Skia.FontMgr.RefDefault();\n\nexport const Canvas = forwardRef<SkiaView, CanvasProps>(\n  ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {\n    const canvasCtx = useValue({ width: 0, height: 0 });\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const [tick, setTick] = useState(0);\n    const redraw = useCallback(() => setTick((t) => t + 1), []);\n\n    const container = useMemo(\n      () => new Container(new DependencyManager(ref), redraw),\n      [redraw, ref]\n    );\n\n    const root = useMemo(\n      () => skiaReconciler.createContainer(container, 0, false, null),\n      [container]\n    );\n    // Render effect\n    useEffect(() => {\n      render(\n        <CanvasContext.Provider value={canvasCtx}>\n          {children}\n        </CanvasContext.Provider>,\n        root,\n        container\n      );\n    }, [children, root, redraw, container, canvasCtx]);\n\n    // Draw callback\n    const onDraw = useDrawCallback(\n      (canvas, info) => {\n        // TODO: if tree is empty (count === 1) maybe we should not render?\n        const { width, height, timestamp } = info;\n        if (onTouch) {\n          onTouch(info.touches);\n        }\n        if (\n          width !== canvasCtx.current.width ||\n          height !== canvasCtx.current.height\n        ) {\n          canvasCtx.current = { width, height };\n        }\n        const paint = SkiaPaint();\n        const ctx = {\n          width,\n          height,\n          timestamp,\n          canvas,\n          paint,\n          opacity: 1,\n          ref,\n          center: vec(width / 2, height / 2),\n          fontMgr: fontMgr ?? defaultFontMgr,\n        };\n        container.draw(ctx);\n      },\n      [tick, onTouch]\n    );\n\n    useEffect(() => {\n      return () => {\n        container.depMgr.unsubscribe();\n      };\n    }, [container]);\n\n    return (\n      <SkiaView\n        ref={ref}\n        style={style}\n        onDraw={onDraw}\n        mode={mode}\n        debug={debug}\n      />\n    );\n  }\n);\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"]}

package/lib/commonjs/renderer/components/Paint.js

@@ -23,7 +23,7 @@ const usePaintRef = () => (0, _react.useRef)(null);
 
 exports.usePaintRef = usePaintRef;
 const Paint = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const paint = (0, _react.useMemo)(() => _skia.Skia.Paint(), []);
+  const paint = (0, _react.useMemo)(() => (0, _skia.SkiaPaint)(), []);
   (0, _react.useImperativeHandle)(ref, () => paint, [paint]);
   const onDeclare = (0, _react.useMemo)(() => (0, _nodes.createDeclaration)((paintProps, children, ctx) => (0, _processors.processPaint)(paint, ctx.opacity, paintProps, children)), [paint]);
   return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({

package/lib/commonjs/renderer/components/Paint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Paint.tsx"],"names":["usePaintRef","Paint","props","ref","paint","Skia","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;AACA;;;;;;;;AAEO,MAAMA,WAAW,GAAG,MAAM,mBAAgB,IAAhB,CAA1B;;;AAMA,MAAMC,KAAK,gBAAG,uBACnB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAG,oBAAQ,MAAMC,WAAKJ,KAAL,EAAd,EAA4B,EAA5B,CAAd;AACA,kCAAoBE,GAApB,EAAyB,MAAMC,KAA/B,EAAsC,CAACA,KAAD,CAAtC;AACA,QAAME,SAAS,GAAG,oBAChB,MACE,8BAA8B,CAACC,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5B,8BAAaL,KAAb,EAAoBK,GAAG,CAACC,OAAxB,EAAiCH,UAAjC,EAA6CC,QAA7C,CADF,CAFc,EAKhB,CAACJ,KAAD,CALgB,CAAlB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEE;AAA1B,KAAyCJ,KAAzC,EAAP;AACD,CAZkB,CAAd","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { Skia } from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => Skia.Paint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) =>\n          processPaint(paint, ctx.opacity, paintProps, children)\n        ),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}
+{"version":3,"sources":["Paint.tsx"],"names":["usePaintRef","Paint","props","ref","paint","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;AACA;;;;;;;;AAEO,MAAMA,WAAW,GAAG,MAAM,mBAAgB,IAAhB,CAA1B;;;AAMA,MAAMC,KAAK,gBAAG,uBACnB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAG,oBAAQ,MAAM,sBAAd,EAA2B,EAA3B,CAAd;AACA,kCAAoBD,GAApB,EAAyB,MAAMC,KAA/B,EAAsC,CAACA,KAAD,CAAtC;AACA,QAAMC,SAAS,GAAG,oBAChB,MACE,8BAA8B,CAACC,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5B,8BAAaJ,KAAb,EAAoBI,GAAG,CAACC,OAAxB,EAAiCH,UAAjC,EAA6CC,QAA7C,CADF,CAFc,EAKhB,CAACH,KAAD,CALgB,CAAlB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEC;AAA1B,KAAyCH,KAAzC,EAAP;AACD,CAZkB,CAAd","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { SkiaPaint } from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => SkiaPaint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) =>\n          processPaint(paint, ctx.opacity, paintProps, children)\n        ),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}

package/lib/commonjs/renderer/components/shapes/Path.js

@@ -11,6 +11,8 @@ var _nodes = require("../../nodes");
 
 var _processors = require("../../processors");
 
+var _skia = require("../../../skia");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -24,15 +26,21 @@ const onDraw = (0, _nodes.createDrawing)((_ref, _ref2) => {
     start,
     end,
     stroke,
+    fillType,
     ...pathProps
   } = _ref2;
   const hasStartOffset = start !== 0;
-  const hasEndOffset = start !== 1;
+  const hasEndOffset = end !== 1;
   const hasStrokeOptions = stroke !== undefined;
-  const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;
+  const hasFillType = !!fillType;
+  const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
   const pristinePath = (0, _processors.processPath)(pathProps.path);
   const path = willMutatePath ? pristinePath.copy() : pristinePath;
 
+  if (hasFillType) {
+    path.setFillType(_skia.FillType[(0, _processors.enumKey)(fillType)]);
+  }
+
   if (hasStrokeOptions) {
     path.stroke(stroke);
   }