@shopify/react-native-skia 2.0.7 → 2.1.1

package/cpp/api/recorder/Drawings.h

@@ -899,6 +899,29 @@ public:
   }
 };
 
+struct SkottieCmdProps {
+  sk_sp<skottie::Animation> animation;
+  float frame;
+};
+
+class SkottieCmd : public Command {
+private:
+  SkottieCmdProps props;
+
+public:
+  SkottieCmd(jsi::Runtime &runtime, const jsi::Object &object,
+             Variables &variables)
+      : Command(CommandType::DrawSkottie) {
+    convertProperty(runtime, object, "animation", props.animation, variables);
+    convertProperty(runtime, object, "frame", props.frame, variables);
+  }
+
+  void draw(DrawingCtx *ctx) {
+    props.animation->seekFrame(props.frame);
+    props.animation->render(ctx->canvas);
+  }
+};
+
 struct AtlasCmdProps {
   sk_sp<SkImage> image;
   std::vector<SkRect> sprites;

package/cpp/api/recorder/ImageFilters.h

@@ -289,4 +289,24 @@ public:
   }
 };
 
+struct ImageFilterCmdProps {
+  sk_sp<SkImageFilter> imageFilter;
+};
+
+class ImageFilterCmd : public Command {
+private:
+  ImageFilterCmdProps props;
+
+public:
+  ImageFilterCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                 Variables &variables)
+      : Command(CommandType::PushImageFilter, "skImageFilter") {
+    convertProperty(runtime, object, "imageFilter", props.imageFilter, variables);
+  }
+
+  void pushImageFilter(DrawingCtx *ctx) {
+    ctx->imageFilters.push_back(props.imageFilter);
+  }
+};
+
 } // namespace RNSkia

package/cpp/api/recorder/JsiRecorder.h

@@ -262,6 +262,11 @@ public:
     return jsi::Value::undefined();
   }
 
+  JSI_HOST_FUNCTION(drawSkottie) {
+    getObject()->drawSkottie(runtime, arguments[0].asObject(runtime));
+    return jsi::Value::undefined();
+  }
+
   EXPORT_JSI_API_TYPENAME(JsiRecorder, Recorder)
 
   JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(JsiRecorder, saveGroup),
@@ -303,6 +308,7 @@ public:
                        JSI_EXPORT_FUNC(JsiRecorder, drawImageSVG),
                        JSI_EXPORT_FUNC(JsiRecorder, drawParagraph),
                        JSI_EXPORT_FUNC(JsiRecorder, drawAtlas),
+                       JSI_EXPORT_FUNC(JsiRecorder, drawSkottie),
                        JSI_EXPORT_FUNC(JsiRecorder, play),
                        JSI_EXPORT_FUNC(JsiRecorder, applyUpdates))
 

package/cpp/api/recorder/RNRecorder.h

@@ -142,6 +142,9 @@ public:
     } else if (nodeType == "skRuntimeShaderImageFilter") {
       commands.push_back(std::make_unique<RuntimeShaderImageFilterCmd>(
           runtime, props, variables));
+    } else if (nodeType == "skImageFilter") {
+      commands.push_back(
+          std::make_unique<ImageFilterCmd>(runtime, props, variables));
     }
   }
 
@@ -269,6 +272,10 @@ public:
     commands.push_back(std::make_unique<AtlasCmd>(runtime, props, variables));
   }
 
+  void drawSkottie(jsi::Runtime &runtime, const jsi::Object &props) {
+    commands.push_back(std::make_unique<SkottieCmd>(runtime, props, variables));
+  }
+
   void materializePaint() {
     commands.push_back(
         std::make_unique<Command>(CommandType::MaterializePaint));
@@ -415,6 +422,9 @@ public:
           auto *runtimeShaderCmd =
               static_cast<RuntimeShaderImageFilterCmd *>(cmd.get());
           runtimeShaderCmd->pushImageFilter(ctx);
+        } else if (nodeType == "skImageFilter") {
+          auto *imageFilterCmd = static_cast<ImageFilterCmd *>(cmd.get());
+          imageFilterCmd->pushImageFilter(ctx);
         } else {
           throw std::runtime_error("Invalid image filter type: " + nodeType);
         }
@@ -616,6 +626,11 @@ public:
             atlasCmd->draw(ctx);
             break;
           }
+          case CommandType::DrawSkottie: {
+            auto *skottieCmd = static_cast<SkottieCmd *>(cmd.get());
+            skottieCmd->draw(ctx);
+            break;
+          }
           }
 
           ctx->restorePaint();

