@shopify/react-native-skia 0.1.115

package/src/skia/Image/ImageFactory.ts

@@ -0,0 +1,78 @@
+/* eslint-disable camelcase */
+import type { Data } from "../Data";
+
+import type { SkImage } from "./Image";
+
+export enum AlphaType {
+  Unknown,
+  Opaque,
+  Premul,
+  Unpremul,
+}
+
+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
+  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
+
+  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
+  SRGBA_8888,
+}
+
+export interface ImageInfo {
+  alphaType: AlphaType;
+  // TODO: add support for color space
+  // colorSpace: ColorSpace;
+  colorType: ColorType;
+  height: number;
+  width: number;
+}
+
+export interface ImageFactory {
+  /**
+   * Return an Image backed by the encoded data, but attempt to defer decoding until the image
+   * is actually used/drawn. This deferral allows the system to cache the result, either on the
+   * CPU or on the GPU, depending on where the image is drawn.
+   * This decoding uses the codecs that have been compiled into CanvasKit. If the bytes are
+   * invalid (or an unrecognized codec), null will be returned. See Image.h for more details.
+   * @param data - Data object with bytes of data
+   * @returns If the encoded format is not supported, or subset is outside of the bounds of the decoded
+   *  image, nullptr is returned.
+   */
+  MakeImageFromEncoded: (encoded: Data) => SkImage | null;
+
+  /**
+   * Returns an image with the given pixel data and format.
+   * Note that we will always make a copy of the pixel data, because of inconsistencies in
+   * behavior between GPU and CPU (i.e. the pixel data will be turned into a GPU texture and
+   * not modifiable after creation).
+   *
+   * @param info
+   * @param data - bytes representing the pixel data.
+   * @param bytesPerRow
+   */
+  MakeImage(info: ImageInfo, data: Data, bytesPerRow: number): SkImage | null;
+}

package/src/skia/Image/index.ts

@@ -0,0 +1,3 @@
+export * from "./Image";
+export * from "./ImageFactory";
+export * from "./useImage";

package/src/skia/Image/useImage.ts

@@ -0,0 +1,9 @@
+import type { DataSource } from "../Data/Data";
+import { useRawData } from "../Data/Data";
+import { Skia } from "../Skia";
+
+/**
+ * Returns a Skia Image object
+ * */
+export const useImage = (source: DataSource) =>
+  useRawData(source, Skia.MakeImageFromEncoded);

package/src/skia/ImageFilter/ImageFilter.ts

@@ -0,0 +1,31 @@
+import type { SkJSIInstance } from "../JsiInstance";
+
+export enum TileMode {
+  /**
+   *  Replicate the edge color if the shader draws outside of its
+   *  original bounds.
+   */
+  Clamp,
+
+  /**
+   *  Repeat the shader's image horizontally and vertically.
+   */
+  Repeat,
+
+  /**
+   *  Repeat the shader's image horizontally and vertically, alternating
+   *  mirror images so that adjacent images always seam.
+   */
+  Mirror,
+
+  /**
+   *  Only draw within the original domain, return transparent-black everywhere else.
+   */
+  Decal,
+}
+
+export const isImageFilter = (
+  obj: SkJSIInstance<string> | null
+): obj is SkImageFilter => obj !== null && obj.__typename__ === "ImageFilter";
+
+export type SkImageFilter = SkJSIInstance<"ImageFilter">;

package/src/skia/ImageFilter/ImageFilterFactory.ts

