@shopify/react-native-skia 0.1.128 → 0.1.131

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

@@ -0,0 +1,78 @@
+/* eslint-disable camelcase */
+import type { SkData } 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: SkData) => 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: SkData, bytesPerRow: number): SkImage | null;
+}

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

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

package/src/skia/types/ImageFilter/ImageFilterFactory.ts

@@ -0,0 +1,192 @@
+import type { SkColor } from "../Color";
+import type { SkColorFilter } from "../ColorFilter/ColorFilter";
+import type { BlendMode } from "../Paint";
+import type { SkRect } from "../Rect";
+import type { SkRuntimeShaderBuilder } from "../RuntimeEffect";
+import type { SkShader } from "../Shader";
+
+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: SkShader, 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;
+  /**
+   *  Create a filter that fills the output with the per-pixel evaluation of the SkShader produced
+   *  by the SkRuntimeShaderBuilder. The shader is defined in the image filter's local coordinate
+   *  system, so it will automatically be affected by SkCanvas' transform.
+   *
+   *  @param builder         The builder used to produce the runtime shader, that will in turn
+   *                         fill the result image
+   *  @param childShaderName The name of the child shader defined in the builder that will be
+   *                         bound to the input param (or the source image if the input param
+   *                         is null).  If null the builder can have exactly one child shader,
+   *                         which automatically binds the input param.
+   *  @param input           The image filter that will be provided as input to the runtime
+   *                         shader. If null the implicit source image is used instead
+   */
+  MakeRuntimeShader: (
+    builder: SkRuntimeShaderBuilder,
+    childShaderName: string | null,
+    input: SkImageFilter | null
+  ) => SkImageFilter;
+}

package/src/skia/types/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 SkMaskFilter => obj !== null && obj.__typename__ === "MaskFilter";
+
+export type SkMaskFilter = 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): SkMaskFilter;
+}

package/src/skia/types/Matrix.ts

@@ -0,0 +1,95 @@
+import type { SkJSIInstance } from "./JsiInstance";
+export enum MatrixIndex {
+  ScaleX = 0,
+  SkewX = 1,
+  TransX = 2,
+  SkewY = 3,
+  ScaleY = 4,
+  TransY = 5,
+  Persp0 = 6,
+  Persp1 = 7,
+  persp2 = 8,
+}
+
+export interface SkMatrix extends SkJSIInstance<"Matrix"> {
+  concat: (matrix: SkMatrix) => void;
+  translate: (x: number, y: number) => void;
+  scale: (x: number, y?: number) => void;
+  skew: (x: number, y: number) => void;
+  rotate: (theta: number) => void;
+}
+
+type Transform2dName =
+  | "translateX"
+  | "translateY"
+  | "scale"
+  | "skewX"
+  | "skewY"
+  | "scaleX"
+  | "scaleY"
+  | "rotateZ"
+  | "rotate";
+
+type Transformations = {
+  readonly [Name in Transform2dName]: number;
+};
+
+export type Transforms2d = readonly (
+  | Pick<Transformations, "translateX">
+  | Pick<Transformations, "translateY">
+  | Pick<Transformations, "scale">
+  | Pick<Transformations, "scaleX">
+  | Pick<Transformations, "scaleY">
+  | Pick<Transformations, "skewX">
+  | Pick<Transformations, "skewY">
+  | Pick<Transformations, "rotate">
+)[];
+
+export interface TransformProp {
+  transform?: Transforms2d;
+}
+
+export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
+  for (const transform of transforms) {
+    const key = Object.keys(transform)[0] as Transform2dName;
+    const value = (transform as Pick<Transformations, typeof key>)[key];
+    if (key === "translateX") {
+      m.translate(value, 0);
+      continue;
+    }
+    if (key === "translateY") {
+      m.translate(0, value);
+      continue;
+    }
+    if (key === "scale") {
+      m.scale(value, value);
+      continue;
+    }
+    if (key === "scaleX") {
+      m.scale(value, 1);
+      continue;
+    }
+    if (key === "scaleY") {
+      m.scale(1, value);
+      continue;
+    }
+    if (key === "skewX") {
+      m.skew(value, 0);
+      continue;
+    }
+    if (key === "skewY") {
+      m.skew(0, value);
+      continue;
+    }
+    if (key === "rotate" || key === "rotateZ") {
+      m.rotate(value);
+      continue;
+    }
+    exhaustiveCheck(key);
+  }
+  return m;
+};
+
+const exhaustiveCheck = (a: never): never => {
+  throw new Error(`Unknown transformation: ${a}`);
+};

package/src/skia/types/Paint/Paint.ts

@@ -0,0 +1,153 @@
+import type { SkImageFilter } from "../ImageFilter";
+import type { SkMaskFilter } from "../MaskFilter";
+import type { SkColorFilter } from "../ColorFilter";
+import type { SkColor } from "../Color";
+import type { SkPathEffect } from "../PathEffect";
+import type { SkJSIInstance } from "../JsiInstance";
+import type { SkShader } from "../Shader";
+
+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: SkMaskFilter | null): void;
+
+  /**
+   * Sets the current path effect, replacing the existing one if there was one.
+   * @param effect
+   */
+  setPathEffect(effect: SkPathEffect | null): void;
+
+  /**
+   * Sets the current shader, replacing the existing one if there was one.
+   * @param shader
+   */
+  setShader(shader: SkShader | 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/types/Paint/index.ts

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