@shopify/react-native-skia 0.1.162 → 0.1.164

package/cpp/rnskia/dom/nodes/JsiShaderNodes.h

@@ -89,12 +89,10 @@ protected:
 
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseDomDeclarationNode::defineProperties(container);
-    _sourceProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("source")));
-    _uniformsProp = container->defineProperty(std::make_shared<UniformsProp>(
-        JsiPropId::get("uniforms"), _sourceProp));
-    _transformProp = container->defineProperty(
-        std::make_shared<TransformProp>(JsiPropId::get("transform")));
+    _sourceProp = container->defineProperty<NodeProp>("source");
+    _uniformsProp =
+        container->defineProperty<UniformsProp>("uniforms", _sourceProp);
+    _transformProp = container->defineProperty<TransformProp>("transform");
 
     _sourceProp->require();
   }
@@ -141,18 +139,13 @@ protected:
 
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseDomDeclarationNode::defineProperties(container);
-    _txProp = container->defineProperty(
-        std::make_shared<TileModeProp>(JsiPropId::get("tx")));
-    _tyProp = container->defineProperty(
-        std::make_shared<TileModeProp>(JsiPropId::get("ty")));
-    _filterModeProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("fm")));
-    _mipmapModeProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("mm")));
-
-    _imageProps = container->defineProperty(std::make_shared<ImageProps>());
-    _transformProp = container->defineProperty(
-        std::make_shared<TransformProp>(JsiPropId::get("transform")));
+    _txProp = container->defineProperty<TileModeProp>("tx");
+    _tyProp = container->defineProperty<TileModeProp>("ty");
+    _filterModeProp = container->defineProperty<NodeProp>("fm");
+    _mipmapModeProp = container->defineProperty<NodeProp>("mm");
+
+    _imageProps = container->defineProperty<ImageProps>();
+    _transformProp = container->defineProperty<TransformProp>("transform");
 
     _txProp->require();
     _tyProp->require();
@@ -161,10 +154,8 @@ protected:
 
     _transformProp->require();
 
-    // Just require the image
-    container
-        ->defineProperty(std::make_shared<NodeProp>(JsiPropId::get("image")))
-        ->require();
+    // Add and require the image
+    container->defineProperty<NodeProp>("image")->require();
   }
 
 private:
@@ -221,8 +212,7 @@ protected:
 
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseDomDeclarationNode::defineProperties(container);
-    _colorProp = container->defineProperty(
-        std::make_shared<ColorProp>(JsiPropId::get("color")));
+    _colorProp = container->defineProperty<ColorProp>("color");
     _colorProp->require();
   }
 
@@ -239,18 +229,12 @@ public:
 protected:
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseDomDeclarationNode::defineProperties(container);
-    _freqXProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("freqX")));
-    _freqYProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("freqY")));
-    _octavesProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("octaves")));
-    _seedProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("seed")));
-    _tileWidthProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("tileWidth")));
-    _tileHeightProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("tileHeight")));
+    _freqXProp = container->defineProperty<NodeProp>("freqX");
+    _freqYProp = container->defineProperty<NodeProp>("freqY");
+    _octavesProp = container->defineProperty<NodeProp>("octaves");
+    _seedProp = container->defineProperty<NodeProp>("seed");
+    _tileWidthProp = container->defineProperty<NodeProp>("tileWidth");
+    _tileHeightProp = container->defineProperty<NodeProp>("tileHeight");
 
     _freqXProp->require();
     _freqYProp->require();
@@ -317,17 +301,12 @@ public:
 
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseDomDeclarationNode::defineProperties(container);
-    _transformsProps =
-        container->defineProperty(std::make_shared<TransformsProps>());
-
-    _colorsProp = container->defineProperty(
-        std::make_shared<ColorsProp>(JsiPropId::get("colors")));
-    _positionsProp = container->defineProperty(
-        std::make_shared<NumbersProp>(JsiPropId::get("positions")));
-    _modeProp = container->defineProperty(
-        std::make_shared<TileModeProp>(JsiPropId::get("mode")));
-    _flagsProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("flags")));
+    _transformsProps = container->defineProperty<TransformsProps>();
+
+    _colorsProp = container->defineProperty<ColorsProp>("colors");
+    _positionsProp = container->defineProperty<NumbersProp>("positions");
+    _modeProp = container->defineProperty<TileModeProp>("mode");
+    _flagsProp = container->defineProperty<NodeProp>("flags");
 
     _colorsProp->require();
   }
