@shopify/react-native-skia 0.1.128 → 0.1.131

package/src/skia/core/RRect.tsx

@@ -0,0 +1,5 @@
+import { Skia } from "../Skia";
+import type { SkRect } from "../types";
+
+export const rrect = (r: SkRect, rx: number, ry: number) =>
+  Skia.RRectXY(r, rx, ry);

package/src/skia/core/Rect.ts

@@ -0,0 +1,33 @@
+import { Skia } from "../Skia";
+import type { SkRect, SkRRect } from "../types";
+import { isRRect } from "../types";
+
+import { vec } from "./Vector";
+
+export const rect = (x: number, y: number, width: number, height: number) =>
+  Skia.XYWHRect(x, y, width, height);
+
+export const bounds = (rects: SkRect[]) => {
+  const x = Math.min(...rects.map((r) => r.x));
+  const y = Math.min(...rects.map((r) => r.y));
+  const width = Math.max(...rects.map((r) => r.x + r.width));
+  const height = Math.max(...rects.map((r) => r.y + r.height));
+  return rect(x, y, width, height);
+};
+
+export const topLeft = (r: SkRect | SkRRect) =>
+  isRRect(r) ? vec(r.rect.x, r.rect.y) : vec(r.x, r.y);
+export const topRight = (r: SkRect | SkRRect) =>
+  isRRect(r) ? vec(r.rect.x + r.rect.width, r.rect.y) : vec(r.x + r.width, r.y);
+export const bottomLeft = (r: SkRect | SkRRect) =>
+  isRRect(r)
+    ? vec(r.rect.x, r.rect.y + r.rect.height)
+    : vec(r.x, r.y + r.height);
+export const bottomRight = (r: SkRect | SkRRect) =>
+  isRRect(r)
+    ? vec(r.rect.x + r.rect.width, r.rect.y + r.rect.height)
+    : vec(r.x + r.width, r.y + r.height);
+export const center = (r: SkRect | SkRRect) =>
+  isRRect(r)
+    ? vec(r.rect.x + r.rect.width / 2, r.rect.y + r.rect.height / 2)
+    : vec(r.x + r.width / 2, r.y + r.height / 2);

package/src/skia/core/SVG.ts

@@ -0,0 +1,9 @@
+import { Skia } from "../Skia";
+import type { DataSource } from "../types";
+
+import { useRawData } from "./Data";
+
+export const useSVG = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void
+) => useRawData(source, Skia.SVG.MakeFromData, onError);

package/src/skia/core/Typeface.ts

@@ -0,0 +1,11 @@
+import { Skia } from "../Skia";
+import type { DataSource } from "../types";
+
+import { useRawData } from "./Data";
+/**
+ * Returns a Skia Typeface object
+ * */
+export const useTypeface = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void
+) => useRawData(source, Skia.Typeface.MakeFreeTypeFaceFromData, onError);

package/src/skia/core/Vector.ts

@@ -0,0 +1,11 @@
+import { Skia } from "../Skia";
+import type { Vector } from "../types";
+
+export const vec = (x = 0, y?: number) => Skia.Point(x, y ?? x);
+export const point = vec;
+export const neg = (a: Vector) => vec(-a.x, -a.y);
+export const add = (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y);
+export const sub = (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y);
+export const dist = (a: Vector, b: Vector) => Math.hypot(a.x - b.x, a.y - b.y);
+export const translate = ({ x, y }: Vector) =>
+  [{ translateX: x }, { translateY: y }] as const;

package/src/skia/core/index.ts

@@ -0,0 +1,12 @@
+export * from "./Data";
+export * from "./Font";
+export * from "./Typeface";
+export * from "./Image";
+export * from "./Picture";
+export * from "./SVG";
+export * from "./Path";
+export * from "./Vector";
+export * from "./Rect";
+export * from "./RRect";
+export * from "./Matrix";
+export * from "./Paint";

package/src/skia/index.ts

@@ -1,24 +1,3 @@
 export { Skia } from "./Skia";