@@ -0,0 +1,172 @@
+import type { SkColor } from "../Color";
+import type { SkColorFilter } from "../ColorFilter/ColorFilter";
+import type { IShader } from "../Shader/Shader";
+import type { SkRect } from "../Rect";
+import type { BlendMode } from "../Paint/BlendMode";
+
+import type { SkImageFilter, TileMode } from "./ImageFilter";
+
+export enum ColorChannel {
+  R,
+  G,
+  B,
+  A,
+}
+
+export interface ImageFilterFactory {
+  /**
+   * Offsets the input image
+   *
+   * @param dx - Offset along the X axis
+   * @param dy - Offset along the X axis
+   * @param input - if null, it will use the dynamic source image
+   */
+  MakeOffset(
+    dx: number,
+    dy: number,
+    input: SkImageFilter | null
+  ): SkImageFilter;
+  /**
+   * Spatially displace pixel values of the filtered image
+   *
+   * @param channelX - Color channel to be used along the X axis
+   * @param channelY - Color channel to be used along the Y axis
+   * @param scale - Scale factor to be used in the displacement
+   * @param in1 - Source image filter to use for the displacement
+   * @param input - if null, it will use the dynamic source image
+   */
+  MakeDisplacementMap(
+    channelX: ColorChannel,
+    channelY: ColorChannel,
+    scale: number,
+    in1: SkImageFilter,
+    input: SkImageFilter | null
+  ): SkImageFilter;
+  /**
+   * Transforms a shader into an impage filter
+   *
+   * @param shader - The Shader to be transformed
+   * @param input - if null, it will use the dynamic source image
+   */
+  MakeShader(shader: IShader, input: SkImageFilter | null): SkImageFilter;
+  /**
+   * Create a filter that blurs its input by the separate X and Y sigmas. The provided tile mode
+   * is used when the blur kernel goes outside the input image.
+   *
+   * @param sigmaX - The Gaussian sigma value for blurring along the X axis.
+   * @param sigmaY - The Gaussian sigma value for blurring along the Y axis.
+   * @param mode
+   * @param input - if null, it will use the dynamic source image (e.g. a saved layer)
+   */
+  MakeBlur(
+    sigmaX: number,
+    sigmaY: number,
+    mode: TileMode,
+    input: SkImageFilter | null
+  ): SkImageFilter;
+
+  /**
+   * Create a filter that applies the color filter to the input filter results.
+   * @param cf
+   * @param input - if null, it will use the dynamic source image (e.g. a saved layer)
+   */
+  MakeColorFilter(
+    cf: SkColorFilter,
+    input: SkImageFilter | null
+  ): SkImageFilter;
+
+  /**
+   * Create a filter that composes 'inner' with 'outer', such that the results of 'inner' are
+   * treated as the source bitmap passed to 'outer'.
+   * If either param is null, the other param will be returned.
+   * @param outer
+   * @param inner - if null, it will use the dynamic source image (e.g. a saved layer)
+   */
+  MakeCompose(
+    outer: SkImageFilter | null,
+    inner: SkImageFilter | null
+  ): SkImageFilter;
+
+  /**
+   * Create a filter that draws a drop shadow under the input content.
+   * This filter produces an image that includes the inputs' content.
+   * @param dx The X offset of the shadow.
+   * @param dy	The Y offset of the shadow.
+   * @param sigmaX	The blur radius for the shadow, along the X axis.
+   * @param sigmaY	The blur radius for the shadow, along the Y axis.
+   * @param color	The color of the drop shadow.
+   * @param input	The input filter, or will use the source bitmap if this is null.
+   * @param cropRect	Optional rectangle that crops the input and output.
+   */
+  MakeDropShadow: (
+    dx: number,
+    dy: number,
+    sigmaX: number,
+    sigmaY: number,
+    color: SkColor,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
+  ) => SkImageFilter;
+  /**
+   * Create a filter that renders a drop shadow, in exactly the same manner as ::DropShadow, except
+   * that the resulting image does not include the input content.
+   * This allows the shadow and input to be composed by a filter DAG in a more flexible manner.
+   * @param dx The X offset of the shadow.
+   * @param dy	The Y offset of the shadow.
+   * @param sigmaX	The blur radius for the shadow, along the X axis.
+   * @param sigmaY	The blur radius for the shadow, along the Y axis.
+   * @param color	The color of the drop shadow.
+   * @param input	The input filter, or will use the source bitmap if this is null.
+   * @param cropRect	Optional rectangle that crops the input and output.
+   */
+  MakeDropShadowOnly: (
+    dx: number,
+    dy: number,
+    sigmaX: number,
+    sigmaY: number,
+    color: SkColor,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
+  ) => SkImageFilter;
+  /**
+   *  Create a filter that erodes each input pixel's channel values to the minimum channel value
+   *  within the given radii along the x and y axes.
+   *  @param radiusX  The distance to erode along the x axis to either side of each pixel.
+   *  @param radiusY  The distance to erode along the y axis to either side of each pixel.
+   *  @param input    The image filter that is eroded, using source bitmap if this is null.
+   *  @param cropRect Optional rectangle that crops the input and output.
+   */
+  MakeErode: (
+    rx: number,
+    ry: number,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
+  ) => SkImageFilter;
+  /**
+   *  Create a filter that dilates each input pixel's channel values to the max value within the
+   *  given radii along the x and y axes.
+   *  @param radiusX  The distance to dilate along the x axis to either side of each pixel.
+   *  @param radiusY  The distance to dilate along the y axis to either side of each pixel.
+   *  @param input    The image filter that is dilated, using source bitmap if this is null.
+   *  @param cropRect Optional rectangle that crops the input and output.
+   */
+  MakeDilate: (
+    rx: number,
+    ry: number,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
+  ) => SkImageFilter;
+  /**
+   *  This filter takes an SkBlendMode and uses it to composite the two filters together.
+   *  @param mode       The blend mode that defines the compositing operation
+   *  @param background The Dst pixels used in blending, if null the source bitmap is used.
+   *  @param foreground The Src pixels used in blending, if null the source bitmap is used.
+   *  @cropRect         Optional rectangle to crop input and output.
+   */
+  MakeBlend: (
+    mode: BlendMode,
+    background: SkImageFilter,
+    foreground: SkImageFilter | null,
+    cropRect?: SkRect
+  ) => SkImageFilter;
+}