@@ -385,10 +364,8 @@ protected:
 
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseGradientNode::defineProperties(container);
-    _startProp = container->defineProperty(
-        std::make_shared<PointProp>(JsiPropId::get("start")));
-    _endProp = container->defineProperty(
-        std::make_shared<PointProp>(JsiPropId::get("end")));
+    _startProp = container->defineProperty<PointProp>("start");
+    _endProp = container->defineProperty<PointProp>("end");
 
     _startProp->require();
     _endProp->require();
@@ -420,10 +397,8 @@ protected:
 
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseGradientNode::defineProperties(container);
-    _centerProp = container->defineProperty(
-        std::make_shared<PointProp>(JsiPropId::get("c")));
-    _radiusProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("r")));
+    _centerProp = container->defineProperty<PointProp>("c");
+    _radiusProp = container->defineProperty<NodeProp>("r");
 
     _centerProp->require();
     _radiusProp->require();
@@ -457,12 +432,9 @@ protected:
 
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseGradientNode::defineProperties(container);
-    _startProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("start")));
-    _endProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("end")));
-    _centerProp = container->defineProperty(
-        std::make_shared<PointProp>(JsiPropId::get("c")));
+    _startProp = container->defineProperty<NodeProp>("start");
+    _endProp = container->defineProperty<NodeProp>("end");
+    _centerProp = container->defineProperty<PointProp>("c");
   }
 
 private:
@@ -497,14 +469,10 @@ protected:
 
   void defineProperties(NodePropsContainer *container) override {
     JsiBaseGradientNode::defineProperties(container);
-    _startProp = container->defineProperty(
-        std::make_shared<PointProp>(JsiPropId::get("start")));
-    _startRProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("startR")));
-    _endProp = container->defineProperty(
-        std::make_shared<PointProp>(JsiPropId::get("end")));
-    _endRProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("endR")));
+    _startProp = container->defineProperty<PointProp>("start");
+    _startRProp = container->defineProperty<NodeProp>("startR");
+    _endProp = container->defineProperty<PointProp>("end");
+    _endRProp = container->defineProperty<NodeProp>("endR");
   }
 
 private:

package/cpp/rnskia/dom/nodes/JsiTextBlobNode.h

@@ -26,12 +26,9 @@ protected:
   void defineProperties(NodePropsContainer *container) override {
     JsiDomDrawingNode::defineProperties(container);
 
-    _textBlobProp = container->defineProperty(
-        std::make_shared<TextBlobProp>(JsiPropId::get("blob")));
-    _xProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("x")));
-    _yProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("y")));
+    _textBlobProp = container->defineProperty<TextBlobProp>("blob");
+    _xProp = container->defineProperty<NodeProp>("x");
+    _yProp = container->defineProperty<NodeProp>("y");
 
     _textBlobProp->require();
     _xProp->require();

package/cpp/rnskia/dom/nodes/JsiTextNode.h

@@ -29,14 +29,10 @@ protected:
   void defineProperties(NodePropsContainer *container) override {
     JsiDomDrawingNode::defineProperties(container);
 
-    _fontProp = container->defineProperty(
-        std::make_shared<FontProp>(JsiPropId::get("font")));
-    _textProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("text")));
-    _xProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("x")));
-    _yProp = container->defineProperty(
-        std::make_shared<NodeProp>(JsiPropId::get("y")));
+    _fontProp = container->defineProperty<FontProp>("font");
+    _textProp = container->defineProperty<NodeProp>("text");
+    _xProp = container->defineProperty<NodeProp>("x");
+    _yProp = container->defineProperty<NodeProp>("y");
 
     _fontProp->require();
     _textProp->require();

package/cpp/rnskia/dom/nodes/JsiTextPathNode.h

@@ -21,8 +21,7 @@ protected:
 
   void defineProperties(NodePropsContainer *container) override {
     JsiDomDrawingNode::defineProperties(container);
-    _textBlobProp =
-        container->defineProperty(std::make_shared<TextPathBlobProp>());
+    _textBlobProp = container->defineProperty<TextPathBlobProp>();
   }
 
 private:

package/cpp/rnskia/dom/nodes/JsiVerticesNode.h

@@ -29,10 +29,8 @@ protected:
 
   void defineProperties(NodePropsContainer *container) override {
     JsiDomDrawingNode::defineProperties(container);
-    _verticesProps =
-        container->defineProperty(std::make_shared<VerticesProps>());
-    _blendModeProp = container->defineProperty(
-        std::make_shared<BlendModeProp>(JsiPropId::get("blendMode")));
+    _verticesProps = container->defineProperty<VerticesProps>();
+    _blendModeProp = container->defineProperty<BlendModeProp>("blendMode");
   }
 
 private:

package/cpp/rnskia/dom/props/BlendModeProp.h

@@ -43,11 +43,11 @@ private:
       return SkBlendMode::kDstOver;
     } else if (value == "srcIn") {
       return SkBlendMode::kSrcIn;
-    } else if (value == "kDstIn") {
+    } else if (value == "dstIn") {
       return SkBlendMode::kDstIn;
     } else if (value == "srcOut") {
       return SkBlendMode::kSrcOut;
-    } else if (value == "dtsOut") {
+    } else if (value == "dstOut") {
       return SkBlendMode::kDstOut;
     } else if (value == "srcATop") {
       return SkBlendMode::kSrcATop;

package/cpp/rnskia/dom/props/PaintProps.h

@@ -105,6 +105,9 @@ public:
       paint->setShader(nullptr);
       paint->setColor(*_color->getDerivedValue());
       paint->setAlphaf(context->getOpacity() * paint->getColor4f().fA);
+    } else if (context->isChanged()) {
+      auto paint = context->getMutablePaint();
+      paint->setAlphaf(context->getOpacity());
     }
 
     // Style

package/cpp/rnskia/dom/props/TransformProp.h

@@ -8,8 +8,6 @@
 
 namespace RNSkia {
 
-static PropId PropNameTransform = JsiPropId::get("transform");
-
 static PropId PropNameTranslateX = JsiPropId::get("translateX");
 static PropId PropNameTranslateY = JsiPropId::get("translateY");
 static PropId PropNameScale = JsiPropId::get("scale");

package/cpp/utils/RNSkLog.h

@@ -50,7 +50,7 @@ public:
     __android_log_write(ANDROID_LOG_INFO, "RNSkia", buffer);
 #endif
 #ifdef TARGET_OS_IPHONE
-    syslog(LOG_ERR, "%s\n", buffer);
+    syslog(LOG_ERR, "RNSKIA: %s\n", buffer);
 #endif
     va_end(args);
   }

package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.mm

@@ -4,9 +4,9 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#import <SkColorSpace.h>
-#import <SkSurface.h>
-#import <SkCanvas.h>
+#import "SkColorSpace.h"
+#import "SkSurface.h"
+#import "SkCanvas.h"
 
 #import <include/gpu/GrDirectContext.h>
 
@@ -33,9 +33,9 @@ RNSkCanvasProvider(requestRedraw),
   #pragma clang diagnostic ignored "-Wunguarded-availability-new"
   _layer = [CAMetalLayer layer];
   #pragma clang diagnostic pop
-    
+
   auto device = MTLCreateSystemDefaultDevice();
-    
+
   _layer.framebufferOnly = NO;
   _layer.device = device;
   _layer.opaque = false;
@@ -74,12 +74,13 @@ void RNSkMetalCanvasProvider::renderToCanvas(const std::function<void(SkCanvas*)
     renderContext->commandQueue = id<MTLCommandQueue>(CFRetain((GrMTLHandle)[device newCommandQueue]));
     renderContext->skContext = GrDirectContext::MakeMetal((__bridge void*)device, (__bridge void*)renderContext->commandQueue);
   }
