@shopify/react-native-skia 0.1.187 → 0.1.189

package/android/build.gradle

@@ -272,11 +272,24 @@ task extractJNIFiles {
 extractJNIFiles.mustRunAfter extractAARHeaders
 
 if (ENABLE_PREFAB) {
-    // Package everything with the original file structure
+    // Package all the cpp code in a flattened directory structure
     task prepareHeaders(type: Copy) {
-        from('./cpp')
+        from("./cpp")
         into "${project.buildDir}/headers/rnskia/"
         includeEmptyDirs = false
+        include "**/*.h"
+        eachFile {
+            String path = it.path
+
+            // Skip flattening third_party dir
+            if (path.contains("api/third_party")) {
+                path = path.substring("api/".length())
+            } else {
+                // flatten anything else
+                path = path.substring(path.lastIndexOf("/") + 1)
+            }
+            it.path = path
+        }
     }
     preBuild.dependsOn(prepareHeaders)
 }

package/cpp/api/JsiSkMatrix.h

@@ -47,39 +47,39 @@ public:
   JSI_HOST_FUNCTION(concat) {
     auto m3 = JsiSkMatrix::fromValue(runtime, arguments[0]);
     getObject()->preConcat(*m3);
-    return jsi::Value::undefined();
+    return thisValue.asObject(runtime);
   }
 
   JSI_HOST_FUNCTION(translate) {
     auto x = arguments[0].asNumber();
     auto y = arguments[1].asNumber();
     getObject()->preTranslate(x, y);
-    return jsi::Value::undefined();
+    return thisValue.asObject(runtime);
   }
 
   JSI_HOST_FUNCTION(scale) {
     auto x = arguments[0].asNumber();
     auto y = count > 1 ? arguments[1].asNumber() : 1;
     getObject()->preScale(x, y);
-    return jsi::Value::undefined();
+    return thisValue.asObject(runtime);
   }
 
   JSI_HOST_FUNCTION(skew) {
     auto x = arguments[0].asNumber();
     auto y = arguments[1].asNumber();
     getObject()->preSkew(x, y);
-    return jsi::Value::undefined();
+    return thisValue.asObject(runtime);
   }
 
   JSI_HOST_FUNCTION(rotate) {
     auto a = arguments[0].asNumber();
     getObject()->preRotate(SkRadiansToDegrees(a));
-    return jsi::Value::undefined();
+    return thisValue.asObject(runtime);
   }
 
   JSI_HOST_FUNCTION(identity) {
     getObject()->setIdentity();
-    return jsi::Value::undefined();
+    return thisValue.asObject(runtime);
   }
 
   JSI_HOST_FUNCTION(get) {

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

@@ -64,53 +64,53 @@ public:
 
     // Enumerate registered keys for the given node to only handle known
     // properties
-    for (const auto &propMapping :
-         node->getPropsContainer()->getMappedProperties()) {
-      auto key = propMapping.first;
-      auto jsValue = nextProps.getProperty(runtime, key);
-      JsiValue nativeValue(runtime, jsValue);
-
-      if (isAnimatedValue(nativeValue)) {
-        // Handle Skia Animation Values
-        auto animatedValue = getAnimatedValue(nativeValue);
-        auto unsubscribe = animatedValue->addListener(
-            [animatedValue, propMapping](jsi::Runtime &runtime) {
-              // Get value from animation value
-              auto nextJsValue = animatedValue->getCurrent(runtime);
-              // Update all props that listens to this animation value
-              for (auto &prop : propMapping.second) {
-                prop->updateValue(runtime, nextJsValue);
-              }
-            });
-
-        // Save unsubscribe methods
-        unsubscribers.push_back(std::make_pair(animatedValue, unsubscribe));
-
-      } else if (isSelector(nativeValue)) {
-        // Handle Skia Animation Value Selectors
-        auto animatedValue = std::dynamic_pointer_cast<RNSkReadonlyValue>(
-            nativeValue.getValue(PropNameValue).getAsHostObject());
-
-        auto selector = nativeValue.getValue(PropNameSelector).getAsFunction();
-        // Add subscription to animated value in selector
-        auto unsubscribe = animatedValue->addListener(
-            [nativeValue, propMapping, selector = std::move(selector),
-             animatedValue](jsi::Runtime &runtime) {
-              // Get value from animation value
-              jsi::Value jsValue = animatedValue->getCurrent(runtime);
-              // Call selector to transform new value
-              auto selectedJsValue =
-                  selector(runtime, jsi::Value::null(), &jsValue, 1);
-              // Update all props that listens to this animation value
-              for (auto &prop : propMapping.second) {
-                prop->updateValue(runtime, selectedJsValue);
-              }
-            });
-
-        // Save unsubscribe methods
-        unsubscribers.push_back(std::make_pair(animatedValue, unsubscribe));
-      }
-    }
+    node->getPropsContainer()->enumerateMappedProps(
+        [&](const PropId key, const std::vector<NodeProp *> &propMapping) {
+          auto jsValue = nextProps.getProperty(runtime, key);
+          JsiValue nativeValue(runtime, jsValue);
+
+          if (isAnimatedValue(nativeValue)) {
+            // Handle Skia Animation Values
+            auto animatedValue = getAnimatedValue(nativeValue);
+            auto unsubscribe = animatedValue->addListener(
+                [animatedValue, propMapping](jsi::Runtime &runtime) {
+                  // Get value from animation value
+                  auto nextJsValue = animatedValue->getCurrent(runtime);
+                  // Update all props that listens to this animation value
+                  for (auto &prop : propMapping) {
+                    prop->updateValue(runtime, nextJsValue);
+                  }
+                });
+
+            // Save unsubscribe methods
+            unsubscribers.push_back(std::make_pair(animatedValue, unsubscribe));
+
+          } else if (isSelector(nativeValue)) {
+            // Handle Skia Animation Value Selectors
+            auto animatedValue = std::dynamic_pointer_cast<RNSkReadonlyValue>(
+                nativeValue.getValue(PropNameValue).getAsHostObject());
+
+            auto selector =
+                nativeValue.getValue(PropNameSelector).getAsFunction();
+            // Add subscription to animated value in selector
+            auto unsubscribe = animatedValue->addListener(
+                [nativeValue, propMapping, selector = std::move(selector),
+                 animatedValue](jsi::Runtime &runtime) {
+                  // Get value from animation value
+                  jsi::Value jsValue = animatedValue->getCurrent(runtime);
+                  // Call selector to transform new value
+                  auto selectedJsValue =
+                      selector(runtime, jsi::Value::null(), &jsValue, 1);
+                  // Update all props that listens to this animation value
+                  for (auto &prop : propMapping) {
+                    prop->updateValue(runtime, selectedJsValue);
+                  }
+                });
+
+            // Save unsubscribe methods
+            unsubscribers.push_back(std::make_pair(animatedValue, unsubscribe));
+          }
+        });
 
     // Now let's store the subscription info
     _subscriptions.emplace(node.get(), unsubscribers);

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

@@ -98,13 +98,12 @@ public:
     auto propName = arguments[0].asString(runtime).utf8(runtime);
     const jsi::Value &propValue = arguments[1];
 
-    auto mappedProps = _propsContainer->getMappedProperties();
-    auto propMapIt = mappedProps.find(JsiPropId::get(propName));
-    if (propMapIt != mappedProps.end()) {
-      for (auto &prop : propMapIt->second) {
-        prop->updateValue(runtime, propValue);
-      }
-    }
+    // Enumerate all props with this name and update. The
+    // enumerateMappedPropsByName function is thread safe and locks props so it
+    // can be called from all threads.
+    _propsContainer->enumerateMappedPropsByName(propName, [&](NodeProp *prop) {
+      prop->updateValue(runtime, propValue);
+    });
 
     return jsi::Value::undefined();
   }

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

@@ -41,10 +41,30 @@ public:
   }
 
   /**
-   Returns a list of mappings betwen property names and property objects
+   Enumerate all mapped properties
    */