-export * from "./Canvas";
-export * from "./Paint";
-export * from "./Rect";
-export * from "./RRect";
-export * from "./Point";
-export * from "./Path";
-export * from "./Font";
-export * from "./Typeface";
-export * from "./MaskFilter";
-export * from "./ColorFilter";
-export * from "./ImageFilter";
-export * from "./PathEffect";
-export * from "./RuntimeEffect";
-export * from "./Shader";
-export * from "./Image";
-export * from "./Matrix";
-export * from "./SVG";
-export * from "./Surface";
-export * from "./FontMgr";
-export * from "./Vertices";
-export * from "./Color";
-export * from "./Picture";
-export * from "./Data";
+export * from "./core";
+export * from "./types";

package/src/skia/types/Color.ts

@@ -0,0 +1,4 @@
+// This is the JSI color
+export type SkColor = Float32Array;
+// Input colors can be string, number or Float32Array
+export type Color = string | Float32Array | number;

package/src/skia/types/ColorFilter/ColorFilterFactory.ts

@@ -0,0 +1,52 @@
+import type { SkColor } from "../Color";
+import type { BlendMode } from "../Paint";
+
+import type { SkColorFilter } from "./ColorFilter";
+
+export type InputColorMatrix = number[];
+
+export interface ColorFilterFactory {
+  /**
+   * Creates a color filter using the provided color matrix.
+   * @param cMatrix
+   */
+  MakeMatrix(cMatrix: InputColorMatrix): SkColorFilter;
+
+  /**
+   * Makes a color filter with the given color and blend mode.
+   * @param color
+   * @param mode
+   */
+  MakeBlend(color: SkColor, mode: BlendMode): SkColorFilter;
+
+  /**
+   * Makes a color filter composing two color filters.
+   * @param outer
+   * @param inner
+   */
+  MakeCompose(outer: SkColorFilter, inner: SkColorFilter): SkColorFilter;
+
+  /**
+   * Makes a color filter that is linearly interpolated between two other color filters.
+   * @param t - a float in the range of 0.0 to 1.0.
+   * @param dst
+   * @param src
+   */
+  MakeLerp(t: number, dst: SkColorFilter, src: SkColorFilter): SkColorFilter;
+
+  /**
+   * Makes a color filter that converts between linear colors and sRGB colors.
+   */
+  MakeLinearToSRGBGamma(): SkColorFilter;
+
+  /**
+   * Makes a color filter that converts between sRGB colors and linear colors.
+   */
+  MakeSRGBToLinearGamma(): SkColorFilter;
+
+  /**
+   * Makes a color filter that multiplies the luma of its input into the alpha channel,
+   * and sets the red, green, and blue channels to zero.
+   */
+  MakeLumaColorFilter(): SkColorFilter;
+}

package/src/skia/types/ContourMeasure.tsx

@@ -0,0 +1,47 @@
+import type { SkJSIInstance } from "./JsiInstance";
+import type { SkPath } from "./Path/Path";
+
+export interface PosTan {
+  px: number;
+  py: number;
+  tx: number;
+  ty: number;
+}
+
+export interface SkContourMeasure extends SkJSIInstance<"ContourMeasure"> {
+  /**
+   * Returns the given position and tangent line for the distance on the given contour.
+   * The return value is 4 floats in this order: posX, posY, vecX, vecY.
+   * @param distance - will be pinned between 0 and length().
+   */
+  getPosTan(distance: number): PosTan;
+
+  /**
+   * Returns an Path representing the segment of this contour.
+   * @param startD - will be pinned between 0 and length()
+   * @param stopD - will be pinned between 0 and length()
+   * @param startWithMoveTo
+   */
+  getSegment(startD: number, stopD: number, startWithMoveTo: boolean): SkPath;
+
+  /**
+   * Returns true if the contour is closed.
+   */
+  isClosed(): boolean;
+
+  /**
+   * Returns the length of this contour.
+   */
+  length(): number;
+}
+
+export interface SkContourMeasureIter
+  extends SkJSIInstance<"ContourMeasureIter"> {
+  /**
+   *  Iterates through contours in path, returning a contour-measure object for each contour
+   *  in the path. Returns null when it is done.
+   *
+   *  See SkContourMeasure.h for more details.
+   */
+  next(): SkContourMeasure | null;
+}

package/src/skia/types/Data/Data.ts

@@ -0,0 +1,5 @@
+import type { SkJSIInstance } from "../JsiInstance";
+
+export type SkData = SkJSIInstance<"Data">;
+
+export type DataSource = ReturnType<typeof require> | string | Uint8Array;

package/src/skia/types/Data/DataFactory.ts

