@shopify/react-native-skia 0.1.219 → 0.1.221

package/src/skia/types/Image/ImageFactory.ts

@@ -10,36 +10,41 @@ export enum AlphaType {
 }
 
 export enum ColorType {
-  Unknown, //!< uninitialized
-  Alpha_8, //!< pixel with alpha in 8-bit byte
-  RGB_565, //!< pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word
-  ARGB_4444, //!< pixel with 4 bits for alpha, red, green, blue; in 16-bit word
-  RGBA_8888, //!< pixel with 8 bits for red, green, blue, alpha; in 32-bit word
-  RGB_888x, //!< pixel with 8 bits each for red, green, blue; in 32-bit word
-  BGRA_8888, //!< pixel with 8 bits for blue, green, red, alpha; in 32-bit word
-  RGBA_1010102, //!< 10 bits for red, green, blue; 2 bits for alpha; in 32-bit word
-  BGRA_1010102, //!< 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word
-  RGB_101010x, //!< pixel with 10 bits each for red, green, blue; in 32-bit word
-  BGR_101010x, //!< pixel with 10 bits each for blue, green, red; in 32-bit word
-  BGR_101010x_XR, //!< pixel with 10 bits each for blue, green, red; in 32-bit word, extended range
-  Gray_8, //!< pixel with grayscale level in 8-bit byte
-  RGBA_F16Norm, //!< pixel with half floats in [0,1] for red, green, blue, alpha;
-  //   in 64-bit word
-  RGBA_F16, //!< pixel with half floats for red, green, blue, alpha;
-  //   in 64-bit word
-  RGBA_F32, //!< pixel using C float for red, green, blue, alpha; in 128-bit word
+  Unknown, // uninitialized
+  Alpha_8, // pixel with alpha in 8-bit byte
+  RGB_565, // pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word
+  ARGB_4444, // pixel with 4 bits for alpha, red, green, blue; in 16-bit word
+  RGBA_8888, // pixel with 8 bits for red, green, blue, alpha; in 32-bit word
+  RGB_888x, // pixel with 8 bits each for red, green, blue; in 32-bit word
+  BGRA_8888, // pixel with 8 bits for blue, green, red, alpha; in 32-bit word
+  RGBA_1010102, // 10 bits for red, green, blue; 2 bits for alpha; in 32-bit word
+  BGRA_1010102, // 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word
+  RGB_101010x, // pixel with 10 bits each for red, green, blue; in 32-bit word
+  BGR_101010x, // pixel with 10 bits each for blue, green, red; in 32-bit word
+  BGR_101010x_XR, // pixel with 10 bits each for blue, green, red; in 32-bit word, extended range
+  RGBA_10x6, // pixel with 10 used bits (most significant) followed by 6 unused
+  Gray_8, // pixel with grayscale level in 8-bit byte
+  RGBA_F16Norm, // pixel with half floats in [0,1] for red, green, blue, alpha; in 64-bit word
+  RGBA_F16, // pixel with half floats for red, green, blue, alpha; in 64-bit word
+  RGBA_F32, // pixel using C float for red, green, blue, alpha; in 128-bit word
 
   // The following 6 colortypes are just for reading from - not for rendering to
-  R8G8_unorm, //!< pixel with a uint8_t for red and green
+  R8G8_unorm, // pixel with a uint8_t for red and green
 
-  A16_float, //!< pixel with a half float for alpha
-  R16G16_float, //!< pixel with a half float for red and green
+  A16_float, // pixel with a half float for alpha
+  R16G16_float, // pixel with a half float for red and green
+
+  A16_unorm, // pixel with a little endian uint16_t for alpha
+  R16G16_unorm, // pixel with a little endian uint16_t for red and green
+  R16G16B16A16_unorm, // pixel with a little endian uint16_t for red, green, blue, and alpha
 
-  A16_unorm, //!< pixel with a little endian uint16_t for alpha
-  R16G16_unorm, //!< pixel with a little endian uint16_t for red and green
-  R16G16B16A16_unorm, //!< pixel with a little endian uint16_t for red, green, blue
-  //   and alpha
   SRGBA_8888,
+  R8_unorm,
+
+  // The `kN32_SkColorType` is platform dependent in the original enum,
+  // and TypeScript doesn't support conditional compilation natively.
+  // You might need to handle it differently based on your use case.
+  N32_SkColorType, // either BGRA_8888 or RGBA_8888 based on the platform
 }
 
 export interface ImageInfo {

package/src/skia/web/Host.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit, EmbindEnumEntity } from "canvaskit-wasm";
+import type { CanvasKit, EmbindEnumEntity, EmbindEnum } from "canvaskit-wasm";
 
 import type { SkJSIInstance } from "../types";
 