package/cpp/api/third_party/SkottieUtils.cpp

@@ -0,0 +1,333 @@
+/*
+ * Copyright 2018 Google Inc.
+ *
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+#include "third_party/SkottieUtils.h"
+
+#include "include/core/SkData.h"
+#include "include/core/SkRect.h"
+#include "include/core/SkSize.h"
+#include "include/private/base/SkAssert.h"
+#include "modules/skottie/include/Skottie.h"
+#include "modules/skresources/include/SkResources.h"
+
+#include <cstring>
+#include <utility>
+
+class SkCanvas;
+
+namespace RNSkia {
+
+class CustomPropertyManager::PropertyInterceptor final
+    : public skottie::PropertyObserver {
+public:
+  explicit PropertyInterceptor(CustomPropertyManager *mgr) : fMgr(mgr) {}
+
+  void
+  onColorProperty(const char node_name[],
+                  const LazyHandle<skottie::ColorPropertyHandle> &c) override {
+    const auto key = fMgr->acceptKey(node_name, ".Color");
+    if (!key.empty()) {
+      fMgr->fColorMap[key].push_back(c());
+    }
+  }
+
+  void onOpacityProperty(
+      const char node_name[],
+      const LazyHandle<skottie::OpacityPropertyHandle> &o) override {
+    const auto key = fMgr->acceptKey(node_name, ".Opacity");
+    if (!key.empty()) {
+      fMgr->fOpacityMap[key].push_back(o());
+    }
+  }
+
+  void onTransformProperty(
+      const char node_name[],
+      const LazyHandle<skottie::TransformPropertyHandle> &t) override {
+    const auto key = fMgr->acceptKey(node_name, ".Transform");
+    if (!key.empty()) {
+      fMgr->fTransformMap[key].push_back(t());
+    }
+  }
+
+  void
+  onTextProperty(const char node_name[],
+                 const LazyHandle<skottie::TextPropertyHandle> &t) override {
+    const auto key = fMgr->acceptKey(node_name, ".Text");
+    if (!key.empty()) {
+      fMgr->fTextMap[key].push_back(t());
+    }
+  }
+
+  void onEnterNode(const char node_name[],
+                   PropertyObserver::NodeType node_type) override {
+    if (node_name == nullptr) {
+      return;
+    }
+    fMgr->fCurrentNode = fMgr->fCurrentNode.empty()
+                             ? node_name
+                             : fMgr->fCurrentNode + "." + node_name;
+  }
+
+  void onLeavingNode(const char node_name[],
+                     PropertyObserver::NodeType node_type) override {
+    if (node_name == nullptr) {
+      return;
+    }
+    auto length = strlen(node_name);
+    fMgr->fCurrentNode =
+        fMgr->fCurrentNode.length() > length
+            ? fMgr->fCurrentNode.substr(0, fMgr->fCurrentNode.length() -
+                                               strlen(node_name) - 1)
+            : "";
+  }
+
+private:
+  CustomPropertyManager *fMgr;
+};
+
+class CustomPropertyManager::MarkerInterceptor final
+    : public skottie::MarkerObserver {
+public:
+  explicit MarkerInterceptor(CustomPropertyManager *mgr) : fMgr(mgr) {}
+
+  void onMarker(const char name[], float t0, float t1) override {
+    // collect all markers
+    fMgr->fMarkers.push_back({std::string(name), t0, t1});
+  }
+
+private:
+  CustomPropertyManager *fMgr;
+};
+
+CustomPropertyManager::CustomPropertyManager(Mode mode, const char *prefix)
+    : fMode(mode), fPrefix(prefix ? prefix : "$"),
+      fPropertyInterceptor(sk_make_sp<PropertyInterceptor>(this)),
+      fMarkerInterceptor(sk_make_sp<MarkerInterceptor>(this)) {
+  // there is a bug in the ref counting here
+  fPropertyInterceptor->ref();
+  fMarkerInterceptor->ref();
+}
+
+CustomPropertyManager::~CustomPropertyManager() {
+  // there is a bug in the ref counting here
+  // ref count 0 but the raw pointer still exists
+  auto rawptr1 = fPropertyInterceptor.get();
+  fPropertyInterceptor = nullptr;
+  delete rawptr1;
+
+  auto rawptr2 = fMarkerInterceptor.get();
+  fMarkerInterceptor = nullptr;
+  delete rawptr2;
+}
+
+std::string CustomPropertyManager::acceptKey(const char *name,
+                                             const char *suffix) const {
+  if (!SkStrStartsWith(name, fPrefix.c_str())) {
+    return std::string();
+  }
+
+  return fMode == Mode::kCollapseProperties ? std::string(name)
+                                            : fCurrentNode + suffix;
+}
+
+sk_sp<skottie::PropertyObserver>
+CustomPropertyManager::getPropertyObserver() const {
+  return fPropertyInterceptor;
+}
+
+sk_sp<skottie::MarkerObserver>
+CustomPropertyManager::getMarkerObserver() const {
+  return fMarkerInterceptor;
+}
+
+template <typename T>
+std::vector<CustomPropertyManager::PropKey>
+CustomPropertyManager::getProps(const PropMap<T> &container) const {
+  std::vector<PropKey> props;
+
+  for (const auto &prop_list : container) {
+    SkASSERT(!prop_list.second.empty());
+    props.push_back(prop_list.first);
+  }
+
+  return props;
+}
+
+template <typename V, typename T>
+V CustomPropertyManager::get(const PropKey &key,
+                             const PropMap<T> &container) const {
+  auto prop_group = container.find(key);
+
+  return prop_group == container.end() ? V()
+                                       : prop_group->second.front()->get();
+}
+
+template <typename T>
+std::unique_ptr<T>
+CustomPropertyManager::getHandle(const PropKey &key, size_t index,
+                                 const PropMap<T> &container) const {
+  auto prop_group = container.find(key);
+
+  if (prop_group == container.end() || index >= prop_group->second.size()) {
+    return nullptr;
+  }
+
+  return std::make_unique<T>(*prop_group->second[index]);
+}
+
+template <typename V, typename T>
+bool CustomPropertyManager::set(const PropKey &key, const V &val,
+                                const PropMap<T> &container) {
+  auto prop_group = container.find(key);
+
+  if (prop_group == container.end()) {
+    return false;
+  }
+
+  for (auto &handle : prop_group->second) {
+    handle->set(val);
+  }
+
+  return true;
+}
+
+std::vector<CustomPropertyManager::PropKey>
+CustomPropertyManager::getColorProps() const {
+  return this->getProps(fColorMap);
+}
+
+skottie::ColorPropertyValue
+CustomPropertyManager::getColor(const PropKey &key) const {
+  return this->get<skottie::ColorPropertyValue>(key, fColorMap);
+}
+
+std::unique_ptr<skottie::ColorPropertyHandle>
+CustomPropertyManager::getColorHandle(const PropKey &key, size_t index) const {
+  return this->getHandle(key, index, fColorMap);
+}
+
+bool CustomPropertyManager::setColor(const PropKey &key,
+                                     const skottie::ColorPropertyValue &c) {
+  return this->set(key, c, fColorMap);
+}
+
+std::vector<CustomPropertyManager::PropKey>
+CustomPropertyManager::getOpacityProps() const {
+  return this->getProps(fOpacityMap);
+}
+
+skottie::OpacityPropertyValue
+CustomPropertyManager::getOpacity(const PropKey &key) const {
+  return this->get<skottie::OpacityPropertyValue>(key, fOpacityMap);
+}
+
+std::unique_ptr<skottie::OpacityPropertyHandle>
+CustomPropertyManager::getOpacityHandle(const PropKey &key,
+                                        size_t index) const {
+  return this->getHandle(key, index, fOpacityMap);
+}
+
+bool CustomPropertyManager::setOpacity(const PropKey &key,
+                                       const skottie::OpacityPropertyValue &o) {
+  return this->set(key, o, fOpacityMap);
+}
+
+std::vector<CustomPropertyManager::PropKey>
+CustomPropertyManager::getTransformProps() const {
+  return this->getProps(fTransformMap);
+}
+
+skottie::TransformPropertyValue
+CustomPropertyManager::getTransform(const PropKey &key) const {
+  return this->get<skottie::TransformPropertyValue>(key, fTransformMap);
+}
+
+std::unique_ptr<skottie::TransformPropertyHandle>
+CustomPropertyManager::getTransformHandle(const PropKey &key,
+                                          size_t index) const {
+  return this->getHandle(key, index, fTransformMap);
+}
+
+bool CustomPropertyManager::setTransform(
+    const PropKey &key, const skottie::TransformPropertyValue &t) {
+  return this->set(key, t, fTransformMap);
+}
+
+std::vector<CustomPropertyManager::PropKey>
+CustomPropertyManager::getTextProps() const {
+  return this->getProps(fTextMap);
+}
+
+skottie::TextPropertyValue
+CustomPropertyManager::getText(const PropKey &key) const {
+  return this->get<skottie::TextPropertyValue>(key, fTextMap);
+}
+
+std::unique_ptr<skottie::TextPropertyHandle>
+CustomPropertyManager::getTextHandle(const PropKey &key, size_t index) const {
+  return this->getHandle(key, index, fTextMap);
+}
+
+bool CustomPropertyManager::setText(const PropKey &key,
+                                    const skottie::TextPropertyValue &o) {
+  return this->set(key, o, fTextMap);
+}
+
+namespace {
+
+class ExternalAnimationLayer final : public skottie::ExternalLayer {
+public:
+  ExternalAnimationLayer(sk_sp<skottie::Animation> anim, const SkSize &size)
+      : fAnimation(std::move(anim)), fSize(size) {}
+
+private:
+  void render(SkCanvas *canvas, double t) override {
+    fAnimation->seekFrameTime(t);
+
+    // The main animation will layer-isolate if needed - we don't want the
+    // nested animation to override that decision.
+    const auto flags = skottie::Animation::RenderFlag::kSkipTopLevelIsolation;
+    const auto dst_rect = SkRect::MakeSize(fSize);
+    fAnimation->render(canvas, &dst_rect, flags);
+  }
+
+  const sk_sp<skottie::Animation> fAnimation;
+  const SkSize fSize;
+};
+
+} // namespace
+
+ExternalAnimationPrecompInterceptor::ExternalAnimationPrecompInterceptor(
+    sk_sp<skresources::ResourceProvider> rprovider, const char prefixp[])
+    : fResourceProvider(std::move(rprovider)), fPrefix(prefixp) {}
+
+ExternalAnimationPrecompInterceptor::~ExternalAnimationPrecompInterceptor() =
+    default;
+
+sk_sp<skottie::ExternalLayer>
+ExternalAnimationPrecompInterceptor::onLoadPrecomp(const char[],
+                                                   const char name[],
+                                                   const SkSize &size) {
+  if (0 != strncmp(name, fPrefix.c_str(), fPrefix.size())) {
+    return nullptr;
+  }
+
+  auto data = fResourceProvider->load("", name + fPrefix.size());
+  if (!data) {
+    return nullptr;
+  }
+
+  auto anim = skottie::Animation::Builder()
+                  .setPrecompInterceptor(sk_ref_sp(this))
+                  .setResourceProvider(fResourceProvider)
+                  .make(static_cast<const char *>(data->data()), data->size());
+
+  return anim ? sk_make_sp<ExternalAnimationLayer>(std::move(anim), size)
+              : nullptr;
+}
+
+} // namespace RNSkia

package/cpp/api/third_party/SkottieUtils.h

@@ -0,0 +1,172 @@
+/*
+ * Copyright 2018 Google Inc.
+ *
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+#pragma once
+
+#include "include/core/SkRefCnt.h"
+#include "include/core/SkString.h"
+#include "modules/skottie/include/ExternalLayer.h"
+#include "modules/skottie/include/SkottieProperty.h"
+
+#include <cstddef>
+#include <memory>
+#include <string>
+#include <unordered_map>
+#include <vector>
+
+struct SkSize;
+
+namespace skottie {
+    class MarkerObserver;
+
+inline void PropertyObserver::onColorProperty(
+    const char node_name[], const LazyHandle<ColorPropertyHandle> &) {}
+
+inline void PropertyObserver::onOpacityProperty(
+    const char node_name[], const LazyHandle<OpacityPropertyHandle> &) {}
+inline void PropertyObserver::onTextProperty(const char node_name[],
+                                      const LazyHandle<TextPropertyHandle> &) {}
+inline void PropertyObserver::onTransformProperty(
+    const char node_name[], const LazyHandle<TransformPropertyHandle> &) {}
+inline void PropertyObserver::onEnterNode(const char node_name[], NodeType node_type) {
+}
+inline void PropertyObserver::onLeavingNode(const char node_name[],
+                                     NodeType node_type) {}
+
+} // namespace skottie
+
+namespace skresources {
+class ResourceProvider;
+}
+
+namespace RNSkia {
+
+/**
+ * CustomPropertyManager implements a property management scheme where
+ * color/opacity/transform attributes are grouped and manipulated by name
+ * (one-to-many mapping).
+ *
+ *   - setters apply the value to all properties in a named group
+ *
+ *   - getters return all the managed property groups, and the first value
+ * within each of them (unchecked assumption: all properties within the same
+ * group have the same value)
+ *
+ * Attach to an Animation::Builder using the utility methods below to intercept
+ * properties and markers at build time.
+ */
+class CustomPropertyManager final {
+public:
+  enum class Mode {
+    kCollapseProperties,   // keys ignore the ancestor chain and are
+                           // grouped based on the local node name
+    kNamespacedProperties, // keys include the ancestor node names (no grouping)
+  };
+
+  explicit CustomPropertyManager(Mode = Mode::kNamespacedProperties,
+                                 const char *prefix = nullptr);
+  ~CustomPropertyManager();
+
+  using PropKey = std::string;
+
+  std::vector<PropKey> getColorProps() const;
+  skottie::ColorPropertyValue getColor(const PropKey &) const;
+  std::unique_ptr<skottie::ColorPropertyHandle> getColorHandle(const PropKey &,
+                                                               size_t) const;
+  bool setColor(const PropKey &, const skottie::ColorPropertyValue &);
+
+  std::vector<PropKey> getOpacityProps() const;
+  skottie::OpacityPropertyValue getOpacity(const PropKey &) const;
+  std::unique_ptr<skottie::OpacityPropertyHandle>
+  getOpacityHandle(const PropKey &, size_t) const;
+  bool setOpacity(const PropKey &, const skottie::OpacityPropertyValue &);
+
+  std::vector<PropKey> getTransformProps() const;
+  skottie::TransformPropertyValue getTransform(const PropKey &) const;
+  std::unique_ptr<skottie::TransformPropertyHandle>
+  getTransformHandle(const PropKey &, size_t) const;
+  bool setTransform(const PropKey &, const skottie::TransformPropertyValue &);
+
+  std::vector<PropKey> getTextProps() const;
+  skottie::TextPropertyValue getText(const PropKey &) const;
+  std::unique_ptr<skottie::TextPropertyHandle>
+  getTextHandle(const PropKey &, size_t index) const;
+  bool setText(const PropKey &, const skottie::TextPropertyValue &);
+
+  struct MarkerInfo {
+    std::string name;
+    float t0, t1;
+  };
+  const std::vector<MarkerInfo> &markers() const { return fMarkers; }
+
+  // Returns a property observer to be attached to an animation builder.
+  sk_sp<skottie::PropertyObserver> getPropertyObserver() const;
+
+  // Returns a marker observer to be attached to an animation builder.
+  sk_sp<skottie::MarkerObserver> getMarkerObserver() const;
+
+private:
+  class PropertyInterceptor;
+  class MarkerInterceptor;
+
+  std::string acceptKey(const char *, const char *) const;
+
+  template <typename T> using PropGroup = std::vector<std::unique_ptr<T>>;
+
+  template <typename T>
+  using PropMap = std::unordered_map<PropKey, PropGroup<T>>;
+
+  template <typename T>
+  std::vector<PropKey> getProps(const PropMap<T> &container) const;
+
+  template <typename V, typename T>
+  V get(const PropKey &, const PropMap<T> &container) const;
+
+  template <typename T>
+  std::unique_ptr<T> getHandle(const PropKey &, size_t,
+                               const PropMap<T> &container) const;
+
+  template <typename V, typename T>
+  bool set(const PropKey &, const V &, const PropMap<T> &container);
+
+  const Mode fMode;
+  const SkString fPrefix;
+
+  sk_sp<PropertyInterceptor> fPropertyInterceptor;
+  sk_sp<MarkerInterceptor> fMarkerInterceptor;
+
+  PropMap<skottie::ColorPropertyHandle> fColorMap;
+  PropMap<skottie::OpacityPropertyHandle> fOpacityMap;
+  PropMap<skottie::TransformPropertyHandle> fTransformMap;
+  PropMap<skottie::TextPropertyHandle> fTextMap;
+  std::vector<MarkerInfo> fMarkers;
+  std::string fCurrentNode;
+};
+
+/**
+ * A sample PrecompInterceptor implementation.
+ *
+ * Attempts to substitute all precomp layers matching the given pattern (name
+ * prefix) with external Lottie animations.
+ */
+class ExternalAnimationPrecompInterceptor final
+    : public skottie::PrecompInterceptor {
+public:
+  ExternalAnimationPrecompInterceptor(sk_sp<skresources::ResourceProvider>,
+                                      const char prefix[]);
+  ~ExternalAnimationPrecompInterceptor() override;
+
+private:
+  sk_sp<skottie::ExternalLayer> onLoadPrecomp(const char[], const char[],
+                                              const SkSize &) override;
+
+  const sk_sp<skresources::ResourceProvider> fResourceProvider;
+  const SkString fPrefix;
+};
+
+} // namespace RNSkia
+