@@ -0,0 +1,19 @@
+import type { SkData } from "./Data";
+
+export interface DataFactory {
+  /**
+   * Creates a new Data object from an Uri, either locally or remotely.
+   * @param uri Uri to a valid resource
+   */
+  fromURI(uri: string): Promise<SkData>;
+  /**
+   * Creates a new Data object from a byte array.
+   * @param bytes An array of bytes representing the data
+   */
+  fromBytes(bytes: Uint8Array): SkData;
+  /**
+   * Creates a new Data object from a base64 encoded string.
+   * @param base64 A Base64 encoded string representing the data
+   */
+  fromBase64(base64: string): SkData;
+}

package/src/skia/types/Font/Font.ts

@@ -0,0 +1,230 @@
+import type { SkJSIInstance } from "../JsiInstance";
+import type { SkPaint } from "../Paint";
+import type { SkRect } from "../Rect";
+import type { SkPoint } from "../Point";
+import type { SkTypeface } from "../Typeface";
+
+export interface FontMetrics {
+  ascent: number; // suggested space above the baseline. < 0
+  descent: number; // suggested space below the baseline. > 0
+  leading: number; // suggested spacing between descent of previous line and ascent of next line.
+  bounds?: SkRect; // smallest rect containing all glyphs (relative to 0,0)
+}
+
+export interface SkFont extends SkJSIInstance<"Font"> {
+  /** Returns the advance width of text.
+      The advance is the normal distance to move before drawing additional text.
+      Returns the bounding box of text if bounds is not nullptr. The paint
+      stroke settings, mask filter, or path effect may modify the bounds.
+
+      @param text        character storage encoded with SkTextEncoding
+      @param byteLength  length of character storage in bytes
+      @param bounds      returns bounding box relative to (0, 0) if not nullptr
+      @param paint       optional; may be nullptr
+      @return            number of glyphs represented by text of length byteLength
+  */
+  measureText: (text: string, paint?: SkPaint) => SkRect;
+
+  /**
+   * Returns the FontMetrics for this font.
+   */
+  getMetrics(): FontMetrics;
+
+  /**
+   * Retrieves the glyph ids for each code point in the provided string. This call is passed to
+   * the typeface of this font. Note that glyph IDs are typeface-dependent; different faces
+   * may have different ids for the same code point.
+   * @param str
+   * @param numCodePoints - the number of code points in the string. Defaults to str.length.
+   */
+  getGlyphIDs(str: string, numCodePoints?: number): number[];
+
+  /**
+   * Retrieves the advanceX measurements for each glyph.
+   * If paint is not null, its stroking, PathEffect, and MaskFilter fields are respected.
+   * One width per glyph is returned in the returned array.
+   * @param glyphs
+   * @param paint
+   * @param output - if provided, the results will be copied into this array.
+   */
+  getGlyphWidths(
+    glyphs: number[],
+    paint?: SkPaint | null,
+    output?: Float32Array
+  ): Float32Array;
+
+  /**
+   * Computes any intersections of a thick "line" and a run of positionsed glyphs.
+   * The thick line is represented as a top and bottom coordinate (positive for
+   * below the baseline, negative for above). If there are no intersections
+   * (e.g. if this is intended as an underline, and there are no "collisions")
+   * then the returned array will be empty. If there are intersections, the array
+   * will contain pairs of X coordinates [start, end] for each segment that
+   * intersected with a glyph.
+   *
+   * @param glyphs        the glyphs to intersect with
+   * @param positions     x,y coordinates (2 per glyph) for each glyph
+   * @param top           top of the thick "line" to use for intersection testing
+   * @param bottom        bottom of the thick "line" to use for intersection testing
+   * @return              array of [start, end] x-coordinate pairs. Maybe be empty.
+   */
+  getGlyphIntercepts(
+    glyphs: number[],
+    positions: SkPoint[],
+    top: number,
+    bottom: number
+  ): number[];
+
+  /**
+   * Returns text scale on x-axis. Default value is 1.
+   */
+  getScaleX(): number;
+
+  /**
+   * Returns text size in points.
+   */
+  getSize(): number;
+
+  /**
+   * Returns text skew on x-axis. Default value is zero.
+   */
+  getSkewX(): number;
+
+  /**
+   * Returns embolden effect for this font. Default value is false.
+   */
+  isEmbolden(): boolean;
+
+  /**
+   * Returns the Typeface set for this font.
+   */
+  getTypeface(): SkTypeface | null;
+
+  /**
+   * Requests, but does not require, that edge pixels draw opaque or with partial transparency.
+   * @param edging
+   */
+  setEdging(edging: FontEdging): void;
+
+  /**
+   * Requests, but does not require, to use bitmaps in fonts instead of outlines.
+   * @param embeddedBitmaps
+   */
+  setEmbeddedBitmaps(embeddedBitmaps: boolean): void;
+
+  /**
+   * Sets level of glyph outline adjustment.
+   * @param hinting
+   */
+  setHinting(hinting: FontHinting): void;
+
+  /**
+   * Requests, but does not require, linearly scalable font and glyph metrics.
+   *
+   * For outline fonts 'true' means font and glyph metrics should ignore hinting and rounding.
+   * Note that some bitmap formats may not be able to scale linearly and will ignore this flag.
+   * @param linearMetrics
+   */
+  setLinearMetrics(linearMetrics: boolean): void;
+
+  /**
+   * Sets the text scale on the x-axis.
+   * @param sx
+   */
+  setScaleX(sx: number): void;
+
+  /**
+   * Sets the text size in points on this font.
+   * @param points
+   */
+  setSize(points: number): void;
+
+  /**
+   * Sets the text-skew on the x axis for this font.
+   * @param sx
+   */
+  setSkewX(sx: number): void;
+
+  /**
+   * Set embolden effect for this font.
+   * @param embolden
+   */
+  setEmbolden(embolden: boolean): void;
+
+  /**
+   * Requests, but does not require, that glyphs respect sub-pixel positioning.
+   * @param subpixel
+   */
+  setSubpixel(subpixel: boolean): void;
+
+  /**
+   * Sets the typeface to use with this font. null means to clear the typeface and use the
+   * default one.
+   * @param face
+   */
+  setTypeface(face: SkTypeface | null): void;
+}
+
+const fontStyle = (
+  weight: FontWeight,
+  width: FontWidth,
+  slant: FontSlant
+): FontStyle => ({ weight, width, slant });
+
+export interface FontStyle {
+  weight?: FontWeight;
+  width?: FontWidth;
+  slant?: FontSlant;
+}
+
+export enum FontWeight {
+  Invisible = 0,
+  Thin = 100,
+  ExtraLight = 200,
+  Light = 300,
+  Normal = 400,
+  Medium = 500,
+  SemiBold = 600,
+  Bold = 700,
+  ExtraBold = 800,
+  Black = 900,
+  ExtraBlack = 1000,
+}
+
+export enum FontWidth {
+  UltraCondensed = 1,
+  ExtraCondensed = 2,
+  Condensed = 3,
+  SemiCondensed = 4,
+  Normal = 5,
+  SemiExpanded = 6,
+  Expanded = 7,
+  ExtraExpanded = 8,
+  UltraExpanded = 9,
+}
+
+export enum FontSlant {
+  Upright,
+  Italic,
+  Oblique,
+}
+
+export enum FontEdging {
+  Alias,
+  AntiAlias,
+  SubpixelAntiAlias,
+}
+
+export enum FontHinting {
+  None,
+  Slight,
+  Normal,
+  Full,
+}
+
+export const FontStyle = {
+  Normal: fontStyle(FontWeight.Normal, FontWidth.Normal, FontSlant.Upright),
+  Bold: fontStyle(FontWeight.Bold, FontWidth.Normal, FontSlant.Upright),
+  Italic: fontStyle(FontWeight.Normal, FontWidth.Normal, FontSlant.Italic),
+  BoldItalic: fontStyle(FontWeight.Bold, FontWidth.Normal, FontSlant.Italic),
+};

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