@@ -41,6 +41,8 @@ export abstract class HostObject<T, N extends string> extends BaseHostObject<
   }
 }
 
+export const getCkEnum = (e: EmbindEnum, v: number): EmbindEnumEntity =>
+  Object.values(e).find(({ value }) => value === v);
 export const ckEnum = (value: number): EmbindEnumEntity => ({ value });
 export const optEnum = (
   value: number | undefined

package/src/skia/web/JsiSkCanvas.ts

@@ -7,6 +7,7 @@ import type {
   MipmapMode,
   PointMode,
   SaveLayerFlag,
+  ImageInfo,
   SkCanvas,
   SkColor,
   SkFont,
@@ -24,7 +25,7 @@ import type {
   SkVertices,
 } from "../types";
 
-import { ckEnum, HostObject } from "./Host";
+import { ckEnum, getCkEnum, HostObject } from "./Host";
 import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkRRect } from "./JsiSkRRect";
@@ -374,4 +375,15 @@ export class JsiSkCanvas
   drawPicture(skp: SkPicture) {
     this.ref.drawPicture(JsiSkPicture.fromValue(skp));
   }
+
+  readPixels(srcX: number, srcY: number, imageInfo: ImageInfo) {
+    const pxInfo = {
+      width: imageInfo.width,
+      height: imageInfo.height,
+      colorSpace: this.CanvasKit.ColorSpace.SRGB,
+      alphaType: getCkEnum(this.CanvasKit.AlphaType, imageInfo.alphaType),
+      colorType: getCkEnum(this.CanvasKit.ColorType, imageInfo.colorType),
+    };
+    return this.ref.readPixels(srcX, srcY, pxInfo);
+  }
 }

package/src/skia/web/JsiSkFontMgrFactory.ts

@@ -15,8 +15,6 @@ export class JsiSkFontMgrFactory extends Host implements FontMgrFactory {
     if (!fontMgr) {
       throw new Error("Couldn't create system font manager");
     }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
     return new JsiSkFontMgr(this.CanvasKit, fontMgr);
   }
 }

package/src/skia/web/JsiSkImage.ts

@@ -1,16 +1,21 @@
-import type { CanvasKit, Image } from "canvaskit-wasm";
+import type {
+  CanvasKit,
+  ImageInfo as CKImageInfo,
+  Image,
+} from "canvaskit-wasm";
 
 import type {
-  ImageFormat,
   FilterMode,
   MipmapMode,
   SkImage,
   SkMatrix,
   SkShader,
   TileMode,
+  ImageFormat,
+  ImageInfo,
 } from "../types";
 
-import { ckEnum, HostObject } from "./Host";
+import { ckEnum, getCkEnum, HostObject } from "./Host";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkShader } from "./JsiSkShader";
 
@@ -52,6 +57,16 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     return this.ref.width();
   }
 
+  getImageInfo(): ImageInfo {
+    const info = this.ref.getImageInfo();
+    return {
+      width: info.width,
+      height: info.height,
+      colorType: info.colorType.value,
+      alphaType: info.alphaType.value,
+    };
+  }
+
   makeShaderOptions(
     tx: TileMode,
     ty: TileMode,
@@ -110,6 +125,30 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     return toBase64String(bytes);
   }
 
+  readPixels(srcX?: number, srcY?: number, imageInfo?: ImageInfo) {
+    const info = this.getImageInfo();
+    console.log({
+      alphaType: ckEnum(info.alphaType),
+      colorType: ckEnum(info.colorType),
+      realAlphaType: this.CanvasKit.AlphaType.Opaque.value,
+      realColorType: this.CanvasKit.ColorType.RGBA_8888.value,
+    });
+    const pxInfo: CKImageInfo = {
+      colorSpace: this.CanvasKit.ColorSpace.SRGB,
+      width: imageInfo?.width ?? info.width,
+      height: imageInfo?.height ?? info.height,
+      alphaType: getCkEnum(
+        this.CanvasKit.AlphaType,
+        (imageInfo ?? info).alphaType
+      ),
+      colorType: getCkEnum(
+        this.CanvasKit.ColorType,
+        (imageInfo ?? info).colorType
+      ),
+    };
+    return this.ref.readPixels(srcX ?? 0, srcY ?? 0, pxInfo);
+  }
+
   dispose = () => {
     this.ref.delete();
   };

package/src/skia/web/JsiSkTypefaceFontProvider.ts

@@ -19,13 +19,9 @@ export class JsiSkTypefaceFontProvider
     throw new NotImplementedOnRNWeb();
   }
   countFamilies() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
     return this.ref.countFamilies();
   }
   getFamilyName(index: number) {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
     return this.ref.getFamilyName(index);
   }
   registerFont(typeface: SkTypeface, familyName: string) {