@shopify/react-native-skia 0.1.173 → 0.1.175

package/android/CMakeLists.txt

@@ -5,7 +5,7 @@ set (CMAKE_VERBOSE_MAKEFILE ON)
 set (CMAKE_CXX_STANDARD 17)
 set (CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -DSK_GL -DSK_BUILD_FOR_ANDROID -DFOLLY_NO_CONFIG=1 -DFOLLY_HAVE_CLOCK_GETTIME=1 -DFOLLY_HAVE_MEMRCHR=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_MOBILE=1 -DON_ANDROID -DONANDROID")
 
-set (PACKAGE_NAME "reactskia")
+set (PACKAGE_NAME "rnskia")
 set (SKIA_LIB "skia")
 set (SKIA_SVG_LIB "svg")
 set (SKIA_SKSHAPER_LIB "skshaper")
@@ -31,7 +31,7 @@ link_directories(../libs/android/${ANDROID_ABI}/)
 
 if(${REACT_NATIVE_VERSION} LESS 66)
         file(
-                TO_CMAKE_PATH 
+                TO_CMAKE_PATH
                 "${NODE_MODULES_DIR}/react-native/ReactCommon/jsi/jsi/jsi.cpp"
                 INCLUDE_JSI_CPP
         )
@@ -59,7 +59,7 @@ add_library(
         "${PROJECT_SOURCE_DIR}/cpp/rnskia/dom/base/ConcatablePaint.cpp"
 
         "${PROJECT_SOURCE_DIR}/cpp/api/third_party/CSSColorParser.cpp"
-        
+
 )
 
 target_include_directories(
@@ -92,7 +92,7 @@ target_include_directories(
         cpp/rnskia/dom/base
         cpp/rnskia/dom/nodes
         cpp/rnskia/dom/props
-        cpp/utils  
+        cpp/utils
 
         ${libfbjni_include_DIRS}
 )
@@ -205,4 +205,4 @@ target_link_libraries(
         -lGLESv2
         -lEGL
         -landroid
-    )
+    )

package/android/build.gradle

@@ -80,6 +80,7 @@ def reactProperties = new Properties()
 file("$nodeModules/react-native/ReactAndroid/gradle.properties").withInputStream { reactProperties.load(it) }
 def FULL_RN_VERSION =  (System.getenv("REACT_NATIVE_OVERRIDE_VERSION") ?: reactProperties.getProperty("VERSION_NAME"))
 def REACT_NATIVE_VERSION = FULL_RN_VERSION.split("\\.")[1].toInteger()
+def ENABLE_PREFAB = REACT_NATIVE_VERSION > 68
 
 logger.warn("react-native-skia: RN Version: ${REACT_NATIVE_VERSION} / ${FULL_RN_VERSION}")
 logger.warn("react-native-skia: isSourceBuild: ${sourceBuild}")
@@ -87,6 +88,7 @@ logger.warn("react-native-skia: PrebuiltDir: ${prebuiltDir}")
 logger.warn("react-native-skia: buildType: ${buildType}")
 logger.warn("react-native-skia: buildDir: ${buildDir}")
 logger.warn("react-native-skia: node_modules: ${nodeModules}")
+logger.warn("react-native-skia: Enable Prefab: ${ENABLE_PREFAB}")
 
 buildscript {
     // The Android Gradle plugin is only required when opening the android folder stand-alone.
@@ -132,14 +134,10 @@ android {
 
     externalNativeBuild {
         cmake {
-            path file('CMakeLists.txt')            
+            path file('CMakeLists.txt')
         }
     }
 
-    buildFeatures {
-        prefab true
-    }
-
     packagingOptions {
         excludes = [
              "**/libc++_shared.so",
@@ -150,6 +148,18 @@ android {
         ]
     }
 
+    if (ENABLE_PREFAB) {
+        buildFeatures {
+                prefab true
+                prefabPublishing true
+        }
+        prefab {
+            rnskia {
+                headers "${project.buildDir}/headers/rnskia/"
+            }
+        }
+    }
+
     // Create new configurations that can be referred to in dependencies.
     // The Android Gradle Plugin 3.* does not allow hooking into existing
     // configurations like `implementation`.
@@ -255,6 +265,15 @@ task extractJNIFiles {
 
 extractJNIFiles.mustRunAfter extractAARHeaders
 
+if (ENABLE_PREFAB) {
+    task prepareHeaders(type: Copy) {
+        from fileTree('../cpp').filter { it.isFile() }
+        into "${project.buildDir}/headers/rnskia/"
+        includeEmptyDirs = false
+    }
+    preBuild.dependsOn(prepareHeaders)
+}
+
 def nativeBuildDependsOn(dependsOnTask, variant) {
   def buildTasks = tasks.findAll({ task ->
       !task.name.contains("Clean") && (task.name.contains("externalNative") || task.name.contains("CMake")) })
@@ -266,5 +285,5 @@ def nativeBuildDependsOn(dependsOnTask, variant) {
 
 afterEvaluate {
   nativeBuildDependsOn(extractAARHeaders, null)
-  nativeBuildDependsOn(extractJNIFiles, null)  
-}
+  nativeBuildDependsOn(extractJNIFiles, null)
+}

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

@@ -57,7 +57,7 @@ public class RNSkiaModule extends ReactContextBaseJavaModule implements Lifecycl
         }
 
         try {
-            System.loadLibrary("reactskia");
+            System.loadLibrary("rnskia");
             ReactApplicationContext context = weakReactContext.get();
             if (context == null) {
                 Log.e(NAME, "React Application Context was null!");

package/ios/RNSkia-iOS/RNSkiOSPlatformContext.mm

@@ -24,7 +24,25 @@ void RNSkiOSPlatformContext::performStreamOperation(
   auto loader = [=]() {
     NSURL *url = [[NSURL alloc]
         initWithString:[NSString stringWithUTF8String:sourceUri.c_str()]];
-    NSData *data = [NSData dataWithContentsOfURL:url];
+
+    NSData *data = nullptr;
+    auto scheme = url.scheme;
+    auto extension = url.pathExtension;
+
+    if (scheme == nullptr &&
+        (extension == nullptr || [extension isEqualToString:@""])) {
+      // If the extension and scheme is nil, we assume that we're trying to
+      // load from the embedded iOS app bundle and will try to load image
+      // and get data from the image directly. imageNamed will return the
+      // best version of the requested image:
+      auto image = [UIImage imageNamed:[url absoluteString]];
+      // We don't know the image format (png, jpg, etc) but
+      // UIImagePNGRepresentation will support all of them
+      data = UIImagePNGRepresentation(image);
+    } else {
+      // Load from metro / node
+      data = [NSData dataWithContentsOfURL:url];
+    }
 
     auto bytes = [data bytes];
     auto skData = SkData::MakeWithCopy(bytes, [data length]);

package/lib/commonjs/skia/web/JsiSkDataFactory.js

@@ -9,7 +9,6 @@ var _Host = require("./Host");
 
 var _JsiSkData = require("./JsiSkData");
 
-/*global btoa, atob*/
 class JsiSkDataFactory extends _Host.Host {
   constructor(CanvasKit) {
     super(CanvasKit);

package/lib/commonjs/skia/web/JsiSkDataFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiSkDataFactory","Host","constructor","CanvasKit","fromURI","uri","fetch","then","response","arrayBuffer","data","JsiSkData","fromBytes","bytes","fromBase64","base64","Uint8Array","from","atob","c","charCodeAt"],"sources":["JsiSkDataFactory.ts"],"sourcesContent":["/*global btoa, atob*/\nimport type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SkData } from \"../types\";\nimport type { DataFactory } from \"../types/Data/DataFactory\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkData } from \"./JsiSkData\";\n\nexport class JsiSkDataFactory extends Host implements DataFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  fromURI(uri: string) {\n    return fetch(uri)\n      .then((response) => response.arrayBuffer())\n      .then((data) => new JsiSkData(this.CanvasKit, data));\n  }\n  /**\n   * Creates a new Data object from a byte array.\n   * @param bytes An array of bytes representing the data\n   */\n  fromBytes(bytes: Uint8Array) {\n    return new JsiSkData(this.CanvasKit, bytes);\n  }\n  /**\n   * Creates a new Data object from a base64 encoded string.\n   * @param base64 A Base64 encoded string representing the data\n   */\n  fromBase64(base64: string): SkData {\n    const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));\n    return this.fromBytes(bytes);\n  }\n}\n"],"mappings":";;;;;;;AAMA;;AACA;;AAPA;AASO,MAAMA,gBAAN,SAA+BC,UAA/B,CAA2D;EAChEC,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,OAAO,CAACC,GAAD,EAAc;IACnB,OAAOC,KAAK,CAACD,GAAD,CAAL,CACJE,IADI,CACEC,QAAD,IAAcA,QAAQ,CAACC,WAAT,EADf,EAEJF,IAFI,CAEEG,IAAD,IAAU,IAAIC,oBAAJ,CAAc,KAAKR,SAAnB,EAA8BO,IAA9B,CAFX,CAAP;EAGD;EACD;AACF;AACA;AACA;;;EACEE,SAAS,CAACC,KAAD,EAAoB;IAC3B,OAAO,IAAIF,oBAAJ,CAAc,KAAKR,SAAnB,EAA8BU,KAA9B,CAAP;EACD;EACD;AACF;AACA;AACA;;;EACEC,UAAU,CAACC,MAAD,EAAyB;IACjC,MAAMF,KAAK,GAAGG,UAAU,CAACC,IAAX,CAAgBC,IAAI,CAACH,MAAD,CAApB,EAA+BI,CAAD,IAAOA,CAAC,CAACC,UAAF,CAAa,CAAb,CAArC,CAAd;IACA,OAAO,KAAKR,SAAL,CAAeC,KAAf,CAAP;EACD;;AAxB+D"}
+{"version":3,"names":["JsiSkDataFactory","Host","constructor","CanvasKit","fromURI","uri","fetch","then","response","arrayBuffer","data","JsiSkData","fromBytes","bytes","fromBase64","base64","Uint8Array","from","atob","c","charCodeAt"],"sources":["JsiSkDataFactory.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SkData } from \"../types\";\nimport type { DataFactory } from \"../types/Data/DataFactory\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkData } from \"./JsiSkData\";\n\nexport class JsiSkDataFactory extends Host implements DataFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  fromURI(uri: string) {\n    return fetch(uri)\n      .then((response) => response.arrayBuffer())\n      .then((data) => new JsiSkData(this.CanvasKit, data));\n  }\n  /**\n   * Creates a new Data object from a byte array.\n   * @param bytes An array of bytes representing the data\n   */\n  fromBytes(bytes: Uint8Array) {\n    return new JsiSkData(this.CanvasKit, bytes);\n  }\n  /**\n   * Creates a new Data object from a base64 encoded string.\n   * @param base64 A Base64 encoded string representing the data\n   */\n  fromBase64(base64: string): SkData {\n    const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));\n    return this.fromBytes(bytes);\n  }\n}\n"],"mappings":";;;;;;;AAKA;;AACA;;AAEO,MAAMA,gBAAN,SAA+BC,UAA/B,CAA2D;EAChEC,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,OAAO,CAACC,GAAD,EAAc;IACnB,OAAOC,KAAK,CAACD,GAAD,CAAL,CACJE,IADI,CACEC,QAAD,IAAcA,QAAQ,CAACC,WAAT,EADf,EAEJF,IAFI,CAEEG,IAAD,IAAU,IAAIC,oBAAJ,CAAc,KAAKR,SAAnB,EAA8BO,IAA9B,CAFX,CAAP;EAGD;EACD;AACF;AACA;AACA;;;EACEE,SAAS,CAACC,KAAD,EAAoB;IAC3B,OAAO,IAAIF,oBAAJ,CAAc,KAAKR,SAAnB,EAA8BU,KAA9B,CAAP;EACD;EACD;AACF;AACA;AACA;;;EACEC,UAAU,CAACC,MAAD,EAAyB;IACjC,MAAMF,KAAK,GAAGG,UAAU,CAACC,IAAX,CAAgBC,IAAI,CAACH,MAAD,CAApB,EAA+BI,CAAD,IAAOA,CAAC,CAACC,UAAF,CAAa,CAAb,CAArC,CAAd;IACA,OAAO,KAAKR,SAAL,CAAeC,KAAf,CAAP;EACD;;AAxB+D"}

package/lib/commonjs/skia/web/JsiSkImage.d.ts

@@ -1,6 +1,7 @@
 import type { CanvasKit, Image } from "canvaskit-wasm";
 import type { ImageFormat, FilterMode, MipmapMode, SkImage, SkMatrix, SkShader, TileMode } from "../types";
 import { HostObject } from "./Host";
+export declare const toBase64String: (bytes: Uint8Array) => string;
 export declare class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     constructor(CanvasKit: CanvasKit, ref: Image);
     height(): number;

package/lib/commonjs/skia/web/JsiSkImage.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JsiSkImage = void 0;
+exports.toBase64String = exports.JsiSkImage = void 0;
 
 var _Host = require("./Host");
 
@@ -11,7 +11,38 @@ var _JsiSkMatrix = require("./JsiSkMatrix");
 
 var _JsiSkShader = require("./JsiSkShader");
 
-/*global btoa, atob*/
+// https://github.com/google/skia/blob/1f193df9b393d50da39570dab77a0bb5d28ec8ef/modules/canvaskit/htmlcanvas/util.js
+const toBase64String = bytes => {
+  if (typeof Buffer !== "undefined") {
+    // Are we on node?
+    return Buffer.from(bytes).toString("base64");
+  } else {
+    // From https://stackoverflow.com/a/25644409
+    // because the naive solution of
+    //     btoa(String.fromCharCode.apply(null, bytes));
+    // would occasionally throw "Maximum call stack size exceeded"
+    var CHUNK_SIZE = 0x8000; //arbitrary number
+
+    var index = 0;
+    var {
+      length
+    } = bytes;
+    var result = "";
+    var slice;
+
+    while (index < length) {
+      slice = bytes.slice(index, Math.min(index + CHUNK_SIZE, length)); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+      result += String.fromCharCode.apply(null, slice);
+      index += CHUNK_SIZE;
+    }
+
+    return btoa(result);
+  }
+};
+
+exports.toBase64String = toBase64String;
+
 class JsiSkImage extends _Host.HostObject {
   constructor(CanvasKit, ref) {
     super(CanvasKit, ref, "Image");
@@ -53,7 +84,7 @@ class JsiSkImage extends _Host.HostObject {
 
   encodeToBase64(fmt, quality) {
     const bytes = this.encodeToBytes(fmt, quality);
-    return btoa(String.fromCharCode(...bytes));
+    return toBase64String(bytes);
   }
 
 }

package/lib/commonjs/skia/web/JsiSkImage.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiSkImage","HostObject","constructor","CanvasKit","ref","height","width","makeShaderOptions","tx","ty","fm","mm","localMatrix","JsiSkShader","ckEnum","JsiSkMatrix","fromValue","undefined","makeShaderCubic","B","C","encodeToBytes","fmt","quality","result","Error","encodeToBase64","bytes","btoa","String","fromCharCode"],"sources":["JsiSkImage.ts"],"sourcesContent":["/*global btoa, atob*/\nimport type { CanvasKit, Image } from \"canvaskit-wasm\";\n\nimport type {\n  ImageFormat,\n  FilterMode,\n  MipmapMode,\n  SkImage,\n  SkMatrix,\n  SkShader,\n  TileMode,\n} from \"../types\";\n\nimport { ckEnum, HostObject } from \"./Host\";\nimport { JsiSkMatrix } from \"./JsiSkMatrix\";\nimport { JsiSkShader } from \"./JsiSkShader\";\n\nexport class JsiSkImage extends HostObject<Image, \"Image\"> implements SkImage {\n  constructor(CanvasKit: CanvasKit, ref: Image) {\n    super(CanvasKit, ref, \"Image\");\n  }\n\n  height() {\n    return this.ref.height();\n  }\n\n  width() {\n    return this.ref.width();\n  }\n\n  makeShaderOptions(\n    tx: TileMode,\n    ty: TileMode,\n    fm: FilterMode,\n    mm: MipmapMode,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderOptions(\n        ckEnum(tx),\n        ckEnum(ty),\n        ckEnum(fm),\n        ckEnum(mm),\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  makeShaderCubic(\n    tx: TileMode,\n    ty: TileMode,\n    B: number,\n    C: number,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderCubic(\n        ckEnum(tx),\n        ckEnum(ty),\n        B,\n        C,\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  encodeToBytes(fmt?: ImageFormat, quality?: number) {\n    let result: Uint8Array | null;\n    if (fmt && quality) {\n      result = this.ref.encodeToBytes(ckEnum(fmt), quality);\n    } else if (fmt) {\n      result = this.ref.encodeToBytes(ckEnum(fmt));\n    } else {\n      result = this.ref.encodeToBytes();\n    }\n    if (!result) {\n      throw new Error(\"encodeToBytes failed\");\n    }\n    return result;\n  }\n\n  encodeToBase64(fmt?: ImageFormat, quality?: number) {\n    const bytes = this.encodeToBytes(fmt, quality);\n    return btoa(String.fromCharCode(...bytes));\n  }\n}\n"],"mappings":";;;;;;;AAaA;;AACA;;AACA;;AAfA;AAiBO,MAAMA,UAAN,SAAyBC,gBAAzB,CAAuE;EAC5EC,WAAW,CAACC,SAAD,EAAuBC,GAAvB,EAAmC;IAC5C,MAAMD,SAAN,EAAiBC,GAAjB,EAAsB,OAAtB;EACD;;EAEDC,MAAM,GAAG;IACP,OAAO,KAAKD,GAAL,CAASC,MAAT,EAAP;EACD;;EAEDC,KAAK,GAAG;IACN,OAAO,KAAKF,GAAL,CAASE,KAAT,EAAP;EACD;;EAEDC,iBAAiB,CACfC,EADe,EAEfC,EAFe,EAGfC,EAHe,EAIfC,EAJe,EAKfC,WALe,EAML;IACV,OAAO,IAAIC,wBAAJ,CACL,KAAKV,SADA,EAEL,KAAKC,GAAL,CAASG,iBAAT,CACE,IAAAO,YAAA,EAAON,EAAP,CADF,EAEE,IAAAM,YAAA,EAAOL,EAAP,CAFF,EAGE,IAAAK,YAAA,EAAOJ,EAAP,CAHF,EAIE,IAAAI,YAAA,EAAOH,EAAP,CAJF,EAKEC,WAAW,GAAGG,wBAAA,CAAYC,SAAZ,CAAsBJ,WAAtB,CAAH,GAAwCK,SALrD,CAFK,CAAP;EAUD;;EAEDC,eAAe,CACbV,EADa,EAEbC,EAFa,EAGbU,CAHa,EAIbC,CAJa,EAKbR,WALa,EAMH;IACV,OAAO,IAAIC,wBAAJ,CACL,KAAKV,SADA,EAEL,KAAKC,GAAL,CAASc,eAAT,CACE,IAAAJ,YAAA,EAAON,EAAP,CADF,EAEE,IAAAM,YAAA,EAAOL,EAAP,CAFF,EAGEU,CAHF,EAIEC,CAJF,EAKER,WAAW,GAAGG,wBAAA,CAAYC,SAAZ,CAAsBJ,WAAtB,CAAH,GAAwCK,SALrD,CAFK,CAAP;EAUD;;EAEDI,aAAa,CAACC,GAAD,EAAoBC,OAApB,EAAsC;IACjD,IAAIC,MAAJ;;IACA,IAAIF,GAAG,IAAIC,OAAX,EAAoB;MAClBC,MAAM,GAAG,KAAKpB,GAAL,CAASiB,aAAT,CAAuB,IAAAP,YAAA,EAAOQ,GAAP,CAAvB,EAAoCC,OAApC,CAAT;IACD,CAFD,MAEO,IAAID,GAAJ,EAAS;MACdE,MAAM,GAAG,KAAKpB,GAAL,CAASiB,aAAT,CAAuB,IAAAP,YAAA,EAAOQ,GAAP,CAAvB,CAAT;IACD,CAFM,MAEA;MACLE,MAAM,GAAG,KAAKpB,GAAL,CAASiB,aAAT,EAAT;IACD;;IACD,IAAI,CAACG,MAAL,EAAa;MACX,MAAM,IAAIC,KAAJ,CAAU,sBAAV,CAAN;IACD;;IACD,OAAOD,MAAP;EACD;;EAEDE,cAAc,CAACJ,GAAD,EAAoBC,OAApB,EAAsC;IAClD,MAAMI,KAAK,GAAG,KAAKN,aAAL,CAAmBC,GAAnB,EAAwBC,OAAxB,CAAd;IACA,OAAOK,IAAI,CAACC,MAAM,CAACC,YAAP,CAAoB,GAAGH,KAAvB,CAAD,CAAX;EACD;;AArE2E"}
+{"version":3,"names":["toBase64String","bytes","Buffer","from","toString","CHUNK_SIZE","index","length","result","slice","Math","min","String","fromCharCode","apply","btoa","JsiSkImage","HostObject","constructor","CanvasKit","ref","height","width","makeShaderOptions","tx","ty","fm","mm","localMatrix","JsiSkShader","ckEnum","JsiSkMatrix","fromValue","undefined","makeShaderCubic","B","C","encodeToBytes","fmt","quality","Error","encodeToBase64"],"sources":["JsiSkImage.ts"],"sourcesContent":["import type { CanvasKit, Image } from \"canvaskit-wasm\";\n\nimport type {\n  ImageFormat,\n  FilterMode,\n  MipmapMode,\n  SkImage,\n  SkMatrix,\n  SkShader,\n  TileMode,\n} from \"../types\";\n\nimport { ckEnum, HostObject } from \"./Host\";\nimport { JsiSkMatrix } from \"./JsiSkMatrix\";\nimport { JsiSkShader } from \"./JsiSkShader\";\n\n// https://github.com/google/skia/blob/1f193df9b393d50da39570dab77a0bb5d28ec8ef/modules/canvaskit/htmlcanvas/util.js\nexport const toBase64String = (bytes: Uint8Array) => {\n  if (typeof Buffer !== \"undefined\") {\n    // Are we on node?\n    return Buffer.from(bytes).toString(\"base64\");\n  } else {\n    // From https://stackoverflow.com/a/25644409\n    // because the naive solution of\n    //     btoa(String.fromCharCode.apply(null, bytes));\n    // would occasionally throw \"Maximum call stack size exceeded\"\n    var CHUNK_SIZE = 0x8000; //arbitrary number\n    var index = 0;\n    var { length } = bytes;\n    var result = \"\";\n    var slice;\n    while (index < length) {\n      slice = bytes.slice(index, Math.min(index + CHUNK_SIZE, length));\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      result += String.fromCharCode.apply(null, slice as any);\n      index += CHUNK_SIZE;\n    }\n    return btoa(result);\n  }\n};\n\nexport class JsiSkImage extends HostObject<Image, \"Image\"> implements SkImage {\n  constructor(CanvasKit: CanvasKit, ref: Image) {\n    super(CanvasKit, ref, \"Image\");\n  }\n\n  height() {\n    return this.ref.height();\n  }\n\n  width() {\n    return this.ref.width();\n  }\n\n  makeShaderOptions(\n    tx: TileMode,\n    ty: TileMode,\n    fm: FilterMode,\n    mm: MipmapMode,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderOptions(\n        ckEnum(tx),\n        ckEnum(ty),\n        ckEnum(fm),\n        ckEnum(mm),\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  makeShaderCubic(\n    tx: TileMode,\n    ty: TileMode,\n    B: number,\n    C: number,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderCubic(\n        ckEnum(tx),\n        ckEnum(ty),\n        B,\n        C,\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  encodeToBytes(fmt?: ImageFormat, quality?: number) {\n    let result: Uint8Array | null;\n    if (fmt && quality) {\n      result = this.ref.encodeToBytes(ckEnum(fmt), quality);\n    } else if (fmt) {\n      result = this.ref.encodeToBytes(ckEnum(fmt));\n    } else {\n      result = this.ref.encodeToBytes();\n    }\n    if (!result) {\n      throw new Error(\"encodeToBytes failed\");\n    }\n    return result;\n  }\n\n  encodeToBase64(fmt?: ImageFormat, quality?: number) {\n    const bytes = this.encodeToBytes(fmt, quality);\n    return toBase64String(bytes);\n  }\n}\n"],"mappings":"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"}

package/lib/commonjs/views/SkiaBaseWebView.js

@@ -114,9 +114,13 @@ class SkiaBaseWebView extends _react.default.Component {
 
 
   makeImageSnapshot(rect) {
-    var _this$_surface;
+    var _this$_surface, _this$_surface2;
 
-    return (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.makeImageSnapshot(rect);
+    this._canvas.clear(CanvasKit.TRANSPARENT);
+
+    this.renderInCanvas(this._canvas, []);
+    (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.ref.flush();
+    return (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.makeImageSnapshot(rect);
   }
   /**
    * Override to render
@@ -131,7 +135,7 @@ class SkiaBaseWebView extends _react.default.Component {
       this._redrawRequests = 0;
 
       if (this._canvas) {
-        var _this$_surface2;
+        var _this$_surface3;
 
         const touches = [...this._touches];
         this._touches = [];
@@ -141,7 +145,7 @@ class SkiaBaseWebView extends _react.default.Component {
         canvas.scale(pd, pd);
         this.renderInCanvas(canvas, touches);
         canvas.restore();
-        (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
+        (_this$_surface3 = this._surface) === null || _this$_surface3 === void 0 ? void 0 : _this$_surface3.ref.flush();
       }
     }
 

package/lib/commonjs/views/SkiaBaseWebView.js.map

@@ -1 +1 @@
-{"version":3,"names":["pd","PixelRatio","get","SkiaBaseWebView","React","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","touches","_touches","clear","Float32Array","of","save","scale","renderInCanvas","restore","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","TouchType","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["pd","PixelRatio","get","SkiaBaseWebView","React","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","TouchType","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!, []);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}

package/lib/module/skia/web/JsiSkDataFactory.js

@@ -1,4 +1,3 @@
-/*global btoa, atob*/
 import { Host } from "./Host";
 import { JsiSkData } from "./JsiSkData";
 export class JsiSkDataFactory extends Host {

package/lib/module/skia/web/JsiSkDataFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","JsiSkData","JsiSkDataFactory","constructor","CanvasKit","fromURI","uri","fetch","then","response","arrayBuffer","data","fromBytes","bytes","fromBase64","base64","Uint8Array","from","atob","c","charCodeAt"],"sources":["JsiSkDataFactory.ts"],"sourcesContent":["/*global btoa, atob*/\nimport type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SkData } from \"../types\";\nimport type { DataFactory } from \"../types/Data/DataFactory\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkData } from \"./JsiSkData\";\n\nexport class JsiSkDataFactory extends Host implements DataFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  fromURI(uri: string) {\n    return fetch(uri)\n      .then((response) => response.arrayBuffer())\n      .then((data) => new JsiSkData(this.CanvasKit, data));\n  }\n  /**\n   * Creates a new Data object from a byte array.\n   * @param bytes An array of bytes representing the data\n   */\n  fromBytes(bytes: Uint8Array) {\n    return new JsiSkData(this.CanvasKit, bytes);\n  }\n  /**\n   * Creates a new Data object from a base64 encoded string.\n   * @param base64 A Base64 encoded string representing the data\n   */\n  fromBase64(base64: string): SkData {\n    const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));\n    return this.fromBytes(bytes);\n  }\n}\n"],"mappings":"AAAA;AAMA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,SAAT,QAA0B,aAA1B;AAEA,OAAO,MAAMC,gBAAN,SAA+BF,IAA/B,CAA2D;EAChEG,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,OAAO,CAACC,GAAD,EAAc;IACnB,OAAOC,KAAK,CAACD,GAAD,CAAL,CACJE,IADI,CACEC,QAAD,IAAcA,QAAQ,CAACC,WAAT,EADf,EAEJF,IAFI,CAEEG,IAAD,IAAU,IAAIV,SAAJ,CAAc,KAAKG,SAAnB,EAA8BO,IAA9B,CAFX,CAAP;EAGD;EACD;AACF;AACA;AACA;;;EACEC,SAAS,CAACC,KAAD,EAAoB;IAC3B,OAAO,IAAIZ,SAAJ,CAAc,KAAKG,SAAnB,EAA8BS,KAA9B,CAAP;EACD;EACD;AACF;AACA;AACA;;;EACEC,UAAU,CAACC,MAAD,EAAyB;IACjC,MAAMF,KAAK,GAAGG,UAAU,CAACC,IAAX,CAAgBC,IAAI,CAACH,MAAD,CAApB,EAA+BI,CAAD,IAAOA,CAAC,CAACC,UAAF,CAAa,CAAb,CAArC,CAAd;IACA,OAAO,KAAKR,SAAL,CAAeC,KAAf,CAAP;EACD;;AAxB+D"}
+{"version":3,"names":["Host","JsiSkData","JsiSkDataFactory","constructor","CanvasKit","fromURI","uri","fetch","then","response","arrayBuffer","data","fromBytes","bytes","fromBase64","base64","Uint8Array","from","atob","c","charCodeAt"],"sources":["JsiSkDataFactory.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SkData } from \"../types\";\nimport type { DataFactory } from \"../types/Data/DataFactory\";\n\nimport { Host } from \"./Host\";\nimport { JsiSkData } from \"./JsiSkData\";\n\nexport class JsiSkDataFactory extends Host implements DataFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  fromURI(uri: string) {\n    return fetch(uri)\n      .then((response) => response.arrayBuffer())\n      .then((data) => new JsiSkData(this.CanvasKit, data));\n  }\n  /**\n   * Creates a new Data object from a byte array.\n   * @param bytes An array of bytes representing the data\n   */\n  fromBytes(bytes: Uint8Array) {\n    return new JsiSkData(this.CanvasKit, bytes);\n  }\n  /**\n   * Creates a new Data object from a base64 encoded string.\n   * @param base64 A Base64 encoded string representing the data\n   */\n  fromBase64(base64: string): SkData {\n    const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));\n    return this.fromBytes(bytes);\n  }\n}\n"],"mappings":"AAKA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,SAAT,QAA0B,aAA1B;AAEA,OAAO,MAAMC,gBAAN,SAA+BF,IAA/B,CAA2D;EAChEG,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,OAAO,CAACC,GAAD,EAAc;IACnB,OAAOC,KAAK,CAACD,GAAD,CAAL,CACJE,IADI,CACEC,QAAD,IAAcA,QAAQ,CAACC,WAAT,EADf,EAEJF,IAFI,CAEEG,IAAD,IAAU,IAAIV,SAAJ,CAAc,KAAKG,SAAnB,EAA8BO,IAA9B,CAFX,CAAP;EAGD;EACD;AACF;AACA;AACA;;;EACEC,SAAS,CAACC,KAAD,EAAoB;IAC3B,OAAO,IAAIZ,SAAJ,CAAc,KAAKG,SAAnB,EAA8BS,KAA9B,CAAP;EACD;EACD;AACF;AACA;AACA;;;EACEC,UAAU,CAACC,MAAD,EAAyB;IACjC,MAAMF,KAAK,GAAGG,UAAU,CAACC,IAAX,CAAgBC,IAAI,CAACH,MAAD,CAApB,EAA+BI,CAAD,IAAOA,CAAC,CAACC,UAAF,CAAa,CAAb,CAArC,CAAd;IACA,OAAO,KAAKR,SAAL,CAAeC,KAAf,CAAP;EACD;;AAxB+D"}

package/lib/module/skia/web/JsiSkImage.d.ts

@@ -1,6 +1,7 @@
 import type { CanvasKit, Image } from "canvaskit-wasm";
 import type { ImageFormat, FilterMode, MipmapMode, SkImage, SkMatrix, SkShader, TileMode } from "../types";
 import { HostObject } from "./Host";
+export declare const toBase64String: (bytes: Uint8Array) => string;
 export declare class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     constructor(CanvasKit: CanvasKit, ref: Image);
     height(): number;

package/lib/module/skia/web/JsiSkImage.js

@@ -1,7 +1,35 @@
-/*global btoa, atob*/
 import { ckEnum, HostObject } from "./Host";
 import { JsiSkMatrix } from "./JsiSkMatrix";
-import { JsiSkShader } from "./JsiSkShader";
+import { JsiSkShader } from "./JsiSkShader"; // https://github.com/google/skia/blob/1f193df9b393d50da39570dab77a0bb5d28ec8ef/modules/canvaskit/htmlcanvas/util.js
+
+export const toBase64String = bytes => {
+  if (typeof Buffer !== "undefined") {
+    // Are we on node?
+    return Buffer.from(bytes).toString("base64");
+  } else {
+    // From https://stackoverflow.com/a/25644409
+    // because the naive solution of
+    //     btoa(String.fromCharCode.apply(null, bytes));
+    // would occasionally throw "Maximum call stack size exceeded"
+    var CHUNK_SIZE = 0x8000; //arbitrary number
+
+    var index = 0;
+    var {
+      length
+    } = bytes;
+    var result = "";
+    var slice;
+
+    while (index < length) {
+      slice = bytes.slice(index, Math.min(index + CHUNK_SIZE, length)); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+      result += String.fromCharCode.apply(null, slice);
+      index += CHUNK_SIZE;
+    }
+
+    return btoa(result);
+  }
+};
 export class JsiSkImage extends HostObject {
   constructor(CanvasKit, ref) {
     super(CanvasKit, ref, "Image");
@@ -43,7 +71,7 @@ export class JsiSkImage extends HostObject {
 
   encodeToBase64(fmt, quality) {
     const bytes = this.encodeToBytes(fmt, quality);
-    return btoa(String.fromCharCode(...bytes));
+    return toBase64String(bytes);
   }
 
 }

package/lib/module/skia/web/JsiSkImage.js.map

@@ -1 +1 @@
-{"version":3,"names":["ckEnum","HostObject","JsiSkMatrix","JsiSkShader","JsiSkImage","constructor","CanvasKit","ref","height","width","makeShaderOptions","tx","ty","fm","mm","localMatrix","fromValue","undefined","makeShaderCubic","B","C","encodeToBytes","fmt","quality","result","Error","encodeToBase64","bytes","btoa","String","fromCharCode"],"sources":["JsiSkImage.ts"],"sourcesContent":["/*global btoa, atob*/\nimport type { CanvasKit, Image } from \"canvaskit-wasm\";\n\nimport type {\n  ImageFormat,\n  FilterMode,\n  MipmapMode,\n  SkImage,\n  SkMatrix,\n  SkShader,\n  TileMode,\n} from \"../types\";\n\nimport { ckEnum, HostObject } from \"./Host\";\nimport { JsiSkMatrix } from \"./JsiSkMatrix\";\nimport { JsiSkShader } from \"./JsiSkShader\";\n\nexport class JsiSkImage extends HostObject<Image, \"Image\"> implements SkImage {\n  constructor(CanvasKit: CanvasKit, ref: Image) {\n    super(CanvasKit, ref, \"Image\");\n  }\n\n  height() {\n    return this.ref.height();\n  }\n\n  width() {\n    return this.ref.width();\n  }\n\n  makeShaderOptions(\n    tx: TileMode,\n    ty: TileMode,\n    fm: FilterMode,\n    mm: MipmapMode,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderOptions(\n        ckEnum(tx),\n        ckEnum(ty),\n        ckEnum(fm),\n        ckEnum(mm),\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  makeShaderCubic(\n    tx: TileMode,\n    ty: TileMode,\n    B: number,\n    C: number,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderCubic(\n        ckEnum(tx),\n        ckEnum(ty),\n        B,\n        C,\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  encodeToBytes(fmt?: ImageFormat, quality?: number) {\n    let result: Uint8Array | null;\n    if (fmt && quality) {\n      result = this.ref.encodeToBytes(ckEnum(fmt), quality);\n    } else if (fmt) {\n      result = this.ref.encodeToBytes(ckEnum(fmt));\n    } else {\n      result = this.ref.encodeToBytes();\n    }\n    if (!result) {\n      throw new Error(\"encodeToBytes failed\");\n    }\n    return result;\n  }\n\n  encodeToBase64(fmt?: ImageFormat, quality?: number) {\n    const bytes = this.encodeToBytes(fmt, quality);\n    return btoa(String.fromCharCode(...bytes));\n  }\n}\n"],"mappings":"AAAA;AAaA,SAASA,MAAT,EAAiBC,UAAjB,QAAmC,QAAnC;AACA,SAASC,WAAT,QAA4B,eAA5B;AACA,SAASC,WAAT,QAA4B,eAA5B;AAEA,OAAO,MAAMC,UAAN,SAAyBH,UAAzB,CAAuE;EAC5EI,WAAW,CAACC,SAAD,EAAuBC,GAAvB,EAAmC;IAC5C,MAAMD,SAAN,EAAiBC,GAAjB,EAAsB,OAAtB;EACD;;EAEDC,MAAM,GAAG;IACP,OAAO,KAAKD,GAAL,CAASC,MAAT,EAAP;EACD;;EAEDC,KAAK,GAAG;IACN,OAAO,KAAKF,GAAL,CAASE,KAAT,EAAP;EACD;;EAEDC,iBAAiB,CACfC,EADe,EAEfC,EAFe,EAGfC,EAHe,EAIfC,EAJe,EAKfC,WALe,EAML;IACV,OAAO,IAAIZ,WAAJ,CACL,KAAKG,SADA,EAEL,KAAKC,GAAL,CAASG,iBAAT,CACEV,MAAM,CAACW,EAAD,CADR,EAEEX,MAAM,CAACY,EAAD,CAFR,EAGEZ,MAAM,CAACa,EAAD,CAHR,EAIEb,MAAM,CAACc,EAAD,CAJR,EAKEC,WAAW,GAAGb,WAAW,CAACc,SAAZ,CAAsBD,WAAtB,CAAH,GAAwCE,SALrD,CAFK,CAAP;EAUD;;EAEDC,eAAe,CACbP,EADa,EAEbC,EAFa,EAGbO,CAHa,EAIbC,CAJa,EAKbL,WALa,EAMH;IACV,OAAO,IAAIZ,WAAJ,CACL,KAAKG,SADA,EAEL,KAAKC,GAAL,CAASW,eAAT,CACElB,MAAM,CAACW,EAAD,CADR,EAEEX,MAAM,CAACY,EAAD,CAFR,EAGEO,CAHF,EAIEC,CAJF,EAKEL,WAAW,GAAGb,WAAW,CAACc,SAAZ,CAAsBD,WAAtB,CAAH,GAAwCE,SALrD,CAFK,CAAP;EAUD;;EAEDI,aAAa,CAACC,GAAD,EAAoBC,OAApB,EAAsC;IACjD,IAAIC,MAAJ;;IACA,IAAIF,GAAG,IAAIC,OAAX,EAAoB;MAClBC,MAAM,GAAG,KAAKjB,GAAL,CAASc,aAAT,CAAuBrB,MAAM,CAACsB,GAAD,CAA7B,EAAoCC,OAApC,CAAT;IACD,CAFD,MAEO,IAAID,GAAJ,EAAS;MACdE,MAAM,GAAG,KAAKjB,GAAL,CAASc,aAAT,CAAuBrB,MAAM,CAACsB,GAAD,CAA7B,CAAT;IACD,CAFM,MAEA;MACLE,MAAM,GAAG,KAAKjB,GAAL,CAASc,aAAT,EAAT;IACD;;IACD,IAAI,CAACG,MAAL,EAAa;MACX,MAAM,IAAIC,KAAJ,CAAU,sBAAV,CAAN;IACD;;IACD,OAAOD,MAAP;EACD;;EAEDE,cAAc,CAACJ,GAAD,EAAoBC,OAApB,EAAsC;IAClD,MAAMI,KAAK,GAAG,KAAKN,aAAL,CAAmBC,GAAnB,EAAwBC,OAAxB,CAAd;IACA,OAAOK,IAAI,CAACC,MAAM,CAACC,YAAP,CAAoB,GAAGH,KAAvB,CAAD,CAAX;EACD;;AArE2E"}
+{"version":3,"names":["ckEnum","HostObject","JsiSkMatrix","JsiSkShader","toBase64String","bytes","Buffer","from","toString","CHUNK_SIZE","index","length","result","slice","Math","min","String","fromCharCode","apply","btoa","JsiSkImage","constructor","CanvasKit","ref","height","width","makeShaderOptions","tx","ty","fm","mm","localMatrix","fromValue","undefined","makeShaderCubic","B","C","encodeToBytes","fmt","quality","Error","encodeToBase64"],"sources":["JsiSkImage.ts"],"sourcesContent":["import type { CanvasKit, Image } from \"canvaskit-wasm\";\n\nimport type {\n  ImageFormat,\n  FilterMode,\n  MipmapMode,\n  SkImage,\n  SkMatrix,\n  SkShader,\n  TileMode,\n} from \"../types\";\n\nimport { ckEnum, HostObject } from \"./Host\";\nimport { JsiSkMatrix } from \"./JsiSkMatrix\";\nimport { JsiSkShader } from \"./JsiSkShader\";\n\n// https://github.com/google/skia/blob/1f193df9b393d50da39570dab77a0bb5d28ec8ef/modules/canvaskit/htmlcanvas/util.js\nexport const toBase64String = (bytes: Uint8Array) => {\n  if (typeof Buffer !== \"undefined\") {\n    // Are we on node?\n    return Buffer.from(bytes).toString(\"base64\");\n  } else {\n    // From https://stackoverflow.com/a/25644409\n    // because the naive solution of\n    //     btoa(String.fromCharCode.apply(null, bytes));\n    // would occasionally throw \"Maximum call stack size exceeded\"\n    var CHUNK_SIZE = 0x8000; //arbitrary number\n    var index = 0;\n    var { length } = bytes;\n    var result = \"\";\n    var slice;\n    while (index < length) {\n      slice = bytes.slice(index, Math.min(index + CHUNK_SIZE, length));\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      result += String.fromCharCode.apply(null, slice as any);\n      index += CHUNK_SIZE;\n    }\n    return btoa(result);\n  }\n};\n\nexport class JsiSkImage extends HostObject<Image, \"Image\"> implements SkImage {\n  constructor(CanvasKit: CanvasKit, ref: Image) {\n    super(CanvasKit, ref, \"Image\");\n  }\n\n  height() {\n    return this.ref.height();\n  }\n\n  width() {\n    return this.ref.width();\n  }\n\n  makeShaderOptions(\n    tx: TileMode,\n    ty: TileMode,\n    fm: FilterMode,\n    mm: MipmapMode,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderOptions(\n        ckEnum(tx),\n        ckEnum(ty),\n        ckEnum(fm),\n        ckEnum(mm),\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  makeShaderCubic(\n    tx: TileMode,\n    ty: TileMode,\n    B: number,\n    C: number,\n    localMatrix?: SkMatrix\n  ): SkShader {\n    return new JsiSkShader(\n      this.CanvasKit,\n      this.ref.makeShaderCubic(\n        ckEnum(tx),\n        ckEnum(ty),\n        B,\n        C,\n        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined\n      )\n    );\n  }\n\n  encodeToBytes(fmt?: ImageFormat, quality?: number) {\n    let result: Uint8Array | null;\n    if (fmt && quality) {\n      result = this.ref.encodeToBytes(ckEnum(fmt), quality);\n    } else if (fmt) {\n      result = this.ref.encodeToBytes(ckEnum(fmt));\n    } else {\n      result = this.ref.encodeToBytes();\n    }\n    if (!result) {\n      throw new Error(\"encodeToBytes failed\");\n    }\n    return result;\n  }\n\n  encodeToBase64(fmt?: ImageFormat, quality?: number) {\n    const bytes = this.encodeToBytes(fmt, quality);\n    return toBase64String(bytes);\n  }\n}\n"],"mappings":"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"}

package/lib/module/views/SkiaBaseWebView.js

@@ -103,9 +103,13 @@ export class SkiaBaseWebView extends React.Component {
 
 
   makeImageSnapshot(rect) {
-    var _this$_surface;
+    var _this$_surface, _this$_surface2;
 
-    return (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.makeImageSnapshot(rect);
+    this._canvas.clear(CanvasKit.TRANSPARENT);
+
+    this.renderInCanvas(this._canvas, []);
+    (_this$_surface = this._surface) === null || _this$_surface === void 0 ? void 0 : _this$_surface.ref.flush();
+    return (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.makeImageSnapshot(rect);
   }
   /**
    * Override to render
@@ -120,7 +124,7 @@ export class SkiaBaseWebView extends React.Component {
       this._redrawRequests = 0;
 
       if (this._canvas) {
-        var _this$_surface2;
+        var _this$_surface3;
 
         const touches = [...this._touches];
         this._touches = [];
@@ -130,7 +134,7 @@ export class SkiaBaseWebView extends React.Component {
         canvas.scale(pd, pd);
         this.renderInCanvas(canvas, touches);
         canvas.restore();
-        (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.ref.flush();
+        (_this$_surface3 = this._surface) === null || _this$_surface3 === void 0 ? void 0 : _this$_surface3.ref.flush();
       }
     }
 

package/lib/module/views/SkiaBaseWebView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaBaseWebView","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","_redrawRequests","touches","_touches","clear","Float32Array","of","save","scale","renderInCanvas","restore","ref","flush","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["React","PixelRatio","View","JsiSkSurface","TouchType","pd","get","SkiaBaseWebView","Component","constructor","props","createRef","_mode","mode","unsubscribeAll","_unsubscriptions","forEach","u","onLayout","evt","CanvasKit","global","width","height","nativeEvent","layout","_canvasRef","current","canvas","surface","MakeWebGLCanvasSurface","Error","_surface","_canvas","getCanvas","redraw","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","makeImageSnapshot","rect","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","touches","_touches","Float32Array","of","save","scale","restore","requestAnimationFrame","bind","setDrawMode","registerValues","_values","v","push","addListener","handleTouchEvent","touchType","id","pointerId","x","clientX","currentTarget","getClientRects","left","y","clientY","top","force","pressure","type","timestamp","Date","now","createTouchHandler","render","debug","viewProps","display","flex","Start","Active","End","Cancelled"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { PointerEvent } from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\nimport { PixelRatio, View } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\n\nimport type { DrawMode, SkiaBaseViewProps, TouchInfo } from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst pd = PixelRatio.get();\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n    this._mode = props.mode ?? \"default\";\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _touches: Array<TouchInfo> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _mode: DrawMode;\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayout(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    const { width, height } = evt.nativeEvent.layout;\n    this.width = width;\n    this.height = height;\n    // Reset canvas / surface on layout change\n    if (this._canvasRef.current) {\n      const canvas = this._canvasRef.current;\n      canvas.width = width * pd;\n      canvas.height = height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  protected getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!, []);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(\n    canvas: SkCanvas,\n    touches: TouchInfo[]\n  ): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._mode === \"continuous\" || this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const touches = [...this._touches];\n        this._touches = [];\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas, touches);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  /**\n   * Updates the drawing mode for the skia view. This is the same\n   * as declaratively setting the mode property on the SkiaView.\n   * There are two drawing modes, \"continuous\" and \"default\",\n   * where the continuous mode will continuously redraw the view and\n   * the default mode will only redraw when any of the regular react\n   * properties are changed like size and margins.\n   * @param mode Drawing mode to use.\n   */\n  public setDrawMode(mode: DrawMode) {\n    this._mode = mode;\n    this.tick();\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(_values: SkiaValue<unknown>[]) {\n    // Unsubscribe from dependency values\n    this.unsubscribeAll();\n    // Register redraw dependencies on values\n    _values.forEach((v) => {\n      this._unsubscriptions.push(\n        v.addListener(() => {\n          this.redraw();\n        })\n      );\n    });\n  }\n\n  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {\n    this._touches.push({\n      id: evt.pointerId,\n      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,\n      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,\n      force: evt.pressure,\n      type: touchType,\n      timestamp: Date.now(),\n    });\n    this.redraw();\n  }\n\n  createTouchHandler(touchType: TouchType) {\n    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <View {...viewProps} onLayout={this.onLayout.bind(this)}>\n        <canvas\n          ref={this._canvasRef}\n          style={{ display: \"flex\", flex: 1 }}\n          onPointerDown={this.createTouchHandler(TouchType.Start)}\n          onPointerMove={this.createTouchHandler(TouchType.Active)}\n          onPointerUp={this.createTouchHandler(TouchType.End)}\n          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}\n          onPointerLeave={this.createTouchHandler(TouchType.End)}\n          onPointerOut={this.createTouchHandler(TouchType.End)}\n        />\n      </View>\n    );\n  }\n}\n"],"mappings":"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"}

package/lib/typescript/src/skia/web/JsiSkImage.d.ts

@@ -1,6 +1,7 @@
 import type { CanvasKit, Image } from "canvaskit-wasm";
 import type { ImageFormat, FilterMode, MipmapMode, SkImage, SkMatrix, SkShader, TileMode } from "../types";
 import { HostObject } from "./Host";
+export declare const toBase64String: (bytes: Uint8Array) => string;
 export declare class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     constructor(CanvasKit: CanvasKit, ref: Image);
     height(): number;

package/package.json

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

package/src/skia/web/JsiSkDataFactory.ts

@@ -1,4 +1,3 @@
-/*global btoa, atob*/
 import type { CanvasKit } from "canvaskit-wasm";
 
 import type { SkData } from "../types";

package/src/skia/web/JsiSkImage.ts

@@ -1,4 +1,3 @@
-/*global btoa, atob*/
 import type { CanvasKit, Image } from "canvaskit-wasm";
 
 import type {
@@ -15,6 +14,31 @@ import { ckEnum, HostObject } from "./Host";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkShader } from "./JsiSkShader";
 
+// https://github.com/google/skia/blob/1f193df9b393d50da39570dab77a0bb5d28ec8ef/modules/canvaskit/htmlcanvas/util.js
+export const toBase64String = (bytes: Uint8Array) => {
+  if (typeof Buffer !== "undefined") {
+    // Are we on node?
+    return Buffer.from(bytes).toString("base64");
+  } else {
+    // From https://stackoverflow.com/a/25644409
+    // because the naive solution of
+    //     btoa(String.fromCharCode.apply(null, bytes));
+    // would occasionally throw "Maximum call stack size exceeded"
+    var CHUNK_SIZE = 0x8000; //arbitrary number
+    var index = 0;
+    var { length } = bytes;
+    var result = "";
+    var slice;
+    while (index < length) {
+      slice = bytes.slice(index, Math.min(index + CHUNK_SIZE, length));
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      result += String.fromCharCode.apply(null, slice as any);
+      index += CHUNK_SIZE;
+    }
+    return btoa(result);
+  }
+};
+
 export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
   constructor(CanvasKit: CanvasKit, ref: Image) {
     super(CanvasKit, ref, "Image");
@@ -83,6 +107,6 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
 
   encodeToBase64(fmt?: ImageFormat, quality?: number) {
     const bytes = this.encodeToBytes(fmt, quality);
-    return btoa(String.fromCharCode(...bytes));
+    return toBase64String(bytes);
   }
 }

package/src/views/SkiaBaseWebView.tsx

@@ -86,6 +86,9 @@ export abstract class SkiaBaseWebView<
    * @returns An Image object.
    */
   public makeImageSnapshot(rect?: SkRect) {
+    this._canvas!.clear(CanvasKit.TRANSPARENT);
+    this.renderInCanvas(this._canvas!, []);
+    this._surface?.ref.flush();
     return this._surface?.makeImageSnapshot(rect);
   }