package/src/skia/ImageFilter/index.ts

@@ -0,0 +1,2 @@
+export * from "./ImageFilter";
+export * from "./ImageFilterFactory";

package/src/skia/JsiInstance.ts

@@ -0,0 +1,3 @@
+export interface SkJSIInstance<T extends string> {
+  __typename__: T;
+}

package/src/skia/MaskFilter.ts

@@ -0,0 +1,27 @@
+import type { SkJSIInstance } from "./JsiInstance";
+
+export enum BlurStyle {
+  Normal, //!< fuzzy inside and outside
+  Solid, //!< solid inside, fuzzy outside
+  Outer, //!< nothing inside, fuzzy outside
+  Inner, //!< fuzzy inside, nothing outside
+}
+
+export const isMaskFilter = (
+  obj: SkJSIInstance<string> | null
+): obj is IMaskFilter => obj !== null && obj.__typename__ === "MaskFilter";
+
+export type IMaskFilter = SkJSIInstance<"MaskFilter">;
+
+/**
+ * See SkMaskFilter.h for more details.
+ */
+export interface MaskFilterFactory {
+  /**
+   * Create a blur maskfilter
+   * @param style
+   * @param sigma - Standard deviation of the Gaussian blur to apply. Must be > 0.
+   * @param respectCTM - if true the blur's sigma is modified by the CTM.
+   */
+  MakeBlur(style: BlurStyle, sigma: number, respectCTM: boolean): IMaskFilter;
+}

package/src/skia/Matrix.ts

@@ -0,0 +1,23 @@
+export enum MatrixIndex {
+  ScaleX = 0,
+  SkewX = 1,
+  TransX = 2,
+  SkewY = 3,
+  ScaleY = 4,
+  TransY = 5,
+  Persp0 = 6,
+  Persp1 = 7,
+  persp2 = 8,
+}
+
+export interface SkMatrix {
+  0: number;
+  1: number;
+  2: number;
+  3: number;
+  4: number;
+  5: number;
+  6: number;
+  7: number;
+  8: number;
+}

package/src/skia/NativeSetup.ts

@@ -0,0 +1,18 @@
+import { NativeModules } from "react-native";
+
+if (global.SkiaApi == null) {
+  // Initialize RN Skia
+  const SkiaModule = NativeModules.RNSkia;
+  if (SkiaModule == null || typeof SkiaModule.install !== "function") {
+    throw new Error(
+      "Native RNSkia Module cannot be found! Make sure you correctly " +
+        "installed native dependencies and rebuilt your app."
+    );
+  }
+  const result = SkiaModule.install();
+  if (result !== true) {
+    throw new Error(
+      `Native Skia Module failed to correctly install JSI Bindings! Result: ${result}`
+    );
+  }
+}

