@shopify/react-native-skia 0.1.115

package/android/cpp/jni/include/SkiaOpenGLRenderer.h

@@ -0,0 +1,159 @@
+#pragma once
+
+#include <RNSkLog.h>
+
+#include "android/native_window.h"
+#include "EGL/egl.h"
+#include "GLES2/gl2.h"
+
+#include <condition_variable>
+#include <mutex>
+#include <thread>
+#include <unordered_map>
+
+#pragma clang diagnostic push
+#pragma clang diagnostic ignored "-Wdocumentation"
+
+#include "include/gpu/GrDirectContext.h"
+#include "include/gpu/gl/GrGLInterface.h"
+#include <SkCanvas.h>
+#include <SkSurface.h>
+#include <SkPicture.h>
+
+#pragma clang diagnostic pop
+
+
+namespace RNSkia
+{
+    using DrawingContext = struct
+    {
+        EGLContext glContext;
+        EGLDisplay glDisplay;
+        EGLConfig glConfig;
+        sk_sp<GrDirectContext> skContext;
+    };
+
+    static std::unordered_map<std::thread::id, std::shared_ptr<DrawingContext>> threadContexts;
+
+    enum RenderState : int {
+        Initializing,
+        Rendering,
+        Finishing,
+        Done,
+    };
+
+    class SkiaOpenGLRenderer
+    {
+    public:
+        SkiaOpenGLRenderer(ANativeWindow *nativeWindow, size_t renderId) :
+            _nativeWindow(nativeWindow),
+            _renderId(renderId) { }
+
+        /**
+         * Initializes, renders and tears down the render pipeline depending on the state of the
+         * 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 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);
+
+        /**
+         * Sets the state to finishing. Next time the renderer will be called it
+         * will tear down and release its resources. It is important that this
+         * is done on the same thread as the other OpenGL context stuff is handled.
+         *
+         * Teardown can be called fom whatever thread we want - but we must ensure that
+         * at least one call to render on the render thread is done after calling
+         * teardown.
+         */
+        void teardown();
+
+        /**
+         * Wait for teardown to finish. This means that we'll wait until the next
+         * render which will handle releasing all OpenGL and Skia resources used for
+         * this renderer. After tearing down the render will do nothing if the render
+         * method is called again.
+         */
+        void waitForTeardown();
+
+    private:
+        /**
+         * Initializes all required OpenGL and Skia objects
+         * @return True if initialization went well.
+         */
+        bool ensureInitialised();
+
+        /**
+         * Initializes the static OpenGL context that is shared between
+         * all instances of the renderer.
+         * @return True if initialization went well
+         */
+        bool initStaticGLContext();
+
+        /**
+         * Initializes the static Skia context that is shared between
+         * all instances of the renderer
+         * @return True if initialization went well
+         */
+        bool initStaticSkiaContext();
+
+        /**
+         * Inititalizes the OpenGL surface from the native view pointer we
+         * got on initialization. Each renderer has its own OpenGL surface to
+         * render on.
+         * @return True if initialization went well
+         */
+        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);
+
+        /**
+         * Finalizes and releases all resources used by this renderer
+         */
+        void finish();
+
+        /**
+         * Destroys the underlying OpenGL surface used for this renderer
+         */
+        void finishGL();
+
+        /**
+         * Destroys the underlying Skia surface used for this renderer
+         */
+        void finishSkiaSurface();
+
+        /**
+         * 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.
+         * @return The drawing context for the current thread
+         */
+        static std::shared_ptr<DrawingContext> getThreadDrawingContext();
+
+        EGLSurface _glSurface = EGL_NO_SURFACE;
+
+        ANativeWindow *_nativeWindow = nullptr;
+        GrBackendRenderTarget _skRenderTarget;
+        sk_sp<SkSurface> _skSurface;
+
+        int _prevWidth = 0;
+        int _prevHeight = 0;
+
+        size_t _renderId;
+
+        std::mutex _lock;
+        std::condition_variable _cv;
+
+        std::atomic<RenderState> _renderState = { RenderState::Initializing };
+    };
+
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,6 @@
+<!-- AndroidManifest.xml -->
+
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.shopify.reactnative.skia">
+
+</manifest>

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

@@ -0,0 +1,181 @@
+package com.shopify.reactnative.skia;
+
+import android.app.Application;
+import android.os.Handler;
+import android.os.Looper;
+import android.util.Log;
+import android.view.Choreographer;
+
+import com.facebook.jni.HybridData;
+import com.facebook.proguard.annotations.DoNotStrip;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.turbomodule.core.CallInvokerHolderImpl;
+
+import java.io.BufferedInputStream;
+import java.io.ByteArrayOutputStream;
+import java.io.IOException;
+import java.io.InputStream;
+import java.net.MalformedURLException;
+import java.net.URI;
+import java.net.URISyntaxException;
+import java.net.URL;
+import java.net.URLConnection;
+import java.util.concurrent.ExecutorService;
+import java.util.concurrent.Executors;
+
+public class PlatformContext {
+    @DoNotStrip
+    private final HybridData mHybridData;
+    private final ReactContext mContext;
+    private ExecutorService mDrawCallbackThread = Executors.newSingleThreadExecutor();
+
+    private boolean _drawLoopActive = false;
+    private boolean _isPaused = false;
+
+    private final String TAG = "PlatformContext";
+
+    public PlatformContext(ReactContext reactContext) {
+        mContext = reactContext;
+        mHybridData = initHybrid(reactContext.getResources().getDisplayMetrics().density);
+
+    }
+
+    private byte[] getStreamAsBytes(InputStream is) throws IOException {
+        ByteArrayOutputStream buffer = new ByteArrayOutputStream();
+        int nRead;
+        byte[] data = new byte[4 * 0x400];
+        while ((nRead = is.read(data, 0, data.length)) != -1) {
+            buffer.write(data, 0, nRead);
+        }
+        return buffer.toByteArray();
+    }
+
+    private void postFrameLoop() {
+        Choreographer.FrameCallback frameCallback = new Choreographer.FrameCallback() {
+            @Override
+            public void doFrame(long frameTimeNanos) {
+                if(_isPaused) {
+                    return;
+                }
+                notifyDrawLoop();
+                if (_drawLoopActive) {
+                    postFrameLoop();
+                }
+            }
+        };
+        Choreographer.getInstance().postFrameCallback(frameCallback);
+    }
+
+    public void raise(String message) {
+        new Handler(Looper.getMainLooper()).post(new Runnable() {
+            @Override
+            public void run() {
+                mContext.handleException(new Exception(message));
+            }
+        });
+    }
+
+    public void beginDrawLoop() {
+        if (_drawLoopActive) {
+            return;
+        }
+        _drawLoopActive = true;
+        new Handler(Looper.getMainLooper()).post(new Runnable() {
+            @Override
+            public void run() {
+                postFrameLoop();
+            }
+        });
+    }
+
+    public void endDrawLoop() {
+        if (_drawLoopActive) {
+            _drawLoopActive = false;
+        }
+    }
+
+    public void triggerOnRenderThread() {
+        mDrawCallbackThread.execute(new Runnable() {
+            @Override
+            public void run() {
+                notifyTaskReady();
+            }
+        });
+    }
+
+    public byte[] getJniStreamFromSource(String sourceUri) throws IOException {
+        // First try loading the input as a resource directly
+        int resourceId = mContext.getResources().getIdentifier(sourceUri, "drawable", mContext.getPackageName());
+
+        // Test to see if we have a raw resource (for SVG)
+        if (resourceId == 0) {
+            resourceId = mContext.getResources().getIdentifier(sourceUri, "raw", mContext.getPackageName());
+        }
+
+        if (resourceId != 0) {
+            // We can just return the input stream directly
+            return getStreamAsBytes(mContext.getResources().openRawResource(resourceId));
+        }
+
+        // We should try to open a connection and return a stream to download this
+        // object
+        URI uri = null;
+        try {
+            uri = new URI(sourceUri);
+
+            String scheme = uri.getScheme();
+
+            if (scheme == null)
+                throw new Exception("Invalid URI scheme");
+
+            // TODO: Base64??
+
+            URL url = uri.toURL();
+            URLConnection connection = url.openConnection();
+            connection.connect();
+
+            BufferedInputStream b = new BufferedInputStream(url.openStream(), 8192);
+            return getStreamAsBytes(b);
+
+        } catch (URISyntaxException e) {
+            e.printStackTrace();
+        } catch (MalformedURLException e) {
+            e.printStackTrace();
+        } catch (IOException e) {
+            e.printStackTrace();
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+        return null;
+    }
+
+    void onPause() {
+        Log.i(TAG, "Paused");
+        _isPaused = true;
+    }
+
+    void onResume() {
+        _isPaused = false;
+        Log.i(TAG, "Resume");
+        if(_drawLoopActive) {
+            // Restart draw loop
+            new Handler(Looper.getMainLooper()).post(new Runnable() {
+                @Override
+                public void run() {
+                    postFrameLoop();
+                }
+            });
+        }
+    }
+
+    @Override
+    protected void finalize() throws Throwable {
+        mHybridData.resetNative();
+        super.finalize();
+    }
+
+    // Private c++ native methods
+    private native HybridData initHybrid(float pixelDensity);
+    private native void notifyDrawLoop();
+    private native void notifyTaskReady();
+}

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

@@ -0,0 +1,88 @@
+// RnskiaModule.java
+
+package com.shopify.reactnative.skia;
+
+import android.util.Log;
+
+import com.facebook.react.bridge.LifecycleEventListener;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.module.annotations.ReactModule;
+
+import java.lang.ref.WeakReference;
+
+@ReactModule(name="RNSkia")
+public class RNSkiaModule extends ReactContextBaseJavaModule implements LifecycleEventListener {
+    public static final String NAME = "RNSkia";
+
+    private final WeakReference<ReactApplicationContext> weakReactContext;
+    private SkiaManager skiaManager;
+
+    public RNSkiaModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+        this.weakReactContext = new WeakReference<>(reactContext);
+        reactContext.addLifecycleEventListener(this);
+    }
+
+    @Override
+    public void invalidate() {
+        super.invalidate();
+
+        if (getReactApplicationContext() != null) {
+            getReactApplicationContext().removeLifecycleEventListener(this);
+        }
+
+        if (this.skiaManager != null) {
+            this.skiaManager.invalidate();
+            this.skiaManager.destroy();
+            this.skiaManager = null;
+        }
+    }
+
+    @Override
+    public String getName() {
+        return NAME;
+    }
+
+    public SkiaManager getSkiaManager() {
+        return skiaManager;
+    }
+
+    @ReactMethod(isBlockingSynchronousMethod = true)
+    public boolean install() {
+        if (skiaManager != null) {
+            // Already initialized, ignore call.
+            return true;
+        }
+
+        try {
+            System.loadLibrary("reactskia");
+            ReactApplicationContext context = weakReactContext.get();
+            if (context == null) {
+                Log.e(NAME, "React Application Context was null!");
+                return false;
+            }
+            skiaManager = new SkiaManager(context);
+            return true;
+        } catch (Exception exception) {
+            Log.e(NAME, "Failed to initialize Skia Manager!", exception);
+            return false;
+        }
+    }
+
+    @Override
+    public void onHostResume() {
+        if(skiaManager != null) skiaManager.onHostResume();
+    }
+
+    @Override
+    public void onHostPause() {
+        if(skiaManager != null) skiaManager.onHostPause();
+    }
+
+    @Override
+    public void onHostDestroy() {
+
+    }
+}

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