-  
+
   // Wrap in auto release pool since we want the system to clean up after rendering
   // and not wait until later - we've seen some example of memory usage growing very
   // fast in the simulator without this.
   @autoreleasepool
   {
+
     GrMTLHandle drawableHandle;
     auto skSurface = SkSurface::MakeFromCAMetalLayer(renderContext->skContext.get(),
                                                      (__bridge GrMTLHandle)_layer,
@@ -114,7 +115,7 @@ void RNSkMetalCanvasProvider::setSize(int width, int height) {
   _layer.frame = CGRectMake(0, 0, width, height);
   _layer.drawableSize = CGSizeMake(width * _context->getPixelDensity(),
                                    height* _context->getPixelDensity());
-  
+
   _requestRedraw();
 }
 

package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h

@@ -12,7 +12,7 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#include <SkStream.h>
+#include "SkStream.h"
 
 #pragma clang diagnostic pop
 
@@ -48,6 +48,7 @@ public:
   ~RNSkiOSPlatformContext() {
     CFNotificationCenterRemoveEveryObserver(
         CFNotificationCenterGetLocalCenter(), this);
+    stopDrawLoop();
   }
 
   void startDrawLoop() override;

package/ios/RNSkia-iOS/SkiaDrawViewManager.mm

@@ -1,13 +1,13 @@
-#include <SkiaDrawViewManager.h>
+#include "SkiaDrawViewManager.h"
 #include <React/RCTBridge+Private.h>
 
 #include <RNSkPlatformContext.h>
 #include <RNSkJsView.h>
 #include <RNSkIOSView.h>
 
-#include <SkiaManager.h>
+#include "SkiaManager.h"
 #include <RNSkiaModule.h>
-#include <SkiaUIView.h>
+#include "SkiaUIView.h"
 
 
 
@@ -24,7 +24,7 @@ RCT_EXPORT_MODULE(SkiaDrawView)
 RCT_CUSTOM_VIEW_PROPERTY(nativeID, NSNumber, SkiaUIView) {
   // Get parameter
   int nativeId = [[RCTConvert NSString:json] intValue];
-  [(SkiaUIView*)view setNativeId:nativeId];            
+  [(SkiaUIView*)view setNativeId:nativeId];
 }
 
 RCT_CUSTOM_VIEW_PROPERTY(mode, NSString, SkiaUIView) {

package/ios/RNSkia-iOS/SkiaManager.mm

@@ -1,4 +1,4 @@
-#import <SkiaManager.h>
+#import "SkiaManager.h"
 
 #import <Foundation/Foundation.h>
 
@@ -32,16 +32,16 @@
   if (self) {
     RCTCxxBridge *cxxBridge = (RCTCxxBridge *)bridge;
     if (cxxBridge.runtime) {
-      
+
       auto callInvoker = bridge.jsCallInvoker;
       facebook::jsi::Runtime* jsRuntime = (facebook::jsi::Runtime*)cxxBridge.runtime;
-      
+
       // Create platform context
       _platformContext = std::make_shared<RNSkia::RNSkiOSPlatformContext>(jsRuntime, callInvoker);
-            
+
       // Create the RNSkiaManager (cross platform)
       _skManager = std::make_shared<RNSkia::RNSkManager>(jsRuntime, callInvoker, _platformContext);
-          
+
     }
   }
   return self;

package/ios/RNSkia-iOS/SkiaPictureViewManager.mm

@@ -1,14 +1,14 @@
 
-#include <SkiaPictureViewManager.h>
+#include "SkiaPictureViewManager.h"
 #include <React/RCTBridge+Private.h>
 
 #include <RNSkPlatformContext.h>
 #include <RNSkPictureView.h>
 #include <RNSkIOSView.h>
 
-#include <SkiaManager.h>
+#include "SkiaManager.h"
 #include <RNSkiaModule.h>
-#include <SkiaUIView.h>
+#include "SkiaUIView.h"
 
 
 

package/ios/RNSkia-iOS/SkiaUIView.mm

@@ -1,6 +1,6 @@
 #import <React/RCTBridge.h>
 
-#import <SkiaUIView.h>
+#import "SkiaUIView.h"
 
 #include <utility>
 #include <vector>
@@ -29,7 +29,7 @@
     _debugMode = false;
     _drawingMode = RNSkia::RNSkDrawingMode::Default;
     _factory = factory;
-    
+
     // Listen to notifications about module invalidation
     [[NSNotificationCenter defaultCenter] addObserver:self
                                              selector:@selector(willInvalidateModules)
@@ -51,11 +51,11 @@
     // Remove implementation view when the parent view is not set
     if(_impl != nullptr) {
       [_impl->getLayer() removeFromSuperlayer];
-      
+
       if(_nativeId != 0 && _manager != nullptr) {
         _manager->setSkiaView(_nativeId, nullptr);
       }
-      
+
       _impl = nullptr;
     }
   } else {
@@ -79,9 +79,9 @@
   if(_manager != nullptr && _nativeId != 0) {
     _manager->unregisterSkiaView(_nativeId);
   }
-  
+
   [[NSNotificationCenter defaultCenter] removeObserver:self name:RCTBridgeWillInvalidateModulesNotification object:nil];
-    
+
   assert(_impl == nullptr);
 }
 
@@ -98,7 +98,7 @@
 
 -(void) setDrawingMode:(std::string) mode {
   _drawingMode = mode.compare("continuous") == 0 ? RNSkia::RNSkDrawingMode::Continuous : RNSkia::RNSkDrawingMode::Default;
-  
+
   if(_impl != nullptr) {
     _impl->getDrawView()->setDrawingMode(_drawingMode);
   }
@@ -113,7 +113,7 @@
 
 - (void) setNativeId:(size_t) nativeId {
   _nativeId = nativeId;
-  
+
   if(_impl != nullptr) {
     _manager->registerSkiaView(nativeId, _impl->getDrawView());
   }
@@ -147,7 +147,7 @@
       RNSkia::RNSkTouchInfo nextTouch;
       nextTouch.x = position.x;
       nextTouch.y = position.y;
-      nextTouch.force = [touch force];    
+      nextTouch.force = [touch force];
       nextTouch.id = [touch hash];
       auto phase = [touch phase];
       switch(phase) {
@@ -167,7 +167,7 @@
           nextTouch.type = RNSkia::RNSkTouchInfo::TouchType::Active;
           break;
       }
-      
+
       nextTouches.push_back(nextTouch);
     }
     if(_impl != nullptr) {

package/lib/commonjs/dom/nodes/RenderNode.js

@@ -115,7 +115,9 @@ class JsiRenderNode extends _Node.JsiNode {
     } = this.props;
 
     if (color !== undefined || strokeWidth !== undefined || blendMode !== undefined || style !== undefined || strokeJoin !== undefined || strokeCap !== undefined || strokeMiter !== undefined || opacity !== undefined || antiAlias !== undefined) {
-      ctx = {};
+      ctx = {
+        opacity: 1
+      };
 
       if (color !== undefined) {
         ctx.color = this.Skia.Color(color);
@@ -193,11 +195,10 @@ class JsiRenderNode extends _Node.JsiNode {
     const {
       canvas
     } = parentCtx;
-    const opacity = this.props.opacity !== undefined ? parentCtx.opacity * this.props.opacity : parentCtx.opacity;
 
     if (this.paintCache === null || this.paintCache.parent !== parentCtx.paint) {
       const paintCtx = this.getPaintCtx();
-      const child = paintCtx ? concatPaint(parentCtx.paint, paintCtx, parentCtx.opacity) : parentCtx.paint;
+      const child = paintCtx ? concatPaint(parentCtx.paint.copy(), paintCtx) : parentCtx.paint;
       this.paintCache = {
         parent: parentCtx.paint,
         child
@@ -207,7 +208,6 @@ class JsiRenderNode extends _Node.JsiNode {
     const paint = this.paintCache.child; // TODO: can we only recreate a new context here if needed?
 
     const ctx = { ...parentCtx,
-      opacity,
       paint
     };
     const hasTransform = matrix !== undefined || transform !== undefined;
@@ -250,7 +250,7 @@ class JsiRenderNode extends _Node.JsiNode {
 
 exports.JsiRenderNode = JsiRenderNode;
 
-const concatPaint = (parent, _ref, opacity) => {
+const concatPaint = (paint, _ref) => {
   let {
     color,
     strokeWidth,
@@ -261,22 +261,22 @@ const concatPaint = (parent, _ref, opacity) => {
     imageFilter,
     maskFilter,
     pathEffect,
-    opacity: alpha,
+    opacity,
     strokeCap,
     strokeJoin,
     strokeMiter,
     style
   } = _ref;
-  const paint = parent.copy();
+
+  if (opacity !== undefined) {
+    paint.setAlphaf(paint.getAlphaf() * opacity);
+  }
 
   if (color !== undefined) {
+    const currentOpacity = paint.getAlphaf();
     paint.setShader(null);
-    color[3] *= opacity;
     paint.setColor(color);
-  } else {
-    const cl = paint.getColor();
-    cl[3] = opacity;
-    paint.setColor(cl);
+    paint.setAlphaf(currentOpacity * paint.getAlphaf());
   }
 
   if (strokeWidth !== undefined) {
@@ -311,10 +311,6 @@ const concatPaint = (parent, _ref, opacity) => {
     paint.setPathEffect(pathEffect);
   }
 
-  if (alpha !== undefined) {
-    paint.setAlphaf(alpha * opacity);
-  }
-
   if (strokeCap !== undefined) {
     paint.setStrokeCap(strokeCap);
   }