@@ -0,0 +1 @@
+export * from "./Font";

package/src/skia/types/FontMgr/FontMgr.ts

@@ -0,0 +1,24 @@
+import type { SkJSIInstance } from "../JsiInstance";
+import type { FontStyle } from "../Font/Font";
+import type { SkTypeface } from "../Typeface";
+
+export interface SkFontMgr extends SkJSIInstance<"FontMgr"> {
+  /**
+   * Return the number of font families loaded in this manager. Useful for debugging.
+   */
+  countFamilies(): number;
+
+  /**
+   * Return the nth family name. Useful for debugging.
+   * @param index
+   */
+  getFamilyName(index: number): string;
+
+  /**
+   *  Find the closest matching typeface to the specified familyName and style and return a ref to it.
+   */
+  matchFamilyStyle(
+    familyName: string,
+    fontStyle?: FontStyle
+  ): SkTypeface | null;
+}

package/src/skia/types/FontMgr/FontMgrFactory.ts

@@ -0,0 +1,12 @@
+import type { SkFontMgr } from "./FontMgr";
+
+// Commented code below is the CanvasKit reference
+export interface FontMgrFactory {
+  // FromData: (...data: Data[]) => FontMgr | null;
+  RefDefault: () => SkFontMgr;
+}
+
+//const fontMgrFactory = (data: Data[]) => Skia.FontMgr.FromData(...data);
+
+// export const useFontMgr = (data: DataSource[], deps: DependencyList = []) =>
+//   useDataCollection(data, fontMgrFactory, deps);

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