@@ -0,0 +1,24 @@
+// RnskiaPackage.java
+
+package com.shopify.reactnative.skia;
+
+import java.util.Arrays;
+import java.util.Collections;
+import java.util.List;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+public class RNSkiaPackage implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        return Arrays.<NativeModule>asList(new RNSkiaModule(reactContext));
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Arrays.<ViewManager>asList(new RNSkiaViewManager());
+    }
+}

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

@@ -0,0 +1,72 @@
+package com.shopify.reactnative.skia;
+
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.uimanager.BaseViewManager;
+import com.facebook.react.uimanager.LayoutShadowNode;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import java.util.HashMap;
+
+public class RNSkiaViewManager extends BaseViewManager<SkiaDrawView, LayoutShadowNode> {
+
+    final private HashMap<SkiaDrawView, Integer> mViewMapping = new HashMap();
+
+    @NonNull
+    @Override
+    public String getName() {
+        return "ReactNativeSkiaView";
+    }
+
+    @Override
+    public LayoutShadowNode createShadowNodeInstance() {
+        return new LayoutShadowNode();
+    }
+
+    @Override
+    public Class<? extends LayoutShadowNode> getShadowNodeClass() {
+        return LayoutShadowNode.class;
+    }
+
+    @Override
+    public void updateExtraData(SkiaDrawView root, Object extraData) {
+    }
+
+    @Override
+    public void setNativeId(@NonNull SkiaDrawView view, @Nullable String nativeId) {
+        super.setNativeId(view, nativeId);
+        int nativeIdResolved = Integer.parseInt(nativeId);
+        RNSkiaModule skiaModule = ((ReactContext)view.getContext()).getNativeModule(RNSkiaModule.class);
+        skiaModule.getSkiaManager().register(nativeIdResolved, view);
+        mViewMapping.put(view, nativeIdResolved);
+    }
+
+    @ReactProp(name = "mode")
+    public void setMode(SkiaDrawView view, String mode) {
+        view.setMode(mode);
+    }
+
+    @ReactProp(name = "debug")
+    public void setDebug(SkiaDrawView view, boolean show) {
+        view.setDebugMode(show);
+    }
+
+    @Override
+    public void onDropViewInstance(@NonNull SkiaDrawView view) {
+        super.onDropViewInstance(view);
+        RNSkiaModule skiaModule = ((ReactContext)view.getContext()).getNativeModule(RNSkiaModule.class);
+        Integer nativeId = mViewMapping.get(view);
+        skiaModule.getSkiaManager().unregister(nativeId);
+        mViewMapping.remove(view);
+        view.onRemoved();
+    }
+
+    @NonNull
+    @Override
+    protected SkiaDrawView createViewInstance(@NonNull ThemedReactContext reactContext) {
+        return new SkiaDrawView(reactContext);
+    }
+}

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