-  const std::map<PropId, std::vector<NodeProp *>> &getMappedProperties() {
-    return _mappedProperties;
+  void enumerateMappedProps(
+      const std::function<void(const PropId name,
+                               const std::vector<NodeProp *>)> &callback) {
+    std::lock_guard<std::mutex> lock(_mappedPropsLock);
+    for (auto &props : _mappedProperties) {
+      callback(props.first, props.second);
+    }
+  }
+
+  /**
+   Enumerates a named property instances from the mapped properties list
+   */
+  void
+  enumerateMappedPropsByName(const std::string &name,
+                             const std::function<void(NodeProp *)> &callback) {
+    std::lock_guard<std::mutex> lock(_mappedPropsLock);
+    auto propMapIt = _mappedProperties.find(JsiPropId::get(name));
+    if (propMapIt != _mappedProperties.end()) {
+      for (auto &prop : propMapIt->second) {
+        callback(prop);
+      }
+    }
   }
 
   /**
@@ -75,6 +95,7 @@ public:
    Clears all props and data from the container
    */
   void dispose() {
+    std::lock_guard<std::mutex> lock(_mappedPropsLock);
     _properties.clear();
     _mappedProperties.clear();
   }
@@ -83,6 +104,8 @@ public:
    Called when the React / JS side sets properties on a node
    */
   void setProps(jsi::Runtime &runtime, const jsi::Value &maybePropsObject) {
+    std::lock_guard<std::mutex> lock(_mappedPropsLock);
+
     // Clear property mapping
     _mappedProperties.clear();
 
@@ -129,6 +152,7 @@ private:
   std::vector<std::shared_ptr<BaseNodeProp>> _properties;
   std::map<PropId, std::vector<NodeProp *>> _mappedProperties;
   PropId _type;
+  std::mutex _mappedPropsLock;
 };
 
 } // namespace RNSkia

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

@@ -42,6 +42,13 @@ public:
       return SkColorSetARGB(a.getAsNumber() * 255.0f, r.getAsNumber() * 255.0f,
                             g.getAsNumber() * 255.0f, b.getAsNumber() * 255.0f);
 