package/src/skia/Paint/BlendMode.ts

@@ -0,0 +1,61 @@
+/**
+ *  Blends are operators that take in two colors (source, destination) and
+ * return a new color. Many of these operate the same on all 4 components: red,
+ * green, blue, alpha. For these, we just document what happens to one
+ * component, rather than naming each one separately.
+ *
+ *  Different SkColorTypes have different representations for color components:
+ *      8-bit: 0..255
+ *      6-bit: 0..63
+ *      5-bit: 0..31
+ *      4-bit: 0..15
+ *     floats: 0...1
+ *
+ *  The documentation is expressed as if the component values are always 0..1
+ * (floats).
+ *
+ *  For brevity, the documentation uses the following abbreviations
+ *  s  : source
+ *  d  : destination
+ *  sa : source alpha
+ *  da : destination alpha
+ *
+ *  Results are abbreviated
+ *  r  : if all 4 components are computed in the same manner
+ *  ra : result alpha component
+ *  rc : result "color": red, green, blue components
+ */
+export enum BlendMode {
+  Clear, //!< r = 0
+  Src, //!< r = s
+  Dst, //!< r = d
+  SrcOver, //!< r = s + (1-sa)*d
+  DstOver, //!< r = d + (1-da)*s
+  SrcIn, //!< r = s * da
+  DstIn, //!< r = d * sa
+  SrcOut, //!< r = s * (1-da)
+  DstOut, //!< r = d * (1-sa)
+  SrcATop, //!< r = s*da + d*(1-sa)
+  DstATop, //!< r = d*sa + s*(1-da)
+  Xor, //!< r = s*(1-da) + d*(1-sa)
+  Plus, //!< r = min(s + d, 1)
+  Modulate, //!< r = s*d
+  Screen, //!< r = s + d - s*d
+
+  Overlay, //!< multiply or screen, depending on destination
+  Darken, //!< rc = s + d - max(s*da, d*sa), ra = kSrcOver
+  Lighten, //!< rc = s + d - min(s*da, d*sa), ra = kSrcOver
+  ColorDodge, //!< brighten destination to reflect source
+  ColorBurn, //!< darken destination to reflect source
+  HardLight, //!< multiply or screen, depending on source
+  SoftLight, //!< lighten or darken, depending on source
+  Difference, //!< rc = s + d - 2*(min(s*da, d*sa)), ra = kSrcOver
+  Exclusion, //!< rc = s + d - two(s*d), ra = kSrcOver
+  Multiply, //!< r = s*(1-da) + d*(1-sa) + s*d
+
+  Hue, //!< hue of source with saturation and luminosity of destination
+  Saturation, //!< saturation of source with hue and luminosity of
+  //!< destination
+  Color, //!< hue and saturation of source with luminosity of destination
+  Luminosity, //!< luminosity of source with hue and saturation of
+}

package/src/skia/Paint/Paint.ts

