@shopify/react-native-skia 0.1.141 → 0.1.142

package/android/cpp/rnskia-android/RNSkDrawViewImpl.cpp

@@ -65,9 +65,9 @@ namespace RNSkia {
         requestRedraw();
     }
 
-    void RNSkDrawViewImpl::drawPicture(const sk_sp <SkPicture> picture) {
+    void RNSkDrawViewImpl::renderToSkiaCanvas(const std::function<void(SkCanvas*)>& cb) {
         if(_renderer != nullptr) {
-            _renderer->run(picture, _scaledWidth, _scaledHeight);
+            _renderer->run(cb, _scaledWidth, _scaledHeight);
         }
     }
 }

package/android/cpp/rnskia-android/RNSkDrawViewImpl.h

@@ -32,7 +32,7 @@ namespace RNSkia {
 
         float getScaledHeight() override { return _scaledHeight; };
 
-        void drawPicture(const sk_sp <SkPicture> picture) override;
+        void renderToSkiaCanvas(const std::function<void(SkCanvas*)>&) override;
 
     private:
         bool createSkiaSurface();

package/android/cpp/rnskia-android/SkiaOpenGLRenderer.cpp

@@ -20,12 +20,12 @@ namespace RNSkia
         return threadContexts.at(threadId);
     }
 