@@ -0,0 +1,137 @@
+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;
+
+import com.facebook.jni.HybridData;
+import com.facebook.jni.annotations.DoNotStrip;
+import com.facebook.react.bridge.ReactContext;
+
+public class SkiaDrawView extends TextureView implements TextureView.SurfaceTextureListener {
+
+    private static final String TAG = "Java::JniSkiaDrawView";
+
+    @DoNotStrip
+    private HybridData mHybridData;
+
+    private Surface mSurface;
+
+    @DoNotStrip
+    private boolean mIsRemoved = false;
+
+    public SkiaDrawView(Context ctx) {
+        super(ctx);
+        RNSkiaModule skiaModule = ((ReactContext)ctx).getNativeModule(RNSkiaModule.class);
+        mHybridData = initHybrid(skiaModule.getSkiaManager());
+        setSurfaceTextureListener(this);
+        setOpaque(false);
+    }
+
+    @Override
+    public void setBackgroundColor(int color) {
+        // Texture view does not support setting the background color.
+    }
+
+    @Override
+    protected void finalize() throws Throwable {
+        mHybridData.resetNative();
+        super.finalize();
+    }
+
+
+    public void onRemoved() {
+        // We'll mark the view removed since we reset the native part.
+        // This means that none of the native methods should be called after
+        // this point.
+        mIsRemoved = true;
+        mHybridData.resetNative();
+    }
+
+    @Override
+    public boolean onTouchEvent(MotionEvent ev) {
+        if(mIsRemoved) {
+            return false;
+        }
+        int action = ev.getAction();
+        int count = ev.getPointerCount();
+        MotionEvent.PointerCoords r = new MotionEvent.PointerCoords();
+        double[] points = new double[count*4];
+        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;
+            }
+        }
+        updateTouchPoints(points);
+        return true;
+    }
+
+    @Override
+    public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {
+        if(mIsRemoved) {
+            return;
+        }
+        mSurface = new Surface(surface);
+        surfaceAvailable(mSurface, width, height);
+    }
+
+    @Override
+    public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {
+        if(mIsRemoved) {
+            return;
+        }
+        surfaceSizeChanged(width, height);
+    }
+
+    @Override
+    public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
+        if(mIsRemoved) {
+            return true;
+        }
+        surfaceDestroyed();
+        mSurface.release();
+        mSurface = null;
+        return true;
+    }
+
+    @Override
+    public void onSurfaceTextureUpdated(SurfaceTexture surface) {
+        // Nothing special to do here
+    }
+
+    private native HybridData initHybrid(SkiaManager skiaManager);
+
+    private native void surfaceAvailable(Object surface, int width, int height);
+
+    private native void surfaceSizeChanged(int width, int height);
+
+    private native void surfaceDestroyed();
+
+    private native void setBgColor(int color);
+
+    public native void setMode(String mode);
+
+    public native void setDebugMode(boolean show);
+
+    public native void updateTouchPoints(double[] points);
+}