+    } else if (color.getType() == PropType::Array) {
+      auto r = color.getAsArray().at(0);
+      auto g = color.getAsArray().at(1);
+      auto b = color.getAsArray().at(2);
+      auto a = color.getAsArray().at(3);
+      return SkColorSetARGB(a.getAsNumber() * 255.0f, r.getAsNumber() * 255.0f,
+                            g.getAsNumber() * 255.0f, b.getAsNumber() * 255.0f);
     } else if (color.getType() == PropType::Number) {
       return static_cast<SkColor>(color.getAsNumber());
     } else {

package/ios/RNSkia-iOS/RNSkiOSPlatformContext.h

@@ -1,6 +1,8 @@
 #pragma once
 
+#import <React/RCTBridge+Private.h>
 #import <React/RCTBridge.h>
+#import <ReactCommon/RCTTurboModule.h>
 
 #include <functional>
 #include <memory>
@@ -8,6 +10,7 @@
 
 #include "DisplayLink.h"
 #include "RNSkPlatformContext.h"
+#include "ViewScreenshotService.h"
 
 #include <jsi/jsi.h>
 
@@ -27,13 +30,8 @@ static void handleNotification(CFNotificationCenterRef center, void *observer,
 
 class RNSkiOSPlatformContext : public RNSkPlatformContext {
 public:
-  RNSkiOSPlatformContext(
-      jsi::Runtime *runtime, std::shared_ptr<react::CallInvoker> callInvoker,
-      std::function<void(std::function<void()>)> dispatchMainThread,
-      std::function<sk_sp<SkImage>(size_t viewTag)> takeViewScreenshot)
-      : _dispatchMainThread(dispatchMainThread),
-        _takeViewScreenshot(takeViewScreenshot),
-        RNSkPlatformContext(runtime, callInvoker,
+  RNSkiOSPlatformContext(jsi::Runtime *runtime, RCTBridge *bridge)
+      : RNSkPlatformContext(runtime, bridge.jsCallInvoker,
                             [[UIScreen mainScreen] scale]) {
 
     // We need to make sure we invalidate when modules are freed
@@ -41,6 +39,10 @@ public:
         CFNotificationCenterGetLocalCenter(), this, &handleNotification,
         (__bridge CFStringRef)RCTBridgeWillInvalidateModulesNotification, NULL,
         CFNotificationSuspensionBehaviorDeliverImmediately);
+
+    // Create screenshot manager
+    _screenshotService =
+        [[ViewScreenshotService alloc] initWithUiManager:bridge.uiManager];
   }
 
   ~RNSkiOSPlatformContext() {
@@ -70,8 +72,7 @@ public:
 
 private:
   DisplayLink *_displayLink;
-  std::function<void(std::function<void()>)> _dispatchMainThread;
-  std::function<sk_sp<SkImage>(size_t viewTag)> _takeViewScreenshot;
+  ViewScreenshotService *_screenshotService;
 };
 
 static void handleNotification(CFNotificationCenterRef center, void *observer,

package/ios/RNSkia-iOS/RNSkiOSPlatformContext.mm

@@ -63,11 +63,15 @@ sk_sp<SkSurface> RNSkiOSPlatformContext::makeOffscreenSurface(int width,
 }
 
 void RNSkiOSPlatformContext::runOnMainThread(std::function<void()> func) {
-  _dispatchMainThread(func);
+  dispatch_async(dispatch_get_main_queue(), ^{
+    func();
+  });
 }
 
-sk_sp<SkImage> RNSkiOSPlatformContext::takeScreenshotFromViewTag(size_t tag) {
-  return _takeViewScreenshot(tag);
+sk_sp<SkImage>
+RNSkiOSPlatformContext::takeScreenshotFromViewTag(size_t viewTag) {
+  return [_screenshotService
+      screenshotOfViewWithTag:[NSNumber numberWithLong:viewTag]];
 }
 
 void RNSkiOSPlatformContext::startDrawLoop() {

package/ios/RNSkia-iOS/SkiaManager.mm

@@ -9,12 +9,9 @@
 #import <ReactCommon/RCTTurboModule.h>
 
 #import "RNSkiOSPlatformContext.h"
-#import "ViewScreenshotService.h"
 
 @implementation SkiaManager {
   std::shared_ptr<RNSkia::RNSkManager> _skManager;
-  std::shared_ptr<RNSkia::RNSkiOSPlatformContext> _platformContext;
-  ViewScreenshotService *_screenshot;
   __weak RCTBridge *weakBridge;
 }
 
@@ -27,7 +24,6 @@
     _skManager->invalidate();
   }
   _skManager = nullptr;
-  _platformContext = nullptr;
 }
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge {
@@ -36,33 +32,13 @@
     RCTCxxBridge *cxxBridge = (RCTCxxBridge *)bridge;
     if (cxxBridge.runtime) {
 
-      auto callInvoker = bridge.jsCallInvoker;
       facebook::jsi::Runtime *jsRuntime =
           (facebook::jsi::Runtime *)cxxBridge.runtime;
 
-      // Create screenshot manager
-      _screenshot =
-          [[ViewScreenshotService alloc] initWithUiManager:bridge.uiManager];
-
-      auto takeScreenshot = [self](size_t viewTag) {
-        return [_screenshot
-            screenshotOfViewWithTag:[NSNumber numberWithLong:viewTag]];
-      };
-
-      auto dispatchOnMainThread = [self](std::function<void()> fp) {
-        dispatch_async(dispatch_get_main_queue(), ^{
-          fp();
-        });
-      };
-
-      // Create platform context
-      _platformContext = std::make_shared<RNSkia::RNSkiOSPlatformContext>(
-          jsRuntime, callInvoker, std::move(dispatchOnMainThread),
-          std::move(takeScreenshot));
-
       // Create the RNSkiaManager (cross platform)
-      _skManager = std::make_shared<RNSkia::RNSkManager>(jsRuntime, callInvoker,
-                                                         _platformContext);
+      _skManager = std::make_shared<RNSkia::RNSkManager>(
+          jsRuntime, bridge.jsCallInvoker,
+          std::make_shared<RNSkia::RNSkiOSPlatformContext>(jsRuntime, bridge));
     }
   }
   return self;

package/ios/RNSkia-iOS/ViewScreenshotService.mm

@@ -33,6 +33,15 @@
   UIGraphicsImageRendererFormat *format =
       [UIGraphicsImageRendererFormat defaultFormat];
   format.opaque = NO;
+
+  // Explicitly ask for the standard format to get ARGB 32bits and not 64bits.
+  if (@available(iOS 12.0, *)) {
+    format.preferredRange = UIGraphicsImageRendererFormatRangeStandard;
+  } else {
+    // Fallback on earlier versions
+    format.prefersExtendedRange = false;
+  }
+
   UIGraphicsImageRenderer *renderer =
       [[UIGraphicsImageRenderer alloc] initWithSize:size format:format];
 
@@ -68,9 +77,12 @@
       (void *)dataRef);
 
   // Make SkImageInfo
+  // We're using kBGRA_8888_SkColorType since this is what we get when the
+  // UIGraphicsImageRenderer uses the standard format (the extended is using
+  // 64bits so it is not suitable for us).
   SkImageInfo info =
       SkImageInfo::Make(static_cast<int>(width), static_cast<int>(height),
-                        kRGBA_8888_SkColorType, kPremul_SkAlphaType);
+                        kBGRA_8888_SkColorType, kPremul_SkAlphaType);
 
   // ... and then create the SkImage itself!
   return SkImage::MakeRasterData(info, skData, bytesPerRow);

package/lib/commonjs/animation/functions/interpolateColors.d.ts

@@ -1,3 +1,3 @@
 import type { Color } from "../../skia";
-export declare const interpolateColors: (value: number, inputRange: number[], _outputRange: Color[]) => Float32Array;
+export declare const interpolateColors: (value: number, inputRange: number[], _outputRange: Color[]) => number[];
 export declare const mixColors: (value: number, x: Color, y: Color) => Float32Array;

package/lib/commonjs/animation/functions/interpolateColors.js

@@ -17,8 +17,9 @@ const interpolateColorsRGB = (value, inputRange, outputRange) => {
   const r = (0, _interpolate.interpolate)(value, inputRange, outputRange.map(c => c[0]), "clamp");
   const g = (0, _interpolate.interpolate)(value, inputRange, outputRange.map(c => c[1]), "clamp");
   const b = (0, _interpolate.interpolate)(value, inputRange, outputRange.map(c => c[2]), "clamp");
-  const a = (0, _interpolate.interpolate)(value, inputRange, outputRange.map(c => c[3]), "clamp");
-  return new Float32Array([r, g, b, a]);
+  const a = (0, _interpolate.interpolate)(value, inputRange, outputRange.map(c => c[3]), "clamp"); // TODO: once Float32Array are supported in the reanimated integration we can switch there
+
+  return [r, g, b, a];
 };
 
 const interpolateColors = (value, inputRange, _outputRange) => {

package/lib/commonjs/animation/functions/interpolateColors.js.map

@@ -1 +1 @@
-{"version":3,"names":["interpolateColorsRGB","value","inputRange","outputRange","r","interpolate","map","c","g","b","a","Float32Array","interpolateColors","_outputRange","cl","Skia","Color","mixColors","x","y","c1","c2","mix"],"sources":["interpolateColors.ts"],"sourcesContent":["import { mix } from \"../../renderer/processors/math\";\nimport type { Color, SkColor } from \"../../skia\";\nimport { Skia } from \"../../skia\";\n\nimport { interpolate } from \"./interpolate\";\n\nconst interpolateColorsRGB = (\n  value: number,\n  inputRange: number[],\n  outputRange: SkColor[]\n) => {\n  \"worklet\";\n  const r = interpolate(\n    value,\n    inputRange,\n    outputRange.map((c) => c[0]),\n    \"clamp\"\n  );\n  const g = interpolate(\n    value,\n    inputRange,\n    outputRange.map((c) => c[1]),\n    \"clamp\"\n  );\n  const b = interpolate(\n    value,\n    inputRange,\n    outputRange.map((c) => c[2]),\n    \"clamp\"\n  );\n  const a = interpolate(\n    value,\n    inputRange,\n    outputRange.map((c) => c[3]),\n    \"clamp\"\n  );\n  return new Float32Array([r, g, b, a]);\n};\n\nexport const interpolateColors = (\n  value: number,\n  inputRange: number[],\n  _outputRange: Color[]\n) => {\n  \"worklet\";\n  const outputRange = _outputRange.map((cl) => Skia.Color(cl));\n  return interpolateColorsRGB(value, inputRange, outputRange);\n};\n\nexport const mixColors = (value: number, x: Color, y: Color) => {\n  \"worklet\";\n  const c1 = Skia.Color(x);\n  const c2 = Skia.Color(y);\n  return new Float32Array([\n    mix(value, c1[0], c2[0]),\n    mix(value, c1[1], c2[1]),\n    mix(value, c1[2], c2[2]),\n    mix(value, c1[3], c2[3]),\n  ]);\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEA,MAAMA,oBAAoB,GAAG,CAC3BC,KAD2B,EAE3BC,UAF2B,EAG3BC,WAH2B,KAIxB;EACH;;EACA,MAAMC,CAAC,GAAG,IAAAC,wBAAA,EACRJ,KADQ,EAERC,UAFQ,EAGRC,WAAW,CAACG,GAAZ,CAAiBC,CAAD,IAAOA,CAAC,CAAC,CAAD,CAAxB,CAHQ,EAIR,OAJQ,CAAV;EAMA,MAAMC,CAAC,GAAG,IAAAH,wBAAA,EACRJ,KADQ,EAERC,UAFQ,EAGRC,WAAW,CAACG,GAAZ,CAAiBC,CAAD,IAAOA,CAAC,CAAC,CAAD,CAAxB,CAHQ,EAIR,OAJQ,CAAV;EAMA,MAAME,CAAC,GAAG,IAAAJ,wBAAA,EACRJ,KADQ,EAERC,UAFQ,EAGRC,WAAW,CAACG,GAAZ,CAAiBC,CAAD,IAAOA,CAAC,CAAC,CAAD,CAAxB,CAHQ,EAIR,OAJQ,CAAV;EAMA,MAAMG,CAAC,GAAG,IAAAL,wBAAA,EACRJ,KADQ,EAERC,UAFQ,EAGRC,WAAW,CAACG,GAAZ,CAAiBC,CAAD,IAAOA,CAAC,CAAC,CAAD,CAAxB,CAHQ,EAIR,OAJQ,CAAV;EAMA,OAAO,IAAII,YAAJ,CAAiB,CAACP,CAAD,EAAII,CAAJ,EAAOC,CAAP,EAAUC,CAAV,CAAjB,CAAP;AACD,CA/BD;;AAiCO,MAAME,iBAAiB,GAAG,CAC/BX,KAD+B,EAE/BC,UAF+B,EAG/BW,YAH+B,KAI5B;EACH;;EACA,MAAMV,WAAW,GAAGU,YAAY,CAACP,GAAb,CAAkBQ,EAAD,IAAQC,UAAA,CAAKC,KAAL,CAAWF,EAAX,CAAzB,CAApB;;EACA,OAAOd,oBAAoB,CAACC,KAAD,EAAQC,UAAR,EAAoBC,WAApB,CAA3B;AACD,CARM;;;;AAUA,MAAMc,SAAS,GAAG,CAAChB,KAAD,EAAgBiB,CAAhB,EAA0BC,CAA1B,KAAuC;EAC9D;;EACA,MAAMC,EAAE,GAAGL,UAAA,CAAKC,KAAL,CAAWE,CAAX,CAAX;;EACA,MAAMG,EAAE,GAAGN,UAAA,CAAKC,KAAL,CAAWG,CAAX,CAAX;;EACA,OAAO,IAAIR,YAAJ,CAAiB,CACtB,IAAAW,SAAA,EAAIrB,KAAJ,EAAWmB,EAAE,CAAC,CAAD,CAAb,EAAkBC,EAAE,CAAC,CAAD,CAApB,CADsB,EAEtB,IAAAC,SAAA,EAAIrB,KAAJ,EAAWmB,EAAE,CAAC,CAAD,CAAb,EAAkBC,EAAE,CAAC,CAAD,CAApB,CAFsB,EAGtB,IAAAC,SAAA,EAAIrB,KAAJ,EAAWmB,EAAE,CAAC,CAAD,CAAb,EAAkBC,EAAE,CAAC,CAAD,CAApB,CAHsB,EAItB,IAAAC,SAAA,EAAIrB,KAAJ,EAAWmB,EAAE,CAAC,CAAD,CAAb,EAAkBC,EAAE,CAAC,CAAD,CAApB,CAJsB,CAAjB,CAAP;AAMD,CAVM"}
+{"version":3,"names":["interpolateColorsRGB","value","inputRange","outputRange","r","interpolate","map","c","g","b","a","interpolateColors","_outputRange","cl","Skia","Color","mixColors","x","y","c1","c2","Float32Array","mix"],"sources":["interpolateColors.ts"],"sourcesContent":["import { mix } from \"../../renderer/processors/math\";\nimport type { Color, SkColor } from \"../../skia\";\nimport { Skia } from \"../../skia\";\n\nimport { interpolate } from \"./interpolate\";\n\nconst interpolateColorsRGB = (\n  value: number,\n  inputRange: number[],\n  outputRange: SkColor[]\n) => {\n  \"worklet\";\n  const r = interpolate(\n    value,\n    inputRange,\n    outputRange.map((c) => c[0]),\n    \"clamp\"\n  );\n  const g = interpolate(\n    value,\n    inputRange,\n    outputRange.map((c) => c[1]),\n    \"clamp\"\n  );\n  const b = interpolate(\n    value,\n    inputRange,\n    outputRange.map((c) => c[2]),\n    \"clamp\"\n  );\n  const a = interpolate(\n    value,\n    inputRange,\n    outputRange.map((c) => c[3]),\n    \"clamp\"\n  );\n  // TODO: once Float32Array are supported in the reanimated integration we can switch there\n  return [r, g, b, a];\n};\n\nexport const interpolateColors = (\n  value: number,\n  inputRange: number[],\n  _outputRange: Color[]\n) => {\n  \"worklet\";\n  const outputRange = _outputRange.map((cl) => Skia.Color(cl));\n  return interpolateColorsRGB(value, inputRange, outputRange);\n};\n\nexport const mixColors = (value: number, x: Color, y: Color) => {\n  \"worklet\";\n  const c1 = Skia.Color(x);\n  const c2 = Skia.Color(y);\n  return new Float32Array([\n    mix(value, c1[0], c2[0]),\n    mix(value, c1[1], c2[1]),\n    mix(value, c1[2], c2[2]),\n    mix(value, c1[3], c2[3]),\n  ]);\n};\n"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AAEA,MAAMA,oBAAoB,GAAG,CAC3BC,KAD2B,EAE3BC,UAF2B,EAG3BC,WAH2B,KAIxB;EACH;;EACA,MAAMC,CAAC,GAAG,IAAAC,wBAAA,EACRJ,KADQ,EAERC,UAFQ,EAGRC,WAAW,CAACG,GAAZ,CAAiBC,CAAD,IAAOA,CAAC,CAAC,CAAD,CAAxB,CAHQ,EAIR,OAJQ,CAAV;EAMA,MAAMC,CAAC,GAAG,IAAAH,wBAAA,EACRJ,KADQ,EAERC,UAFQ,EAGRC,WAAW,CAACG,GAAZ,CAAiBC,CAAD,IAAOA,CAAC,CAAC,CAAD,CAAxB,CAHQ,EAIR,OAJQ,CAAV;EAMA,MAAME,CAAC,GAAG,IAAAJ,wBAAA,EACRJ,KADQ,EAERC,UAFQ,EAGRC,WAAW,CAACG,GAAZ,CAAiBC,CAAD,IAAOA,CAAC,CAAC,CAAD,CAAxB,CAHQ,EAIR,OAJQ,CAAV;EAMA,MAAMG,CAAC,GAAG,IAAAL,wBAAA,EACRJ,KADQ,EAERC,UAFQ,EAGRC,WAAW,CAACG,GAAZ,CAAiBC,CAAD,IAAOA,CAAC,CAAC,CAAD,CAAxB,CAHQ,EAIR,OAJQ,CAAV,CApBG,CA0BH;;EACA,OAAO,CAACH,CAAD,EAAII,CAAJ,EAAOC,CAAP,EAAUC,CAAV,CAAP;AACD,CAhCD;;AAkCO,MAAMC,iBAAiB,GAAG,CAC/BV,KAD+B,EAE/BC,UAF+B,EAG/BU,YAH+B,KAI5B;EACH;;EACA,MAAMT,WAAW,GAAGS,YAAY,CAACN,GAAb,CAAkBO,EAAD,IAAQC,UAAA,CAAKC,KAAL,CAAWF,EAAX,CAAzB,CAApB;;EACA,OAAOb,oBAAoB,CAACC,KAAD,EAAQC,UAAR,EAAoBC,WAApB,CAA3B;AACD,CARM;;;;AAUA,MAAMa,SAAS,GAAG,CAACf,KAAD,EAAgBgB,CAAhB,EAA0BC,CAA1B,KAAuC;EAC9D;;EACA,MAAMC,EAAE,GAAGL,UAAA,CAAKC,KAAL,CAAWE,CAAX,CAAX;;EACA,MAAMG,EAAE,GAAGN,UAAA,CAAKC,KAAL,CAAWG,CAAX,CAAX;;EACA,OAAO,IAAIG,YAAJ,CAAiB,CACtB,IAAAC,SAAA,EAAIrB,KAAJ,EAAWkB,EAAE,CAAC,CAAD,CAAb,EAAkBC,EAAE,CAAC,CAAD,CAApB,CADsB,EAEtB,IAAAE,SAAA,EAAIrB,KAAJ,EAAWkB,EAAE,CAAC,CAAD,CAAb,EAAkBC,EAAE,CAAC,CAAD,CAApB,CAFsB,EAGtB,IAAAE,SAAA,EAAIrB,KAAJ,EAAWkB,EAAE,CAAC,CAAD,CAAb,EAAkBC,EAAE,CAAC,CAAD,CAApB,CAHsB,EAItB,IAAAE,SAAA,EAAIrB,KAAJ,EAAWkB,EAAE,CAAC,CAAD,CAAb,EAAkBC,EAAE,CAAC,CAAD,CAApB,CAJsB,CAAjB,CAAP;AAMD,CAVM"}

package/lib/commonjs/skia/types/Color.d.ts

@@ -1,2 +1,2 @@
 export declare type SkColor = Float32Array;
-export declare type Color = string | Float32Array | number;
+export declare type Color = string | Float32Array | number | number[];

package/lib/commonjs/skia/types/Color.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Color.ts"],"sourcesContent":["// This is the JSI color\nexport type SkColor = Float32Array;\n// Input colors can be string, number or Float32Array\nexport type Color = string | Float32Array | number;\n"],"mappings":""}
+{"version":3,"names":[],"sources":["Color.ts"],"sourcesContent":["// This is the JSI color\nexport type SkColor = Float32Array;\n// Input colors can be string, number or Float32Array\nexport type Color = string | Float32Array | number | number[];\n"],"mappings":""}

package/lib/commonjs/skia/types/Matrix.d.ts

@@ -13,12 +13,12 @@ export declare enum MatrixIndex {
 }
 export declare const isMatrix: (obj: unknown) => obj is SkMatrix;
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
-    concat: (matrix: SkMatrix) => void;
-    translate: (x: number, y: number) => void;
-    scale: (x: number, y?: number) => void;
-    skew: (x: number, y: number) => void;
-    rotate: (theta: number) => void;
-    identity: () => void;
+    concat: (matrix: SkMatrix) => SkMatrix;
+    translate: (x: number, y: number) => SkMatrix;
+    scale: (x: number, y?: number) => SkMatrix;
+    skew: (x: number, y: number) => SkMatrix;
+    rotate: (theta: number) => SkMatrix;
+    identity: () => SkMatrix;
     get: () => number[];
 }
 declare type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";

package/lib/commonjs/skia/types/Matrix.js.map

@@ -1 +1 @@
-{"version":3,"names":["MatrixIndex","isMatrix","obj","__typename__","processTransform","m","transforms","transform","key","Object","keys","value","translate","scale","skew","rotate","toDegrees","exhaustiveCheck","a","Error","rad","Math","PI"],"sources":["Matrix.ts"],"sourcesContent":["import type { SkJSIInstance } from \"./JsiInstance\";\nimport type { SkCanvas } from \"./Canvas\";\nexport enum MatrixIndex {\n  ScaleX = 0,\n  SkewX = 1,\n  TransX = 2,\n  SkewY = 3,\n  ScaleY = 4,\n  TransY = 5,\n  Persp0 = 6,\n  Persp1 = 7,\n  Persp2 = 8,\n}\n\nexport const isMatrix = (obj: unknown): obj is SkMatrix =>\n  obj !== null && (obj as SkJSIInstance<string>).__typename__ === \"Matrix\";\n\nexport interface SkMatrix extends SkJSIInstance<\"Matrix\"> {\n  concat: (matrix: SkMatrix) => void;\n  translate: (x: number, y: number) => void;\n  scale: (x: number, y?: number) => void;\n  skew: (x: number, y: number) => void;\n  rotate: (theta: number) => void;\n  identity: () => void;\n  get: () => number[];\n}\n\ntype Transform2dName =\n  | \"translateX\"\n  | \"translateY\"\n  | \"scale\"\n  | \"skewX\"\n  | \"skewY\"\n  | \"scaleX\"\n  | \"scaleY\"\n  | \"rotateZ\"\n  | \"rotate\";\n\ntype Transformations = {\n  readonly [Name in Transform2dName]: number;\n};\n\nexport type Transforms2d = readonly (\n  | Pick<Transformations, \"translateX\">\n  | Pick<Transformations, \"translateY\">\n  | Pick<Transformations, \"scale\">\n  | Pick<Transformations, \"scaleX\">\n  | Pick<Transformations, \"scaleY\">\n  | Pick<Transformations, \"skewX\">\n  | Pick<Transformations, \"skewY\">\n  | Pick<Transformations, \"rotate\">\n)[];\n\nexport interface TransformProp {\n  transform?: Transforms2d;\n}\n\nexport const processTransform = <T extends SkMatrix | SkCanvas>(\n  m: T,\n  transforms: Transforms2d\n) => {\n  for (const transform of transforms) {\n    const key = Object.keys(transform)[0] as Transform2dName;\n    const value = (transform as Pick<Transformations, typeof key>)[key];\n    if (key === \"translateX\") {\n      m.translate(value, 0);\n      continue;\n    }\n    if (key === \"translateY\") {\n      m.translate(0, value);\n      continue;\n    }\n    if (key === \"scale\") {\n      m.scale(value, value);\n      continue;\n    }\n    if (key === \"scaleX\") {\n      m.scale(value, 1);\n      continue;\n    }\n    if (key === \"scaleY\") {\n      m.scale(1, value);\n      continue;\n    }\n    if (key === \"skewX\") {\n      m.skew(value, 0);\n      continue;\n    }\n    if (key === \"skewY\") {\n      m.skew(0, value);\n      continue;\n    }\n    if (key === \"rotate\" || key === \"rotateZ\") {\n      if (isMatrix(m)) {\n        m.rotate(value);\n      } else {\n        m.rotate(toDegrees(value), 0, 0);\n      }\n      continue;\n    }\n    exhaustiveCheck(key);\n  }\n  return m;\n};\n\nconst exhaustiveCheck = (a: never): never => {\n  throw new Error(`Unknown transformation: ${a}`);\n};\n\nexport const toDegrees = (rad: number) => {\n  return (rad * 180) / Math.PI;\n};\n"],"mappings":";;;;;;IAEYA,W;;;WAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;GAAAA,W,2BAAAA,W;;AAYL,MAAMC,QAAQ,GAAIC,GAAD,IACtBA,GAAG,KAAK,IAAR,IAAiBA,GAAD,CAA+BC,YAA/B,KAAgD,QAD3D;;;;AA2CA,MAAMC,gBAAgB,GAAG,CAC9BC,CAD8B,EAE9BC,UAF8B,KAG3B;EACH,KAAK,MAAMC,SAAX,IAAwBD,UAAxB,EAAoC;IAClC,MAAME,GAAG,GAAGC,MAAM,CAACC,IAAP,CAAYH,SAAZ,EAAuB,CAAvB,CAAZ;IACA,MAAMI,KAAK,GAAIJ,SAAD,CAAiDC,GAAjD,CAAd;;IACA,IAAIA,GAAG,KAAK,YAAZ,EAA0B;MACxBH,CAAC,CAACO,SAAF,CAAYD,KAAZ,EAAmB,CAAnB;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,YAAZ,EAA0B;MACxBH,CAAC,CAACO,SAAF,CAAY,CAAZ,EAAeD,KAAf;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,OAAZ,EAAqB;MACnBH,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAeA,KAAf;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,QAAZ,EAAsB;MACpBH,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAe,CAAf;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,QAAZ,EAAsB;MACpBH,CAAC,CAACQ,KAAF,CAAQ,CAAR,EAAWF,KAAX;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,OAAZ,EAAqB;MACnBH,CAAC,CAACS,IAAF,CAAOH,KAAP,EAAc,CAAd;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,OAAZ,EAAqB;MACnBH,CAAC,CAACS,IAAF,CAAO,CAAP,EAAUH,KAAV;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,QAAR,IAAoBA,GAAG,KAAK,SAAhC,EAA2C;MACzC,IAAIP,QAAQ,CAACI,CAAD,CAAZ,EAAiB;QACfA,CAAC,CAACU,MAAF,CAASJ,KAAT;MACD,CAFD,MAEO;QACLN,CAAC,CAACU,MAAF,CAASC,SAAS,CAACL,KAAD,CAAlB,EAA2B,CAA3B,EAA8B,CAA9B;MACD;;MACD;IACD;;IACDM,eAAe,CAACT,GAAD,CAAf;EACD;;EACD,OAAOH,CAAP;AACD,CA9CM;;;;AAgDP,MAAMY,eAAe,GAAIC,CAAD,IAAqB;EAC3C,MAAM,IAAIC,KAAJ,CAAW,2BAA0BD,CAAE,EAAvC,CAAN;AACD,CAFD;;AAIO,MAAMF,SAAS,GAAII,GAAD,IAAiB;EACxC,OAAQA,GAAG,GAAG,GAAP,GAAcC,IAAI,CAACC,EAA1B;AACD,CAFM"}
+{"version":3,"names":["MatrixIndex","isMatrix","obj","__typename__","processTransform","m","transforms","transform","key","Object","keys","value","translate","scale","skew","rotate","toDegrees","exhaustiveCheck","a","Error","rad","Math","PI"],"sources":["Matrix.ts"],"sourcesContent":["import type { SkJSIInstance } from \"./JsiInstance\";\nimport type { SkCanvas } from \"./Canvas\";\nexport enum MatrixIndex {\n  ScaleX = 0,\n  SkewX = 1,\n  TransX = 2,\n  SkewY = 3,\n  ScaleY = 4,\n  TransY = 5,\n  Persp0 = 6,\n  Persp1 = 7,\n  Persp2 = 8,\n}\n\nexport const isMatrix = (obj: unknown): obj is SkMatrix =>\n  obj !== null && (obj as SkJSIInstance<string>).__typename__ === \"Matrix\";\n\nexport interface SkMatrix extends SkJSIInstance<\"Matrix\"> {\n  concat: (matrix: SkMatrix) => SkMatrix;\n  translate: (x: number, y: number) => SkMatrix;\n  scale: (x: number, y?: number) => SkMatrix;\n  skew: (x: number, y: number) => SkMatrix;\n  rotate: (theta: number) => SkMatrix;\n  identity: () => SkMatrix;\n  get: () => number[];\n}\n\ntype Transform2dName =\n  | \"translateX\"\n  | \"translateY\"\n  | \"scale\"\n  | \"skewX\"\n  | \"skewY\"\n  | \"scaleX\"\n  | \"scaleY\"\n  | \"rotateZ\"\n  | \"rotate\";\n\ntype Transformations = {\n  readonly [Name in Transform2dName]: number;\n};\n\nexport type Transforms2d = readonly (\n  | Pick<Transformations, \"translateX\">\n  | Pick<Transformations, \"translateY\">\n  | Pick<Transformations, \"scale\">\n  | Pick<Transformations, \"scaleX\">\n  | Pick<Transformations, \"scaleY\">\n  | Pick<Transformations, \"skewX\">\n  | Pick<Transformations, \"skewY\">\n  | Pick<Transformations, \"rotate\">\n)[];\n\nexport interface TransformProp {\n  transform?: Transforms2d;\n}\n\nexport const processTransform = <T extends SkMatrix | SkCanvas>(\n  m: T,\n  transforms: Transforms2d\n) => {\n  for (const transform of transforms) {\n    const key = Object.keys(transform)[0] as Transform2dName;\n    const value = (transform as Pick<Transformations, typeof key>)[key];\n    if (key === \"translateX\") {\n      m.translate(value, 0);\n      continue;\n    }\n    if (key === \"translateY\") {\n      m.translate(0, value);\n      continue;\n    }\n    if (key === \"scale\") {\n      m.scale(value, value);\n      continue;\n    }\n    if (key === \"scaleX\") {\n      m.scale(value, 1);\n      continue;\n    }\n    if (key === \"scaleY\") {\n      m.scale(1, value);\n      continue;\n    }\n    if (key === \"skewX\") {\n      m.skew(value, 0);\n      continue;\n    }\n    if (key === \"skewY\") {\n      m.skew(0, value);\n      continue;\n    }\n    if (key === \"rotate\" || key === \"rotateZ\") {\n      if (isMatrix(m)) {\n        m.rotate(value);\n      } else {\n        m.rotate(toDegrees(value), 0, 0);\n      }\n      continue;\n    }\n    exhaustiveCheck(key);\n  }\n  return m;\n};\n\nconst exhaustiveCheck = (a: never): never => {\n  throw new Error(`Unknown transformation: ${a}`);\n};\n\nexport const toDegrees = (rad: number) => {\n  return (rad * 180) / Math.PI;\n};\n"],"mappings":";;;;;;IAEYA,W;;;WAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;EAAAA,W,CAAAA,W;GAAAA,W,2BAAAA,W;;AAYL,MAAMC,QAAQ,GAAIC,GAAD,IACtBA,GAAG,KAAK,IAAR,IAAiBA,GAAD,CAA+BC,YAA/B,KAAgD,QAD3D;;;;AA2CA,MAAMC,gBAAgB,GAAG,CAC9BC,CAD8B,EAE9BC,UAF8B,KAG3B;EACH,KAAK,MAAMC,SAAX,IAAwBD,UAAxB,EAAoC;IAClC,MAAME,GAAG,GAAGC,MAAM,CAACC,IAAP,CAAYH,SAAZ,EAAuB,CAAvB,CAAZ;IACA,MAAMI,KAAK,GAAIJ,SAAD,CAAiDC,GAAjD,CAAd;;IACA,IAAIA,GAAG,KAAK,YAAZ,EAA0B;MACxBH,CAAC,CAACO,SAAF,CAAYD,KAAZ,EAAmB,CAAnB;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,YAAZ,EAA0B;MACxBH,CAAC,CAACO,SAAF,CAAY,CAAZ,EAAeD,KAAf;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,OAAZ,EAAqB;MACnBH,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAeA,KAAf;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,QAAZ,EAAsB;MACpBH,CAAC,CAACQ,KAAF,CAAQF,KAAR,EAAe,CAAf;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,QAAZ,EAAsB;MACpBH,CAAC,CAACQ,KAAF,CAAQ,CAAR,EAAWF,KAAX;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,OAAZ,EAAqB;MACnBH,CAAC,CAACS,IAAF,CAAOH,KAAP,EAAc,CAAd;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,OAAZ,EAAqB;MACnBH,CAAC,CAACS,IAAF,CAAO,CAAP,EAAUH,KAAV;MACA;IACD;;IACD,IAAIH,GAAG,KAAK,QAAR,IAAoBA,GAAG,KAAK,SAAhC,EAA2C;MACzC,IAAIP,QAAQ,CAACI,CAAD,CAAZ,EAAiB;QACfA,CAAC,CAACU,MAAF,CAASJ,KAAT;MACD,CAFD,MAEO;QACLN,CAAC,CAACU,MAAF,CAASC,SAAS,CAACL,KAAD,CAAlB,EAA2B,CAA3B,EAA8B,CAA9B;MACD;;MACD;IACD;;IACDM,eAAe,CAACT,GAAD,CAAf;EACD;;EACD,OAAOH,CAAP;AACD,CA9CM;;;;AAgDP,MAAMY,eAAe,GAAIC,CAAD,IAAqB;EAC3C,MAAM,IAAIC,KAAJ,CAAW,2BAA0BD,CAAE,EAAvC,CAAN;AACD,CAFD;;AAIO,MAAMF,SAAS,GAAII,GAAD,IAAiB;EACxC,OAAQA,GAAG,GAAG,GAAP,GAAcC,IAAI,CAACC,EAA1B;AACD,CAFM"}

package/lib/commonjs/skia/web/JsiSkColor.js

@@ -334,6 +334,8 @@ const parseCSSColor = cssStr => {
 const Color = color => {
   if (color instanceof Float32Array) {
     return color;
+  } else if (Array.isArray(color)) {
+    return new Float32Array(color);
   } else if (typeof color === "string") {
     const r = parseCSSColor(color);
     const rgba = r === null ? CSSColorTable.black : r;