@shopify/react-native-skia 0.1.193 → 0.1.195

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

@@ -42,6 +42,10 @@ public:
   void surfaceAvailable(jobject surface, int width, int height) override {
     std::static_pointer_cast<RNSkOpenGLCanvasProvider>(T::getCanvasProvider())
         ->surfaceAvailable(surface, width, height);
+
+    // Try to render directly when the surface has been set so that
+    // we don't have to wait until the draw loop returns.
+    RNSkView::renderImmediate();
   }
 
   void surfaceDestroyed() override {

package/android/cpp/rnskia-android/RNSkOpenGLCanvasProvider.cpp

@@ -23,11 +23,12 @@ float RNSkOpenGLCanvasProvider::getScaledWidth() { return _width; }
 
 float RNSkOpenGLCanvasProvider::getScaledHeight() { return _height; }
 
-void RNSkOpenGLCanvasProvider::renderToCanvas(
+bool RNSkOpenGLCanvasProvider::renderToCanvas(
     const std::function<void(SkCanvas *)> &cb) {
   if (_renderer != nullptr) {
-    _renderer->run(cb, _width, _height);
+    return _renderer->run(cb, _width, _height);
   }
+  return false;
 }
 
 void RNSkOpenGLCanvasProvider::surfaceAvailable(jobject surface, int width,

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

@@ -25,7 +25,7 @@ public:
 
   float getScaledHeight() override;
 
-  void renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
+  bool renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
 
   void surfaceAvailable(jobject surface, int width, int height);
 

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

@@ -4,6 +4,8 @@
 #include <android/native_window.h>
 #include <android/native_window_jni.h>
 
+#define STENCIL_BUFFER_SIZE 8
+
 namespace RNSkia {
 /** Static members */
 sk_sp<SkSurface> MakeOffscreenGLSurface(int width, int height) {
@@ -137,7 +139,7 @@ SkiaOpenGLRenderer::~SkiaOpenGLRenderer() {
   _nativeWindow = nullptr;
 }
 
-void SkiaOpenGLRenderer::run(const std::function<void(SkCanvas *)> &cb,
+bool SkiaOpenGLRenderer::run(const std::function<void(SkCanvas *)> &cb,
                              int width, int height) {
   switch (_renderState) {
   case RenderState::Initializing: {
@@ -148,31 +150,48 @@ void SkiaOpenGLRenderer::run(const std::function<void(SkCanvas *)> &cb,
   case RenderState::Rendering: {
     // Make sure to initialize the rendering pipeline
     if (!ensureInitialised()) {
-      break;
-    }
-
-    // Ensure we have the Skia surface to draw on. We need to
-    // pass width and height since the surface will be recreated
-    // when the view is resized.
-    if (!ensureSkiaSurface(width, height)) {
-      return;
+      return false;
     }
 
     if (cb != nullptr) {
-      // Reset Skia Context since it might be modified by another Skia View
-      // during rendering.
+      // RNSkLogger::logToConsole("SKIARENDER - Render begin");
+
       getThreadDrawingContext()->skContext->resetContext();
 
+      SkColorType colorType;
+      // setup surface for fbo0
+      GrGLFramebufferInfo fboInfo;
+      fboInfo.fFBOID = 0;
+      fboInfo.fFormat = 0x8058;
+      colorType = kN32_SkColorType;
+
+      GrBackendRenderTarget backendRT(width, height, 0, STENCIL_BUFFER_SIZE,
+                                      fboInfo);
+
+      SkSurfaceProps props(0, kUnknown_SkPixelGeometry);
+
+      sk_sp<SkSurface> renderTarget(SkSurface::MakeFromBackendRenderTarget(
+          getThreadDrawingContext()->skContext.get(), backendRT,
+          kBottomLeft_GrSurfaceOrigin, colorType, nullptr, &props));
+
+      auto canvas = renderTarget->getCanvas();
+
       // Draw picture into surface
-      cb(_skSurface->getCanvas());
+      cb(canvas);
+
       // Flush
-      _skSurface->flushAndSubmit();
+      canvas->flush();
 
       if (!eglSwapBuffers(getThreadDrawingContext()->glDisplay, _glSurface)) {
         RNSkLogger::logToConsole("eglSwapBuffers failed: %d\n", eglGetError());
+        return false;
       }
+
+      // RNSkLogger::logToConsole("SKIARENDER - render done");
+      return true;
     }
-    break;
+
+    return false;
   }
   case RenderState::Finishing: {
     _renderState = RenderState::Done;
@@ -184,14 +203,11 @@ void SkiaOpenGLRenderer::run(const std::function<void(SkCanvas *)> &cb,
       _glSurface = EGL_NO_SURFACE;
     }
 
-    // Release Skia Surface
-    _skSurface = nullptr;
-
-    break;
+    return true;
   }
   case RenderState::Done: {
     // Do nothing. We're done.
-    break;
+    return true;
   }
   }
 }
@@ -326,54 +342,4 @@ bool SkiaOpenGLRenderer::initGLSurface() {
 
   return true;
 }
-
-bool SkiaOpenGLRenderer::ensureSkiaSurface(int width, int height) {
-  if (getThreadDrawingContext()->skContext == nullptr) {
-    return false;
-  }
-
-  if (_skSurface == nullptr || !_skRenderTarget.isValid() ||
-      _prevWidth != width || _prevHeight != height) {
-    glViewport(0, 0, width, height);
-
-    _prevWidth = width;
-    _prevHeight = height;
-
-    GLint buffer;
-    glGetIntegerv(GL_FRAMEBUFFER_BINDING, &buffer);
-
-    GLint stencil;
-    glGetIntegerv(GL_STENCIL_BITS, &stencil);
-
-    GLint samples;
-    glGetIntegerv(GL_SAMPLES, &samples);
-
-    auto maxSamples =
-        getThreadDrawingContext()->skContext->maxSurfaceSampleCountForColorType(
-            kRGBA_8888_SkColorType);
-
-    if (samples > maxSamples)
-      samples = maxSamples;
-
-    GrGLFramebufferInfo fbInfo;
-    fbInfo.fFBOID = buffer;
-    fbInfo.fFormat = 0x8058;
-
-    _skRenderTarget =
-        GrBackendRenderTarget(width, height, samples, stencil, fbInfo);
-
-    _skSurface = SkSurface::MakeFromBackendRenderTarget(
-        getThreadDrawingContext()->skContext.get(), _skRenderTarget,
-        kBottomLeft_GrSurfaceOrigin, kRGBA_8888_SkColorType, nullptr, nullptr);
-
-    if (!_skSurface) {
-      RNSkLogger::logToConsole(
-          "JniSkiaDrawView::setupSurface - skSurface could not be created!");
-      return false;
-    }
-
-    return true;
-  }
-  return true;
-}
 } // namespace RNSkia

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

@@ -60,7 +60,7 @@ public:
    * @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 std::function<void(SkCanvas *)> &cb, int width, int height);
+  bool run(const std::function<void(SkCanvas *)> &cb, int width, int height);
 
   /**
    * Sets the state to finishing. Next time the renderer will be called it
@@ -102,15 +102,6 @@ private:
    */
   bool initGLSurface();
 
-  /**
-   * Ensures that we have a valid Skia surface to draw to. The surface will
-   * be recreated if the width/height change.
-   * @param width Width of the underlying view
-   * @param height Height of the underlying view
-   * @return True if initialization went well
-   */
-  bool ensureSkiaSurface(int width, int height);
-
   /**
    * To be able to use static contexts (and avoid reloading the skia context for
    * each new view, we track the OpenGL and Skia drawing context per thread.
@@ -121,8 +112,6 @@ private:
   EGLSurface _glSurface = EGL_NO_SURFACE;
 
   ANativeWindow *_nativeWindow = nullptr;
-  GrBackendRenderTarget _skRenderTarget;
-  sk_sp<SkSurface> _skSurface;
 
   int _prevWidth = 0;
   int _prevHeight = 0;

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

@@ -58,123 +58,124 @@ public class ViewScreenshotService {
         paint.setDither(true);
 
         // Render the main view and its children
-        final Canvas c = new Canvas(bitmap);
-        view.draw(c);
+        final Canvas canvas = new Canvas(bitmap);
 
-        // Enumerate children
-        final List<View> childrenList = getAllChildren(view);
+        // Renders view with child views to canvas
+        renderViewToCanvas(canvas, view, paint);
 
-        for (final View child : childrenList) {
-            // skip any child that we don't know how to process
-            if (child instanceof TextureView) {
-                // skip all invisible to user child views
-                if (child.getVisibility() != VISIBLE) continue;
+        return bitmap;
+    }
 
-                final TextureView tvChild = (TextureView) child;
-                tvChild.setOpaque(false); // <-- switch off background fill
-
-                // TextureView should use bitmaps with matching size,
-                // otherwise content of the TextureView will be scaled to provided bitmap dimensions
-                final Bitmap childBitmapBuffer = tvChild.getBitmap(Bitmap.createBitmap(child.getWidth(), child.getHeight(), Bitmap.Config.ARGB_8888));
-
-                final int countCanvasSave = c.save();
-                applyTransformations(c, view, child);
-
-                // due to re-use of bitmaps for screenshot, we can get bitmap that is bigger in size than requested
-                c.drawBitmap(childBitmapBuffer, 0, 0, paint);
-
-                c.restoreToCount(countCanvasSave);
-            } else if (child instanceof SurfaceView) {
-                final SurfaceView svChild = (SurfaceView)child;
-                final CountDownLatch latch = new CountDownLatch(1);
-
-                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
-                    final Bitmap childBitmapBuffer = Bitmap.createBitmap(child.getWidth(), child.getHeight(), Bitmap.Config.ARGB_8888);
-                    try {
-                        PixelCopy.request(svChild, childBitmapBuffer, new PixelCopy.OnPixelCopyFinishedListener() {
-                            @Override
-                            public void onPixelCopyFinished(int copyResult) {
-                                final int countCanvasSave = c.save();
-                                applyTransformations(c, view, child);
-                                c.drawBitmap(childBitmapBuffer, 0, 0, paint);
-                                c.restoreToCount(countCanvasSave);
-                                latch.countDown();
-                            }
-                        }, new Handler(Looper.getMainLooper()));
-                        latch.await(SURFACE_VIEW_READ_PIXELS_TIMEOUT, TimeUnit.SECONDS);
-                    } catch (Exception e) {
-                        Log.e(TAG, "Cannot PixelCopy for " + svChild, e);
-                    }
-                } else {
-                    Bitmap cache = svChild.getDrawingCache();
-                    if (cache != null) {
-                        c.drawBitmap(svChild.getDrawingCache(), 0, 0, paint);
-                    }
+    private static void renderViewToCanvas(Canvas canvas, View view, Paint paint) {
+        // Apply transformations for the current view
+        canvas.save();
+        applyTransformations(canvas, view);
+
+        // Draw children if the view has children
+        if ((view instanceof ViewGroup)) {
+            // Draw children
+            ViewGroup group = (ViewGroup) view;
+
+            // Hide visible children - this needs to be done because view.draw(canvas)
+            // will render all visible non-texture/surface views directly - causing
+            // views to be rendered twice - once by view.draw() and once when we
+            // enumerate children. We therefore need to turn off rendering of visible
+            // children before we call view.draw:
+            List<View> visibleChildren = new ArrayList<>();
+            for (int i = 0; i < group.getChildCount(); i++) {
+                View child = group.getChildAt(i);
+                if (child.getVisibility() == VISIBLE) {
+                    visibleChildren.add(child);
+                    child.setVisibility(View.INVISIBLE);
                 }
             }
-        }
-
-        return bitmap;
-    }
 
-    private static List<View> getAllChildren(@NonNull final View v) {
-        if (!(v instanceof ViewGroup)) {
-            final ArrayList<View> viewArrayList = new ArrayList<>();
-            viewArrayList.add(v);
+            // Draw ourselves
+            view.draw(canvas);
 
-            return viewArrayList;
-        }
+            // Enable children again
+            for (int i = 0; i < visibleChildren.size(); i++) {
+                View child = visibleChildren.get(i);
+                child.setVisibility(VISIBLE);
+            }
 
-        final ArrayList<View> result = new ArrayList<>();
+            // Draw children
+            for (int i = 0; i < group.getChildCount(); i++) {
+                View child = group.getChildAt(i);
 
-        ViewGroup viewGroup = (ViewGroup) v;
-        for (int i = 0; i < viewGroup.getChildCount(); i++) {
-            View child = viewGroup.getChildAt(i);
+                // skip all invisible to user child views
+                if (child.getVisibility() != VISIBLE) continue;
 
-            //Do not add any parents, just add child elements
-            result.addAll(getAllChildren(child));
+                // skip any child that we don't know how to process
+                if (child instanceof TextureView) {
+                    final TextureView tvChild = (TextureView) child;
+                    tvChild.setOpaque(false); // <-- switch off background fill
+
+                    canvas.save();
+                    applyTransformations(canvas, child);
+
+                    // TextureView should use bitmaps with matching size,
+                    // otherwise content of the TextureView will be scaled to provided bitmap dimensions
+                    final Bitmap childBitmapBuffer = tvChild.getBitmap(Bitmap.createBitmap(child.getWidth(), child.getHeight(), Bitmap.Config.ARGB_8888));
+                    canvas.drawBitmap(childBitmapBuffer, 0, 0, paint);
+
+                    canvas.restore();
+
+                } else if (child instanceof SurfaceView) {
+                    final SurfaceView svChild = (SurfaceView) child;
+                    final CountDownLatch latch = new CountDownLatch(1);
+
+                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
+                        final Bitmap childBitmapBuffer = Bitmap.createBitmap(child.getWidth(), child.getHeight(), Bitmap.Config.ARGB_8888);
+                        try {
+                            PixelCopy.request(svChild, childBitmapBuffer, copyResult -> {
+                                canvas.save();
+                                applyTransformations(canvas, child);
+                                canvas.drawBitmap(childBitmapBuffer, 0, 0, paint);
+                                canvas.restore();
+                                latch.countDown();
+                            }, new Handler(Looper.getMainLooper()));
+                            latch.await(SURFACE_VIEW_READ_PIXELS_TIMEOUT, TimeUnit.SECONDS);
+                        } catch (Exception e) {
+                            Log.e(TAG, "Cannot PixelCopy for " + svChild, e);
+                        }
+                    } else {
+                        Bitmap cache = svChild.getDrawingCache();
+                        if (cache != null) {
+                            canvas.save();
+                            applyTransformations(canvas, child);
+                            canvas.drawBitmap(svChild.getDrawingCache(), 0, 0, paint);
+                            canvas.restore();
+                        }
+                    }
+                } else {
+                    // Regular views needs to be rendered again to ensure correct z-index
+                    // order with texture views and surface views.
+                    renderViewToCanvas(canvas, child, paint);
+                }
+            }
+        } else {
+            // Draw ourselves
+            view.draw(canvas);
         }
 
-        return result;
+        // Restore canvas
+        canvas.restore();
     }
 
-    /**
-     * Concat all the transformation matrix's from parent to child.
-     */
     @NonNull
-    @SuppressWarnings("UnusedReturnValue")
-    private static Matrix applyTransformations(final Canvas c, @NonNull final View root, @NonNull final View child) {
-        final Matrix transform = new Matrix();
-        final LinkedList<View> ms = new LinkedList<>();
-
-        // find all parents of the child view
-        View iterator = child;
-        do {
-            ms.add(iterator);
-
-            iterator = (View) iterator.getParent();
-        } while (iterator != root);
-
-        // apply transformations from parent --> child order
-        Collections.reverse(ms);
-
-        for (final View v : ms) {
-            c.save();
-
-            // apply each view transformations, so each child will be affected by them
-            final float dx = v.getLeft() + ((v != child) ? v.getPaddingLeft() : 0) + v.getTranslationX();
-            final float dy = v.getTop() + ((v != child) ? v.getPaddingTop() : 0) + v.getTranslationY();
-            c.translate(dx, dy);
-            c.rotate(v.getRotation(), v.getPivotX(), v.getPivotY());
-            c.scale(v.getScaleX(), v.getScaleY());
-
-            // compute the matrix just for any future use
-            transform.postTranslate(dx, dy);
-            transform.postRotate(v.getRotation(), v.getPivotX(), v.getPivotY());
-            transform.postScale(v.getScaleX(), v.getScaleY());
-        }
-
-        return transform;
+    private static void applyTransformations(final Canvas c, @NonNull final View view) {
+        // Get the transformation matrix of the view
+        final Matrix matrix = view.getMatrix();
+
+        // Create a new matrix for translation
+        final Matrix translateMatrix = new Matrix();
+        final float dx = view.getLeft() + view.getPaddingLeft() + view.getTranslationX();
+        final float dy = view.getTop() + view.getPaddingTop() + view.getTranslationY();
+        translateMatrix.setTranslate(dx, dy);
+
+        // Pre-concatenate the current matrix of the canvas with the translation and transformation matrices of the view
+        c.concat(translateMatrix);
+        c.concat(matrix);
     }
-
 }

package/cpp/rnskia/RNSkDomView.cpp

@@ -36,15 +36,16 @@ bool RNSkDomRenderer::tryRender(
 
   // We render on the main thread
   if (_renderLock->try_lock()) {
+    bool result = false;
     // If we have a Dom Node we can render directly on the main thread
     if (_root != nullptr) {
-      canvasProvider->renderToCanvas(std::bind(
+      result = canvasProvider->renderToCanvas(std::bind(
           &RNSkDomRenderer::renderCanvas, this, std::placeholders::_1,
           canvasProvider->getScaledWidth(), canvasProvider->getScaledHeight()));
     }
 
     _renderLock->unlock();
-    return true;
+    return result;
   } else {
     return false;
   }

package/cpp/rnskia/RNSkPictureView.h

@@ -44,8 +44,7 @@ public:
       : RNSkRenderer(requestRedraw), _platformContext(context) {}
 
   bool tryRender(std::shared_ptr<RNSkCanvasProvider> canvasProvider) override {
-    performDraw(canvasProvider);
-    return true;
+    return performDraw(canvasProvider);
   }
 
   void
@@ -64,11 +63,7 @@ public:
   }
 
 private:
-  void performDraw(std::shared_ptr<RNSkCanvasProvider> canvasProvider) {
-    if (_picture == nullptr) {
-      return;
-    }
-
+  bool performDraw(std::shared_ptr<RNSkCanvasProvider> canvasProvider) {
     canvasProvider->renderToCanvas([=](SkCanvas *canvas) {
       // Make sure to scale correctly
       auto pd = _platformContext->getPixelDensity();
@@ -76,10 +71,13 @@ private:
       canvas->save();
       canvas->scale(pd, pd);
 
-      canvas->drawPicture(_picture->getObject());
+      if (_picture != nullptr) {
+        canvas->drawPicture(_picture->getObject());
+      }
 
       canvas->restore();
     });
+    return true;
   }
 
   std::shared_ptr<RNSkPlatformContext> _platformContext;

package/cpp/rnskia/RNSkView.h

@@ -44,7 +44,7 @@ public:
   /**
    Render to a canvas
    */
-  virtual void renderToCanvas(const std::function<void(SkCanvas *)> &) = 0;
+  virtual bool renderToCanvas(const std::function<void(SkCanvas *)> &) = 0;
 
 protected:
   std::function<void()> _requestRedraw;
@@ -123,8 +123,9 @@ public:
   /**
    Render to a canvas
    */
-  void renderToCanvas(const std::function<void(SkCanvas *)> &cb) override {
+  bool renderToCanvas(const std::function<void(SkCanvas *)> &cb) override {
     cb(_surface->getCanvas());
+    return true;
   };
 
 private:
@@ -224,6 +225,15 @@ public:
    */
   void requestRedraw() { _redrawRequestCounter++; }
 
+  /**
+   Renders immediate. Be carefull to not call this method from another thread
+   than the UI thread
+   */
+  void renderImmediate() {
+    _renderer->renderImmediate(_canvasProvider);
+    _redrawRequestCounter = 0;
+  }
+
   /**
    Sets the native id of the view
    */
@@ -409,6 +419,7 @@ private:
 
   size_t _drawingLoopId = 0;
   std::atomic<int> _redrawRequestCounter = {1};
+  bool _initialDrawingDone = false;
 };
 
 } // namespace RNSkia

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

@@ -30,7 +30,9 @@ protected:
 #endif
     // Save paint if the paint property is set
     if (_paintProp->isSet()) {
-      draw(_paintProp->getUnsafeDerivedValue().get());
+      auto localCtx = _paintProp->getUnsafeDerivedValue().get();
+      localCtx->setCanvas(context->getCanvas());
+      draw(localCtx);
     } else {
       // Call abstract draw method
       draw(context);

package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.h

@@ -24,7 +24,7 @@ public:
   float getScaledWidth() override;
   float getScaledHeight() override;
 
-  void renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
+  bool renderToCanvas(const std::function<void(SkCanvas *)> &cb) override;
 
   void setSize(int width, int height);
 

package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.mm

@@ -63,10 +63,10 @@ float RNSkMetalCanvasProvider::getScaledHeight() {
 /**
  Render to a canvas
  */
-void RNSkMetalCanvasProvider::renderToCanvas(
+bool RNSkMetalCanvasProvider::renderToCanvas(
     const std::function<void(SkCanvas *)> &cb) {
   if (_width <= 0 || _height <= 0) {
-    return;
+    return false;
   }
 
   // Make sure to NOT render or try any render operations while we're in the
@@ -77,13 +77,12 @@ void RNSkMetalCanvasProvider::renderToCanvas(
   // accessed from the main thread so we need to check here.
   if ([[NSThread currentThread] isMainThread]) {
     auto state = UIApplication.sharedApplication.applicationState;
-    if (state == UIApplicationStateBackground ||
-        state == UIApplicationStateInactive) {
+    if (state == UIApplicationStateBackground) {
       // Request a redraw in the next run loop callback
       _requestRedraw();
       // and don't draw now since it might cause errors in the metal renderer if
       // we try to render while in the background. (see above issue)
-      return;
+      return false;
     }
   }
 
@@ -114,7 +113,7 @@ void RNSkMetalCanvasProvider::renderToCanvas(
      */
     id<CAMetalDrawable> currentDrawable = [_layer nextDrawable];
     if (currentDrawable == nullptr) {
-      return;
+      return false;
     }
 
     GrMtlTextureInfo fbInfo;
@@ -130,7 +129,7 @@ void RNSkMetalCanvasProvider::renderToCanvas(
     if (skSurface == nullptr || skSurface->getCanvas() == nullptr) {
       RNSkia::RNSkLogger::logToConsole(
           "Skia surface could not be created from parameters.");
-      return;
+      return false;
     }
 
     SkCanvas *canvas = skSurface->getCanvas();
@@ -143,6 +142,8 @@ void RNSkMetalCanvasProvider::renderToCanvas(
     [commandBuffer presentDrawable:currentDrawable];
     [commandBuffer commit];
   }
+
+  return true;
 };
 
 void RNSkMetalCanvasProvider::setSize(int width, int height) {

package/ios/RNSkia-iOS/SkiaUIView.mm

@@ -93,6 +93,16 @@
   assert(_impl == nullptr);
 }
 
+#pragma Render
+
+- (void)drawRect:(CGRect)rect {
+  // We override drawRect to ensure we to direct rendering when the
+  // underlying OS view needs to render:
+  if (_impl != nullptr) {
+    _impl->getDrawView()->renderImmediate();
+  }
+}
+
 #pragma mark Layout
 
 - (void)layoutSubviews {

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.193",
+  "version": "0.1.195",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [