@shopify/react-native-skia 2.13.1 → 2.14.0

package/cpp/api/recorder/DataTypes.h

@@ -6,8 +6,8 @@ namespace RNSkia {
 
 using Uniforms = std::map<std::string, std::vector<float>>;
 
-std::vector<float> processArray(jsi::Runtime &runtime,
-                                const jsi::Array &array) {
+inline std::vector<float> processArray(jsi::Runtime &runtime,
+                                       const jsi::Array &array) {
   std::vector<float> result;
   size_t length = array.length(runtime);
   result.reserve(length);
@@ -37,18 +37,18 @@ std::vector<float> processArray(jsi::Runtime &runtime,
   return result;
 }
 
-bool isJSPoint(jsi::Runtime &runtime, const jsi::Value &value) {
+inline bool isJSPoint(jsi::Runtime &runtime, const jsi::Value &value) {
   return value.isObject() &&
          value.asObject(runtime).hasProperty(runtime, "x") &&
          value.asObject(runtime).hasProperty(runtime, "y");
 }
 
-bool isIndexable(jsi::Runtime &runtime, const jsi::Value &value) {
+inline bool isIndexable(jsi::Runtime &runtime, const jsi::Value &value) {
   return value.isObject() && value.asObject(runtime).hasProperty(runtime, "0");
 }
 
-std::shared_ptr<SkRect> processRect(jsi::Runtime &runtime,
-                                    const jsi::Value &value) {
+inline std::shared_ptr<SkRect> processRect(jsi::Runtime &runtime,
+                                           const jsi::Value &value) {
   if (value.isObject()) {
     auto object = value.asObject(runtime);
     auto ptr = tryGetJsiObject<JsiSkRect>(runtime, object);
@@ -68,7 +68,7 @@ std::shared_ptr<SkRect> processRect(jsi::Runtime &runtime,
   return nullptr;
 }
 
-SkPoint processPoint(jsi::Runtime &runtime, const jsi::Value &value) {
+inline SkPoint processPoint(jsi::Runtime &runtime, const jsi::Value &value) {
   if (value.isObject()) {
     auto object = value.asObject(runtime);
     if (object.hasProperty(runtime, "x") && object.hasProperty(runtime, "y")) {
@@ -81,8 +81,8 @@ SkPoint processPoint(jsi::Runtime &runtime, const jsi::Value &value) {
 }
 
 // TODO: return the SkRRect directly
-std::shared_ptr<SkRRect> processRRect(jsi::Runtime &runtime,
-                                      const jsi::Value &value) {
+inline std::shared_ptr<SkRRect> processRRect(jsi::Runtime &runtime,
+                                             const jsi::Value &value) {
   if (value.isObject()) {
     auto object = value.asObject(runtime);
     auto ptr = tryGetJsiObject<JsiSkRRect>(runtime, object);
@@ -119,8 +119,8 @@ std::shared_ptr<SkRRect> processRRect(jsi::Runtime &runtime,
 }
 
 // Return SkPath instead of shared_ptr<SkPath>
-std::shared_ptr<SkPath> processPath(jsi::Runtime &runtime,
-                                    const jsi::Value &value) {
+inline std::shared_ptr<SkPath> processPath(jsi::Runtime &runtime,
+                                           const jsi::Value &value) {
   if (value.isString()) {
     auto pathString = value.getString(runtime).utf8(runtime);
     SkPath result;

package/cpp/api/recorder/ImageFit.h

@@ -18,14 +18,14 @@ struct FitRects {
   SkRect dst;
 };
 
-SkRect inscribe(SkSize size, SkRect rect) {
+inline SkRect inscribe(SkSize size, SkRect rect) {
   auto halfWidthDelta = (rect.width() - size.width()) / 2.0;
   auto halfHeightDelta = (rect.height() - size.height()) / 2.0;
   return SkRect::MakeXYWH(rect.x() + halfWidthDelta, rect.y() + halfHeightDelta,
                           size.width(), size.height());
 }
 
-SkMatrix rect2rect(SkRect src, SkRect dst) {
+inline SkMatrix rect2rect(SkRect src, SkRect dst) {
   auto sx = dst.width() / src.width();
   auto sy = dst.height() / src.height();
   auto tx = dst.x() - src.x() * sx;
@@ -36,9 +36,12 @@ SkMatrix rect2rect(SkRect src, SkRect dst) {
   return m3;
 }
 
-SkSize size(double width, double height) { return SkSize::Make(width, height); }
+inline SkSize size(double width, double height) {
+  return SkSize::Make(width, height);
+}
 
-FitSizes applyBoxFit(const std::string fit, SkSize input, SkSize output) {
+inline FitSizes applyBoxFit(const std::string fit, SkSize input,
+                            SkSize output) {
   SkSize src = size(0, 0);
   SkSize dst = size(0, 0);
 
@@ -96,7 +99,7 @@ FitSizes applyBoxFit(const std::string fit, SkSize input, SkSize output) {
   return {.src = src, .dst = dst};
 }
 
-FitRects fitRects(const std::string &fit, SkRect rect, SkRect rect2) {
+inline FitRects fitRects(const std::string &fit, SkRect rect, SkRect rect2) {
   auto sizes = applyBoxFit(fit, size(rect.width(), rect.height()),
                            size(rect2.width(), rect2.height()));
 

package/cpp/api/recorder/JsiRecorder.h

@@ -70,18 +70,7 @@ public:
       throw jsi::JSError(runtime, "Invalid Picture object provided to play()");
     }
 
-    // Create a new picture recorder to record into
-    SkPictureRecorder pictureRecorder;
-    SkISize size = SkISize::Make(2'000'000, 2'000'000);
-    SkRect rect = SkRect::Make(size);
-    auto canvas = pictureRecorder.beginRecording(rect, nullptr);
-
-    // Play the recorded commands into the canvas
-    DrawingCtx ctx(canvas);
-    getObject()->play(&ctx);
-
-    // Finish recording and get the new picture
-    auto newPicture = pictureRecorder.finishRecordingAsPicture();
+    auto newPicture = getObject()->makePicture();
 
     // Update the existing JsiSkPicture object with the new SkPicture
     // This reuses the existing JavaScript object instead of creating a new one
@@ -95,24 +84,12 @@ public:
 
   JSI_HOST_FUNCTION(applyUpdates) {
     auto values = arguments[0].asObject(runtime).asArray(runtime);
-    auto size = values.size(runtime);
-    auto recorder = getObject();
-    for (int i = 0; i < size; i++) {
-      auto sharedValue = values.getValueAtIndex(runtime, i).asObject(runtime);
-      auto name = "variable" + std::to_string(i);
-      // Look up the conversion functions for this name
-      auto it = recorder->variables.find(name);
-      if (it != recorder->variables.end()) {
-        // Execute each conversion function in the vector
-        const auto &conversionFunctions = it->second;
-        for (const auto &conversionFunc : conversionFunctions) {
-          conversionFunc(runtime, sharedValue);
-        }
-      }
-    }
+    getObject()->applyUpdates(runtime, values);
     return jsi::Value::undefined();
   }
 
+  JSI_HOST_FUNCTION(getId) { return jsi::Value(getObject()->id); }
+
   JSI_HOST_FUNCTION(saveGroup) {
     const jsi::Value *value = count > 0 ? &arguments[0] : nullptr;
     getObject()->saveGroup(runtime, value);
@@ -377,13 +354,16 @@ public:
     installHostMethod(runtime, prototype, "applyUpdates",
                       &JsiRecorder::applyUpdates);
     installHostMethod(runtime, prototype, "reset", &JsiRecorder::reset);
+    installHostMethod(runtime, prototype, "getId", &JsiRecorder::getId);
   }
 
   // The recorder itself is a small command list. The resources it references
   // (images, pictures, paths) report their own size through their wrappers
   // and the pictures produced by play() report theirs. Do not put a made-up
-  // number here: a new recorder is created on every React commit and the
-  // charge is repeated each time it is unboxed on the UI runtime.
+  // number here: a new recorder is created on every React commit, and the
+  // wrapper is disposed as soon as the view takes ownership of the recording
+  // (see NativeReanimatedContainer), so the charge would never drive a
+  // collection anyway.
   size_t getMemoryPressure() override { return kMinMemoryPressure; }
 
   static const jsi::HostFunctionType

package/cpp/api/recorder/Paint.h

@@ -18,9 +18,9 @@ struct TransformProps {
 };
 
 // TODO: can we avoid a copy here?
-SkMatrix processTransform(std::optional<SkMatrix> &matrix,
-                          std::optional<SkM44> &transform,
-                          std::optional<SkPoint> &origin) {
+inline SkMatrix processTransform(std::optional<SkMatrix> &matrix,
+                                 std::optional<SkM44> &transform,
+                                 std::optional<SkPoint> &origin) {
   SkMatrix m3;
   if (matrix.has_value()) {
     m3 = matrix.value();

package/cpp/api/recorder/RNRecorder.h

@@ -1,14 +1,19 @@
 #pragma once
 
 #include <algorithm>
+#include <atomic>
 #include <cmath>
+#include <cstdint>
 #include <memory>
+#include <mutex>
 #include <optional>
 #include <string>
 #include <vector>
 
 #include <jsi/jsi.h>
 
+#include "include/core/SkPictureRecorder.h"
+
 #include "ColorFilters.h"
 #include "Command.h"
 #include "Convertor.h"
@@ -26,6 +31,11 @@ class Recorder {
 private:
   using CommandList = std::vector<std::unique_ptr<Command>>;
 
+  static double nextId() {
+    static std::atomic<uint64_t> counter{0};
+    return static_cast<double>(++counter);
+  }
+
   struct PendingGroup {
     GroupCommand *group;
     float zIndex;
@@ -35,6 +45,12 @@ private:
   CommandList commands;
   std::vector<CommandList *> commandStack;
 
+  // Once a view owns the recording, the Reanimated mapper writes the shared
+  // values into the commands (applyUpdates, UI thread) while the view replays
+  // them (play, main thread). Both hold this lock; nothing else does, so it
+  // never nests with the view's lock.
+  std::mutex _commandsMutex;
+
   CommandList &currentCommands() { return *commandStack.back(); }
 
   void pushCommand(std::unique_ptr<Command> command) {
@@ -94,6 +110,11 @@ public:
   std::shared_ptr<RNSkPlatformContext> _context;
   Variables variables;
 
+  // Unique per recording. The Reanimated mapper tags its updates with it so a
+  // mapper that outlives its recording (stopMapper() is asynchronous) cannot
+  // write into the recording that replaced it.
+  const double id = nextId();
+
   Recorder() { commandStack.push_back(&commands); }
   ~Recorder() {
     if (!_context || commands.empty()) {
@@ -382,10 +403,45 @@ public:
   }
 
   void play(DrawingCtx *ctx) {
+    std::lock_guard<std::mutex> lock(_commandsMutex);
     for (const auto &cmd : commands) {
       playCommand(ctx, cmd.get());
     }
   }
+
+  /**
+   * Plays the recording into a picture. The cull rect is deliberately huge:
+   * a recording is not tied to a view size.
+   */
+  sk_sp<SkPicture> makePicture() {
+    SkPictureRecorder pictureRecorder;
+    SkISize size = SkISize::Make(2'000'000, 2'000'000);
+    SkRect rect = SkRect::Make(size);
+    auto canvas = pictureRecorder.beginRecording(rect, nullptr);
+    DrawingCtx ctx(canvas);
+    play(&ctx);
+    return pictureRecorder.finishRecordingAsPicture();
+  }
+
+  /**
+   * Reads the current value of each shared value (in the order they were
+   * registered as variable0, variable1, ...) on the calling runtime and
+   * writes it into the recorded commands.
+   */
+  void applyUpdates(jsi::Runtime &runtime, const jsi::Array &values) {
+    std::lock_guard<std::mutex> lock(_commandsMutex);
+    auto size = values.size(runtime);
+    for (size_t i = 0; i < size; i++) {
+      auto sharedValue = values.getValueAtIndex(runtime, i).asObject(runtime);
+      auto name = "variable" + std::to_string(i);
+      auto it = variables.find(name);
+      if (it != variables.end()) {
+        for (const auto &conversionFunc : it->second) {
+          conversionFunc(runtime, sharedValue);
+        }
+      }
+    }
+  }
 };
 
 inline void Recorder::playCommand(DrawingCtx *ctx, Command *cmd) {

package/cpp/jsi/ViewProperty.cpp

@@ -0,0 +1,23 @@
+// The recorder headers depend on the include order established by
+// JsiSkApi.h, so the probe lives here rather than in ViewProperty.h (which
+// every platform view includes on its own).
+#include "api/JsiSkApi.h"
+
+#include "jsi/ViewProperty.h"
+
+#include "api/JsiSkPicture.h"
+#include "api/recorder/JsiRecorder.h"
+
+namespace RNJsi {
+
+ViewProperty::ViewProperty(jsi::Runtime &runtime, const jsi::Value &value) {
+  if (auto picture =
+          RNSkia::tryGetJsiObject<RNSkia::JsiSkPicture>(runtime, value)) {
+    _value = picture->getObject();
+  } else if (auto recorder =
+                 RNSkia::tryGetJsiObject<RNSkia::JsiRecorder>(runtime, value)) {
+    _value = recorder->getObject();
+  }
+}
+
+} // namespace RNJsi

package/cpp/jsi/ViewProperty.h

@@ -4,28 +4,49 @@
 #include <jsi/jsi.h>
 #include <memory>
 #include <string>
+#include <utility>
 #include <variant>
 
-#include "api/JsiSkPicture.h"
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include "include/core/SkPicture.h"
+
+#pragma clang diagnostic pop
+
+namespace RNSkia {
+class Recorder;
+}
 
 namespace RNJsi {
 namespace jsi = facebook::jsi;
 
 class ViewProperty {
 public:
-  ViewProperty(jsi::Runtime &runtime, const jsi::Value &value) {
-    auto jsiPicture =
-        RNSkia::tryGetJsiObject<RNSkia::JsiSkPicture>(runtime, value);
-    if (jsiPicture) {
-      _value = jsiPicture->getObject();
-    }
-  }
+  /**
+   * Probes the JS value for the native objects a view can display (a picture
+   * or a recorder); anything else yields an empty property. Defined in
+   * ViewProperty.cpp: the recorder headers depend on the include order
+   * established by JsiSkApi.h, which this header (included by every platform
+   * view) must not pull in.
+   */
+  ViewProperty(jsi::Runtime &runtime, const jsi::Value &value);
 
-  bool isNull() { return std::holds_alternative<std::nullptr_t>(_value); }
+  bool isPicture() { return std::holds_alternative<sk_sp<SkPicture>>(_value); }
+
+  bool isRecorder() {
+    return std::holds_alternative<std::shared_ptr<RNSkia::Recorder>>(_value);
+  }
 
   sk_sp<SkPicture> getPicture() { return std::get<sk_sp<SkPicture>>(_value); }
 
+  std::shared_ptr<RNSkia::Recorder> getRecorder() {
+    return std::get<std::shared_ptr<RNSkia::Recorder>>(_value);
+  }
+
 private:
-  std::variant<std::nullptr_t, sk_sp<SkPicture>> _value = nullptr;
+  std::variant<std::nullptr_t, sk_sp<SkPicture>,
+               std::shared_ptr<RNSkia::Recorder>>
+      _value = nullptr;
 };
 } // namespace RNJsi

package/cpp/rnskia/RNDawnContext.h

@@ -270,6 +270,39 @@ public:
         textureRef);
   }
 
+  // Create an SkSurface that draws straight into a WebGPU texture (zero-copy).
+  // The texture must have RenderAttachment usage; give it TextureBinding too
+  // to sample it from WebGPU (e.g. as a three.js texture) after each flush.
+  // The surface retains the texture for its lifetime.
+  sk_sp<SkSurface> MakeSurfaceFromTexture(wgpu::Texture texture) {
+    if (!texture) {
+      return nullptr;
+    }
+    if (!(texture.GetUsage() & wgpu::TextureUsage::RenderAttachment)) {
+      throw std::runtime_error(
+          "MakeSurfaceFromTexture: the texture needs RenderAttachment usage");
+    }
+
+    skgpu::graphite::BackendTexture backendTexture =
+        skgpu::graphite::BackendTextures::MakeDawn(texture.Get());
+
+    struct TextureRef {
+      wgpu::Texture texture;
+    };
+    auto textureRef = new TextureRef{texture};
+
+    // The color type is derived from the texture format.
+    return SkSurfaces::WrapBackendTexture(
+        getRecorder(), backendTexture,
+        nullptr, // colorspace
+        nullptr, // surfaceProps
+        [](void *context) {
+          auto ref = static_cast<TextureRef *>(context);
+          delete ref;
+        },
+        textureRef);
+  }
+
   // Create a WebGPU texture from an SkImage
   // Returns a texture with CopySrc and TextureBinding usage
   wgpu::Texture MakeTextureFromImage(sk_sp<SkImage> image) {

package/cpp/rnskia/RNSkJsiViewApi.h

@@ -73,6 +73,19 @@ public:
     return func(info);
   }
 
+  // Runs func on an existing entry under the registry's shared lock. Unlike
+  // withViewInfo(), this never creates an entry: func is not called for an
+  // unknown id. Other readers may hold the entry at the same time, so func
+  // must not modify it; the objects its props reference may be modified
+  // under their own lock.
+  template <typename F> void withExistingViewInfo(size_t id, F &&func) {
+    std::shared_lock<std::shared_mutex> lock(_mutex);
+    auto it = _registry.find(id);
+    if (it != _registry.end()) {
+      func(it->second);
+    }
+  }
+
   // Read-only lookup: never creates a registry entry.
   std::shared_ptr<RNSkView> getView(size_t id) {
     std::shared_lock<std::shared_mutex> lock(_mutex);
@@ -130,8 +143,7 @@ public:
         nativeId, [&](std::shared_ptr<RNSkViewInfo> info) {
           auto name = arguments[1].asString(runtime).utf8(runtime);
           info->props.insert_or_assign(
-              arguments[1].asString(runtime).utf8(runtime),
-              RNJsi::ViewProperty(runtime, arguments[2]));
+              name, RNJsi::ViewProperty(runtime, arguments[2]));
           // Now let's see if we have a view that we can update
           if (info->view != nullptr) {
             // Update view!
@@ -170,6 +182,59 @@ public:
     return jsi::Value::undefined();
   }
 
+  /**
+   Reads the given shared values into the recording held for the view and
+   schedules a redraw. Called from the Reanimated mapper on every frame; the
+   only things crossing runtimes are the view id, the recording id and the
+   shared values. The recording is either owned by the view or, until the
+   view registers, queued for it in the registry. Updates for a recording
+   that is neither (a stale mapper, a view that has been torn down) are
+   ignored.
+   */
+  JSI_HOST_FUNCTION(applyUpdates) {
+    if (count != 3 || !arguments[0].isNumber() || !arguments[1].isNumber() ||
+        !arguments[2].isObject() ||
+        !arguments[2].asObject(runtime).isArray(runtime)) {
+      _platformContext->raiseError(
+          "applyUpdates: expected (nativeId: number, recorderId: number, "
+          "values: SharedValue[])");
+      return jsi::Value::undefined();
+    }
+    int nativeId = arguments[0].asNumber();
+    auto recorderId = arguments[1].asNumber();
+    auto values = arguments[2].asObject(runtime).asArray(runtime);
+    std::shared_ptr<RNSkView> view;
+    ViewRegistry::getInstance().withExistingViewInfo(
+        nativeId, [&](const std::shared_ptr<RNSkViewInfo> &info) {
+          view = info->view;
+          if (view != nullptr) {
+            return;
+          }
+          // The view has not registered yet (or is detached, which on iOS
+          // destroys it): the recording waits in the registry and is drawn,
+          // with whatever values it holds by then, once a view registers.
+          // Keep it current, under the registry lock so that a registration
+          // cannot slip in between; the first frame would otherwise show
+          // the values from recording time until the next change.
+          auto it = info->props.find("recorder");
+          if (it != info->props.end() && it->second.isRecorder()) {
+            RNSkPictureRenderer::applyUpdatesTo(it->second.getRecorder(),
+                                                runtime, recorderId, values);
+          }
+        });
+    if (view == nullptr) {
+      return jsi::Value::undefined();
+    }
+    // Outside the registry lock: the update must not hold up the commits
+    // and registrations of other views.
+    auto renderer =
+        std::static_pointer_cast<RNSkPictureRenderer>(view->getRenderer());
+    if (renderer->applyUpdates(runtime, recorderId, values)) {
+      view->requestRedraw();
+    }
+    return jsi::Value::undefined();
+  }
+
   JSI_HOST_FUNCTION(makeImageSnapshot) {
     if (count < 1) {
       _platformContext->raiseError(
@@ -293,6 +358,8 @@ public:
                       &RNSkJsiViewApi::setJsiProperty);
     installHostMethod(runtime, prototype, "requestRedraw",
                       &RNSkJsiViewApi::requestRedraw);
+    installHostMethod(runtime, prototype, "applyUpdates",
+                      &RNSkJsiViewApi::applyUpdates);
     installHostMethod(runtime, prototype, "makeImageSnapshotAsync",
                       &RNSkJsiViewApi::makeImageSnapshotAsync);
     installHostMethod(runtime, prototype, "makeImageSnapshot",

package/cpp/rnskia/RNSkPictureView.cpp

@@ -0,0 +1,58 @@
+// The recorder headers depend on the include order established by
+// JsiSkApi.h, so everything that needs a complete Recorder lives here rather
+// than in RNSkPictureView.h (which platform views include on its own).
+#include "api/JsiSkApi.h"
+
+#include "RNSkPictureView.h"
+
+#include "api/recorder/DrawingCtx.h"
+#include "api/recorder/RNRecorder.h"
+
+namespace RNSkia {
+
+void RNSkPictureRenderer::setRecorder(std::shared_ptr<Recorder> recorder) {
+  sk_sp<SkPicture> picture;
+  if (recorder != nullptr && recorder->variables.empty()) {
+    picture = recorder->makePicture();
+    recorder = nullptr;
+  }
+  std::shared_ptr<Recorder> retired;
+  {
+    std::lock_guard<std::mutex> lock(_mutex);
+    retired = std::move(_recorder);
+    _recorder = std::move(recorder);
+    _picture = std::move(picture);
+  }
+  retired = nullptr;
+  _requestRedraw();
+}
+
+bool RNSkPictureRenderer::applyUpdatesTo(
+    const std::shared_ptr<Recorder> &recorder, jsi::Runtime &runtime,
+    double recorderId, const jsi::Array &values) {
+  if (recorder == nullptr || recorder->id != recorderId) {
+    return false;
+  }
+  recorder->applyUpdates(runtime, values);
+  return true;
+}
+
+bool RNSkPictureRenderer::applyUpdates(jsi::Runtime &runtime, double recorderId,
+                                       const jsi::Array &values) {
+  std::shared_ptr<Recorder> recorder;
+  {
+    std::lock_guard<std::mutex> lock(_mutex);
+    recorder = _recorder;
+  }
+  // Outside the renderer lock: a commit replacing the recorder must not wait
+  // for the update. Should it land while this runs, the update goes into the
+  // retired recorder and the redraw that follows draws the new one.
+  return applyUpdatesTo(recorder, runtime, recorderId, values);
+}
+
+void RNSkPictureRenderer::replay(SkCanvas *canvas, Recorder *recorder) {
+  DrawingCtx ctx(canvas);
+  recorder->play(&ctx);
+}
+
+} // namespace RNSkia