-    SkiaOpenGLRenderer::SkiaOpenGLRenderer(ANativeWindow *surface, size_t renderId):
-        _surfaceTexture(surface),
-        _renderId(renderId) {
+    SkiaOpenGLRenderer::SkiaOpenGLRenderer(ANativeWindow *surface, size_t renderId) : _surfaceTexture(surface),
+                                                                                      _renderId(renderId)
+    {
     }
 
-    void SkiaOpenGLRenderer::run(const sk_sp<SkPicture> picture, int width, int height)
+    void SkiaOpenGLRenderer::run(const std::function<void(SkCanvas *)> &cb, int width, int height)
     {
         switch (_renderState)
         {
@@ -51,7 +51,7 @@ namespace RNSkia
                 return;
             }
 
-            if (picture != nullptr)
+            if (cb != nullptr)
             {
                 // Reset Skia Context since it might be modified by another Skia View during
                 // rendering.
@@ -62,11 +62,10 @@ namespace RNSkia
                 glClear(GL_COLOR_BUFFER_BIT);
 
                 // Draw picture into surface
-                _skSurface->getCanvas()->drawPicture(picture);
+                cb(_skSurface->getCanvas());
 
                 // Flush
-                _skSurface->getCanvas()->flush();
-                getThreadDrawingContext()->skContext->flush();
+                _skSurface->flush();
 
                 if (!eglSwapBuffers(getThreadDrawingContext()->glDisplay, _glSurface))
                 {
@@ -180,10 +179,10 @@ namespace RNSkia
         EGLint contextAttribs[] = {EGL_CONTEXT_CLIENT_VERSION, 2, EGL_NONE};
 
         getThreadDrawingContext()->glContext = eglCreateContext(
-                getThreadDrawingContext()->glDisplay,
-                getThreadDrawingContext()->glConfig,
-                NULL,
-                contextAttribs);
+            getThreadDrawingContext()->glDisplay,
+            getThreadDrawingContext()->glConfig,
+            NULL,
+            contextAttribs);
 
         if (getThreadDrawingContext()->glContext == EGL_NO_CONTEXT)
         {
@@ -239,10 +238,10 @@ namespace RNSkia
         // Create the opengl surface
         _glSurface =
             eglCreateWindowSurface(
-                    getThreadDrawingContext()->glDisplay,
-                    getThreadDrawingContext()->glConfig,
-                    _surfaceTexture,
-                    nullptr);
+                getThreadDrawingContext()->glDisplay,
+                getThreadDrawingContext()->glConfig,
+                _surfaceTexture,
+                nullptr);
 
         if (_glSurface == EGL_NO_SURFACE)
         {

package/android/cpp/rnskia-android/SkiaOpenGLRenderer.h

@@ -52,11 +52,11 @@ namespace RNSkia
          * renderer. All OpenGL/Skia context operations are done on a separate thread which must
          * be the same for all calls to the render method.
          *
-         * @param picture Picture to render, can be nullptr, then no rendering will be performed
+         * @param callback Render callback
          * @param width Width of surface to render if there is a picture
          * @param height Height of surface to render if there is a picture
          */
-        void run(const sk_sp<SkPicture> picture, int width, int height);
+        void run(const std::function<void(SkCanvas*)> &cb, int width, int height);
 
         /**
          * Sets the state to finishing. Next time the renderer will be called it

package/android/src/main/java/com/shopify/reactnative/skia/SkiaDrawView.java

@@ -2,7 +2,6 @@ package com.shopify.reactnative.skia;
 
 import android.content.Context;
 import android.graphics.SurfaceTexture;
-import android.util.Log;
 import android.view.Surface;
 import android.view.TextureView;
 import android.view.MotionEvent;
@@ -52,41 +51,84 @@ public class SkiaDrawView extends TextureView implements TextureView.SurfaceText
 
     void onViewRemoved() {
         mViewRemoved = true;
+        // We can only reset the native side when the view was removed from screen.
+        // releasing the surface can also be done when the view is hidden and then
+        // we should only release the surface - and keep the native part around.
+        if(mSurface == null) {
+            mHybridData.resetNative();
+        }
     }
 
     @Override
     public boolean onTouchEvent(MotionEvent ev) {
-        int action = ev.getAction();
-        int count = ev.getPointerCount();
+        // https://developer.android.com/training/gestures/multi
+        int action = ev.getActionMasked();
+
         MotionEvent.PointerCoords r = new MotionEvent.PointerCoords();
-        double[] points = new double[count*5];
-        for (int i = 0; i < count; i++) {
-            ev.getPointerCoords(i, r);
-            points[i] = r.x;
-            points[i+1] = r.y;
-            points[i+2] = ev.getPressure(i);
-            switch (action) {
-                case MotionEvent.ACTION_DOWN:
-                case MotionEvent.ACTION_POINTER_DOWN:
-                    points[i+3] = 0;
-                    break;
-                case MotionEvent.ACTION_MOVE:
-                    points[i+3] = 1;
-                    break;
-                case MotionEvent.ACTION_UP:
-                case MotionEvent.ACTION_POINTER_UP:
-                    points[i+3] = 2;
-                    break;
-                case MotionEvent.ACTION_CANCEL:
-                    points[i+3] = 3;
-                    break;
+
+        double[] points;
+
+        // If this is a pointer_up/down event we need to handle it a bit specialized
+        switch (action) {
+            case MotionEvent.ACTION_POINTER_DOWN:
+            case MotionEvent.ACTION_POINTER_UP: {
+                points = new double[5];
+                int pointerIndex = ev.getActionIndex();
+                ev.getPointerCoords(pointerIndex, r);
+                points[0] = r.x;
+                points[1] = r.y;
+                points[2] = ev.getPressure(pointerIndex);
+                points[3] = motionActionToType(action);
+                points[4] = ev.getPointerId(pointerIndex);
+
+                updateTouchPoints(points);
+
+                break;
+            }
+            default: {
+                // For the rest we can just handle it like expected
+                int count = ev.getPointerCount();
+                int pointerIndex = 0;
+                points = new double[5 * count];
+                for (int i = 0; i < count; i++) {
+                    ev.getPointerCoords(i, r);
+                    points[pointerIndex++] = r.x;
+                    points[pointerIndex++] = r.y;
+                    points[pointerIndex++] = ev.getPressure(i);
+                    points[pointerIndex++] = motionActionToType(action);
+                    points[pointerIndex++] = ev.getPointerId(i);
+                }
+
+                updateTouchPoints(points);
+
+                break;
             }
-            points[i+4] = ev.getPointerId(i);
         }
-        updateTouchPoints(points);
+
         return true;
     }
 
+    private static int motionActionToType(int action) {
+        int actionType = 3;
+        switch (action) {
+            case MotionEvent.ACTION_DOWN:
+            case MotionEvent.ACTION_POINTER_DOWN:
+                actionType = 0;
+                break;
+            case MotionEvent.ACTION_MOVE:
+                actionType = 1;
+                break;
+            case MotionEvent.ACTION_UP:
+            case MotionEvent.ACTION_POINTER_UP:
+                actionType = 2;
+                break;
+            case MotionEvent.ACTION_CANCEL:
+                actionType = 3;
+                break;
+        }
+        return actionType;
+    }
+
     @Override
     public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {
         mSurface = new Surface(surface);
@@ -104,7 +146,7 @@ public class SkiaDrawView extends TextureView implements TextureView.SurfaceText
         // https://developer.android.com/reference/android/view/TextureView.SurfaceTextureListener#onSurfaceTextureDestroyed(android.graphics.SurfaceTexture)
         // Invoked when the specified SurfaceTexture is about to be destroyed. If returns true,
         // no rendering should happen inside the surface texture after this method is invoked.
-        // If returns false, the client needs to call SurfaceTexture#release().
+        // When returning false, the client needs to call SurfaceTexture#release().
         return false;
     }
 

package/cpp/rnskia/RNSkDrawView.cpp

@@ -54,7 +54,63 @@ void RNSkDrawView::setNativeId(size_t nativeId) {
   beginDrawingLoop();
 }
 
-void RNSkDrawView::setDrawCallback(std::shared_ptr<jsi::Function> callback) {
+void RNSkDrawView::callJsDrawCallback(int width, int height, double timestamp) {
+  if(_drawCallback == nullptr) {
+    return;
+  }
+
+  // Reset timing info
+  _jsTimingInfo.reset();
+  _gpuTimingInfo.reset();
+
+  auto runtime = getPlatformContext()->getJsRuntime();
+
+  // Update info parameter
+  _infoObject->beginDrawOperation(width, height, timestamp);
+
+  // Set up arguments array
+  std::vector<jsi::Value> args(2);
+  args[0] = jsi::Object::createFromHostObject(*runtime, _jsiCanvas);
+  args[1] = jsi::Object::createFromHostObject(*runtime, _infoObject);
+
+  // To be able to call the drawing function we'll wrap it once again
+  _drawCallback->call(*runtime,
+                      static_cast<const jsi::Value *>(args.data()),
+                      (size_t)2);
+
+  // Reset touches
+  _infoObject->endDrawOperation();
+
+  // Draw debug overlays
+  if (_showDebugOverlay) {
+
+    // Display average rendering timer
+    auto jsAvg = _jsTimingInfo.getAverage();
+    //auto jsFps = _jsTimingInfo.getFps();
+
+    auto gpuAvg = _gpuTimingInfo.getAverage();
+    //auto gpuFps = _gpuTimingInfo.getFps();
+
+    auto total = jsAvg + gpuAvg;
+
+    // Build string
+    std::ostringstream stream;
+    stream << "js: " << jsAvg << "ms gpu: " << gpuAvg << "ms " << " total: " << total << "ms";
+
+    std::string debugString = stream.str();
+
+    // Set up debug font/paints
+    auto font = SkFont();
+    font.setSize(14);
+    auto paint = SkPaint();
+    paint.setColor(SkColors::kRed);
+    _jsiCanvas->getCanvas()->drawSimpleText(
+            debugString.c_str(), debugString.size(), SkTextEncoding::kUTF8, 8,
+            18, font, paint);
+  }
+}
+
+void RNSkDrawView::setDrawCallback(std::shared_ptr<FunctionWrapper> callback) {
 
   if (callback == nullptr) {
     _drawCallback = nullptr;
@@ -62,69 +118,9 @@ void RNSkDrawView::setDrawCallback(std::shared_ptr<jsi::Function> callback) {
     endDrawingLoop();
     return;
   }
-  
-  // Reset timing info
-  _jsTimingInfo.reset();
-  _gpuTimingInfo.reset();
-  
-  // Create draw drawCallback wrapper
-  _drawCallback = std::make_shared<RNSkDrawCallback>(
-      [weakSelf = weak_from_this(),
-       callback = std::move(callback)](std::shared_ptr<JsiSkCanvas> canvas,
-                                       int width,
-                                       int height,
-                                       double timestamp,
-                                       std::shared_ptr<RNSkPlatformContext> context) {
-
-       auto self = weakSelf.lock();
-       if(self) {
-         auto runtime = context->getJsRuntime();
-                           
-         // Update info parameter
-         self->_infoObject->beginDrawOperation(width, height, timestamp);
-         
-         // Set up arguments array
-         std::vector<jsi::Value> args(2);
-         args[0] = jsi::Object::createFromHostObject(*runtime, canvas);
-         args[1] = jsi::Object::createFromHostObject(*runtime, self->_infoObject);
-
-         // To be able to call the drawing function we'll wrap it once again
-         callback->call(*runtime,
-                        static_cast<const jsi::Value *>(args.data()),
-                        (size_t)2);
-         
-         // Reset touches
-         self->_infoObject->endDrawOperation();
-                           
-        // Draw debug overlays
-        if (self->_showDebugOverlay) {
-
-          // Display average rendering timer
-          auto jsAvg = self->_jsTimingInfo.getAverage();
-          //auto jsFps = _jsTimingInfo.getFps();
-          
-          auto gpuAvg = self->_gpuTimingInfo.getAverage();
-          //auto gpuFps = _gpuTimingInfo.getFps();
-          
-          auto total = jsAvg + gpuAvg;
-          
-          // Build string
-          std::ostringstream stream;
-          stream << "js: " << jsAvg << "ms gpu: " << gpuAvg << "ms " << " total: " << total << "ms";
-          
-          std::string debugString = stream.str();
-
-          // Set up debug font/paints
-          auto font = SkFont();
-          font.setSize(14);
-          auto paint = SkPaint();
-          paint.setColor(SkColors::kRed);
-          canvas->getCanvas()->drawSimpleText(
-           debugString.c_str(), debugString.size(), SkTextEncoding::kUTF8, 8,
-           18, font, paint);
-        }
-      }
-    });
+
+  // Save callback
+  _drawCallback = callback;
 
   // Request redraw
   requestRedraw();
@@ -144,7 +140,7 @@ void RNSkDrawView::drawInCanvas(std::shared_ptr<JsiSkCanvas> canvas,
     skCanvas->scale(pd, pd);
     
     // Call draw function.
-    (*_drawCallback)(canvas, width / pd, height / pd, time, _platformContext);
+    callJsDrawCallback(width / pd, height / pd, time);
     
     // Restore and flush canvas
     skCanvas->restore();
@@ -203,6 +199,8 @@ void RNSkDrawView::performDraw() {
   
   // Finish drawing operations
   auto p = recorder.finishRecordingAsPicture();
+
+  _jsiCanvas->setCanvas(nullptr);
   
   // Calculate duration
   _jsTimingInfo.stopTiming();
@@ -217,7 +215,9 @@ void RNSkDrawView::performDraw() {
       if (self) {
         // Draw the picture recorded on the real GPU canvas
         self->_gpuTimingInfo.beginTiming();
-        self->drawPicture(p);
+        self->renderToSkiaCanvas([p = std::move(p)](SkCanvas* canvas) {
+          canvas->drawPicture(p);
+        });
         self->_gpuTimingInfo.stopTiming();
       }
       // Unlock GPU drawing

package/cpp/rnskia/RNSkDrawView.h

@@ -16,7 +16,7 @@
 #pragma clang diagnostic push
 #pragma clang diagnostic ignored "-Wdocumentation"
 
-#include <SkRefCnt.h>
+#include <SkCanvas.h>
 
 #pragma clang diagnostic pop
 
@@ -33,6 +33,16 @@ using RNSkDrawCallback =
 
 enum RNSkDrawingMode { Default, Continuous };
 
+class FunctionWrapper {
+public:
+    FunctionWrapper(jsi::Function &&func): _func(std::move(func)) {}
+    jsi::Value call(jsi::Runtime& runtime, const jsi::Value* args, size_t count) {
+      return _func.call(runtime, args, count);
+    }
+private:
+    jsi::Function _func;
+};
+
 class RNSkDrawView: public std::enable_shared_from_this<RNSkDrawView> {
 public:
   /**
@@ -60,7 +70,7 @@ public:
   /**
    * Installs the draw callback for the view
    */
-  void setDrawCallback(std::shared_ptr<jsi::Function> callback);
+  void setDrawCallback(std::shared_ptr<FunctionWrapper> callback);
   
   /**
    Sets the native id of the view
@@ -105,9 +115,9 @@ protected:
   virtual float getScaledHeight() = 0;
   
   /**
-   Override to render picture to GPU
+   Override to render to a canvas
    */
-  virtual void drawPicture(const sk_sp<SkPicture> picture) = 0;
+  virtual void renderToSkiaCanvas(const std::function<void(SkCanvas*)>&) = 0;
   
   /**
    * @return The platformcontext
@@ -116,7 +126,13 @@ protected:
     return _platformContext;
   }
 
-private:  
+private:
+  /**
+   * Calls the JS draw callback. This is the JS function that does the actual drawing so this
+   * method must be called from the JS thread.
+   */
+  void callJsDrawCallback(int width, int height, double timestamp);
+
   /**
    Starts beginDrawCallback loop if the drawing mode is continuous
    */
@@ -143,7 +159,7 @@ private:
   /**
    * Stores the draw drawCallback
    */
-  std::shared_ptr<RNSkDrawCallback> _drawCallback;
+  std::shared_ptr<FunctionWrapper> _drawCallback;
 
   /**
    * Stores a pointer to the jsi wrapper for the canvas. The reason for

package/cpp/rnskia/RNSkJsiViewApi.h

@@ -19,7 +19,7 @@ using CallbackInfo = struct CallbackInfo {
     drawCallback = nullptr;
     view = nullptr;
   }
-  std::shared_ptr<jsi::Function> drawCallback;
+  std::shared_ptr<FunctionWrapper> drawCallback;
   std::shared_ptr<RNSkDrawView> view;
 };
 
@@ -61,7 +61,7 @@ public:
     if (arguments[1].isUndefined()) {
       info->drawCallback = nullptr;
     } else {
-      info->drawCallback = std::make_shared<jsi::Function>(
+      info->drawCallback = std::make_shared<FunctionWrapper>(
           arguments[1].asObject(runtime).asFunction(runtime));
     }
 

package/cpp/rnskia/values/RNSkComputedValue.h

@@ -43,6 +43,16 @@ public:
     _callback = std::make_shared<jsi::Function>(arguments[0].asObject(runtime).asFunction(runtime));
   }
   
+  void invalidate() override {
+    RNSkReadonlyValue::invalidate();
+    
+    // Unregister listeners
+    for(const auto &unsubscribe: _unsubscribers) {
+      unsubscribe();
+    }
+    _unsubscribers.clear();
+  }
+  
   void initializeDependencies(jsi::Runtime &runtime, const jsi::Value *arguments, size_t count) {
     // Save dependencies
     std::vector<std::shared_ptr<RNSkReadonlyValue>> dependencies;
@@ -80,13 +90,6 @@ public:
     dependencyUpdated(runtime);
   }
   
-  virtual ~RNSkComputedValue() {
-    // Unregister listeners
-    for(const auto &unsubscribe: _unsubscribers) {
-      unsubscribe();
-    }
-  }
-  
 private:
   void dependencyUpdated(jsi::Runtime &runtime) {
     // Calculate new value

package/cpp/rnskia/values/RNSkReadonlyValue.h

@@ -30,7 +30,9 @@ public:
       _valueHolder(std::make_unique<JsiSimpleValueWrapper>(*platformContext->getJsRuntime()))
       { }
   
-  virtual ~RNSkReadonlyValue() { }
+  virtual ~RNSkReadonlyValue() {
+    invalidate();
+  }
 
   JSI_PROPERTY_GET(__typename__) {
     return jsi::String::createFromUtf8(runtime, "RNSkValue");
@@ -68,7 +70,15 @@ public:
     });
   }
   
-  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(RNSkReadonlyValue, addListener))
+  
+  
+  JSI_HOST_FUNCTION(__invalidate) {
+    invalidate();
+    return jsi::Value::undefined();
+  }
+  
+  JSI_EXPORT_FUNCTIONS(JSI_EXPORT_FUNC(RNSkReadonlyValue, addListener),
+                       JSI_EXPORT_FUNC(RNSkReadonlyValue, __invalidate))
     
   /**
   * Adds a callback that will be called whenever the value changes
@@ -102,6 +112,15 @@ public:
     }
   }
   
+  /**
+   Override to implement invalidation logic for the value. In the base class this function
+   clears all subscribers.
+   */
+  virtual void invalidate() {
+    std::lock_guard<std::mutex> lock(_mutex);
+    _listeners.clear();
+  }
+  
   jsi::Value getCurrent(jsi::Runtime &runtime) {
     return _valueHolder->getCurrent(runtime);
   }

package/cpp/rnskia/values/RNSkValue.h

@@ -72,6 +72,7 @@ public:
   
   JSI_EXPORT_FUNCTIONS(
     JSI_EXPORT_FUNC(RNSkValue, addListener),
+    JSI_EXPORT_FUNC(RNSkReadonlyValue, __invalidate)
   )
 
 private:

package/ios/RNSkia-iOS/RNSkDrawViewImpl.h

@@ -32,7 +32,7 @@ protected:
   float getScaledHeight() override { return _height * _context->getPixelDensity(); };
   
 private:
-  void drawPicture(const sk_sp<SkPicture> picture) override;
+  void renderToSkiaCanvas(const std::function<void(SkCanvas*)>& cb) override;
   bool createSkiaSurface();
 
   int _nativeId;

package/ios/RNSkia-iOS/RNSkDrawViewImpl.mm

@@ -60,7 +60,7 @@ void RNSkDrawViewImpl::setSize(int width, int height) {
   requestRedraw();
 }
 
-void RNSkDrawViewImpl::drawPicture(const sk_sp<SkPicture> picture) {
+void RNSkDrawViewImpl::renderToSkiaCanvas(const std::function<void(SkCanvas*)>& cb) {
   if(_width == -1 && _height == -1) {
     return;
   }
@@ -103,7 +103,7 @@ void RNSkDrawViewImpl::drawPicture(const sk_sp<SkPicture> picture) {
     }
     
     skSurface->getCanvas()->clear(SK_AlphaTRANSPARENT);
-    skSurface->getCanvas()->drawPicture(picture);
+    cb(skSurface->getCanvas());
     
     id<MTLCommandBuffer> commandBuffer([_commandQueue commandBuffer]);
     [commandBuffer presentDrawable:currentDrawable];

package/ios/RNSkia-iOS/SkiaDrawView.mm

@@ -73,6 +73,10 @@
   if(_manager != nullptr && _nativeId != 0) {
     _manager->unregisterSkiaDrawView(_nativeId);
   }
+  
+  [[NSNotificationCenter defaultCenter] removeObserver:self name:RCTBridgeWillInvalidateModulesNotification object:nil];
+    
+  assert(_impl == nullptr);
 }
 
 #pragma mark Layout

package/lib/commonjs/mock/index.js

@@ -9,6 +9,8 @@ var Values = _interopRequireWildcard(require("../values/web"));
 
 var ValuesHooks = _interopRequireWildcard(require("../values/hooks"));
 
+var _selector = require("../values/selector");
+
 var BaseSkia = _interopRequireWildcard(require("../skia/types"));
 
 var _useSharedValueEffect = require("../external/reanimated/useSharedValueEffect");
@@ -64,7 +66,6 @@ const Mock = {
   Skia,
   ...BaseSkia,
   // 2. Hooks
-  useDataCollection: Noop,
   useRawData: Noop,
   useData: Noop,
   useFont: Noop,
@@ -113,6 +114,7 @@ const Mock = {
   // ValueExports
   ...Values,
   ...ValuesHooks,
+  Selector: _selector.Selector,
   // Animations
   ...timingFunctions,
   ...springFunctions,