@@ -0,0 +1,2 @@
+export * from "./FontMgrFactory";
+export * from "./FontMgr";

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

@@ -0,0 +1,96 @@
+import type { SkMatrix } from "../Matrix";
+import type { SkJSIInstance } from "../JsiInstance";
+import type { TileMode } from "../ImageFilter";
+import type { SkShader } from "../Shader";
+
+export enum FilterMode {
+  Linear,
+  Nearest,
+}
+
+export enum MipmapMode {
+  None,
+  Nearest,
+  Linear,
+}
+
+export enum ImageFormat {
+  PNG,
+  JPEG,
+  WEBP,
+}
+
+export interface SkImage extends SkJSIInstance<"Image"> {
+  /**
+   * Returns the possibly scaled height of the image.
+   */
+  height(): number;
+
+  /**
+   * Returns the possibly scaled width of the image.
+   */
+  width(): number;
+
+  /**
+   * Returns this image as a shader with the specified tiling. It will use cubic sampling.
+   * @param tx - tile mode in the x direction.
+   * @param ty - tile mode in the y direction.
+   * @param fm - The filter mode. (default nearest)
+   * @param mm - The mipmap mode. Note: for settings other than None, the image must have mipmaps (default none)
+   *             calculated with makeCopyWithDefaultMipmaps;
+   * @param localMatrix
+   */
+  makeShaderOptions(
+    tx: TileMode,
+    ty: TileMode,
+    fm: FilterMode,
+    mm: MipmapMode,
+    localMatrix?: SkMatrix
+  ): SkShader;
+
+  /**
+   * Returns this image as a shader with the specified tiling. It will use cubic sampling.
+   * @param tx - tile mode in the x direction.
+   * @param ty - tile mode in the y direction.
+   * @param B - See CubicResampler in SkSamplingOptions.h for more information
+   * @param C - See CubicResampler in SkSamplingOptions.h for more information
+   * @param localMatrix
+   */
+  makeShaderCubic(
+    tx: TileMode,
+    ty: TileMode,
+    B: number,
+    C: number,
+    localMatrix?: SkMatrix
+  ): SkShader;
+
+  /** Encodes Image pixels, returning result as UInt8Array. Returns existing
+     encoded data if present; otherwise, SkImage is encoded with
+     SkEncodedImageFormat::kPNG. Skia must be built with SK_ENCODE_PNG to encode
+     SkImage.
+
+    Returns nullptr if existing encoded data is missing or invalid, and
+    encoding fails.
+
+    @param fmt - PNG is the default value.
+    @param quality - a value from 0 to 100; 100 is the least lossy. May be ignored.
+
+    @return  Uint8Array with data
+  */
+  encodeToBytes(fmt?: ImageFormat, quality?: number): Uint8Array;
+
+  /** Encodes Image pixels, returning result as a base64 encoded string. Returns existing
+     encoded data if present; otherwise, SkImage is encoded with
+     SkEncodedImageFormat::kPNG. Skia must be built with SK_ENCODE_PNG to encode
+     SkImage.
+
+    Returns nullptr if existing encoded data is missing or invalid, and
+    encoding fails.
+
+    @param fmt - PNG is the default value.
+    @param quality - a value from 0 to 100; 100 is the least lossy. May be ignored.
+
+    @return  base64 encoded string of data
+  */
+  encodeToBase64(fmt?: ImageFormat, quality?: number): string;
+}