@@ -0,0 +1,153 @@
+import type { SkImageFilter } from "../ImageFilter";
+import type { IMaskFilter } from "../MaskFilter";
+import type { SkColorFilter } from "../ColorFilter";
+import type { IShader } from "../Shader";
+import type { SkColor } from "../Color";
+import type { IPathEffect } from "../PathEffect";
+import type { SkJSIInstance } from "../JsiInstance";
+
+import type { BlendMode } from "./BlendMode";
+
+export enum PaintStyle {
+  Fill,
+  Stroke,
+}
+
+export enum StrokeCap {
+  Butt,
+  Round,
+  Square,
+}
+
+export enum StrokeJoin {
+  Bevel,
+  Miter,
+  Round,
+}
+
+export const isPaint = (obj: SkJSIInstance<string> | null): obj is SkPaint =>
+  obj !== null && obj.__typename__ === "Paint";
+
+export interface SkPaint extends SkJSIInstance<"Paint"> {
+  /**
+   * Returns a copy of this paint.
+   */
+  copy(): SkPaint;
+
+  /**
+   * Retrieves the alpha and RGB unpremultiplied. RGB are extended sRGB values
+   * (sRGB gamut, and encoded with the sRGB transfer function).
+   */
+  getColor(): SkColor;
+
+  /**
+   * Returns the geometry drawn at the beginning and end of strokes.
+   */
+  getStrokeCap(): StrokeCap;
+
+  /**
+   * Returns the geometry drawn at the corners of strokes.
+   */
+  getStrokeJoin(): StrokeJoin;
+
+  /**
+   *  Returns the limit at which a sharp corner is drawn beveled.
+   */
+  getStrokeMiter(): number;
+
+  /**
+   * Returns the thickness of the pen used to outline the shape.
+   */
+  getStrokeWidth(): number;
+
+  /**
+   * Replaces alpha, leaving RGBA unchanged. 0 means fully transparent, 1.0 means opaque.
+   * @param alpha
+   */
+  setAlphaf(alpha: number): void;
+
+  /**
+   * Requests, but does not require, that edge pixels draw opaque or with
+   * partial transparency.
+   * @param aa
+   */
+  setAntiAlias: (aa: boolean) => void;
+
+  /**
+   * Sets the blend mode that is, the mode used to combine source color
+   * with destination color.
+   * @param mode
+   */
+  setBlendMode: (blendMode: BlendMode) => void;
+
+  /**
+   *  Sets alpha and RGB used when stroking and filling. The color is a 32-bit
+   *  value, unpremultiplied, packing 8-bit components for alpha, red, blue,
+   *  and green.
+   *
+   *   @param color  unpremultiplied ARGB
+   *
+   *    example: https://fiddle.skia.org/c/@Paint_setColor
+   */
+  setColor(color: SkColor): void;
+
+  /**
+   * Sets the current color filter, replacing the existing one if there was one.
+   * @param filter
+   */
+  setColorFilter(filter: SkColorFilter | null): void;
+
+  /**
+   * Sets the current image filter, replacing the existing one if there was one.
+   * @param filter
+   */
+  setImageFilter(filter: SkImageFilter | null): void;
+
+  /**
+   * Sets the current mask filter, replacing the existing one if there was one.
+   * @param filter
+   */
+  setMaskFilter(filter: IMaskFilter | null): void;
+
+  /**
+   * Sets the current path effect, replacing the existing one if there was one.
+   * @param effect
+   */
+  setPathEffect(effect: IPathEffect | null): void;
+
+  /**
+   * Sets the current shader, replacing the existing one if there was one.
+   * @param shader
+   */
+  setShader(shader: IShader | null): void;
+
+  /**
+   * Sets the geometry drawn at the beginning and end of strokes.
+   * @param cap
+   */
+  setStrokeCap(cap: StrokeCap): void;
+
+  /**
+   * Sets the geometry drawn at the corners of strokes.
+   * @param join
+   */
+  setStrokeJoin(join: StrokeJoin): void;
+
+  /**
+   * Sets the limit at which a sharp corner is drawn beveled.
+   * @param limit
+   */
+  setStrokeMiter(limit: number): void;
+
+  /**
+   * Sets the thickness of the pen used to outline the shape.
+   * @param width
+   */
+  setStrokeWidth(width: number): void;
+
+  /**
+   * Sets whether the geometry is filled or stroked.
+   * @param style
+   */
+  setStyle(style: PaintStyle): void;
+}

package/src/skia/Paint/index.ts

@@ -0,0 +1,3 @@
+export * from "./Paint";
+export * from "./BlendMode";
+export * from "./usePaint";

package/src/skia/Paint/usePaint.ts

@@ -0,0 +1,23 @@
+import type { DependencyList } from "react";
+import { useMemo } from "react";
+
+import { Skia } from "../Skia";
+
+import type { SkPaint } from "./Paint";
+
+/**
+ * Returns a Skia Paint object
+ * */
+export const usePaint = (
+  initializer?: (paint: SkPaint) => void,
+  deps?: DependencyList
+) =>
+  useMemo(() => {
+    const p = Skia.Paint();
+    p.setAntiAlias(true);
+    if (initializer) {
+      initializer(p);
+    }
+    return p;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);